/*
 * GENERATED by `cargo xtask ui-tokens` from packages/ui-system/shared (vink-ui 0.5.0).
 * Do not edit: change tokens.json, preview-catalog.json, icons.json or fixtures/ and regenerate.
 *
 * Theme: light by default; dark follows the system unless `data-theme="light|dark"` on
 * <html> chooses. A `.vk-scope` element re-themes its subtree (`data-theme` light, dark or
 * system), sets density (`data-density` comfortable|compact) and may only add reduced
 * motion (`data-motion="reduce"`); the system reduced-motion setting always applies.
 * Recipe aliases are re-declared on every scope so they resolve against the scope's roles.
 */

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/be-vietnam-pro-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/be-vietnam-pro-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  src: url("fonts/literata-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --vk-density-control-height: 48px;
  --vk-density-control-padding: 0.75rem;
  --vk-density-stack-gap: 1rem;
  --vk-duration-loading-delay: 300ms;
  --vk-duration-loading-min-visible: 500ms;
  --vk-duration-loop: 1600ms;
  --vk-duration-medium: 320ms;
  --vk-duration-pulse: 1400ms;
  --vk-duration-short: 160ms;
  --vk-duration-slow-notice: 8000ms;
  --vk-duration-snackbar: 6000ms;
  --vk-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --vk-ease-spatial: cubic-bezier(0.2, 0.8, 0.2, 1.15);
  --vk-font-code: ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --vk-font-reading: "Literata", "Noto Serif", "Source Serif 4", "Georgia", "Times New Roman", serif;
  --vk-font-ui: "Be Vietnam Pro", "Noto Sans", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;
  --vk-leading-reading: 1.85;
  --vk-loop-iterations: infinite;
  --vk-measure: 42rem;
  --vk-measure-wide: 70rem;
  --vk-radius-full: 999px;
  --vk-radius-hero: 32px;
  --vk-radius-lg: 20px;
  --vk-radius-md: 12px;
  --vk-radius-sm: 8px;
  --vk-radius-xl: 28px;
  --vk-size-avatar-feed: 32px;
  --vk-size-avatar-feed-narrow: 32px;
  --vk-size-avatar-md: 40px;
  --vk-size-avatar-reader: 44px;
  --vk-size-avatar-reader-narrow: 44px;
  --vk-size-avatar-sm: 32px;
  --vk-size-avatar-spotlight: 40px;
  --vk-size-avatar-spotlight-narrow: 38px;
  --vk-size-bottom-bar: 80px;
  --vk-size-edge-progress: 4px;
  --vk-size-focus-offset: 2px;
  --vk-size-focus-ring: 3px;
  --vk-size-grid-min-md: 15rem;
  --vk-size-grid-min-sm: 10rem;
  --vk-size-hit-target: 44px;
  --vk-size-icon: 24px;
  --vk-size-icon-sm: 20px;
  --vk-size-indicator: 20px;
  --vk-size-nav-item: 52px;
  --vk-size-rail-compact: 96px;
  --vk-size-rail-expanded: 220px;
  --vk-space-1: 0.25rem;
  --vk-space-12: 3rem;
  --vk-space-2: 0.5rem;
  --vk-space-3: 0.75rem;
  --vk-space-4: 1rem;
  --vk-space-6: 1.5rem;
  --vk-space-8: 2rem;
  --vk-text-reading: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --vk-type-body-font: var(--vk-font-ui);
  --vk-type-body-size: 1rem;
  --vk-type-body-weight: 400;
  --vk-type-body-line-height: 1.6;
  --vk-type-body-tracking: 0;
  --vk-type-caption-font: var(--vk-font-ui);
  --vk-type-caption-size: 0.8125rem;
  --vk-type-caption-weight: 400;
  --vk-type-caption-line-height: 1.4;
  --vk-type-caption-tracking: 0;
  --vk-type-code-font: var(--vk-font-code);
  --vk-type-code-size: 0.875rem;
  --vk-type-code-weight: 400;
  --vk-type-code-line-height: 1.5;
  --vk-type-code-tracking: 0;
  --vk-type-display-font: var(--vk-font-reading);
  --vk-type-display-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  --vk-type-display-weight: 600;
  --vk-type-display-line-height: 1.2;
  --vk-type-display-tracking: -0.025em;
  --vk-type-headline-font: var(--vk-font-reading);
  --vk-type-headline-size: 1.75rem;
  --vk-type-headline-weight: 600;
  --vk-type-headline-line-height: 1.3;
  --vk-type-headline-tracking: -0.015em;
  --vk-type-label-font: var(--vk-font-ui);
  --vk-type-label-size: 0.875rem;
  --vk-type-label-weight: 600;
  --vk-type-label-line-height: 1.4;
  --vk-type-label-tracking: 0;
  --vk-type-reading-font: var(--vk-font-reading);
  --vk-type-reading-size: var(--vk-text-reading);
  --vk-type-reading-weight: 400;
  --vk-type-reading-line-height: var(--vk-leading-reading);
  --vk-type-reading-tracking: 0;
  --vk-type-title-font: var(--vk-font-reading);
  --vk-type-title-size: 1.375rem;
  --vk-type-title-weight: 600;
  --vk-type-title-line-height: 1.3;
  --vk-type-title-tracking: 0;
  --vk-avatar-1: #ebddff;
  --vk-avatar-2: #eadcf3;
  --vk-avatar-3: #ffd9e8;
  --vk-avatar-4: #f7edcb;
  --vk-avatar-5: #d7efde;
  --vk-avatar-6: #d6e6ff;
  --vk-avatar-neutral: #e3d8ec;
  --vk-disabled-container: rgb(36 29 45 / 0.12);
  --vk-disabled-content: rgb(36 29 45 / 0.38);
  --vk-error: #ba1a1a;
  --vk-error-container: #ffdad6;
  --vk-focus: #7250b4;
  --vk-info: #2c5f92;
  --vk-info-container: #d6e6ff;
  --vk-inverse-on-surface: #fffaff;
  --vk-inverse-surface: #241d2d;
  --vk-on-avatar-1: #35205a;
  --vk-on-avatar-2: #31233d;
  --vk-on-avatar-3: #3a1227;
  --vk-on-avatar-4: #514218;
  --vk-on-avatar-5: #214b30;
  --vk-on-avatar-6: #0f2f52;
  --vk-on-avatar-neutral: #241d2d;
  --vk-on-error: #ffffff;
  --vk-on-error-container: #410002;
  --vk-on-info: #ffffff;
  --vk-on-info-container: #0f2f52;
  --vk-on-primary: #ffffff;
  --vk-on-primary-container: #35205a;
  --vk-on-primary-fixed: #2b1050;
  --vk-on-secondary: #ffffff;
  --vk-on-secondary-container: #31233d;
  --vk-on-success: #ffffff;
  --vk-on-success-container: #214b30;
  --vk-on-surface: #241d2d;
  --vk-on-surface-variant: #5f566b;
  --vk-on-tertiary: #ffffff;
  --vk-on-tertiary-container: #3a1227;
  --vk-on-warning: #ffffff;
  --vk-on-warning-container: #514218;
  --vk-outline: #81768e;
  --vk-outline-variant: #d6cadd;
  --vk-primary: #6846a5;
  --vk-primary-container: #ebddff;
  --vk-primary-fixed: #dcc5ff;
  --vk-scrim: rgb(23 18 29 / 0.44);
  --vk-secondary: #685b78;
  --vk-secondary-container: #eadcf3;
  --vk-state-focus: rgb(104 70 165 / 0.12);
  --vk-state-hover: rgb(104 70 165 / 0.08);
  --vk-state-pressed: rgb(104 70 165 / 0.12);
  --vk-success: #326846;
  --vk-success-container: #d7efde;
  --vk-surface: #fffaff;
  --vk-surface-container: #efe8f6;
  --vk-surface-container-high: #e8e0f0;
  --vk-surface-container-highest: #e3d8ec;
  --vk-surface-container-low: #f7f2fa;
  --vk-tertiary: #85506a;
  --vk-tertiary-container: #ffd9e8;
  --vk-warning: #6c5711;
  --vk-warning-container: #f7edcb;
  --vk-shadow: 0 12px 40px rgb(36 29 45 / 0.14);
}

:root[data-theme="light"] {
  color-scheme: light;
}

.vk-scope[data-theme="light"] {
  color-scheme: light;
  --vk-avatar-1: #ebddff;
  --vk-avatar-2: #eadcf3;
  --vk-avatar-3: #ffd9e8;
  --vk-avatar-4: #f7edcb;
  --vk-avatar-5: #d7efde;
  --vk-avatar-6: #d6e6ff;
  --vk-avatar-neutral: #e3d8ec;
  --vk-disabled-container: rgb(36 29 45 / 0.12);
  --vk-disabled-content: rgb(36 29 45 / 0.38);
  --vk-error: #ba1a1a;
  --vk-error-container: #ffdad6;
  --vk-focus: #7250b4;
  --vk-info: #2c5f92;
  --vk-info-container: #d6e6ff;
  --vk-inverse-on-surface: #fffaff;
  --vk-inverse-surface: #241d2d;
  --vk-on-avatar-1: #35205a;
  --vk-on-avatar-2: #31233d;
  --vk-on-avatar-3: #3a1227;
  --vk-on-avatar-4: #514218;
  --vk-on-avatar-5: #214b30;
  --vk-on-avatar-6: #0f2f52;
  --vk-on-avatar-neutral: #241d2d;
  --vk-on-error: #ffffff;
  --vk-on-error-container: #410002;
  --vk-on-info: #ffffff;
  --vk-on-info-container: #0f2f52;
  --vk-on-primary: #ffffff;
  --vk-on-primary-container: #35205a;
  --vk-on-primary-fixed: #2b1050;
  --vk-on-secondary: #ffffff;
  --vk-on-secondary-container: #31233d;
  --vk-on-success: #ffffff;
  --vk-on-success-container: #214b30;
  --vk-on-surface: #241d2d;
  --vk-on-surface-variant: #5f566b;
  --vk-on-tertiary: #ffffff;
  --vk-on-tertiary-container: #3a1227;
  --vk-on-warning: #ffffff;
  --vk-on-warning-container: #514218;
  --vk-outline: #81768e;
  --vk-outline-variant: #d6cadd;
  --vk-primary: #6846a5;
  --vk-primary-container: #ebddff;
  --vk-primary-fixed: #dcc5ff;
  --vk-scrim: rgb(23 18 29 / 0.44);
  --vk-secondary: #685b78;
  --vk-secondary-container: #eadcf3;
  --vk-state-focus: rgb(104 70 165 / 0.12);
  --vk-state-hover: rgb(104 70 165 / 0.08);
  --vk-state-pressed: rgb(104 70 165 / 0.12);
  --vk-success: #326846;
  --vk-success-container: #d7efde;
  --vk-surface: #fffaff;
  --vk-surface-container: #efe8f6;
  --vk-surface-container-high: #e8e0f0;
  --vk-surface-container-highest: #e3d8ec;
  --vk-surface-container-low: #f7f2fa;
  --vk-tertiary: #85506a;
  --vk-tertiary-container: #ffd9e8;
  --vk-warning: #6c5711;
  --vk-warning-container: #f7edcb;
  --vk-shadow: 0 12px 40px rgb(36 29 45 / 0.14);
}

:root[data-theme="dark"],
.vk-scope[data-theme="dark"] {
  color-scheme: dark;
  --vk-avatar-1: #4e3477;
  --vk-avatar-2: #493c56;
  --vk-avatar-3: #65364d;
  --vk-avatar-4: #4e4223;
  --vk-avatar-5: #244631;
  --vk-avatar-6: #22466d;
  --vk-avatar-neutral: #44394f;
  --vk-disabled-container: rgb(240 231 248 / 0.12);
  --vk-disabled-content: rgb(240 231 248 / 0.38);
  --vk-error: #ffb4ab;
  --vk-error-container: #6d2520;
  --vk-focus: #d4bbff;
  --vk-info: #a6c8ff;
  --vk-info-container: #22466d;
  --vk-inverse-on-surface: #17121d;
  --vk-inverse-surface: #f0e7f8;
  --vk-on-avatar-1: #f0e3ff;
  --vk-on-avatar-2: #f2daff;
  --vk-on-avatar-3: #ffd9e8;
  --vk-on-avatar-4: #f4e5af;
  --vk-on-avatar-5: #c7ebd1;
  --vk-on-avatar-6: #d6e6ff;
  --vk-on-avatar-neutral: #f0e7f8;
  --vk-on-error: #690005;
  --vk-on-error-container: #ffdad6;
  --vk-on-info: #003060;
  --vk-on-info-container: #d6e6ff;
  --vk-on-primary: #381c63;
  --vk-on-primary-container: #f0e3ff;
  --vk-on-primary-fixed: #f0e3ff;
  --vk-on-secondary: #352a43;
  --vk-on-secondary-container: #f2daff;
  --vk-on-success: #0d3820;
  --vk-on-success-container: #c7ebd1;
  --vk-on-surface: #f0e7f8;
  --vk-on-surface-variant: #d1c3db;
  --vk-on-tertiary: #4f2139;
  --vk-on-tertiary-container: #ffd9e8;
  --vk-on-warning: #3b2f00;
  --vk-on-warning-container: #f4e5af;
  --vk-outline: #a095ab;
  --vk-outline-variant: #50455a;
  --vk-primary: #d4bbff;
  --vk-primary-container: #4e3477;
  --vk-primary-fixed: #5e4388;
  --vk-scrim: rgb(0 0 0 / 0.58);
  --vk-secondary: #cec0df;
  --vk-secondary-container: #493c56;
  --vk-state-focus: rgb(212 187 255 / 0.12);
  --vk-state-hover: rgb(212 187 255 / 0.1);
  --vk-state-pressed: rgb(212 187 255 / 0.12);
  --vk-success: #a3d5b2;
  --vk-success-container: #244631;
  --vk-surface: #17121d;
  --vk-surface-container: #2b2434;
  --vk-surface-container-high: #372e42;
  --vk-surface-container-highest: #44394f;
  --vk-surface-container-low: #211b29;
  --vk-tertiary: #f4b2ce;
  --vk-tertiary-container: #65364d;
  --vk-warning: #e3c76c;
  --vk-warning-container: #4e4223;
  --vk-shadow: 0 16px 48px rgb(0 0 0 / 0.4);
}

.vk-scope[data-theme="system"] {
  color-scheme: light dark;
  --vk-avatar-1: #ebddff;
  --vk-avatar-2: #eadcf3;
  --vk-avatar-3: #ffd9e8;
  --vk-avatar-4: #f7edcb;
  --vk-avatar-5: #d7efde;
  --vk-avatar-6: #d6e6ff;
  --vk-avatar-neutral: #e3d8ec;
  --vk-disabled-container: rgb(36 29 45 / 0.12);
  --vk-disabled-content: rgb(36 29 45 / 0.38);
  --vk-error: #ba1a1a;
  --vk-error-container: #ffdad6;
  --vk-focus: #7250b4;
  --vk-info: #2c5f92;
  --vk-info-container: #d6e6ff;
  --vk-inverse-on-surface: #fffaff;
  --vk-inverse-surface: #241d2d;
  --vk-on-avatar-1: #35205a;
  --vk-on-avatar-2: #31233d;
  --vk-on-avatar-3: #3a1227;
  --vk-on-avatar-4: #514218;
  --vk-on-avatar-5: #214b30;
  --vk-on-avatar-6: #0f2f52;
  --vk-on-avatar-neutral: #241d2d;
  --vk-on-error: #ffffff;
  --vk-on-error-container: #410002;
  --vk-on-info: #ffffff;
  --vk-on-info-container: #0f2f52;
  --vk-on-primary: #ffffff;
  --vk-on-primary-container: #35205a;
  --vk-on-primary-fixed: #2b1050;
  --vk-on-secondary: #ffffff;
  --vk-on-secondary-container: #31233d;
  --vk-on-success: #ffffff;
  --vk-on-success-container: #214b30;
  --vk-on-surface: #241d2d;
  --vk-on-surface-variant: #5f566b;
  --vk-on-tertiary: #ffffff;
  --vk-on-tertiary-container: #3a1227;
  --vk-on-warning: #ffffff;
  --vk-on-warning-container: #514218;
  --vk-outline: #81768e;
  --vk-outline-variant: #d6cadd;
  --vk-primary: #6846a5;
  --vk-primary-container: #ebddff;
  --vk-primary-fixed: #dcc5ff;
  --vk-scrim: rgb(23 18 29 / 0.44);
  --vk-secondary: #685b78;
  --vk-secondary-container: #eadcf3;
  --vk-state-focus: rgb(104 70 165 / 0.12);
  --vk-state-hover: rgb(104 70 165 / 0.08);
  --vk-state-pressed: rgb(104 70 165 / 0.12);
  --vk-success: #326846;
  --vk-success-container: #d7efde;
  --vk-surface: #fffaff;
  --vk-surface-container: #efe8f6;
  --vk-surface-container-high: #e8e0f0;
  --vk-surface-container-highest: #e3d8ec;
  --vk-surface-container-low: #f7f2fa;
  --vk-tertiary: #85506a;
  --vk-tertiary-container: #ffd9e8;
  --vk-warning: #6c5711;
  --vk-warning-container: #f7edcb;
  --vk-shadow: 0 12px 40px rgb(36 29 45 / 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  .vk-scope[data-theme="system"] {
    --vk-avatar-1: #4e3477;
    --vk-avatar-2: #493c56;
    --vk-avatar-3: #65364d;
    --vk-avatar-4: #4e4223;
    --vk-avatar-5: #244631;
    --vk-avatar-6: #22466d;
    --vk-avatar-neutral: #44394f;
    --vk-disabled-container: rgb(240 231 248 / 0.12);
    --vk-disabled-content: rgb(240 231 248 / 0.38);
    --vk-error: #ffb4ab;
    --vk-error-container: #6d2520;
    --vk-focus: #d4bbff;
    --vk-info: #a6c8ff;
    --vk-info-container: #22466d;
    --vk-inverse-on-surface: #17121d;
    --vk-inverse-surface: #f0e7f8;
    --vk-on-avatar-1: #f0e3ff;
    --vk-on-avatar-2: #f2daff;
    --vk-on-avatar-3: #ffd9e8;
    --vk-on-avatar-4: #f4e5af;
    --vk-on-avatar-5: #c7ebd1;
    --vk-on-avatar-6: #d6e6ff;
    --vk-on-avatar-neutral: #f0e7f8;
    --vk-on-error: #690005;
    --vk-on-error-container: #ffdad6;
    --vk-on-info: #003060;
    --vk-on-info-container: #d6e6ff;
    --vk-on-primary: #381c63;
    --vk-on-primary-container: #f0e3ff;
    --vk-on-primary-fixed: #f0e3ff;
    --vk-on-secondary: #352a43;
    --vk-on-secondary-container: #f2daff;
    --vk-on-success: #0d3820;
    --vk-on-success-container: #c7ebd1;
    --vk-on-surface: #f0e7f8;
    --vk-on-surface-variant: #d1c3db;
    --vk-on-tertiary: #4f2139;
    --vk-on-tertiary-container: #ffd9e8;
    --vk-on-warning: #3b2f00;
    --vk-on-warning-container: #f4e5af;
    --vk-outline: #a095ab;
    --vk-outline-variant: #50455a;
    --vk-primary: #d4bbff;
    --vk-primary-container: #4e3477;
    --vk-primary-fixed: #5e4388;
    --vk-scrim: rgb(0 0 0 / 0.58);
    --vk-secondary: #cec0df;
    --vk-secondary-container: #493c56;
    --vk-state-focus: rgb(212 187 255 / 0.12);
    --vk-state-hover: rgb(212 187 255 / 0.1);
    --vk-state-pressed: rgb(212 187 255 / 0.12);
    --vk-success: #a3d5b2;
    --vk-success-container: #244631;
    --vk-surface: #17121d;
    --vk-surface-container: #2b2434;
    --vk-surface-container-high: #372e42;
    --vk-surface-container-highest: #44394f;
    --vk-surface-container-low: #211b29;
    --vk-tertiary: #f4b2ce;
    --vk-tertiary-container: #65364d;
    --vk-warning: #e3c76c;
    --vk-warning-container: #4e4223;
    --vk-shadow: 0 16px 48px rgb(0 0 0 / 0.4);
  }
}

:root,
.vk-scope {
  --vk-action-primary-container: var(--vk-primary);
  --vk-action-primary-content: var(--vk-on-primary);
  --vk-action-toggle-content: var(--vk-on-surface-variant);
  --vk-action-toggle-selected-container: var(--vk-secondary-container);
  --vk-action-toggle-selected-content: var(--vk-on-secondary-container);
  --vk-action-tonal-container: var(--vk-secondary-container);
  --vk-action-tonal-content: var(--vk-on-secondary-container);
  --vk-field-container: var(--vk-surface-container-low);
  --vk-field-outline: var(--vk-outline);
  --vk-focus-ring: var(--vk-focus);
}

.vk-scope[data-theme] {
  background-color: var(--vk-surface);
  color: var(--vk-on-surface);
}

.vk-scope[data-density="comfortable"] {
  --vk-density-control-height: 48px;
  --vk-density-control-padding: 0.75rem;
  --vk-density-stack-gap: 1rem;
}

:root[data-density="compact"],
.vk-scope[data-density="compact"] {
  --vk-density-control-height: 44px;
  --vk-density-control-padding: 0.5rem;
  --vk-density-stack-gap: 0.75rem;
}

:root[data-motion="reduce"],
.vk-scope[data-motion="reduce"] {
  --vk-duration-medium: 0ms;
  --vk-duration-short: 0ms;
  --vk-loop-iterations: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --vk-duration-medium: 0ms;
    --vk-duration-short: 0ms;
    --vk-loop-iterations: 0;
  }
}

/*
 * Vink UI renderer styles. Load after tokens.css. Every selector is scoped under `.vk-ui` or a
 * `vk-ui-` class: no global tag selectors, so app styles and the CodeMirror editor are unaffected.
 */

.vk-ui {
  font-family: var(--vk-type-body-font);
  font-size: var(--vk-type-body-size);
  font-weight: var(--vk-type-body-weight);
  line-height: var(--vk-type-body-line-height);
  color: var(--vk-on-surface);
  background-color: var(--vk-surface);
}

.vk-ui :focus-visible {
  outline: var(--vk-size-focus-ring) solid var(--vk-focus-ring);
  outline-offset: var(--vk-size-focus-offset);
}

/* ---------------------------------------------------------------------------------------------
 * UIS-02 primitives (shared/components.md). Classes are `vk-ui-*`, never the app's `vk-*`.
 * Control heights use density.control-height (48px, compact 44px); 760px is the shell's
 * narrow breakpoint (media queries cannot read custom properties).
 */

.vk-ui-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Text ---------------------------------------------------------------------------------------- */

.vk-ui-text,
.vk-ui-heading {
  margin: 0;
  overflow-wrap: break-word;
}

.vk-ui-type-display {
  font-family: var(--vk-type-display-font);
  font-size: var(--vk-type-display-size);
  font-weight: var(--vk-type-display-weight);
  line-height: var(--vk-type-display-line-height);
  letter-spacing: var(--vk-type-display-tracking);
}

.vk-ui-type-headline {
  font-family: var(--vk-type-headline-font);
  font-size: var(--vk-type-headline-size);
  font-weight: var(--vk-type-headline-weight);
  line-height: var(--vk-type-headline-line-height);
  letter-spacing: var(--vk-type-headline-tracking);
}

.vk-ui-type-title {
  font-family: var(--vk-type-title-font);
  font-size: var(--vk-type-title-size);
  font-weight: var(--vk-type-title-weight);
  line-height: var(--vk-type-title-line-height);
  letter-spacing: var(--vk-type-title-tracking);
}

.vk-ui-type-body {
  font-family: var(--vk-type-body-font);
  font-size: var(--vk-type-body-size);
  font-weight: var(--vk-type-body-weight);
  line-height: var(--vk-type-body-line-height);
  letter-spacing: var(--vk-type-body-tracking);
}

.vk-ui-type-label {
  font-family: var(--vk-type-label-font);
  font-size: var(--vk-type-label-size);
  font-weight: var(--vk-type-label-weight);
  line-height: var(--vk-type-label-line-height);
  letter-spacing: var(--vk-type-label-tracking);
}

.vk-ui-type-caption {
  font-family: var(--vk-type-caption-font);
  font-size: var(--vk-type-caption-size);
  font-weight: var(--vk-type-caption-weight);
  line-height: var(--vk-type-caption-line-height);
  letter-spacing: var(--vk-type-caption-tracking);
}

.vk-ui-type-reading {
  font-family: var(--vk-type-reading-font);
  font-size: var(--vk-type-reading-size);
  font-weight: var(--vk-type-reading-weight);
  line-height: var(--vk-type-reading-line-height);
  letter-spacing: var(--vk-type-reading-tracking);
}

.vk-ui-type-code {
  font-family: var(--vk-type-code-font);
  font-size: var(--vk-type-code-size);
  font-weight: var(--vk-type-code-weight);
  line-height: var(--vk-type-code-line-height);
  letter-spacing: var(--vk-type-code-tracking);
}

.vk-ui-type-reading {
  white-space: pre-line;
}

.vk-ui-tone-muted { color: var(--vk-on-surface-variant); }
.vk-ui-tone-primary { color: var(--vk-primary); }
.vk-ui-tone-error { color: var(--vk-error); }
.vk-ui-tone-warning { color: var(--vk-warning); }

/* Layout -------------------------------------------------------------------------------------- */

.vk-ui-surface {
  box-sizing: border-box;
  min-inline-size: 0;
  padding: var(--vk-ui-padding, 0);
  border-radius: var(--vk-ui-radius, 0);
  background-color: var(--vk-surface);
  color: var(--vk-on-surface);
}

.vk-ui-surface--low { background-color: var(--vk-surface-container-low); }
.vk-ui-surface--container { background-color: var(--vk-surface-container); }
.vk-ui-surface--high { background-color: var(--vk-surface-container-high); }
.vk-ui-surface--highest { background-color: var(--vk-surface-container-highest); }

.vk-ui-surface--primary {
  background-color: var(--vk-primary-container);
  color: var(--vk-on-primary-container);
}

.vk-ui-container {
  box-sizing: border-box;
  inline-size: 100%;
  margin-inline: auto;
}

.vk-ui-container--reading { max-inline-size: var(--vk-measure); }
.vk-ui-container--wide { max-inline-size: var(--vk-measure-wide); }

.vk-ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--vk-ui-gap);
  align-items: var(--vk-ui-align, stretch);
  min-inline-size: 0;
}

.vk-ui-stack--row { flex-direction: row; }
.vk-ui-stack > * { min-inline-size: 0; }

.vk-ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--vk-ui-min)), 1fr));
  gap: var(--vk-ui-gap);
}

.vk-ui-divider {
  inline-size: 100%;
  margin: 0;
  border: 0;
  border-block-start: 1px solid var(--vk-outline-variant);
}

/* Actions ------------------------------------------------------------------------------------- */

.vk-ui-action {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vk-space-1);
  max-inline-size: 100%;
  vertical-align: top;
}

.vk-ui-action__note {
  font-family: var(--vk-type-caption-font);
  font-size: var(--vk-type-caption-size);
  line-height: var(--vk-type-caption-line-height);
  color: var(--vk-on-surface-variant);
}

.vk-ui-button,
.vk-ui-icon-button,
.vk-ui-chip {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vk-space-2);
  max-inline-size: 100%;
  min-block-size: var(--vk-density-control-height);
  min-inline-size: var(--vk-density-control-height);
  margin: 0;
  border: 1px solid transparent;
  font-family: var(--vk-type-label-font);
  font-size: var(--vk-type-label-size);
  font-weight: var(--vk-type-label-weight);
  line-height: var(--vk-type-label-line-height);
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--vk-duration-short) var(--vk-ease-emphasized),
    color var(--vk-duration-short) var(--vk-ease-emphasized),
    border-color var(--vk-duration-short) var(--vk-ease-emphasized);
}

/* M3 state layer in the content colour: 8% hover, 12% pressed. */
.vk-ui-button::after,
.vk-ui-icon-button::after,
.vk-ui-chip::after,
.vk-ui-toggle__control::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vk-duration-short) var(--vk-ease-emphasized);
}

.vk-ui-button:not([aria-disabled]):hover::after,
.vk-ui-icon-button:not([aria-disabled]):hover::after,
.vk-ui-chip:not([aria-disabled]):hover::after,
.vk-ui-toggle__control:not([aria-disabled]):hover::after { opacity: 0.08; }

.vk-ui-button:not([aria-disabled]):active::after,
.vk-ui-icon-button:not([aria-disabled]):active::after,
.vk-ui-chip:not([aria-disabled]):active::after,
.vk-ui-toggle__control:not([aria-disabled]):active::after { opacity: 0.12; }

.vk-ui-button {
  padding: var(--vk-density-control-padding) var(--vk-space-6);
  border-radius: var(--vk-radius-full);
  background-color: var(--vk-action-primary-container);
  color: var(--vk-action-primary-content);
}

.vk-ui-button__label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* Reserve the status slot even before pending; every variant keeps its width and label. */
.vk-ui-button__status {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc((var(--vk-space-6) - var(--vk-size-indicator)) / 2);
  display: grid;
  translate: 0 -50%;
}

.vk-ui-button__status:empty { display: none; }


.vk-ui-button--tonal {
  background-color: var(--vk-action-tonal-container);
  color: var(--vk-action-tonal-content);
}

.vk-ui-button--outlined {
  border-color: var(--vk-outline);
  background-color: transparent;
  color: var(--vk-primary);
}

.vk-ui-button--text {
  padding-inline: var(--vk-space-3) var(--vk-space-6);
  background-color: transparent;
  color: var(--vk-primary);
}

.vk-ui-button--danger {
  background-color: var(--vk-error);
  color: var(--vk-on-error);
}

.vk-ui-button[data-state="disabled"],
.vk-ui-icon-button[data-state="disabled"],
.vk-ui-chip[data-state="disabled"] {
  border-color: transparent;
  background-color: var(--vk-disabled-container);
  color: var(--vk-disabled-content);
  cursor: not-allowed;
}

.vk-ui-button--text[data-state="disabled"],
.vk-ui-icon-button[data-state="disabled"] { background-color: transparent; }

.vk-ui-button[data-state="pending"],
.vk-ui-icon-button[data-state="pending"] { cursor: progress; }

.vk-ui-icon-button {
  padding: 0;
  border-radius: var(--vk-radius-full);
  background-color: transparent;
  color: var(--vk-on-surface-variant);
}

.vk-ui-icon-button[aria-pressed="true"] {
  background-color: var(--vk-secondary-container);
  color: var(--vk-on-secondary-container);
}

.vk-ui-link {
  color: var(--vk-primary);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}

.vk-ui-link:hover { text-decoration-thickness: 2px; }

.vk-ui-link .vk-ui-icon {
  inline-size: 1em;
  block-size: 1em;
  margin-inline-start: 0.2em;
  vertical-align: -0.125em;
}

.vk-ui-link--standalone {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--vk-density-control-height);
  font-family: var(--vk-type-label-font);
  font-size: var(--vk-type-label-size);
  font-weight: var(--vk-type-label-weight);
  text-decoration-line: none;
}

.vk-ui-link--standalone:hover { text-decoration-line: underline; }

.vk-ui-link[data-invalid-href] {
  color: inherit;
  text-decoration-line: none;
}

.vk-ui-chip {
  padding: 0 var(--vk-space-4) 0 var(--vk-space-2);
  border-color: transparent;
  border-radius: var(--vk-radius-sm);
  background-color: var(--vk-surface-container);
  color: var(--vk-on-surface-variant);
}

.vk-ui-chip[aria-pressed="true"] {
  border-color: transparent;
  background-color: var(--vk-secondary-container);
  color: var(--vk-on-secondary-container);
}

.vk-ui-chip__check {
  display: inline-flex;
  inline-size: var(--vk-size-icon-sm);
  justify-content: center;
}

/* Painted actions use a flush perimeter, including inside the app scaffold. */
.vk-ui-button:focus-visible,
.vk-ui-icon-button:focus-visible,
.vk-ui-chip:focus-visible,
.vk-ui-toggle__control:focus-visible,
.vk-ui-scaffold .vk-ui-button:focus-visible,
.vk-ui-scaffold .vk-ui-icon-button:focus-visible,
.vk-ui-scaffold .vk-ui-chip:focus-visible,
.vk-ui-scaffold .vk-ui-toggle__control:focus-visible,
.vk-ui .vk-ui-button:focus-visible,
.vk-ui .vk-ui-icon-button:focus-visible,
.vk-ui .vk-ui-chip:focus-visible,
.vk-ui .vk-ui-toggle__control:focus-visible {
  outline: 2px solid var(--vk-focus-ring);
  outline-offset: 0;
}
.vk-ui-button:focus-visible, .vk-ui-icon-button:focus-visible { border-radius: var(--vk-radius-full); }
.vk-ui-chip > span { min-inline-size: 0; overflow-wrap: anywhere; }
.vk-ui-chip__check { flex-shrink: 0; }

/* ToggleAction (LVE #73): quiet and borderless until the owner confirms On; the check mark
 * (or the MicroArc while pending) sits in one reserved trailing slot so the label never moves. The
 * feedback row is the polite live region, always mounted; it takes no space while inactive. */
.vk-ui-toggle { gap: 0; }

.vk-ui-toggle__control {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--vk-space-2);
  max-inline-size: 100%;
  min-block-size: var(--vk-density-control-height);
  min-inline-size: var(--vk-density-control-height);
  margin: 0;
  padding: 0 var(--vk-space-3);
  border: 1px solid transparent;
  border-radius: var(--vk-radius-full);
  background-color: transparent;
  color: var(--vk-action-toggle-content);
  font-family: var(--vk-type-label-font);
  font-size: var(--vk-type-label-size);
  font-weight: var(--vk-type-label-weight);
  line-height: var(--vk-type-label-line-height);
  text-align: start;
  cursor: pointer;
  transition:
    background-color var(--vk-duration-short) var(--vk-ease-emphasized),
    color var(--vk-duration-short) var(--vk-ease-emphasized);
}

.vk-ui-toggle__control[data-pressed="true"] {
  background-color: var(--vk-action-toggle-selected-container);
  color: var(--vk-action-toggle-selected-content);
}

.vk-ui-toggle__control[data-state="disabled"] {
  color: var(--vk-disabled-content);
  cursor: not-allowed;
}

.vk-ui-toggle__control[data-state="disabled"][data-pressed="true"] {
  background-color: var(--vk-disabled-container);
}

.vk-ui-toggle__control[data-state="pending"] { cursor: progress; }
.vk-ui-toggle__control[data-state="held"] { cursor: default; }

.vk-ui-toggle__glyph,
.vk-ui-toggle__mark {
  display: inline-flex;
  flex-shrink: 0;
  inline-size: var(--vk-size-icon-sm);
  justify-content: center;
}

.vk-ui-toggle__label { min-inline-size: 0; overflow-wrap: anywhere; }

.vk-ui-toggle__count {
  flex-shrink: 0;
  font-weight: var(--vk-type-body-weight);
}

.vk-ui-toggle__feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--vk-space-2);
  max-inline-size: 100%;
}

.vk-ui-toggle__feedback[data-active] { margin-block-start: var(--vk-space-1); }

/* Fields -------------------------------------------------------------------------------------- */

.vk-ui-field,
.vk-ui-choice {
  display: flex;
  flex-direction: column;
  gap: var(--vk-space-1);
  min-inline-size: 0;
}

.vk-ui-field__label {
  padding: 0;
  font-family: var(--vk-type-label-font);
  font-size: var(--vk-type-label-size);
  font-weight: var(--vk-type-label-weight);
  line-height: var(--vk-type-label-line-height);
  color: var(--vk-on-surface);
  overflow-wrap: anywhere;
}

.vk-ui-field__required {
  font-weight: var(--vk-type-body-weight);
  color: var(--vk-on-surface-variant);
}

.vk-ui-field__help,
.vk-ui-field__error {
  margin: 0;
  font-family: var(--vk-type-caption-font);
  font-size: var(--vk-type-caption-size);
  line-height: var(--vk-type-caption-line-height);
  color: var(--vk-on-surface-variant);
  overflow-wrap: anywhere;
}

.vk-ui-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--vk-space-1);
  font-family: var(--vk-type-label-font);
  font-weight: var(--vk-type-label-weight);
  color: var(--vk-error);
}

.vk-ui-field__control {
  position: relative;
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.vk-ui-input {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--vk-density-control-height);
  margin: 0;
  padding: var(--vk-density-control-padding) var(--vk-space-4);
  border: 0;
  border-radius: var(--vk-radius-md);
  background-color: var(--vk-field-container);
  color: var(--vk-on-surface);
  font-family: var(--vk-type-body-font);
  font-size: var(--vk-type-body-size);
  line-height: var(--vk-type-body-line-height);
}

.vk-ui-input::placeholder { color: var(--vk-on-surface-variant); }
.vk-ui-field .vk-ui-input { border-radius: var(--vk-radius-md); }

/* Input owns the inset perimeter. Specificity beats app/scaffold focus defaults,
 * while the independent trailing action never paints a parent focus ring. */
.vk-ui-field .vk-ui-input:focus {
  outline: 2px solid var(--vk-focus-ring);
  outline-offset: -2px;
}

.vk-ui-input--area {
  resize: vertical;
  white-space: pre-wrap;
}

.vk-ui-field .vk-ui-input[aria-invalid="true"] {
  outline: 1px solid var(--vk-error);
  outline-offset: -1px;
}

.vk-ui-field .vk-ui-input[aria-invalid="true"]:focus {
  outline-width: 2px;
  outline-offset: -2px;
}

.vk-ui-input:disabled {
  border-color: transparent;
  background-color: var(--vk-disabled-container);
  color: var(--vk-disabled-content);
  cursor: not-allowed;
}

.vk-ui-field__control > .vk-ui-icon {
  position: absolute;
  inset-inline-start: var(--vk-space-3);
  color: var(--vk-on-surface-variant);
  pointer-events: none;
}

.vk-ui-field__control[data-search] .vk-ui-input {
  padding-inline: calc(var(--vk-space-3) + var(--vk-size-icon) + var(--vk-space-2))
    var(--vk-density-control-height);
}

.vk-ui-field__control[data-search] .vk-ui-action {
  position: absolute;
  inset-inline-end: 0;
}

/* Keep room for the reveal target in either mode. The input and its label do not move. */
.vk-ui-field__control[data-reveal] .vk-ui-input {
  padding-inline-end: calc(var(--vk-density-control-height) + var(--vk-space-3));
}
.vk-ui-field__control[data-reveal] .vk-ui-field__label {
  margin-inline-end: calc(var(--vk-density-control-height) + var(--vk-space-3));
}
.vk-ui-field__reveal {
  position: absolute;
  inset-inline-end: var(--vk-space-1);
  inset-block-end: 0;
  display: flex;
  align-items: center;
  min-block-size: var(--vk-density-control-height);
}
.vk-ui-input::-ms-reveal { display: none; }

.vk-ui-input[type="search"]::-webkit-search-cancel-button { appearance: none; }

/* Search R5.1: one input line and an associated visually-hidden native label.
 * The native input remains in place across value,
 * theme and viewport changes; only its own focus paints the shell perimeter. */
.vk-ui-search__shell {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  min-block-size: 56px;
  padding: var(--vk-space-1) min(var(--vk-space-2), 8px);
  gap: min(var(--vk-space-1), 4px);
  border-radius: var(--vk-radius-full);
  background: var(--vk-field-container);
  outline: 0;
}
.vk-ui-search__shell:has(.vk-ui-input:focus) {
  outline: 2px solid var(--vk-focus-ring);
  outline-offset: -2px;
}
.vk-ui-search__query {
  display: flex;
  flex: 1;
  min-inline-size: 0;
  align-self: stretch;
}
.vk-ui-search .vk-ui-input {
  min-block-size: 48px;
  padding: var(--vk-space-1) 0;
  border-radius: 0;
  background: transparent;
}
.vk-ui-search .vk-ui-input:focus { outline: 0; }
.vk-ui-search__shell > .vk-ui-icon-button,
.vk-ui-search__shell .vk-ui-action,
.vk-ui-search__clear { flex: none; }
.vk-ui-search__shell .vk-ui-icon-button,
.vk-ui-search__clear {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-inline-size: 48px;
  inline-size: 48px;
  min-block-size: 48px;
  border-radius: var(--vk-radius-full);
  color: var(--vk-on-surface-variant);
}
.vk-ui-search__clear:hover { background: var(--vk-state-hover); }
.vk-ui-scaffold .vk-ui-search__shell .vk-ui-icon-button:focus-visible,
.vk-ui-search__shell .vk-ui-icon-button:focus-visible,
.vk-ui-search__shell .vk-ui-search__clear:focus-visible {
  outline: 2px solid var(--vk-focus-ring);
  outline-offset: -2px;
  border-radius: var(--vk-radius-full);
}
.vk-ui-search .vk-ui-field__help { margin-inline: var(--vk-space-4); }
@media (forced-colors: active) {
  .vk-ui-search__shell { border: 1px solid CanvasText; }
  .vk-ui-search .vk-ui-input,
  .vk-ui-search .vk-ui-input:not(:focus):not([aria-invalid="true"]) { border: 0; }
  .vk-ui-search__shell:has(.vk-ui-input:focus),
  .vk-ui-search__shell .vk-ui-icon-button:focus-visible,
  .vk-ui-search__clear:focus-visible { outline-color: Highlight; }
}

/* R1.5 (#135): reserve one fixed trailing slot as text grows. Native option labels
 * use the shared label recipe; rem-scaled insets otherwise consume their measure at 200%. */
.vk-ui-select {
  appearance: none;
  padding-inline: 12px calc(12px + 18px + 8px);
  font-size: var(--vk-type-label-size);
  font-weight: var(--vk-type-label-weight);
  line-height: var(--vk-type-label-line-height);
  cursor: pointer;
}

.vk-ui-field__control--select > .vk-ui-icon {
  inline-size: 18px;
  block-size: 18px;
  inset-inline: auto 12px;
}

/* Floating labels share an intrinsic grid with the input: long Vietnamese labels
 * grow the first row at 200% text instead of overlapping or clipping input text. */
.vk-ui-field--floating .vk-ui-field__control {
  display: grid;
  grid-template-rows: minmax(calc(var(--vk-space-2) + 1.5 * var(--vk-type-caption-size)), auto) auto;
  border-radius: var(--vk-radius-md);
  background: var(--vk-field-container);
}
.vk-ui-field--floating .vk-ui-input {
  grid-area: 2 / 1;
  min-block-size: var(--vk-density-control-height);
  padding-block: var(--vk-space-2);
  background: transparent;
}
.vk-ui-field--floating .vk-ui-field__label {
  grid-area: 1 / 1;
  z-index: 1;
  margin: var(--vk-space-2) var(--vk-space-4) 0;
  align-self: start;
  font-size: var(--vk-type-caption-size);
  line-height: var(--vk-type-caption-line-height);
  color: var(--vk-on-surface-variant);
}
.vk-ui-field--floating .vk-ui-input:placeholder-shown:not(:focus):not(:autofill) + .vk-ui-field__label {
  grid-row: 1 / 3;
  align-self: center;
  margin-block: var(--vk-space-2);
  font-size: var(--vk-type-body-size);
  line-height: var(--vk-type-body-line-height);
}
.vk-ui-field--floating .vk-ui-input:not(:focus)::placeholder { opacity: 0; }
.vk-ui-field--floating .vk-ui-field__control:has(> .vk-ui-input:focus) {
  outline: 2px solid var(--vk-focus-ring);
  outline-offset: -2px;
}
.vk-ui-field--floating[data-invalid] .vk-ui-field__control {
  outline: 1px solid var(--vk-error);
  outline-offset: -1px;
}
.vk-ui-field--floating[data-invalid] .vk-ui-field__control:has(> .vk-ui-input:focus) {
  outline-color: var(--vk-error);
  outline-width: 2px;
  outline-offset: -2px;
}
.vk-ui-field.vk-ui-field--floating .vk-ui-field__control > .vk-ui-input {
  outline: 0;
  border: 0;
  border-radius: 0 0 var(--vk-radius-md) var(--vk-radius-md);
}
.vk-ui-field--floating[data-mode="disabled"] .vk-ui-field__control { background: var(--vk-disabled-container); }

@media (forced-colors: active) {
  .vk-ui-field__control--select > .vk-ui-icon { color: ButtonText; }
  .vk-ui-field__control--select:has(> select:disabled) > .vk-ui-icon { color: GrayText; }
  .vk-ui-input:not(:focus):not([aria-invalid="true"]),
  .vk-ui-button, .vk-ui-icon-button, .vk-ui-chip, .vk-ui-toggle__control { border: 1px solid ButtonText; }
  .vk-ui-field--floating .vk-ui-field__control { border: 1px solid ButtonText; }
  .vk-ui-field--floating .vk-ui-field__control:has(> .vk-ui-input:focus),
  .vk-ui-field--floating[data-invalid] .vk-ui-field__control,
  .vk-ui-field--floating[data-invalid] .vk-ui-field__control:has(> .vk-ui-input:focus),
  .vk-ui-field .vk-ui-input:focus,
  .vk-ui-field .vk-ui-input[aria-invalid="true"] { outline-color: Highlight; }
}

.vk-ui-choice__target {
  display: inline-flex;
  align-items: center;
  gap: var(--vk-space-3);
  inline-size: fit-content;
  max-inline-size: 100%;
  min-block-size: var(--vk-density-control-height);
  color: var(--vk-on-surface);
  cursor: pointer;
}

.vk-ui-choice__label { overflow-wrap: anywhere; }

.vk-ui-choice__input {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  accent-color: var(--vk-primary);
  cursor: inherit;
}

.vk-ui-choice[data-invalid] .vk-ui-choice__input,
.vk-ui-group[data-invalid] .vk-ui-choice__input {
  box-shadow: 0 0 0 2px var(--vk-surface), 0 0 0 4px var(--vk-error);
  border-radius: var(--vk-radius-sm);
}

.vk-ui-group[data-invalid] .vk-ui-choice__input[type="radio"] { border-radius: var(--vk-radius-full); }

.vk-ui-choice__target:has(:disabled) {
  color: var(--vk-disabled-content);
  cursor: not-allowed;
}

/* The native checkbox is the switch track, so it stays the one focus and click target. */
.vk-ui-choice--switch .vk-ui-choice__input {
  position: relative;
  appearance: none;
  inline-size: 3.25rem;
  block-size: 2rem;
  border: 2px solid var(--vk-outline);
  border-radius: var(--vk-radius-full);
  background-color: var(--vk-surface-container-highest);
  transition: background-color var(--vk-duration-short) var(--vk-ease-emphasized);
}

.vk-ui-choice--switch .vk-ui-choice__input::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.375rem;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: var(--vk-radius-full);
  background-color: var(--vk-outline);
  translate: 0 -50%;
  transition: inset-inline-start var(--vk-duration-short) var(--vk-ease-emphasized);
}

.vk-ui-choice--switch .vk-ui-choice__input:checked {
  border-color: var(--vk-primary);
  background-color: var(--vk-primary);
}

.vk-ui-choice--switch .vk-ui-choice__input:checked::before {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  inset-inline-start: calc(100% - 1.625rem);
  background-color: var(--vk-on-primary);
}

.vk-ui-choice--switch .vk-ui-choice__input:disabled {
  border-color: var(--vk-disabled-container);
  background-color: var(--vk-disabled-container);
}

.vk-ui-choice__state {
  color: var(--vk-on-surface-variant);
  font-family: var(--vk-type-caption-font);
  font-size: var(--vk-type-caption-size);
}

.vk-ui-group {
  display: flex;
  flex-direction: column;
  gap: var(--vk-space-1);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.vk-ui-group > legend { margin-block-end: var(--vk-space-1); }

.vk-ui-summary {
  padding: var(--vk-space-4);
  border-inline-start: 4px solid var(--vk-error);
  border-radius: var(--vk-radius-md);
  background-color: var(--vk-error-container);
  color: var(--vk-on-error-container);
}

.vk-ui-summary__title {
  display: flex;
  align-items: center;
  gap: var(--vk-space-2);
  margin: 0 0 var(--vk-space-2);
  font-family: var(--vk-type-label-font);
  font-weight: var(--vk-type-label-weight);
}

.vk-ui-summary__items {
  margin: 0;
  padding-inline-start: var(--vk-space-6);
}

.vk-ui-summary .vk-ui-link { color: inherit; }

/* Identity and media -------------------------------------------------------------------------- */

.vk-ui-icon {
  flex: none;
  inline-size: var(--vk-size-icon);
  block-size: var(--vk-size-icon);
}

.vk-ui-icon--sm {
  inline-size: var(--vk-size-icon-sm);
  block-size: var(--vk-size-icon-sm);
}

/* Pictorial: the circle keeps its token size at 200% text; initials scale with the circle. */
.vk-ui-avatar {
  --vk-ui-avatar-size: var(--vk-size-avatar-md);
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--vk-ui-avatar-size);
  block-size: var(--vk-ui-avatar-size);
  overflow: hidden;
  border-radius: var(--vk-radius-full);
  background-color: var(--vk-ui-avatar-bg);
  color: var(--vk-ui-avatar-fg);
  font-family: var(--vk-type-label-font);
  font-size: calc(var(--vk-ui-avatar-size) * 0.4);
  font-weight: var(--vk-type-label-weight);
  line-height: 1;
  user-select: none;
}

.vk-ui-avatar--sm { --vk-ui-avatar-size: var(--vk-size-avatar-sm); }
.vk-ui-avatar--feed { --vk-ui-avatar-size: var(--vk-size-avatar-feed); }
.vk-ui-avatar--spotlight { --vk-ui-avatar-size: var(--vk-size-avatar-spotlight); }
.vk-ui-avatar--reader { --vk-ui-avatar-size: var(--vk-size-avatar-reader); }

@media (max-width: 759.98px) {
  .vk-ui-avatar--feed { --vk-ui-avatar-size: var(--vk-size-avatar-feed-narrow); }
  .vk-ui-avatar--spotlight { --vk-ui-avatar-size: var(--vk-size-avatar-spotlight-narrow); }
  .vk-ui-avatar--reader { --vk-ui-avatar-size: var(--vk-size-avatar-reader-narrow); }
}

.vk-ui-avatar__initials {
  display: inline-grid;
  place-items: center;
}

.vk-ui-avatar .vk-ui-icon {
  inline-size: calc(var(--vk-ui-avatar-size) * 0.6);
  block-size: calc(var(--vk-ui-avatar-size) * 0.6);
}

.vk-ui-avatar__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.vk-ui-avatar-group {
  display: inline-flex;
  align-items: center;
}

.vk-ui-avatar-group > .vk-ui-avatar {
  box-shadow: 0 0 0 2px var(--vk-surface);
}

.vk-ui-avatar-group > * + * { margin-inline-start: calc(var(--vk-space-2) * -1); }

.vk-ui-avatar-group__more {
  --vk-ui-avatar-size: var(--vk-size-avatar-md);
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--vk-ui-avatar-size);
  block-size: var(--vk-ui-avatar-size);
  padding-inline: var(--vk-space-1);
  box-sizing: border-box;
  border-radius: var(--vk-radius-full);
  box-shadow: 0 0 0 2px var(--vk-surface);
  background-color: var(--vk-surface-container-highest);
  color: var(--vk-on-surface);
  font-family: var(--vk-type-caption-font);
  font-size: var(--vk-type-caption-size);
  font-weight: var(--vk-type-label-weight);
}

.vk-ui-avatar-group__more.vk-ui-avatar--sm { --vk-ui-avatar-size: var(--vk-size-avatar-sm); }

.vk-ui-byline {
  display: flex;
  align-items: center;
  gap: var(--vk-space-3);
  min-inline-size: 0;
}

.vk-ui-byline__text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.vk-ui-byline__name {
  font-family: var(--vk-type-body-font);
  font-size: var(--vk-type-body-size);
  font-weight: var(--vk-type-label-weight);
  line-height: var(--vk-type-label-line-height);
  color: var(--vk-on-surface);
  overflow-wrap: anywhere;
}

.vk-ui-byline__name.vk-ui-link { color: var(--vk-on-surface); }
.vk-ui-byline__name[data-blank] { font-weight: var(--vk-type-body-weight); color: var(--vk-on-surface-variant); }

.vk-ui-byline__meta {
  font-family: var(--vk-type-caption-font);
  font-size: var(--vk-type-caption-size);
  line-height: var(--vk-type-caption-line-height);
  color: var(--vk-on-surface-variant);
  overflow-wrap: anywhere;
}

.vk-ui-frame {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--vk-radius-lg);
  background-color: var(--vk-surface-container-high);
}

.vk-ui-frame--square { aspect-ratio: 1; }
.vk-ui-frame--wide { aspect-ratio: 16 / 9; }

.vk-ui-frame__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.vk-ui-frame__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--vk-space-2);
  padding: var(--vk-space-3);
  color: var(--vk-on-surface-variant);
  font-family: var(--vk-type-caption-font);
  font-size: var(--vk-type-caption-size);
  text-align: center;
}

/* ---------------------------------------------------------------------------------------------
 * UIS-03 states and feedback (shared/states.md). Loops are CSS animations: they run
 * `--vk-loop-iterations` times (0 under reduced motion, leaving the static first frame) and stop
 * entirely when the host marks the subtree inactive (`data-active="false"`).
 */

@keyframes vk-ui-spin { to { rotate: 360deg; } }

@keyframes vk-ui-pulse { 50% { opacity: 0.45; } }

@keyframes vk-ui-slide {
  from { inset-inline-start: -35%; }
  to { inset-inline-start: 100%; }
}

/* MicroArc ------------------------------------------------------------------------------------- */

.vk-ui-arc {
  display: inline-grid;
  flex: none;
  inline-size: var(--vk-size-icon);
  block-size: var(--vk-size-icon);
  color: currentColor;
}

.vk-ui-arc--sm {
  inline-size: var(--vk-size-indicator);
  block-size: var(--vk-size-indicator);
}

.vk-ui-arc svg {
  inline-size: 100%;
  block-size: 100%;
  animation: vk-ui-spin var(--vk-duration-loop) linear var(--vk-loop-iterations);
}

.vk-ui-arc__track,
.vk-ui-arc__arc {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

.vk-ui-arc__track { opacity: 0.24; }

/* A quarter-and-a-bit of the circle (2πr ≈ 56.5): reads as "working" even when static. */
.vk-ui-arc__arc {
  stroke-linecap: round;
  stroke-dasharray: 20 56.5;
  transform: rotate(-90deg);
  transform-origin: center;
}

/* EdgeProgress --------------------------------------------------------------------------------- */

.vk-ui-edge {
  display: grid;
  gap: var(--vk-space-1);
}

.vk-ui-edge__track {
  position: relative;
  display: block;
  block-size: var(--vk-size-edge-progress);
  overflow: hidden;
  border-radius: var(--vk-radius-full);
  background-color: var(--vk-primary-container);
}

.vk-ui-edge__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 35%;
  border-radius: inherit;
  background-color: var(--vk-primary);
}

.vk-ui-edge[data-mode="indeterminate"] .vk-ui-edge__bar {
  animation: vk-ui-slide var(--vk-duration-loop) var(--vk-ease-emphasized) var(--vk-loop-iterations);
}

.vk-ui-edge[data-mode="determinate"] .vk-ui-edge__bar {
  transition: inline-size var(--vk-duration-medium) var(--vk-ease-emphasized);
}

/* The name is announced from aria-label; it shows as text only when the bar cannot move. */
.vk-ui-edge__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-family: var(--vk-type-caption-font);
  font-size: var(--vk-type-caption-size);
  line-height: var(--vk-type-caption-line-height);
  color: var(--vk-on-surface-variant);
}

:where([data-motion="reduce"]) .vk-ui-edge__label,
.vk-ui-edge[data-active="false"] .vk-ui-edge__label {
  position: static;
  inline-size: auto;
  block-size: auto;
  clip-path: none;
  white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
  .vk-ui-edge__label {
    position: static;
    inline-size: auto;
    block-size: auto;
    clip-path: none;
    white-space: normal;
  }
}

/* SurfacePulse --------------------------------------------------------------------------------- */

.vk-ui-skeleton {
  display: grid;
  gap: var(--vk-space-3);
  padding: var(--vk-space-4);
  border-radius: var(--vk-radius-lg);
  background-color: var(--vk-surface-container-low);
  animation: vk-ui-pulse var(--vk-duration-pulse) ease-in-out var(--vk-loop-iterations);
}

.vk-ui-skeleton--text {
  padding: 0;
  background-color: transparent;
}

.vk-ui-skeleton__line,
.vk-ui-skeleton__avatar {
  display: block;
  block-size: 1em;
  border-radius: var(--vk-radius-sm);
  background-color: var(--vk-surface-container-highest);
}

.vk-ui-skeleton__line--title {
  inline-size: 70%;
  block-size: 1.5em;
}

.vk-ui-skeleton__line--meta { inline-size: 40%; }
.vk-ui-skeleton__line--short { inline-size: 60%; }

.vk-ui-skeleton__byline {
  display: flex;
  align-items: center;
  gap: var(--vk-space-3);
}

.vk-ui-skeleton__byline .vk-ui-skeleton__line--meta { flex: 0 1 40%; }

.vk-ui-skeleton__avatar {
  flex: none;
  inline-size: var(--vk-size-avatar-sm);
  block-size: var(--vk-size-avatar-sm);
  border-radius: var(--vk-radius-full);
}

.vk-ui-skeleton__stack {
  display: grid;
  flex: 1;
  gap: var(--vk-space-2);
}

[data-active="false"] .vk-ui-arc svg,
.vk-ui-arc[data-active="false"] svg,
.vk-ui-edge[data-active="false"] .vk-ui-edge__bar,
.vk-ui-skeleton[data-active="false"] { animation: none; }

/* StatePanel ----------------------------------------------------------------------------------- */

.vk-ui-panel {
  container: vk-state-panel / inline-size;
  display: grid;
  justify-items: start;
  gap: var(--vk-space-3);
  max-inline-size: var(--vk-measure);
  padding: var(--vk-space-6);
  border-radius: var(--vk-radius-lg);
  background-color: var(--vk-surface-container);
  color: var(--vk-on-surface);
}

.vk-ui-panel__symbol {
  display: inline-grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--vk-radius-full);
  background-color: var(--vk-surface-container-high);
  color: var(--vk-on-surface-variant);
}

.vk-ui-panel[data-tone="error"] .vk-ui-panel__symbol { background-color: var(--vk-error-container); color: var(--vk-on-error-container); }
.vk-ui-panel[data-tone="warning"] .vk-ui-panel__symbol { background-color: var(--vk-warning-container); color: var(--vk-on-warning-container); }
.vk-ui-panel[data-tone="info"] .vk-ui-panel__symbol { background-color: var(--vk-info-container); color: var(--vk-on-info-container); }
.vk-ui-panel[data-tone="success"] .vk-ui-panel__symbol { background-color: var(--vk-success-container); color: var(--vk-on-success-container); }

.vk-ui-panel .vk-ui-heading { margin: 0; }

.vk-ui-panel__message {
  margin: 0;
  overflow-wrap: break-word;
  color: var(--vk-on-surface-variant);
}

.vk-ui-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vk-space-2) var(--vk-space-3);
}

/* Primary recovery: with no typed action, the caller's leading standalone link (a GET recovery
 * that must work before hydration) takes the filled emphasis typed action 0 would have. Later
 * links stay secondary. Same container/content roles and state layer as a filled Button. */
.vk-ui-panel__actions > .vk-ui-link--standalone:first-child {
  position: relative;
  justify-content: center;
  max-inline-size: 100%;
  padding: var(--vk-density-control-padding) var(--vk-space-6);
  border-radius: var(--vk-radius-full);
  background-color: var(--vk-action-primary-container);
  color: var(--vk-action-primary-content);
  text-align: center;
}

.vk-ui-panel__actions > .vk-ui-link--standalone:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vk-duration-short) var(--vk-ease-emphasized);
}

.vk-ui-panel__actions > .vk-ui-link--standalone:first-child:hover { text-decoration-line: none; }
.vk-ui-panel__actions > .vk-ui-link--standalone:first-child:hover::after { opacity: 0.08; }
.vk-ui-panel__actions > .vk-ui-link--standalone:first-child:active::after { opacity: 0.12; }

/* Large text inside a narrow panel still needs room for whole Vietnamese words. */
@container vk-state-panel (max-width: 16rem) {
  .vk-ui-panel__actions .vk-ui-button,
  .vk-ui-panel__actions > .vk-ui-link--standalone:first-child { padding-inline: var(--vk-space-3); }
}

.vk-ui-panel__code {
  margin: 0;
  font-family: var(--vk-type-caption-font);
  font-size: var(--vk-type-caption-size);
  line-height: var(--vk-type-caption-line-height);
  color: var(--vk-on-surface-variant);
}

.vk-ui-panel__code code { font-family: var(--vk-type-code-font); overflow-wrap: anywhere; }

/* InlineNotice and Banner ---------------------------------------------------------------------- */

.vk-ui-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vk-space-2) var(--vk-space-3);
  padding: var(--vk-space-3) var(--vk-space-4);
  border-radius: var(--vk-radius-md);
  background-color: var(--vk-surface-container-high);
  color: var(--vk-on-surface);
}

.vk-ui-notice[data-tone="error"] { background-color: var(--vk-error-container); color: var(--vk-on-error-container); }
.vk-ui-notice[data-tone="warning"] { background-color: var(--vk-warning-container); color: var(--vk-on-warning-container); }
.vk-ui-notice[data-tone="info"] { background-color: var(--vk-info-container); color: var(--vk-on-info-container); }
.vk-ui-notice[data-tone="success"] { background-color: var(--vk-success-container); color: var(--vk-on-success-container); }

.vk-ui-notice--banner {
  border-radius: 0;
  padding-inline: var(--vk-space-6);
}

.vk-ui-notice__icon {
  display: inline-grid;
  flex: none;
  padding-block-start: 0.125em;
}

.vk-ui-notice__body {
  display: grid;
  flex: 1 1 14rem;
  gap: var(--vk-space-1);
  min-inline-size: 0;
}

.vk-ui-notice__title,
.vk-ui-notice__message {
  margin: 0;
  overflow-wrap: break-word;
}

.vk-ui-notice__title { font-weight: var(--vk-type-label-weight); }

/* Actions take the notice's own on-container colour, which meets its contrast pair. */
.vk-ui-notice .vk-ui-button--text,
.vk-ui-notice .vk-ui-icon-button { color: inherit; }

.vk-ui-notice .vk-ui-button--text .vk-ui-button__label { text-decoration: underline; text-underline-offset: 0.2em; }

/* StatusBadge and ListEnd ---------------------------------------------------------------------- */

.vk-ui-status {
  display: inline-flex;
  align-items: center;
  gap: var(--vk-space-2);
  max-inline-size: 100%;
  font-family: var(--vk-type-label-font);
  font-size: var(--vk-type-label-size);
  line-height: var(--vk-type-label-line-height);
  color: var(--vk-on-surface-variant);
}

.vk-ui-status__symbol { display: inline-grid; flex: none; }
.vk-ui-status__label { min-inline-size: 0; overflow-wrap: break-word; }

.vk-ui-status[data-tone="success"] .vk-ui-status__symbol { color: var(--vk-success); }
.vk-ui-status[data-tone="warning"] .vk-ui-status__symbol { color: var(--vk-warning); }
.vk-ui-status[data-tone="error"] .vk-ui-status__symbol { color: var(--vk-error); }
.vk-ui-status[data-tone="info"] .vk-ui-status__symbol { color: var(--vk-tertiary); }
.vk-ui-status[data-tone="warning"],
.vk-ui-status[data-tone="error"] { color: var(--vk-on-surface); }

.vk-ui-list-end {
  display: flex;
  align-items: center;
  gap: var(--vk-space-3);
  margin: 0;
  font-family: var(--vk-type-caption-font);
  font-size: var(--vk-type-caption-size);
  line-height: var(--vk-type-caption-line-height);
  color: var(--vk-on-surface-variant);
}

/* Snackbar ------------------------------------------------------------------------------------- */

.vk-ui-snackbar-host {
  position: sticky;
  inset-block-end: var(--vk-space-4);
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.vk-ui-snackbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vk-space-1) var(--vk-space-2);
  box-sizing: border-box;
  max-inline-size: min(36rem, 100%);
  padding: var(--vk-space-2) var(--vk-space-2) var(--vk-space-2) var(--vk-space-4);
  border-radius: var(--vk-radius-sm);
  background-color: var(--vk-inverse-surface);
  color: var(--vk-inverse-on-surface);
  box-shadow: var(--vk-shadow);
  pointer-events: auto;
}

.vk-ui-snackbar__text {
  flex: 1 1 12rem;
  margin: 0;
  overflow-wrap: break-word;
}

.vk-ui-snackbar__action,
.vk-ui-snackbar__close {
  box-sizing: border-box;
  min-block-size: var(--vk-density-control-height);
  min-inline-size: var(--vk-density-control-height);
  border: 0;
  border-radius: var(--vk-radius-full);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--vk-type-label-weight);
  cursor: pointer;
}

.vk-ui-snackbar__action { padding-inline: var(--vk-space-3); text-decoration: underline; text-underline-offset: 0.2em; }
.vk-ui-snackbar__close { display: inline-grid; place-items: center; padding: 0; }

.vk-ui-snackbar :focus-visible { outline-color: var(--vk-inverse-on-surface); }

/* Dialog and sheet ----------------------------------------------------------------------------- */

/* Spacing follows the text (rem) until the overlay is narrow for it (#174 F-02, proposed rule).
   At 200% text on a 320 CSS px phone the rem margin and padding left a 130 CSS px column, so the
   longest word crossed the panel's own padding and every action label broke into three lines.
   The margin is at most 5% of the viewport width and the gutter at most a tenth of the overlay's
   width, each between the two named tokens; at 100% text on any phone from 320 CSS px both are the
   token values they always were. The overlay is a size container so the gutter can read its own
   width; CMP spacing is in dp and does not scale with text, so it has no counterpart. */
.vk-ui-dialog {
  --vk-overlay-margin: clamp(var(--vk-space-2), 5vw, var(--vk-space-4));
  --vk-overlay-gutter: clamp(var(--vk-space-3), 10cqi, var(--vk-space-6));
  container: vk-overlay / inline-size;
  box-sizing: border-box;
  inline-size: min(32rem, calc(100% - 2 * var(--vk-overlay-margin)));
  max-inline-size: none;
  max-block-size: calc(100% - 2 * var(--vk-overlay-margin));
  padding: 0;
  border: 0;
  border-radius: var(--vk-radius-xl);
  background-color: var(--vk-surface-container-high);
  color: var(--vk-on-surface);
  box-shadow: var(--vk-shadow);
}

.vk-ui-dialog::backdrop { background-color: var(--vk-scrim); }

.vk-ui-dialog__panel {
  display: grid;
  gap: var(--vk-space-3);
  padding: var(--vk-overlay-gutter);
}

.vk-ui-dialog__title {
  margin: 0;
  font-family: var(--vk-type-title-font);
  font-size: var(--vk-type-title-size);
  font-weight: var(--vk-type-title-weight);
  line-height: var(--vk-type-title-line-height);
  overflow-wrap: break-word;
}

.vk-ui-dialog__context {
  margin: 0;
  color: var(--vk-on-surface-variant);
  overflow-wrap: break-word;
}

.vk-ui-dialog__content:empty { display: none; }

.vk-ui-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--vk-space-2) var(--vk-space-3);
  padding-block-start: var(--vk-space-2);
}

/* Buttons here take the same gutter, so a label keeps room for whole Vietnamese words. */
.vk-ui-dialog__actions .vk-ui-button { padding-inline: var(--vk-overlay-gutter); }

@media (max-width: 759.98px) {
  .vk-ui-dialog--sheet {
    inline-size: 100%;
    max-block-size: 85%;
    margin-block-end: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
}

/* ContentRegion -------------------------------------------------------------------------------- */

/* The progress edge has reserved space, so starting or ending a refresh never moves content. */
.vk-ui-region {
  position: relative;
  display: grid;
  gap: var(--vk-space-4);
  padding-block-start: calc(var(--vk-size-edge-progress) + var(--vk-space-2));
}

.vk-ui-region__progress {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

.vk-ui-region__progress .vk-ui-edge__label {
  justify-self: end;
  padding-inline: var(--vk-space-2);
  border-radius: var(--vk-radius-sm);
  background-color: var(--vk-surface);
}

/* Before the gate shows it, the skeleton keeps its space but is not painted. */
.vk-ui-region__skeleton[data-shown="false"] { visibility: hidden; }

.vk-ui-region__unlawful {
  margin: 0;
  padding: var(--vk-space-3);
  border: 1px dashed var(--vk-outline);
  border-radius: var(--vk-radius-md);
  font-family: var(--vk-type-code-font);
  color: var(--vk-on-surface);
}

/* ---------------------------------------------------------------------------------------------
 * UIS-04 shell and navigation (shared/navigation.md). These styles carry their own type and focus
 * ring, so a host shell can render them under document-level tokens (`<html data-theme>`) before
 * adopting UiRoot. Breakpoints are the #7 shell's CSS px (760/1100): media queries cannot read
 * custom properties. `data-layout="auto"` resolves NavLayout here, before hydration, from the
 * viewport, `data-compact-rail` and the host's `:root[data-rail]`; any other value is explicit.
 */

.vk-ui-scaffold {
  --vk-ui-rail-width: var(--vk-size-rail-compact);
  min-block-size: 100dvh;
}

@media (min-width: 1100px) {
  .vk-ui-scaffold[data-layout="auto"]:not([data-compact-rail]) { --vk-ui-rail-width: var(--vk-size-rail-expanded); }
}

:root[data-rail="expanded"] .vk-ui-scaffold[data-layout="auto"],
.vk-ui-scaffold[data-layout="rail:expanded"] { --vk-ui-rail-width: var(--vk-size-rail-expanded); }
:root[data-rail="compact"] .vk-ui-scaffold[data-layout="auto"] { --vk-ui-rail-width: var(--vk-size-rail-compact); }

.vk-ui-scaffold :focus-visible {
  outline: var(--vk-size-focus-ring) solid var(--vk-focus-ring);
  outline-offset: var(--vk-size-focus-offset);
}

/* Clipped until focused, wherever the scaffold sits (viewport or a preview frame) and at any
 * text size; focus shows it at the scaffold's top-left corner. */
.vk-ui-skip-link {
  position: absolute;
  inset-inline-start: var(--vk-space-4);
  inset-block-start: var(--vk-space-3);
  z-index: 10;
  padding: var(--vk-space-2) var(--vk-space-4);
  border-radius: var(--vk-radius-full);
  background: var(--vk-primary);
  color: var(--vk-on-primary);
}

/* A 1px box, not only clipped: clipped text would still widen the page's scrollable area. */
.vk-ui-skip-link:not(:focus) {
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vk-ui-scaffold__content {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  min-inline-size: 0;
  margin-inline-start: var(--vk-ui-rail-width);
}

.vk-ui-rail {
  box-sizing: border-box;
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--vk-ui-rail-width);
  block-size: 100dvh;
  /* Short or landscape windows scroll the rail, so the toggle and account stay reachable. */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--vk-space-4);
  /* Cap the inline inset so enlarged labels keep their room in the fixed-width rail. */
  padding: var(--vk-space-4) min(var(--vk-space-3), 12px);
  scroll-padding-block: var(--vk-space-2);
  background: var(--vk-surface-container-low);
  container: vk-ui-rail / inline-size;
  z-index: 5;
}

.vk-ui-rail__brand { padding-inline: var(--vk-space-2); }
.vk-ui-rail__primary { display: flex; flex-direction: column; gap: var(--vk-space-2); }
.vk-ui-rail__account { margin-block-start: auto; }
.vk-ui-rail__account .vk-ui-nav-item { inline-size: 100%; }

.vk-ui-rail-toggle {
  flex: none;
  align-self: start;
  /* The target centre follows the icon column even when density changes. */
  margin-inline-start: calc(var(--vk-space-3) + (var(--vk-size-icon) - var(--vk-density-control-height)) / 2);
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  inline-size: var(--vk-density-control-height);
  block-size: var(--vk-density-control-height);
  padding: 0;
  border: 0;
  border-radius: var(--vk-radius-full);
  color: var(--vk-on-surface-variant);
  background: transparent;
  cursor: pointer;
}

.vk-ui-rail-toggle:hover { background: var(--vk-state-hover); }
.vk-ui-rail-toggle:active { background: var(--vk-state-pressed); }

@media (forced-colors: active) {
  .vk-ui-rail-toggle:focus-visible { outline-color: Highlight; }
}

.vk-ui-nav-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--vk-space-3);
  min-block-size: var(--vk-size-nav-item);
  min-inline-size: 0;
  padding: var(--vk-space-3);
  border: 0;
  border-radius: var(--vk-radius-xl);
  background: transparent;
  color: var(--vk-on-surface-variant);
  font: inherit;
  font-weight: var(--vk-type-label-weight);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--vk-duration-short) var(--vk-ease-emphasized);
}

.vk-ui-nav-item .vk-ui-icon { flex: 0 0 var(--vk-size-icon); }
.vk-ui-nav-item__label { overflow-wrap: anywhere; min-inline-size: 0; }
.vk-ui-nav-item:hover { background: var(--vk-state-hover); }

.vk-ui-nav-item[aria-current="page"],
.vk-ui-nav-utility[aria-expanded="true"] {
  background: var(--vk-primary-container);
  color: var(--vk-on-primary-container);
}

/* The toggle follows the centred items in either stacked layout. */
@container vk-ui-rail (max-width: 100px) or (max-width: 10rem) {
  .vk-ui-rail-toggle { align-self: center; margin-inline-start: 0; }
}

/* A 220px rail at enlarged text needs the full label line. Keep the requested rail
   width and text size; only reflow its icon above the label within the same rail. */
@container vk-ui-rail (min-width: 101px) and (max-width: 10rem) {
  .vk-ui-rail .vk-ui-nav-item {
    flex-direction: column;
    gap: var(--vk-space-1);
    padding-inline: 0;
    text-align: center;
  }
}


/* Compact rail: icon above label, centred. */
@container vk-ui-rail (max-width: 100px) {
  .vk-ui-rail__brand { display: flex; justify-content: center; padding: 0; }
  .vk-ui-rail .vk-ui-nav-item {
    flex-direction: column;
    justify-content: center;
    gap: var(--vk-space-1);
    padding: var(--vk-space-3) 0;
    /* Reclaim the rail's side padding for Vietnamese words at 200% root text. */
    margin-inline: calc(-1 * var(--vk-space-1));
    text-align: center;
    font-size: var(--vk-type-caption-size);
  }
  /* Match the links' reclaimed side space on the account button with an explicit width. */
  .vk-ui-rail__account .vk-ui-nav-item { inline-size: calc(100% + 2 * var(--vk-space-1)); }
  /* A short frame's scrollbar also consumes width. Labels may use the side padding while
     the clickable surface and its focus ring stay inside the rail's scroll viewport. */
  .vk-ui-rail .vk-ui-nav-item__label { inline-size: calc(100% + var(--vk-space-1)); }
  .vk-ui-rail .vk-ui-nav-item:focus-visible { outline-offset: -3px; }
}

/* Anchored beside the toggle by the component (measured rect), outside the rail's containment. */
.vk-ui-tooltip {
  position: fixed;
  inset-inline-start: calc(var(--vk-ui-tooltip-x, var(--vk-ui-rail-width)) + 12px);
  inset-block-start: var(--vk-ui-tooltip-y, 6rem);
  transform: translateY(-50%);
  max-inline-size: min(20rem, 60vw);
  padding: var(--vk-space-2) var(--vk-space-3);
  border-radius: var(--vk-radius-sm);
  background: var(--vk-inverse-surface);
  color: var(--vk-inverse-on-surface);
  font-size: var(--vk-type-label-size);
  pointer-events: none;
  z-index: 10;
}

.vk-ui-tooltip[hidden] { display: none; }

/* Shared support recipe. Rail's tooltip stays a special sibling outside its scroll owner. */
.vk-ui-plain-tooltip { display: inline-flex; min-inline-size: 0; align-self: end; }
.vk-ui-plain-tooltip__text {
  position: fixed;
  left: 8px;
  top: 8px;
  z-index: 120;
  max-inline-size: min(20rem, calc(100vw - 16px));
  padding: var(--vk-space-2) var(--vk-space-3);
  border-radius: var(--vk-radius-sm);
  background: var(--vk-inverse-surface);
  color: var(--vk-inverse-on-surface);
  font-size: var(--vk-type-label-size);
  line-height: var(--vk-type-label-line-height);
  overflow-wrap: anywhere;
}
.vk-ui-plain-tooltip__text[hidden] { display: none; }
/* The transparent bridge lets a pointer reach the tooltip without crossing a dismissal gap. */
.vk-ui-plain-tooltip__text::before { content: ""; position: absolute; inset: -8px 0 100%; }
.vk-ui-plain-tooltip__text[data-side="above"]::before { inset: 100% 0 -8px; }
.vk-ui-supporting-details { min-inline-size: 0; }
.vk-ui-supporting-details > summary {
  display: flex;
  align-items: center;
  gap: var(--vk-space-2);
  min-inline-size: 48px;
  min-block-size: 48px;
  padding: var(--vk-space-2) var(--vk-space-3);
  border-radius: var(--vk-radius-md);
  background: var(--vk-surface-container-high);
  color: var(--vk-on-surface);
  cursor: pointer;
  list-style: none;
}
.vk-ui-supporting-details > summary::-webkit-details-marker { display: none; }
.vk-ui-supporting-details > summary:focus-visible { outline: var(--vk-size-focus-ring) solid var(--vk-focus-ring); outline-offset: var(--vk-size-focus-offset); }
.vk-ui-supporting-details__content { margin-block-start: var(--vk-space-2); padding: var(--vk-space-3); border-radius: var(--vk-radius-md); background: var(--vk-surface-container-low); }
@media (forced-colors: active) {
  .vk-ui-plain-tooltip__text { outline: 1px solid CanvasText; }
  .vk-ui-supporting-details > summary:focus-visible { outline-color: Highlight; }
}

.vk-ui-top-bar,
.vk-ui-bottom-nav { display: none; }

.vk-ui-top-bar {
  align-items: center;
  justify-content: space-between;
  gap: var(--vk-space-2);
  min-block-size: max(64px, 4rem);
  padding: var(--vk-space-3) var(--vk-space-4);
}

.vk-ui-bottom-nav {
  box-sizing: border-box;
  position: fixed;
  inset: auto 0 0;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--vk-space-1);
  /* Content determines growth at large text sizes; the minimum is a touch/shell size. */
  min-block-size: var(--vk-size-bottom-bar);
  padding: var(--vk-space-1) max(var(--vk-space-2), env(safe-area-inset-right)) calc(var(--vk-space-1) + env(safe-area-inset-bottom)) max(var(--vk-space-2), env(safe-area-inset-left));
  background: var(--vk-surface-container-low);
  z-index: 5;
}

/* Equal grid targets stretch to the tallest label. Start each icon/label stack at
 * the same inset so a one-line label shares the first row of a two-line label. */
.vk-ui-bottom-nav .vk-ui-nav-item {
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--vk-space-1);
  padding: var(--vk-space-1) 0;
  text-align: center;
  font-size: var(--vk-type-caption-size);
  line-height: var(--vk-type-caption-line-height);
}

/* Bar layouts: the rail leaves, the top bar and (unless hidden) the bottom bar appear. The
 * measured `--vk-ui-bar-height` keeps the end of the content and focused controls clear. */
@media (max-width: 759px) {
  .vk-ui-scaffold[data-layout="auto"] .vk-ui-rail { display: none; }
  .vk-ui-scaffold[data-layout="auto"] .vk-ui-scaffold__content { margin-inline-start: 0; padding-block-end: calc(var(--vk-ui-bar-height, max(var(--vk-size-bottom-bar), 5rem)) + 28px); }
  .vk-ui-scaffold[data-layout="auto"] .vk-ui-top-bar { display: flex; }
  .vk-ui-scaffold[data-layout="auto"] .vk-ui-bottom-nav { display: grid; }
  .vk-ui-scaffold[data-layout="auto"][data-hide-bar] .vk-ui-bottom-nav { display: none; }
  .vk-ui-scaffold[data-layout="auto"][data-hide-bar] .vk-ui-scaffold__content { padding-block-end: 0; }
  .vk-ui-scaffold[data-layout="auto"]:not([data-hide-bar]) .vk-ui-scaffold__content :is(a, button, input, select, textarea, [tabindex]) {
    scroll-margin-block-end: calc(var(--vk-ui-bar-height, 5rem) + 16px);
  }
}

/* Explicit layouts (previews, tests) live inside their frame instead of the viewport. */
.vk-ui-scaffold:not([data-layout="auto"]) {
  position: relative;
  display: flex;
  min-block-size: var(--vk-ui-scaffold-height, 100dvh);
}

.vk-ui-scaffold:not([data-layout="auto"]) .vk-ui-rail {
  position: sticky;
  flex: none;
  block-size: var(--vk-ui-scaffold-height, 100dvh);
}

.vk-ui-scaffold:not([data-layout="auto"]) .vk-ui-scaffold__content {
  flex: 1;
  min-block-size: 0;
  margin-inline-start: 0;
}

.vk-ui-scaffold:is([data-layout="bar"], [data-layout="bar:hidden"]) { flex-direction: column; }
.vk-ui-scaffold:is([data-layout="bar"], [data-layout="bar:hidden"]) .vk-ui-rail { display: none; }
.vk-ui-scaffold:is([data-layout="bar"], [data-layout="bar:hidden"]) .vk-ui-top-bar { display: flex; }
.vk-ui-scaffold[data-layout="bar"] .vk-ui-bottom-nav { display: grid; position: sticky; }

@media (prefers-reduced-motion: reduce) {
  .vk-ui-nav-item { transition: none; }
}

:where([data-motion="reduce"]) .vk-ui-nav-item { transition: none; }

/* Vink feature composition geometry; primitive styles and tokens stay in vink-ui. */
.vk-work-byline { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--vk-space-3); margin-bottom: var(--vk-space-2); }
/* Keep AuthorByline's avatar/name primitives; date shares its text column, even when the name wraps. */
.vk-work-byline > .vk-ui-byline { display: contents; }
.vk-work-byline .vk-ui-avatar { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.vk-work-byline .vk-ui-byline__text { grid-column: 2; grid-row: 1; align-self: end; }
.vk-work-byline__date { grid-column: 2; grid-row: 2; align-self: start; color: var(--vk-on-surface-variant); font-size: var(--vk-type-caption-size); line-height: var(--vk-type-caption-line-height); }
/* Reader rhythm: context caption → title → byline, each step separated before the body. */
.vk-reader__header { display: grid; justify-items: start; row-gap: var(--vk-space-2); }
.vk-reader__header > .vk-ui-heading { margin: 0; overflow-wrap: anywhere; }
.vk-reader__header > .vk-work-byline { margin: var(--vk-space-2) 0 0; }
.vk-public-row__link { container: vk-work-card / inline-size; display: block; padding: var(--vk-space-4); border-radius: var(--vk-radius-lg); background: var(--vk-surface-container-low); text-align: start; color: var(--vk-on-surface); text-decoration: none; }
.vk-public-row__link:hover { background: var(--vk-surface-container); }
.vk-public-row__link:hover h3 { text-decoration: underline; }
.vk-public-row__link > .vk-ui-heading { margin: 0; }
.vk-public-row__open { display: block; margin-top: var(--vk-space-2); color: var(--vk-primary); font-size: var(--vk-type-label-size); font-weight: var(--vk-type-label-weight); }
/* Keep the avatar visible at enlarged text; names wrap in the remaining track. */
.vk-public-row__link > .vk-ui-heading { margin-bottom: var(--vk-space-2); font-family: var(--vk-font-reading); }
.vk-public-row__link .vk-work-byline { min-width: 0; }
.vk-ui-byline__name { overflow-wrap: anywhere; }
/* DraftRow owns equal horizontal insets; its host groups the flat rows on one surface. */
.vk-draft-row__link { container: vk-draft-row / inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-width: 0; padding: var(--vk-space-3) var(--vk-space-4); border-radius: var(--vk-radius-md); background: transparent; color: var(--vk-on-surface); text-align: start; text-decoration: none; }
.vk-draft-row__text { display: grid; gap: var(--vk-space-1); min-width: 0; }
.vk-draft-row__open { display: inline-flex; margin-inline-start: var(--vk-space-3); align-items: center; color: var(--vk-primary); }
/* arrow-back mirrored is the registry's forward arrow; no extra icon asset. */
.vk-draft-row__open .vk-ui-icon { margin: 0; transform: scaleX(-1); }
.vk-draft-row__link:hover .vk-draft-row__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@container vk-draft-row (max-width: 30rem) {
  .vk-draft-row__text { grid-column: 1 / -1; }
  .vk-draft-row__open { display: none; }
}
.vk-draft-meta { display: flex; flex-wrap: wrap; gap: var(--vk-space-1); color: var(--vk-on-surface-variant); font-size: var(--vk-type-caption-size); font-weight: var(--vk-type-caption-weight); }
.vk-draft-resume { container: vk-draft-resume / inline-size; min-width: 0; }
.vk-draft-resume > .vk-ui-surface, .vk-draft-resume__content { display: grid; justify-items: start; gap: var(--vk-space-2); min-width: 0; }
@container vk-draft-resume (max-width: 480px) {
  .vk-draft-resume > .vk-ui-surface { padding: min(var(--vk-space-4), 16px); }
}
.vk-draft-resume__title { min-width: 0; overflow-wrap: anywhere; }
/* Keep the full heading in the accessibility tree; disclosure removes only the clamp. */
.vk-draft-resume:has(button[aria-expanded="false"]) .vk-draft-resume__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.vk-draft-resume__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vk-space-2); max-inline-size: 100%; min-inline-size: 0; }
.vk-draft-resume__disclosure { min-inline-size: 0; max-inline-size: 100%; text-align: start; }
.vk-draft-resume__continue { justify-content: center; min-block-size: 48px; max-width: 100%; padding: var(--vk-density-control-padding) var(--vk-space-6); border-radius: var(--vk-radius-full); background: var(--vk-action-primary-container); color: var(--vk-action-primary-content); }
.vk-draft-resume__continue:hover { background: color-mix(in srgb, var(--vk-action-primary-content) 8%, var(--vk-action-primary-container)); }
/* The rem threshold follows enlarged text and the actual pattern width, including galleries. */
@container vk-draft-resume (min-width: 38rem) {
  .vk-draft-resume > .vk-ui-surface { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--vk-space-6); }
  .vk-draft-resume__disclosure { display: none; }
  .vk-draft-resume:has(button[aria-expanded="false"]) .vk-draft-resume__title { display: block; overflow: visible; -webkit-line-clamp: unset; }
}
.vk-feedback-item { padding-block: var(--vk-space-4); border-bottom: 1px solid var(--vk-outline-variant); overflow-wrap: anywhere; }
.vk-feedback-composer { display: grid; gap: var(--vk-space-3); }
.vk-discussion-thread { display: grid; gap: var(--vk-space-3); min-width: 0; }
.vk-discussion-comment { display: grid; gap: var(--vk-space-3); min-width: 0; padding: 0; border: 0; scroll-margin-block: var(--vk-space-6); }
.vk-discussion-thread > .vk-discussion-comment { padding: 0 16px; }
.vk-discussion-comment p { margin: 0; }
.vk-discussion-byline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vk-space-3); min-width: 0; }
.vk-discussion-byline > div { min-width: 0; }
.vk-discussion-name { font-size: var(--vk-type-body-size); font-weight: var(--vk-type-label-weight); }
.vk-discussion-byline time { color: var(--vk-on-surface-variant); font-size: var(--vk-type-caption-size); }
.vk-discussion-reply-group { padding: 16px; border-radius: var(--vk-radius-lg); background: var(--vk-surface-container); min-width: 0; }
.vk-discussion-reply-heading { margin: 0 0 var(--vk-space-3); font-weight: var(--vk-type-label-weight); }
.vk-discussion-shared-reason { margin: 0; padding-inline: 16px; font-size: var(--vk-type-caption-size); color: var(--vk-on-surface-variant); }
.vk-discussion-comment:focus { outline: var(--vk-size-focus-ring) solid var(--vk-focus-ring); outline-offset: var(--vk-size-focus-offset); }
.vk-discussion-replies { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; border: 0; }
.vk-discussion-replies > li { min-width: 0; }
.vk-discussion-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.vk-discussion-context { color: var(--vk-on-surface-variant); font-size: var(--vk-type-caption-size); }
.vk-discussion-status { color: var(--vk-on-surface); font-weight: var(--vk-type-label-weight); }
.vk-discussion-actions { display: flex; flex-wrap: wrap; gap: var(--vk-space-2); }
@media (max-width: 759px) {
  /* A complete literary title can be long: use the title hierarchy on narrow readers,
     retaining rem-based text enlargement and the same semantic H1. */
  .vk-reader__header > .vk-ui-heading {
    font-size: var(--vk-type-title-size);
    line-height: var(--vk-type-title-line-height);
    letter-spacing: var(--vk-type-title-tracking);
  }
}

.vk-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vk-space-2) var(--vk-space-4);
  min-width: 0;
  padding: var(--vk-space-2) var(--vk-space-3);
  border-radius: var(--vk-radius-lg);
  background: var(--vk-surface-container-high);
}

.vk-editor-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: var(--vk-space-1);
}

.vk-editor-toolbar__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vk-space-2); flex: 1 1 7rem; min-width: 0; }
.vk-editor-toolbar__status > .vk-save-status { flex: 1; }
.vk-editor-toolbar__status > details[open] { flex-basis: 100%; }
.vk-editor-toolbar__status .vk-ui-supporting-details__content > p { margin: 0; }
.vk-editor-toolbar__actions > :is(.vk-ui-action, .vk-ui-plain-tooltip) { flex: 0 1 auto; min-width: 0; align-self: center; }
.vk-editor-toolbar__actions .vk-ui-button { width: 100%; }
.vk-editor-toolbar .vk-ui-button__label { overflow-wrap: normal; }
.vk-editor-toolbar .vk-save-status { min-width: 0; }


.vk-draft-row__title { font-family: var(--vk-type-title-font); font-size: var(--vk-type-title-size); font-weight: var(--vk-type-title-weight); line-height: var(--vk-type-title-line-height); overflow-wrap: anywhere; }

.vk-draft-row__link:hover { text-decoration: none; background: var(--vk-surface-container); }
.vk-draft-meta > span { min-width: 0; overflow-wrap: anywhere; }

/* EndorsementAction (LVE #73): sits with the target's other interactions, never as the CTA. */
.vk-endorsement { display: inline-flex; max-inline-size: 100%; }

/* TagSelector / TagChip (TAG-PR-05): two groups in flow, wrapping chips, candidates as a list.
   Selected chips reuse the chip shape; retired and refused states are written, not colour-only. */
.vk-tag-selector { display: grid; gap: var(--vk-space-6); min-inline-size: 0; }
.vk-tag-group { display: grid; gap: var(--vk-space-3); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.vk-tag-group__legend { padding: 0; margin-block-end: var(--vk-space-1); color: var(--vk-on-surface); font-family: var(--vk-type-label-font); font-size: var(--vk-type-label-size); font-weight: var(--vk-type-label-weight); line-height: var(--vk-type-label-line-height); }
.vk-tag-group__count { color: var(--vk-on-surface-variant); font-weight: var(--vk-type-body-weight); }
.vk-tag-group__help { margin: 0; color: var(--vk-on-surface-variant); font-size: var(--vk-type-caption-size); line-height: var(--vk-type-caption-line-height); overflow-wrap: anywhere; }
.vk-tag-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--vk-space-2); min-inline-size: 0; margin: 0; padding: 0; list-style: none; }
.vk-tag-chips > li { display: flex; min-inline-size: 0; max-inline-size: 100%; }
.vk-tag-chip { display: inline-grid; gap: var(--vk-space-1); min-inline-size: 0; max-inline-size: 100%; }
.vk-tag-chip__body { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--vk-space-2); min-inline-size: 0; min-block-size: var(--vk-density-control-height); padding-inline-start: var(--vk-space-3); border-radius: var(--vk-radius-sm); background: var(--vk-secondary-container); color: var(--vk-on-secondary-container); }
.vk-tag-chip__label { min-inline-size: 0; overflow-wrap: anywhere; font-family: var(--vk-type-label-font); font-size: var(--vk-type-label-size); font-weight: var(--vk-type-label-weight); line-height: var(--vk-type-label-line-height); }
.vk-tag-chip__badge { font-size: var(--vk-type-caption-size); line-height: var(--vk-type-caption-line-height); }
.vk-tag-chip[data-status="retired"] .vk-tag-chip__body { background: var(--vk-warning-container); color: var(--vk-on-warning-container); }
.vk-tag-chip[data-status="problem"] .vk-tag-chip__body { background: var(--vk-error-container); color: var(--vk-on-error-container); }
.vk-tag-chip__body .vk-ui-icon-button { color: inherit; background: transparent; }
.vk-tag-chip__note { display: flex; align-items: flex-start; gap: var(--vk-space-1); max-inline-size: var(--vk-measure); color: var(--vk-on-surface-variant); font-size: var(--vk-type-caption-size); line-height: var(--vk-type-caption-line-height); overflow-wrap: anywhere; }
.vk-tag-chip[data-status="problem"] .vk-tag-chip__note { color: var(--vk-error); }
.vk-tag-chip__note .vk-ui-icon { flex: none; margin-block-start: 0.1em; }
.vk-tag-chip__replace { display: flex; }
.vk-tag-query { display: grid; gap: var(--vk-space-2); min-inline-size: 0; }
.vk-tag-query__status { margin: 0; color: var(--vk-on-surface-variant); font-size: var(--vk-type-caption-size); line-height: var(--vk-type-caption-line-height); overflow-wrap: anywhere; }
.vk-tag-query__status:empty { display: none; }
.vk-tag-options { display: grid; gap: var(--vk-space-1); min-inline-size: 0; margin: 0; padding: 0; list-style: none; }
.vk-tag-option { display: grid; min-inline-size: 0; border-radius: var(--vk-radius-md); background: var(--vk-surface-container-low); }
.vk-tag-option .vk-ui-action { display: flex; min-inline-size: 0; }
.vk-tag-option .vk-ui-button { justify-content: flex-start; inline-size: 100%; text-align: start; }
.vk-tag-option .vk-ui-button__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--vk-space-2); min-inline-size: 0; overflow-wrap: anywhere; }
.vk-tag-option__alias { color: var(--vk-on-surface-variant); font-size: var(--vk-type-caption-size); font-weight: var(--vk-type-body-weight); }
.vk-tag-option__description { margin: 0; padding: 0 var(--vk-space-4) var(--vk-space-3) calc(var(--vk-space-3) + var(--vk-size-icon-sm) + var(--vk-space-2)); color: var(--vk-on-surface-variant); font-size: var(--vk-type-caption-size); line-height: var(--vk-type-caption-line-height); overflow-wrap: anywhere; }
.vk-tag-browse .vk-tag-options { margin-block-start: var(--vk-space-2); }

/* Reader composition: one tonal surface and one native field focus owner. */
.vk-feedback-composer--tonal { background: var(--vk-surface-container-high); border-radius: var(--vk-radius-xl); padding: 16px; min-width: 0; }
.vk-feedback-composer--tonal .vk-ui-field__control { background: transparent; }
.vk-feedback-composer--tonal .vk-ui-input--area { min-height: 48px; resize: vertical; }
.vk-feedback-composer--tonal:focus-within .vk-ui-input--area,
.vk-feedback-composer--tonal[data-filled] .vk-ui-input--area { min-height: 4lh; }
.vk-feedback-composer--tonal > .vk-ui-action { justify-self: end; max-width: 100%; }
.vk-feedback-draft-note { margin: 0; color: var(--vk-on-surface-variant); font-size: var(--vk-type-caption-size); }
@media (max-width: 359px) {
  .vk-discussion-thread > .vk-discussion-comment, .vk-discussion-shared-reason { padding-inline: 12px; }
  .vk-discussion-reply-group, .vk-feedback-composer--tonal { padding-inline: 12px; }
}

.vk-feedback-composer--tonal > .vk-ui-action .vk-ui-button > .vk-ui-icon { transform: rotate(180deg); }
.vk-discussion-delivery[hidden] { display: none; }
.vk-discussion-composer-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vk-space-2); min-width: 0; }
.vk-discussion-composer-heading > p { margin: 0; overflow-wrap: anywhere; }

.vk-discussion-byline :is(time, .vk-discussion-context, .vk-ui-link) { font-size: var(--vk-type-caption-size); line-height: var(--vk-type-caption-line-height); }
.vk-discussion-thread > .vk-muted { margin: 0; padding-inline: 16px; }

.vk-discussion-byline .vk-ui-link { display: block; }
.vk-discussion-actions > .vk-ui-action:first-child .vk-ui-button--text { padding-inline-start: 0; justify-content: flex-start; }
.vk-feedback-composer--tonal .vk-ui-input--area { padding-inline: 0; }
.vk-feedback-composer--tonal .vk-ui-field__label { margin-inline: 0; }
.vk-feedback-composer--tonal .vk-ui-field__control:has(> .vk-ui-input:focus) { outline-offset: 4px; }

/*
 * Vink page/layout glue and the CodeMirror host. Shared primitives live in vink-ui. Material 3 Expressive in Vink's
 * Lavender palette; docs/design/README.md records the baseline and sources. Reading and writing
 * surfaces stay quiet; expression is concentrated in headings, shape and the primary action.
 *
 * Token values (`--vk-*` colour, type, shape, spacing, density and motion roles, light/dark and
 * the self-hosted @font-face rules) are NOT authored here: they come from
 * packages/ui-system/shared/tokens.json through `cargo xtask ui-tokens`, which writes
 * packages/ui-system/leptos/style/tokens.css. `cargo xtask build` serves that file followed by
 * this one as /pkg/vink.css. Components consume roles; add a role to tokens.json before a
 * one-off colour.
 *
 * Theme: light by default; dark follows the system unless `<html data-theme="light|dark">`
 * chooses (generated in tokens.css; the app's appearance bootstrap sets the attribute).
 */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--vk-surface);
  color: var(--vk-on-surface);
  font-family: var(--vk-font-ui);
  font-size: var(--vk-type-body-size);
  line-height: 1.6;
}

a {
  color: var(--vk-primary);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--vk-focus);
  outline-offset: 2px;
  border-radius: var(--vk-radius-sm);
}

/* Shell geometry, rail, bars, skip link and tooltip come from the UI system (vink-ui.css,
 * shared/navigation.md). The app owns the Tôi overlay content and the Khám phá brand. */

.vk-brand {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--vk-density-control-height);
  color: var(--vk-on-surface);
  text-decoration: none;
}

/* V-pen R1 (#117): the outlined wordmark is part of the selected artwork.
 * Reserve its intrinsic ratio before decoding; rem sizing follows text enlargement. */
.vk-brand__lockup {
  display: inline-block;
  flex-shrink: 0;
  width: calc(2.25rem * 1018 / 410);
  height: 2.25rem;
  background: url("brand/vpen-r1-lockup-light.svg") center / contain no-repeat;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vk-brand__lockup { background-image: url("brand/vpen-r1-lockup-dark.svg"); }
}
:root[data-theme="dark"] .vk-brand__lockup { background-image: url("brand/vpen-r1-lockup-dark.svg"); }

@media (forced-colors: active) {
  .vk-brand__lockup {
    forced-color-adjust: none;
    background: LinkText !important;
    mask: url("brand/vpen-r1-lockup-mono.svg") center / contain no-repeat;
  }
}

/* R2.2 · Tôi and the rail utility share one appearance recipe on native RadioGroup. */
:root[data-text="200"] { font-size: 200%; }

.vk-profile-menu {
  position: fixed;
  inset: auto;
  inset-inline-start: calc(var(--vk-ui-rail-width) + 16px);
  inset-block-end: 16px;
  margin: 0;
  inline-size: min(30rem, 540px, calc(100vw - var(--vk-ui-rail-width) - 32px));
  max-block-size: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 16px;
  padding: clamp(.875rem, 3vw, var(--vk-space-6));
  border: 0;
  border-radius: var(--vk-radius-xl);
  background: var(--vk-surface-container-low);
  color: var(--vk-on-surface);
}
.vk-profile-menu::backdrop { background: var(--vk-scrim); }
.vk-profile-menu[open] { display: flex; flex-direction: column; gap: var(--vk-space-3); }
.vk-profile-menu > * { flex-shrink: 0; }
.vk-profile-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--vk-space-2); }
.vk-profile-heading .vk-ui-icon-button { flex: none; min-inline-size: 48px; min-block-size: 48px; }
.vk-profile-menu #open-me { align-self: flex-start; padding-inline-start: 0; }
.vk-profile-menu #open-me .vk-ui-button__label { display: inline-flex; align-items: center; gap: 8px; }
.vk-profile-menu #open-me [data-appearance-icon] { inline-size: 16px; block-size: 16px; }

.vk-appearance-title {
  display: flex; align-items: center; gap: var(--vk-space-3);
  margin: 0; font: var(--vk-type-title-weight) var(--vk-type-title-size)/var(--vk-type-title-line-height) var(--vk-font-ui);
}
.vk-appearance-mark {
  display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px;
  border-radius: var(--vk-radius-md); color: var(--vk-on-primary-container);
  background: var(--vk-primary-container);
}
.vk-profile-heading .vk-appearance-title { gap: 8px; }
.vk-profile-heading .vk-appearance-mark { inline-size: 32px; block-size: 32px; border-radius: var(--vk-radius-sm); }
.vk-profile-heading .vk-appearance-mark > span { inline-size: 20px; block-size: 20px; }
.vk-appearance-card {
  display: grid; gap: var(--vk-space-4); padding: clamp(14px, 3vw, var(--vk-space-6));
  border-radius: var(--vk-radius-xl); background: var(--vk-surface-container-low);
  container: vk-appearance / inline-size;
}
.vk-appearance-region { display: grid; gap: var(--vk-space-4); min-inline-size: 0; }
.vk-appearance-row { display: grid; gap: var(--vk-space-2) var(--vk-space-4); min-inline-size: 0; }
.vk-appearance-row h3 {
  display: flex; align-items: center; align-self: center; gap: var(--vk-space-3);
  margin: 0; font: var(--vk-type-label-weight) var(--vk-type-body-size)/var(--vk-type-label-line-height) var(--vk-font-ui);
}
.vk-appearance-row h3 > span { color: var(--vk-on-surface-variant); }
.vk-profile-menu .vk-appearance-row h3 { gap: 8px; font-size: var(--vk-type-label-size); }
.vk-profile-menu .vk-appearance-row h3 > span { inline-size: 18px; block-size: 18px; }
.vk-appearance-card .vk-appearance-row + .vk-appearance-row {
  border-block-start: 1px solid var(--vk-outline-variant); padding-block-start: var(--vk-space-4);
}
@container vk-appearance (min-width: 42rem) {
  .vk-appearance-row { grid-template-columns: 30% minmax(0, 1fr); }
}
.vk-appearance-region__choices { min-inline-size: 0; }
.vk-appearance-region .vk-ui-group { flex-flow: row wrap; gap: 8px 12px; }
.vk-appearance-region .vk-ui-group > legend {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.vk-appearance-region .vk-ui-choice__target {
  position: relative; display: inline-grid; grid-template-columns: 22px minmax(0, 1fr) 12px;
  align-items: center; gap: 8px; min-inline-size: 0; max-inline-size: 100%;
  min-block-size: 48px; padding: 6px 12px; border: 0; border-radius: var(--vk-radius-full);
  background: var(--vk-surface-container-high); color: var(--vk-on-surface);
  font: var(--vk-type-label-weight) var(--vk-type-label-size)/1.35 var(--vk-font-ui);
  transition: background-color var(--vk-duration-short) ease, color var(--vk-duration-short) ease;
}
.vk-appearance-region .vk-ui-choice__input {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit;
}
.vk-appearance-region .vk-ui-choice__label { min-inline-size: 0; text-wrap: balance; }
.vk-appearance-row label::before,
.vk-appearance-row label::after,
[data-appearance-icon],
.vk-main:has(> .vk-me) + .vk-footer summary::before,
.vk-main:has(> .vk-me) + .vk-footer summary::after {
  display: block; flex: none; inline-size: 24px; block-size: 24px; background: currentColor;
  mask-position: center; mask-repeat: no-repeat; mask-size: contain;
}
.vk-appearance-row label::before, .vk-appearance-row label::after { content: ""; }
.vk-appearance-row label::before { inline-size: 22px; block-size: 22px; color: var(--vk-on-surface-variant); }
.vk-appearance-row label::after { inline-size: 12px; block-size: 12px; opacity: 0; }

[data-appearance-icon="system"], .vk-appearance-row label:has([value="system"])::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%2021h6m-3-5v5M4.5%204h15A1.5%201.5%200%200%201%2021%205.5v9a1.5%201.5%200%200%201-1.5%201.5h-15A1.5%201.5%200%200%201%203%2014.5v-9A1.5%201.5%200%200%201%204.5%204Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.vk-appearance-row label:has([value="light"])::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202v2m0%2016v2M2%2012h2m16%200h2M4.9%204.9l1.4%201.4m11.4%2011.4%201.4%201.4m0-14.2-1.4%201.4M6.3%2017.7l-1.4%201.4M17%2012a5%205%200%201%201-10%200%205%205%200%200%201%2010%200Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.vk-appearance-row label:has([value="dark"])::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20.8%2014.3A8.8%208.8%200%200%201%209.7%203.2a9%209%200%201%200%2011.1%2011.1Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
[data-appearance-icon="100"], .vk-appearance-row label:has([value="100"])::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20transform%3D%22translate%2812%2012%29%20scale%28.82%29%20translate%28-12%20-12%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10.5%203h3l7%2018h-3.2l-1.8-5h-7l-1.8%205H3.5zm-1%2010.5h5L12%206.8z%22%2F%3E%3C%2Fsvg%3E"); }
.vk-appearance-row label:has([value="200"])::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20transform%3D%22translate%2812%2012%29%20scale%281%29%20translate%28-12%20-12%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10.5%203h3l7%2018h-3.2l-1.8-5h-7l-1.8%205H3.5zm-1%2010.5h5L12%206.8z%22%2F%3E%3C%2Fsvg%3E"); }
[data-appearance-icon="rail"] { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%205v14M4%205h16a1.5%201.5%200%200%201%201.5%201.5v11A1.5%201.5%200%200%201%2020%2019H4a1.5%201.5%200%200%201-1.5-1.5v-11A1.5%201.5%200%200%201%204%205Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.vk-appearance-row label:has([value="auto"])::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%205h16M4%2010h16M4%2015h16M4%2020h16%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.vk-appearance-row label:has([value="expanded"])::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%207h18M10%207v13M5%204h14a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.vk-appearance-row label:has([value="compact"])::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%207h18M7%207v13M5%204h14a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2Z%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
[data-appearance-icon="palette"] { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018c1.2%200%202-.8%202-1.8%200-.8-.5-1.2-.5-2%200-1.1.9-2%202-2H17a4%204%200%200%200%204-4c0-4.4-4-8.2-9-8.2ZM7.5%2011h.1m2.4-3h.1m4.2-.5h.1m3.4%202.4h.1%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
[data-appearance-icon="forward"] { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2012h14m-6-6%206%206-6%206%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.vk-appearance-row label::after { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m5%2012%204%204L19%206%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.vk-main:has(> .vk-me) + .vk-footer summary::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%203h6m-5%200v7l-5.8%208.7A1.5%201.5%200%200%200%205.5%2021h13a1.5%201.5%200%200%200%201.3-2.3L14%2010V3M8%2015h8%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.vk-main:has(> .vk-me) + .vk-footer summary::after { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m7%2010%205%205%205-5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }

.vk-appearance-region label:has(:checked) { background: var(--vk-primary); color: var(--vk-on-primary); }
.vk-appearance-region label:has(:checked)::before { color: inherit; }
.vk-appearance-region label:has(:checked)::after { opacity: 1; }
.vk-appearance-region label:hover:not(:has(:checked, :disabled)) { background: var(--vk-surface-container-highest); }
.vk-appearance-region label:has(:focus-visible) { outline: 2px solid var(--vk-focus); outline-offset: -2px; }
.vk-appearance-region label:has(:checked):has(:focus-visible) { outline-color: var(--vk-on-primary); }
.vk-appearance-rail-hint { display: none; margin: 8px 0 0; color: var(--vk-on-surface-variant); font-size: var(--vk-type-label-size); }
@media (prefers-reduced-motion: reduce) {
  .vk-appearance-region label { transition: none; }
}
@media (forced-colors: active) {
  .vk-profile-menu { outline: 1px solid CanvasText; }
  .vk-appearance-region label { border: 1px solid ButtonText; }
  .vk-appearance-region label::before,
  .vk-appearance-region label::after,
  [data-appearance-icon],
  .vk-main:has(> .vk-me) + .vk-footer summary::before,
  .vk-main:has(> .vk-me) + .vk-footer summary::after { forced-color-adjust: none; color: inherit; }
  .vk-appearance-region label:has(:checked) { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .vk-appearance-region label:has(:focus-visible) { outline-color: Highlight; }
  .vk-appearance-region label:has(:checked):has(:focus-visible) { outline-color: HighlightText; }
}
.vk-me { display: grid; gap: var(--vk-space-6); padding-block-start: var(--vk-space-8); }
.vk-me > h1 {
  margin: 0; font: var(--vk-type-display-weight) var(--vk-type-display-size)/var(--vk-type-display-line-height) var(--vk-type-display-font);
  letter-spacing: var(--vk-type-display-tracking);
}
.vk-account-status {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--vk-space-3);
  min-block-size: 96px; padding: 16px; border-radius: var(--vk-radius-lg);
  background: var(--vk-surface-container-low); container: vk-account / inline-size;
}
.vk-account-status > div { min-inline-size: 0; flex: 1 1 12em; }
.vk-account-status h2 { margin: 0; font-family: var(--vk-font-ui); }
.vk-account-status p { margin: 0; overflow-wrap: anywhere; }
.vk-account-avatar, .vk-nav-account-avatar { display: inline-grid; place-items: center; }
.vk-nav-account-avatar .vk-ui-avatar { --vk-ui-avatar-size: var(--vk-size-icon); }
.vk-account-illustration { display: none; }
@container vk-account (min-width: 32rem) {
  .vk-account-status > div { padding-inline-end: 225px; }
  .vk-account-illustration {
    display: block; position: absolute; inset-inline-end: 24px; inset-block-end: 4px;
    inline-size: 210px; block-size: 80px; pointer-events: none;
  }
}
.vk-account { display: grid; gap: var(--vk-space-4); }
.vk-account-session { display: grid; gap: var(--vk-space-3); justify-items: start; }
.vk-account-session:empty { display: none; }
.vk-account-session p { margin: 0; overflow-wrap: anywhere; }
.vk-account-form { display: grid; gap: var(--vk-space-3); inline-size: min(100%, 28rem); min-inline-size: 0; }
.vk-account-form .vk-account-form { inline-size: 100%; }
.vk-account-error { color: var(--vk-error); }
/* Every field in this surface is required; the native accessibility state carries that fact. */
.vk-account-form .vk-ui-field__required { display: none; }
.vk-auth-alternatives { row-gap: 0; }
/* The button's reserved spinner and aria-describedby carry progress without moving the form. */
.vk-account .vk-ui-action:has(> [aria-busy="true"]) > .vk-ui-action__note {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.vk-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vk-space-2) var(--vk-space-3); }
.vk-main:has(> .vk-me),
.vk-main:has(> .vk-me) + .vk-footer {
  max-inline-size: calc(54rem + 96px); padding-inline: clamp(16px, 3.3vw, 48px);
}
.vk-main:has(> .vk-me) { flex: none; padding-block: 0; }
.vk-main:has(> .vk-me) + .vk-footer summary { background: transparent; padding-inline: 0; }
.vk-main:has(> .vk-me) + .vk-footer summary > .vk-ui-icon { display: none; }
.vk-main:has(> .vk-me) + .vk-footer summary::before { content: ""; inline-size: 20px; block-size: 20px; color: var(--vk-primary); }
.vk-main:has(> .vk-me) + .vk-footer summary::after { content: ""; inline-size: 16px; block-size: 16px; }
.vk-main:has(> .vk-me) + .vk-footer details[open] summary::after { transform: rotate(180deg); }
@media (max-width: 759px) {
  .vk-appearance-rail-hint { display: block; }
  .vk-main:has(> .vk-me),
  .vk-main:has(> .vk-me) + .vk-footer { padding-inline: 16px; }
  .vk-ui-scaffold:not([data-hide-bar]) :is(.vk-footer summary, .vk-me .vk-ui-choice__input, .vk-account :is(input, button, a)) {
    scroll-margin-block-end: calc(var(--vk-ui-bar-height, 5rem) + 16px);
  }
}

.vk-main {
  flex: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--vk-space-4) var(--vk-space-4) var(--vk-space-12);
}

.vk-main:focus {
  outline: none;
}

.vk-footer {
  max-width: 72rem;
  width: 100%;
  margin: 0 auto;
  padding: var(--vk-space-6) var(--vk-space-4);
  color: var(--vk-on-surface-variant);
  font-size: var(--vk-type-label-size);
}
.vk-footer > details { max-inline-size: fit-content; }
.vk-footer > details > summary { inline-size: fit-content; }
.vk-footer .vk-ui-supporting-details__content > p { margin: 0; }

/* Public reading (#9/#14): v4 density, current publication summaries only. */

.vk-explore { container: vk-explore / inline-size; margin-block: var(--vk-space-4); }

/* Let Explore gain the width released by the rail while keeping its right edge fixed. */
@media (min-width: 760px) {
  .vk-main:has(> .vk-explore),
  .vk-main:has(> .vk-explore) + .vk-footer {
    max-inline-size: calc(72rem + var(--vk-size-rail-expanded) - var(--vk-ui-rail-width));
  }
}

.vk-explore__heading { margin-bottom: var(--vk-space-6); }

.vk-explore__heading p {
  margin: var(--vk-space-2) 0 0;
  color: var(--vk-on-surface-variant);
  font-size: var(--vk-type-label-size);
  line-height: var(--vk-type-label-line-height);
}

/* H1 stays one step above the stream's Title H2; Display on wide pages, Headline when narrow. */
@media (max-width: 759px) {
  .vk-explore__heading > .vk-ui-heading {
    font-size: var(--vk-type-headline-size);
    line-height: var(--vk-type-headline-line-height);
    letter-spacing: var(--vk-type-headline-tracking);
  }
}

.vk-discover-grid { display: grid; gap: var(--vk-space-6); }
.vk-discover-grid > * { min-width: 0; }

/* Stream header: H2 and the loaded-count status share a row; DOM order stays heading → count. */
#community-stream { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: baseline; column-gap: var(--vk-space-4); }
#community-stream > *, #public-collection > *, #public-results > * { grid-column: 1 / -1; }
#community-stream > #works-title { grid-column: 1; margin: 0; }
/* READ-02 wrapper (refresh facts) must not become a grid item: the count stays beside the H2. */
#public-collection, #public-results { display: contents; }
#public-results > .vk-public-scope { grid-column: 2; grid-row: 1; margin: 0; text-align: end; }
.vk-public-scope { font-size: var(--vk-type-caption-size); }
#public-results > .vk-public-list, #public-results > [data-testid], #public-collection > [data-testid], #community-stream > [data-testid] { margin-top: var(--vk-space-3); }
@container vk-explore (max-width: 28rem) {
  #public-results > .vk-public-scope { grid-column: 1 / -1; grid-row: auto; margin-top: var(--vk-space-1); text-align: start; }
}
/* Empty, no-match and unavailable are one recovery slot inside the stream: centered, full column,
 * titled below the H2 they belong to. Reader keeps its own (H1) unavailable panel. */
#community-stream [data-testid^=public-] > .vk-ui-panel { max-inline-size: none; justify-items: center; text-align: center; }
#community-stream [data-testid^=public-] .vk-ui-heading {
  font-size: var(--vk-type-title-size);
  line-height: var(--vk-type-title-line-height);
  letter-spacing: var(--vk-type-title-tracking);
}
#community-stream [data-testid^=public-] .vk-ui-panel__actions { justify-content: center; }

.vk-discovery-tools {
  display: grid;
  grid-template-areas: "search brand";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--vk-space-2) var(--vk-space-4);
  margin-bottom: var(--vk-space-6);
}
.vk-discovery-tools > .vk-brand { grid-area: brand; justify-self: end; }
.vk-public-search { grid-area: search; max-inline-size: 48rem; margin: 0; }
@media (max-width: 759px) {
  .vk-explore { margin-inline: min(0px, calc(16px - var(--vk-space-4))); }
  .vk-discovery-tools {
    grid-template-areas: "brand" "search";
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Give the single-line placeholder room at 320px / 200% without shrinking either target. */
@container vk-explore (max-width: 10rem) {
  .vk-public-search .vk-ui-search__shell { padding-inline: min(var(--vk-space-1), 4px); column-gap: 0; }
}
.vk-public-row { scroll-margin-block: var(--vk-space-4); }

.vk-public-list {
  display: grid;
  gap: var(--vk-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vk-public-row { overflow-wrap: anywhere; }


.vk-writing-prompt { overflow-wrap: anywhere; }
.vk-writing-prompt h2 { margin-block: var(--vk-space-2); font-size: var(--vk-type-title-size); }
.vk-writing-prompt .vk-eyebrow { letter-spacing: normal; text-transform: none; }
.vk-reading-note { margin: var(--vk-space-4) 0; font: italic 1rem/1.8 var(--vk-font-reading); color: var(--vk-on-surface-variant); }

@container vk-explore (min-width: 56rem) {
  .vk-discover-grid { grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); }
}

.vk-eyebrow {
  margin: 0 0 var(--vk-space-2);
  color: var(--vk-primary);
  font-weight: var(--vk-type-label-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--vk-type-caption-size);
}

.vk-muted {
  color: var(--vk-on-surface-variant);
}

/* Recovery action rows belong to their screen, visual controls to vink-ui. */
.vk-notice__actions { display: flex; flex-wrap: wrap; gap: var(--vk-space-2); margin-top: var(--vk-space-4); }

/* Reader */

.vk-reader-page { max-width: var(--vk-measure); margin: var(--vk-space-4) auto 0; }

#reader-return { gap: var(--vk-space-2); margin-bottom: var(--vk-space-6); }
#reader-return .vk-ui-icon { margin: 0; }
.vk-reader-freshness > [data-testid] { margin-block: calc(-1 * var(--vk-space-2)) var(--vk-space-6); }
.vk-reader { min-width: 0; }
/* LVE #73: the work's endorsement closes the text, quiet and start-aligned, before discussion. */
.vk-reader-endorsement { display: flex; margin-block: var(--vk-space-6) 0; min-width: 0; }
.vk-discussion { margin-block: var(--vk-space-8); padding-block-start: var(--vk-space-6); border-block-start: 1px solid var(--vk-outline-variant); min-width: 0; }
.vk-discussion [role="status"]:empty { display: none; }
.vk-discussion-mode, .vk-discussion-composer { display: grid; gap: var(--vk-space-3); margin-block: var(--vk-space-4); min-width: 0; }
.vk-discussion-mode > p, .vk-discussion-composer > p, .vk-discussion-root > p, .vk-discussion-reply-composer > p { margin: 0; }
.vk-discussion-mode > .vk-ui-action { justify-self: start; }
.vk-discussion-root { margin-block: 32px; min-width: 0; }
.vk-discussion-reply-composer { display: grid; gap: var(--vk-space-3); margin-block-start: var(--vk-space-3); min-width: 0; }
.vk-discussion-reply-composer > .vk-ui-action { justify-self: start; }
.vk-discussion-delivery { display: grid; justify-items: start; gap: var(--vk-space-3); padding: 16px; border-radius: var(--vk-radius-lg); background: var(--vk-surface-container); }
.vk-discussion-delivery > p { margin: 0; }
.vk-discussion-recovered { border-block-start: 1px solid var(--vk-outline-variant); padding-block: var(--vk-space-4); }
.vk-discussion-tools-note { font-size: var(--vk-type-caption-size); }
.vk-discussion-pagination { display: grid; justify-items: start; gap: var(--vk-space-2); margin-block: var(--vk-space-4); min-width: 0; }
.vk-discussion-pagination > p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.vk-reader__header { overflow-wrap: anywhere; margin-bottom: var(--vk-space-8); }

.vk-document {
  font-family: var(--vk-font-reading);
  font-size: var(--vk-text-reading);
  line-height: var(--vk-leading-reading);
}

.vk-block {
  margin: 0 0 1.4em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Desk */

.vk-desk {
  max-width: 48rem;
  margin: 0 auto;
}

/* Private list (#8): resume first, then one compact list. No empty support column. */
.vk-desk--index { max-width: 64rem; container: vk-desk-index / inline-size; }
/* On phones, text enlargement should use the content measure instead of doubling the gutters. */
@media (max-width: 759px) {
  .vk-main:has(> .vk-desk--index) { padding-inline: min(var(--vk-space-4), 16px); }
}
@media (max-width: 359px) {
  .vk-main:has(> .vk-desk--index) { padding-inline: min(var(--vk-space-2), 8px); }
}
.vk-desk-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vk-space-3); margin-block: var(--vk-space-4) var(--vk-space-6); }
.vk-desk--index #desk-title { font-family: var(--vk-font-ui); font-size: var(--vk-type-headline-size); font-weight: var(--vk-type-headline-weight); }
.vk-resume { margin-bottom: var(--vk-space-6); }
.vk-draft-list { display: grid; gap: var(--vk-space-3); min-width: 0; }
.vk-draft-list > .vk-ui-heading { font-family: var(--vk-font-ui); font-size: var(--vk-type-body-size); font-weight: var(--vk-type-title-weight); }
.vk-draft-controls { display: grid; gap: var(--vk-space-3); min-inline-size: 0; }
.vk-draft-search-group { display: grid; gap: var(--vk-space-1); min-inline-size: 0; }
.vk-draft-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--vk-space-1) min(var(--vk-space-1), 4px);
  min-inline-size: 0;
}
.vk-draft-tools > .vk-ui-field {
  display: grid;
  grid-row: 1 / span 2;
  grid-template-rows: subgrid;
}
/* Share the Select body row even when its label needs a separate line. */
.vk-draft-tools > .vk-ui-plain-tooltip { grid-column: 2; grid-row: 2; align-self: center; }
.vk-draft-search { min-inline-size: 0; margin: 0; }
/* Keep the native search description without repeating the visible scope/status line. */
.vk-draft-search #draft-search-help { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#draft-scope, .vk-draft-sort-help { margin: 0; font-size: var(--vk-type-caption-size); line-height: var(--vk-type-caption-line-height); }
.vk-draft-sort-help { grid-column: 1 / -1; }
/* DraftRow owns equal insets; the list owns one quiet surface, with space between links. */
.vk-draft-rows { display: grid; gap: var(--vk-space-1); margin: 0; padding: var(--vk-space-1) 0; list-style: none; border-radius: var(--vk-radius-lg); background: var(--vk-surface-container-low); }
.vk-draft-rows:empty { display: none; }
/* The label joins the controls only when the Desk has room for its text and both targets. */
@container vk-desk-index (min-width: 17rem) {
  .vk-draft-tools { column-gap: var(--vk-space-3); }
  .vk-draft-tools > .vk-ui-field { grid-row: 1; grid-template: auto / auto minmax(0, 1fr); align-items: center; column-gap: var(--vk-space-2); }
  .vk-draft-tools > .vk-ui-plain-tooltip { grid-row: 1; }
}
@container vk-desk-index (min-width: 48rem) {
  .vk-draft-controls { grid-template-columns: minmax(0, 1fr) max-content; align-items: start; }
}
.vk-desk-privacy { margin-top: var(--vk-space-8); font-size: var(--vk-type-label-size); }
/* The first-use CTA needs its full text measure at 320px/text200. */
.vk-desk-empty { max-width: none; }
.vk-desk-empty #create-draft > .vk-ui-icon { display: none; }

/* Editor: heading, sticky toolbar, notices, then the paper (title + CodeMirror body). */

.vk-desk--editor { max-width: calc(var(--vk-measure) + 2 * var(--vk-space-6)); margin-inline: auto; container: vk-editor-page / inline-size; }

.vk-editor-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--vk-space-1) var(--vk-space-3);
  margin: 0 0 var(--vk-space-4);
}

.vk-editor-heading__back {
  margin-inline-start: calc(-1 * var(--vk-space-3));
  padding: var(--vk-space-2) var(--vk-space-3);
  border-radius: var(--vk-radius-full);
  font-weight: var(--vk-type-label-weight);
  text-decoration: none;
}

.vk-editor-heading__back:hover {
  background: var(--vk-state-hover);
}

.vk-editor-heading__title {
  font-family: var(--vk-font-ui);
  margin: 0;
  color: var(--vk-on-surface-variant);
  font-size: var(--vk-type-body-size);
  font-weight: var(--vk-type-label-weight);
}

.vk-editor {
  display: flex;
  flex-direction: column;
  gap: var(--vk-space-6);
}

/* Stick only where there is room for a single row and the writing viewport remains useful.
   rem breakpoints also release the toolbar when text is enlarged. CodeMirror measures the
   actual sticky height; narrow/short windows keep all controls in the document flow. */
@media (min-height: 40rem) {
  @container vk-editor-page (min-width: 44rem) {
    .vk-editor-toolbar { position: sticky; top: var(--vk-space-2); z-index: 2; }
    .vk-editor-toolbar:has(.vk-ui-supporting-details[open]) { position: static; }
    .vk-editor > .vk-editor-recovery { scroll-margin-block-start: 6rem; }
  }
}

/* Focus moved by keyboard is not hidden under the sticky toolbar. */
.vk-editor :is(input, button) {
  scroll-margin-top: 6rem;
}

.vk-editor-paper {
  display: flex;
  flex-direction: column;
  gap: var(--vk-space-6);
  min-inline-size: 0;
  padding: clamp(var(--vk-space-3), 3vw, var(--vk-space-6));
  border-radius: var(--vk-radius-lg);
  background: var(--vk-surface-container-low);
}

.vk-editor-paper > .vk-ui-field { margin: 0; }
.vk-editor-paper #draft-title { font-family: var(--vk-font-reading); font-size: var(--vk-type-headline-size); font-weight: var(--vk-type-headline-weight); line-height: var(--vk-type-headline-line-height); }
.vk-editor-paper .vk-field__label { color: var(--vk-on-surface-variant); font-size: var(--vk-type-caption-size); line-height: var(--vk-type-caption-line-height); }
/* The title retains the shared native field/label contract, while the sheet owns its fill.
   Focus perimeters remain local to the focused control, including in forced colours. */
.vk-editor-paper > .vk-ui-field .vk-ui-field__control { background: transparent; }
.vk-editor-paper > .vk-ui-field .vk-ui-field__label { margin-inline: 0; }
.vk-editor-paper > .vk-ui-field .vk-ui-input { padding-inline: 0; }
.vk-editor-paper > .vk-field { min-inline-size: 0; }
.vk-editor-paper .vk-editor-body { background: transparent; }
.vk-editor-paper .vk-editor-body .cm-editor .cm-content { padding: var(--vk-space-2) 0 var(--vk-space-6); }
.vk-editor-help { color: var(--vk-on-surface-variant); font-size: var(--vk-type-label-size); }
.vk-editor-help summary { min-height: var(--vk-size-hit-target); padding-block: var(--vk-space-3); cursor: pointer; }
.vk-editor-help p { margin: 0 0 var(--vk-space-3); }
.vk-desk--editor .vk-notice__actions { margin-top: var(--vk-space-2); }
.vk-desk--editor .vk-notice__actions > .vk-ui-action { flex: 0 1 auto; min-width: 0; }
.vk-desk--editor .vk-notice__actions .vk-ui-button__label { overflow-wrap: normal; }
.vk-editor-recovery { display: grid; gap: var(--vk-space-2); min-inline-size: 0; padding: var(--vk-space-4); border-radius: var(--vk-radius-lg); background: var(--vk-error-container); color: var(--vk-on-error-container); }
.vk-editor-recovery[data-tone="warning"] { background: var(--vk-warning-container); color: var(--vk-on-warning-container); }
.vk-editor-recovery > .vk-ui-notice { padding: 0; background: transparent; color: inherit; }
.vk-desk--editor .vk-editor-recovery .vk-notice__actions { margin: 0; }
.vk-editor-recovery :is(.vk-ui-button--text, .vk-ui-supporting-details > summary) { color: inherit; }
.vk-editor-recovery .vk-ui-supporting-details > summary { background: transparent; justify-self: start; }
.vk-editor-recovery .vk-ui-supporting-details__content { background: transparent; padding: 0; }
.vk-editor-recovery .vk-ui-supporting-details__content > p { margin: 0; overflow-wrap: break-word; }
.vk-editor-recovery .vk-ui-supporting-details__content > p + p { margin-block-start: var(--vk-space-2); }

.vk-editor > .vk-editor-recovery { padding: var(--vk-space-3); }
.vk-editor > .vk-editor-recovery .vk-ui-notice__icon { display: none; }
.vk-editor > .vk-editor-recovery :is(.vk-ui-button, summary) { padding-inline: var(--vk-space-2); }
.vk-editor > .vk-editor-recovery .vk-ui-button { padding-block: var(--vk-space-1); }

/* Thông tin tác phẩm (TAG-PR-05): a secondary sheet after the manuscript, same measure and
   tonal family as the paper; the selector composition owns its own geometry. */
.vk-work-info { display: grid; gap: var(--vk-space-3); min-inline-size: 0; padding: clamp(var(--vk-space-3), 3vw, var(--vk-space-6)); border-radius: var(--vk-radius-lg); background: var(--vk-surface-container-low); }
.vk-work-info__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--vk-space-1) var(--vk-space-4); min-inline-size: 0; }
.vk-work-info__heading > .vk-ui-heading { margin: 0; font-family: var(--vk-font-ui); font-size: var(--vk-type-body-size); font-weight: var(--vk-type-label-weight); overflow-wrap: anywhere; }
.vk-work-info__status { color: var(--vk-on-surface-variant); font-size: var(--vk-type-label-size); font-weight: var(--vk-type-label-weight); }
.vk-work-info__status:is([data-status="failed"], [data-status="refused"]) { color: var(--vk-error); }
.vk-work-info > .vk-ui-text { margin: 0; }
.vk-work-info .vk-tag-selector { margin-block-start: var(--vk-space-2); }
.vk-work-info__selection { overflow-wrap: anywhere; }
.vk-work-info > .vk-ui-supporting-details > summary { width: fit-content; max-width: 100%; }
.vk-work-info > .vk-ui-supporting-details > .vk-ui-supporting-details__content { padding: 0; background: transparent; }

/* Publication region (PUB-AUTHOR-WEB-01, docs/design/publication-author.md): same surface and
   rhythm as the work info above it, one column at every width, no scroll area of its own. */
.vk-publication { display: grid; gap: var(--vk-space-3); min-inline-size: 0; padding: clamp(var(--vk-space-3), 3vw, var(--vk-space-6)); border-radius: var(--vk-radius-lg); background: var(--vk-surface-container-low); }
.vk-publication__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--vk-space-1) var(--vk-space-4); min-inline-size: 0; }
.vk-publication__heading > .vk-ui-heading { margin: 0; font-family: var(--vk-font-ui); font-size: var(--vk-type-body-size); font-weight: var(--vk-type-label-weight); overflow-wrap: anywhere; }
.vk-publication p { margin: 0; overflow-wrap: anywhere; }
.vk-publication__live:empty { display: none; }
.vk-publication__summary, .vk-publication__choice { display: grid; gap: var(--vk-space-2); min-inline-size: 0; }
.vk-publication__muted { color: var(--vk-on-surface-variant); font-size: var(--vk-type-label-size); }
.vk-publication__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vk-space-3); min-inline-size: 0; }
.vk-publication__actions:empty { display: none; }
.vk-publication > .vk-editor-recovery { padding: var(--vk-space-3); }
.vk-publication > .vk-editor-recovery .vk-notice__actions { margin: 0; }
/* The recovery notice sits inside the region's own surface, so its padding comes on top of the
   region's. When the region is narrow for its text (rem-relative: it is reached at 200% text on a
   phone, not at 100%) the nested card gives up its padding, its actions take the full width, and
   the region's buttons follow the shared narrow-container recipe (`vk-state-panel`, 16rem: less
   horizontal padding so whole Vietnamese words fit). */
.vk-publication { container: vk-publication / inline-size; }
@container vk-publication (max-width: 16rem) {
  .vk-publication .vk-ui-button { padding-inline: var(--vk-space-3); }
  .vk-publication > .vk-editor-recovery { padding: var(--vk-space-2); }
  .vk-publication > .vk-editor-recovery .vk-notice__actions { flex-direction: column; align-items: stretch; }
  .vk-publication > .vk-editor-recovery .vk-notice__actions > .vk-ui-action { flex: 0 0 auto; align-items: stretch; }
}

.vk-field {
  display: flex;
  flex-direction: column;
  gap: var(--vk-space-2);
}

.vk-field__label {
  font-weight: var(--vk-type-label-weight);
}

.vk-field__hint {
  color: var(--vk-on-surface-variant);
  font-size: var(--vk-type-label-size);
}

/* CodeMirror host. Selectors repeat `.cm-editor` to outrank CodeMirror's injected base theme. */
.vk-editor-body {
  border: 0;
  border-radius: var(--vk-radius-lg);
  background: var(--vk-surface-container-low);
  color: var(--vk-on-surface);
}

.vk-editor-body[data-state="loading"],
.vk-editor-body[data-state="failed"] {
  display: none;
}

.vk-editor-body:focus-within {
  outline: 2px solid var(--vk-focus-ring);
  outline-offset: -2px;
}

@media (forced-colors: active) {
  .vk-editor-body { border: 1px solid ButtonText; }
  .vk-editor-body:focus-within { outline-color: Highlight; }
}

.vk-editor-body .cm-editor.cm-focused {
  outline: none;
}

.vk-editor-body .cm-editor .cm-scroller {
  font-family: var(--vk-font-reading);
  font-size: var(--vk-text-reading);
  line-height: var(--vk-leading-reading);
}

.vk-editor-body .cm-editor .cm-content {
  min-height: 50vh;
  padding: var(--vk-space-6);
  caret-color: var(--vk-primary);
}

.vk-editor-body .cm-editor .cm-line {
  padding: 0;
}

.vk-editor-body .cm-editor .cm-content ::selection {
  background: var(--vk-primary-container);
  color: var(--vk-on-primary-container);
}

.vk-editor-body__pending {
  min-height: 50vh;
  margin: 0;
  padding: var(--vk-space-6);
  border-radius: var(--vk-radius-lg);
  background: var(--vk-surface-container-low);
}

.vk-save-status {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--vk-space-2);
  color: var(--vk-on-surface-variant);
  font-size: 0.9375rem;
}

.vk-save-status::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--vk-outline);
}

.vk-save-status { line-height: var(--vk-type-label-line-height); }

.vk-save-status[data-status="saved"]::before {
  background: var(--vk-success);
}

.vk-save-status[data-status="unsaved"]::before {
  background: var(--vk-tertiary);
}

.vk-save-status[data-status="saving"]::before {
  background: var(--vk-primary);
}

.vk-save-status[data-status="failed"],
.vk-save-status[data-status="conflict"] {
  color: var(--vk-error);
  font-weight: var(--vk-type-label-weight);
}

.vk-save-status[data-status="failed"]::before,
.vk-save-status[data-status="conflict"]::before {
  background: var(--vk-error);
}

/* Dialogs: native modal <dialog>; the page behind is inert and keeps its scroll and state. */

.vk-dialog__body {
  margin: 0 0 var(--vk-space-6);
}

.vk-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--vk-space-2);
}

.vk-dialog__recovery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vk-space-2);
  margin-top: var(--vk-space-6);
  padding-top: var(--vk-space-4);
  border-top: 1px solid var(--vk-outline-variant);
}

.vk-preview {
  margin: var(--vk-space-6) 0;
}

/* Page-owned dialog sizing; keep the shared modal, focus and dismiss policies. */
#draft-preview { inline-size: min(calc(var(--vk-measure) + 2 * var(--vk-space-6)), calc(100% - 2 * var(--vk-space-3))); }
#draft-preview .vk-preview { margin-block: var(--vk-space-4); }
#draft-preview .vk-preview h2 { overflow-wrap: anywhere; }
:is(#draft-preview, #leave-editor) .vk-dialog__body { margin-bottom: var(--vk-space-4); overflow-wrap: break-word; }
:is(#draft-preview, #leave-editor) .vk-ui-dialog__panel { padding: clamp(var(--vk-space-3), 3vw, var(--vk-space-6)); }
:is(#draft-preview, #leave-editor) .vk-ui-button__label { overflow-wrap: normal; }

#leave-editor {
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: var(--vk-size-hit-target);
}
#leave-editor .vk-ui-dialog__actions:empty { display: none; }
#leave-editor .vk-dialog__recovery { margin-block-start: var(--vk-space-4); }

@media (max-width: 40rem) {
  #leave-editor .vk-ui-dialog__panel { padding: var(--vk-space-2); }
  #leave-editor :is(.vk-dialog__actions, .vk-dialog__recovery) > .vk-ui-action { flex: 1 1 100%; min-width: 0; }
  #leave-editor .vk-ui-button { width: 100%; padding-inline: var(--vk-space-2); }
}


@media (min-width: 48rem) {
  .vk-main,
  .vk-footer {
    padding-left: var(--vk-space-8);
    padding-right: var(--vk-space-8);
  }

}

@media (max-width: 30rem) {
  /* No sticky or fixed controls over the text on a phone; the toolbar wraps in the flow. */
  .vk-editor-toolbar {
    position: static;
    padding-inline: var(--vk-space-2);
  }

  .vk-editor-toolbar__status > details > summary { padding-inline: 0; justify-content: center; }

  .vk-editor-toolbar__actions {
    width: 100%;
  }


  /* Enlarged text needs the width more than the inner margin. */
  .vk-editor-body .cm-editor .cm-content {
    padding: var(--vk-space-4) var(--vk-space-3);
  }


}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    /* A near-zero duration must not become a flashing infinite loop: play once at most. */
    animation-iteration-count: 1 !important;
  }
}

/* EMO-01A: isolated specimen; ordinary literary text is never replaced with artwork. */
.vk-expression-pilot { max-width: 64rem; margin-inline: auto; padding-block: var(--vk-space-4); }
.vk-expression-pilot > * + * { margin-block-start: var(--vk-space-6); }
.vk-expression-poem { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--vk-font-reading); }
.vk-expression-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--vk-space-4); }
.vk-expression-grid > li { min-width: 0; padding: var(--vk-space-3); border: 1px solid var(--vk-outline-variant); border-radius: var(--vk-radius-lg); background: var(--vk-surface-container); text-align: center; }
.vk-expression-art { width: 6rem; height: 6rem; margin: 0 auto var(--vk-space-3); position: relative; }
.vk-expression-art img, .vk-expression-art canvas, .vk-expression-unicode { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vk-expression-unicode { display: none; place-items: center; font-size: var(--vk-type-display-size); line-height: 1; }
[data-poster-failed="true"] .vk-expression-unicode { display: grid; }
[data-poster-failed="true"] .vk-expression-art img { visibility: hidden; }
.vk-expression-art canvas { display: none; }
[data-phase="playing"] .vk-expression-art canvas { display: block; }
[data-phase="playing"] .vk-expression-art img, [data-phase="playing"] .vk-expression-unicode { visibility: hidden; }
.vk-expression-grid .vk-ui-action, .vk-expression-grid button { width: 100%; }
.vk-expression-grid .vk-ui-button__label { white-space: normal; overflow-wrap: anywhere; }
.vk-expression-status { min-height: 3em; margin-bottom: 0; font-size: var(--vk-type-label-size); color: var(--vk-on-surface-variant); }
.vk-expression-attribution { border-top: 1px solid var(--vk-outline-variant); padding-top: var(--vk-space-4); color: var(--vk-on-surface-variant); font-size: var(--vk-type-label-size); }

/* TAG-PR-06: URL-backed discovery. Native details/GET remains usable before hydration. */
.vk-discovery-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vk-space-6); align-items: start; }
.vk-discovery-main { min-width: 0; }
.vk-discovery .vk-public-search { max-inline-size: none; }
.vk-discovery #community-stream { display: block; }
.vk-discovery #public-collection, .vk-discovery #public-results { display: block; }
.vk-discovery #works-title { margin: var(--vk-space-6) 0 var(--vk-space-4); font: var(--vk-type-title-weight) var(--vk-type-title-size)/var(--vk-type-title-line-height) var(--vk-font-ui); }
.vk-discovery .vk-public-scope { text-align: start; margin-block: var(--vk-space-2); }
.vk-applied-filters { display: flex; flex-wrap: wrap; align-items: start; gap: var(--vk-space-2); margin-block: var(--vk-space-2); }
.vk-applied-tag { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; color: var(--vk-on-primary-container); text-decoration: none; }
.vk-applied-tag .vk-tag-chip { min-width: 0; }
.vk-applied-tag > .vk-ui-icon { margin-inline-start: calc(-1 * var(--vk-space-1)); }
.vk-tag-launcher { display: none; }
.vk-tag-dock { padding: var(--vk-space-6); border-radius: var(--vk-radius-xl); background: var(--vk-surface-container-low); min-width: 0; }
.vk-tag-dock summary { cursor: pointer; font-weight: var(--vk-type-label-weight); }
.vk-discovery-filter-form { display: grid; gap: var(--vk-space-4); min-width: 0; margin: 0; }
.vk-discovery-filter-form h2 { font-size: var(--vk-type-title-size); margin: 0; }
.vk-discovery-filter-form p { margin: 0; color: var(--vk-on-surface-variant); overflow-wrap: anywhere; }
.vk-discovery-filter-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.vk-discovery-filter-form legend { margin-bottom: var(--vk-space-2); color: var(--vk-on-surface-variant); }
.vk-discovery-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vk-space-2); }

.vk-discovery-option { min-width: 0; }
.vk-discovery-option .vk-ui-choice__target { display:flex; justify-content:center; width:100%; min-block-size:3rem; gap:var(--vk-space-1); padding:var(--vk-space-2); border-radius:var(--vk-radius-full); background:var(--vk-surface-container-high); }
.vk-discovery-option .vk-ui-choice__input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }
.vk-discovery-option .vk-ui-choice__label { overflow-wrap:anywhere; font-weight:var(--vk-type-label-weight); }
.vk-discovery-option .vk-ui-choice__target::before { content:"✓"; inline-size:1em; flex:0 0 1em; visibility:hidden; }
.vk-discovery-option .vk-ui-choice__target:has(input:checked) { background:var(--vk-primary); color:var(--vk-on-primary); }
.vk-discovery-option .vk-ui-choice__target:has(input:checked)::before { visibility:visible; }
.vk-discovery-option .vk-ui-choice__target:has(input:focus-visible) { outline:var(--vk-size-focus-ring) solid var(--vk-focus-ring); outline-offset:var(--vk-size-focus-offset); }
.vk-discovery-option .vk-ui-choice__target:has(input:disabled) { opacity:0.6; cursor:default; }
.vk-discovery-filter-form > button { justify-self: start; }
.vk-discovery[data-enhanced=true] .vk-tag-dock { display: none; }
.vk-discovery[data-enhanced=true] .vk-tag-launcher { display: inline-flex; }
.vk-discovery .vk-public-row { position: relative; border-bottom: 1px solid var(--vk-outline-variant); }
.vk-discovery .vk-public-row__link { background: transparent; padding: var(--vk-space-4) var(--vk-space-3); }
.vk-discovery .vk-public-row__open { display: none; }
.vk-public-row-tags { pointer-events: none; margin: calc(-1 * var(--vk-space-2)) var(--vk-space-3) var(--vk-space-3); font-size: var(--vk-type-caption-size); color: var(--vk-on-surface-variant); }
.vk-public-pagination { display: flex; flex-wrap: wrap; gap: var(--vk-space-4); margin-block: var(--vk-space-6); }
.vk-reader-tags { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: var(--vk-space-2) var(--vk-space-4); margin-block: var(--vk-space-3) var(--vk-space-6); }
.vk-reader-page { max-inline-size: 42rem; }
@media (min-width: 1200px) {
@container vk-explore (min-width: 48rem) {
  .vk-discovery:not(.vk-discovery--tag) .vk-discovery-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .vk-discovery[data-enhanced=true] .vk-tag-dock { display: block; }
  .vk-discovery .vk-tag-dock summary { display: none; }
  .vk-discovery[data-enhanced=true] .vk-tag-launcher { display: none; }
}
}
.vk-discovery--tag { max-inline-size: 52rem; margin-inline: auto; }
@container vk-explore (max-width: 18rem) {
  .vk-discovery-options { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  #tag-picker { align-self: end; margin-bottom: 0; max-block-size: 90dvh; border-radius: var(--vk-radius-xl) var(--vk-radius-xl) 0 0; }
}

.vk-discovery .vk-discovery-tools { float: inline-end; display: block; margin: 0 0 var(--vk-space-4) var(--vk-space-4); }
.vk-discovery .vk-explore__heading { display: flow-root; }

/* At narrow measures the brand gets its own row; it must never squeeze a Vietnamese word
   in the H1 into a strip at text200. Search and heading retain their common left edge. */
@media (max-width: 759px) {
  .vk-discovery .vk-discovery-tools { float: none; display: flex; justify-content: flex-end; margin: 0 0 var(--vk-space-2); }
}
@container vk-explore (max-width: 40rem) {
  .vk-discovery .vk-discovery-tools { float: none; display: flex; justify-content: flex-end; margin: 0 0 var(--vk-space-2); }
}

.vk-discussion-reply-composer > .vk-discussion-composer { margin: 0; }
.vk-discussion-pagination[hidden] { display: none; }

/* Reader R3.1: text enlargement uses the measure, not larger side gutters. */
@media (max-width: 759px) {
  .vk-main:has(> .vk-reader-page) { padding-inline: 16px; }
}
@media (max-width: 359px) {
  .vk-main:has(> .vk-reader-page) { padding-inline: 12px; }
}

/* Own comment bodies preserve authored lines at every text size. */
.vk-discussion-own-body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Private moderation pages follow the shared controls and reader typography. */
.vk-moderation { max-inline-size: 54rem; margin-inline: auto; display: grid; gap: var(--vk-space-6); min-inline-size: 0; }
.vk-moderation > section { display: grid; gap: var(--vk-space-4); }
.vk-moderation__list { display: grid; gap: var(--vk-space-4); padding-inline-start: var(--vk-space-6); }
.vk-moderation__list > li { min-inline-size: 0; overflow-wrap: anywhere; }
.vk-moderation__actions, .vk-moderation__feedback { display: flex; flex-wrap: wrap; gap: var(--vk-space-3); align-items: center; }
.vk-moderation__snapshot { padding-block: var(--vk-space-4); overflow-wrap: anywhere; }