to scope to one surface (the Voices fork's pattern).
*
* Drops the global `html, body { margin: 0 }` reset — that's a consumer
* choice. Tailwind preflight handles it for Tailwind consumers; plain
* HTML pages can add it themselves if needed.
*
* The body filter (contrast/saturate) and the page gradient apply to
* the wrapper itself; the box-sizing reset cascades to descendants.
* ============================================================================ */
.vellum-ink *,
.vellum-ink *::before,
.vellum-ink *::after { box-sizing: border-box; }
.vellum-ink {
/* Reset the wrapper's own margin so when .vellum-ink sits on
the browser's default 8px doesn't leak through. Setting it on the
class itself (rather than a global `html, body { margin: 0 }`)
keeps the reset scoped to opt-in surfaces. */
margin: 0;
font-family: var(--vl-font-sans);
font-size: 15px;
line-height: 1.5;
color: var(--forge-text-primary);
background: var(--forge-surface-page);
min-height: 100vh;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "kern" 1;
letter-spacing: var(--vl-letter-sans);
filter: contrast(1.02) saturate(1.04);
}
@supports (background: var(--vl-page-gradient)) {
.vellum-ink { background: var(--vl-page-gradient); background-attachment: fixed; }
}
@media (prefers-reduced-motion: reduce) {
.vellum-ink { filter: none; }
.vellum-ink *, .vellum-ink *::before, .vellum-ink *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================================
* 02b TYPOGRAPHY UTILITIES — .vl-text-*
* ----------------------------------------------------------------------------
* Headings render in Source Serif 4 (the Vellum Ink display register).
* Body and eyebrow render in the system sans stack — the wrapper's body
* filter (contrast 1.02 / saturate 1.04) and antialiasing already apply.
* Mono uses JetBrains Mono with tabular numerals enabled.
*
* Display uses clamp() so it scales fluidly without a media query. All
* heading sizes are anchored to the body 15px so the ratio holds across
* the wrapper's letter-spacing and feature-settings tweaks.
*
* If a consumer's container resets element margins (Tailwind preflight
* does), these classes restore them to 0 explicitly — relying on a flow
* gap (.vl-stack) or per-call `style="margin-bottom: ..."` for spacing.
* ============================================================================ */
.vl-text-display {
font-family: var(--vl-font-serif);
font-weight: 480;
font-size: clamp(28px, 4.2vw, 52px);
line-height: 1.08;
letter-spacing: var(--vl-letter-display);
color: var(--forge-text-primary);
margin: 0;
}
.vl-text-h1 {
font-family: var(--vl-font-serif);
font-weight: 500;
font-size: 32px;
line-height: 1.2;
letter-spacing: -0.012em;
color: var(--forge-text-primary);
margin: 0;
}
.vl-text-h2 {
font-family: var(--vl-font-serif);
font-weight: 500;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.008em;
color: var(--forge-text-primary);
margin: 0;
}
.vl-text-h3 {
font-family: var(--vl-font-serif);
font-weight: 500;
font-size: 18px;
line-height: 1.35;
letter-spacing: -0.005em;
color: var(--forge-text-primary);
margin: 0;
}
.vl-text-body {
font-family: var(--vl-font-sans);
font-size: 15px;
line-height: 1.55;
color: var(--forge-text-primary);
margin: 0;
}
.vl-text-eyebrow {
font-family: var(--vl-font-sans);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--forge-text-secondary);
margin: 0;
}
.vl-text-italic {
font-family: var(--vl-font-serif);
font-style: italic;
color: var(--vel-accent-italic-color);
}
.vl-text-mono {
font-family: var(--vl-font-mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "zero" 1;
}
.vl-text-sm { font-size: 13px; line-height: 1.5; }
.vl-text-xs { font-size: 12px; line-height: 1.45; }
.vl-text-secondary { color: var(--forge-text-secondary); }
.vl-text-tertiary { color: var(--forge-text-tertiary); }
/* ============================================================================
* 03 PANEL — foundational glass-on-cream container (.vl-panel)
* ============================================================================ */
.vl-panel {
background: var(--forge-surface-primary);
border: 1px solid var(--vl-border-hairline);
border-radius: var(--vl-radius-card);
box-shadow: var(--vl-shadow-rest);
}
.vl-panel--chrome { background: var(--forge-surface-primary); border-radius: 0; box-shadow: none; }
.vl-panel--well { background: var(--forge-surface-secondary); box-shadow: none; }
.vl-panel--deep { background: var(--forge-surface-primary); box-shadow: var(--vl-shadow-popover); }
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
.vl-panel {
background: var(--vl-surface-content);
border-color: var(--vl-border-subtle);
-webkit-backdrop-filter: blur(var(--vl-blur-content)) saturate(150%);
backdrop-filter: blur(var(--vl-blur-content)) saturate(150%);
}
.vl-panel--chrome {
background: var(--vl-surface-chrome);
border-color: var(--vl-border-subtle);
-webkit-backdrop-filter: blur(var(--vl-blur-chrome)) saturate(170%);
backdrop-filter: blur(var(--vl-blur-chrome)) saturate(170%);
}
.vl-panel--well {
background: var(--vl-surface-well);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.vl-panel--deep {
background: var(--vl-surface-deep);
-webkit-backdrop-filter: blur(var(--vl-blur-deep)) saturate(180%);
backdrop-filter: blur(var(--vl-blur-deep)) saturate(180%);
}
}
/* ============================================================================
* 04 BUTTON — .vl-btn
* Variants: --primary, --secondary, --ghost, --danger
* Sizes: --sm, --md (default), --lg
* Modifiers: --loading, --icon-only, --split
* ============================================================================ */
.vl-btn {
--_btn-bg: transparent;
--_btn-fg: var(--forge-text-primary);
--_btn-bd: var(--vl-border-hairline);
--_btn-bg-hover: var(--vl-surface-content-hover);
--_btn-bd-hover: var(--vl-border-hairline);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
font-family: var(--vl-font-sans);
font-size: 13.5px;
font-weight: 500;
letter-spacing: var(--vl-letter-sans);
line-height: 1;
color: var(--_btn-fg);
background: var(--_btn-bg);
border: 1px solid var(--_btn-bd);
border-radius: var(--vl-radius-control);
cursor: pointer;
user-select: none;
text-decoration: none;
transition: background var(--vl-motion-fast) var(--vl-motion-ease),
border-color var(--vl-motion-fast) var(--vl-motion-ease),
color var(--vl-motion-fast) var(--vl-motion-ease),
box-shadow var(--vl-motion-fast) var(--vl-motion-ease),
transform var(--vl-motion-fast) var(--vl-motion-ease);
white-space: nowrap;
}
.vl-btn:hover:not(:disabled):not([aria-disabled="true"]) {
background: var(--_btn-bg-hover);
border-color: var(--_btn-bd-hover);
}
.vl-btn:focus-visible {
outline: 2px solid var(--forge-interactive-default);
outline-offset: 2px;
}
.vl-btn:active:not(:disabled) {
transform: translateY(1px);
}
.vl-btn:disabled,
.vl-btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
}
.vl-btn__icon {
width: 1em;
height: 1em;
display: inline-flex;
flex-shrink: 0;
}
.vl-btn--primary {
--_btn-bg: var(--forge-interactive-default);
--_btn-fg: var(--forge-text-on-brand);
--_btn-bd: var(--forge-interactive-default);
--_btn-bg-hover: var(--forge-interactive-hover);
--_btn-bd-hover: var(--forge-interactive-hover);
font-weight: 600;
}
.vl-btn--secondary {
--_btn-bg: transparent;
--_btn-fg: var(--forge-text-primary);
--_btn-bd: var(--forge-border-default);
--_btn-bg-hover: var(--vl-surface-well);
--_btn-bd-hover: var(--forge-interactive-default);
}
.vl-btn--ghost {
--_btn-bg: transparent;
--_btn-fg: var(--forge-text-secondary);
--_btn-bd: transparent;
--_btn-bg-hover: var(--vl-surface-well);
--_btn-bd-hover: transparent;
}
.vl-btn--ghost:hover:not(:disabled) {
color: var(--forge-text-primary);
}
.vl-btn--danger {
--_btn-bg: var(--vl-danger-surface);
--_btn-fg: var(--vl-danger-text);
--_btn-bd: rgba(186, 88, 64, 0.4);
--_btn-bg-hover: rgba(248, 184, 168, 0.92);
--_btn-bd-hover: rgba(186, 88, 64, 0.6);
font-weight: 600;
}
.vl-btn--sm {
padding: 5px 10px;
font-size: 12px;
border-radius: var(--vl-radius-control-sm);
}
.vl-btn--lg {
padding: 11px 22px;
font-size: 15px;
border-radius: var(--vl-radius-control);
}
.vl-btn--icon-only {
padding: 8px;
width: 36px;
height: 36px;
}
.vl-btn--icon-only.vl-btn--sm { width: 28px; height: 28px; padding: 6px; }
.vl-btn--icon-only.vl-btn--lg { width: 44px; height: 44px; padding: 10px; }
/* Loading state — replaces leading icon with spinner; disables click. */
.vl-btn--loading {
pointer-events: none;
cursor: wait;
}
.vl-btn--loading .vl-btn__label { opacity: 0.7; }
.vl-btn__spinner {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
animation: vl-spin 720ms linear infinite;
}
@keyframes vl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.vl-btn__spinner { animation: none; border-top-color: currentColor; opacity: 0.6; }
}
/* Split-button group — primary + trailing chevron button share a seam. */
.vl-btn-split {
display: inline-flex;
align-items: stretch;
border-radius: var(--vl-radius-control);
box-shadow: 0 0 0 1px transparent; /* keeps outline space */
}
.vl-btn-split .vl-btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.vl-btn-split .vl-btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-width: 0;
padding-left: 10px;
padding-right: 10px;
}
.vl-btn-split .vl-btn--primary + .vl-btn--primary {
border-left: 1px solid rgba(255, 254, 250, 0.25);
}
/* ============================================================================
* 05 INPUT / TEXTAREA — .vl-input, .vl-textarea
* ============================================================================ */
.vl-input,
.vl-textarea {
display: block;
width: 100%;
padding: 9px 12px;
font-family: var(--vl-font-sans);
font-size: 14px;
line-height: 1.4;
color: var(--forge-text-primary);
background: var(--vl-surface-well);
border: 1px solid var(--forge-border-default);
border-radius: var(--vl-radius-control);
outline: 0;
transition: border-color var(--vl-motion-fast) var(--vl-motion-ease),
background var(--vl-motion-fast) var(--vl-motion-ease),
box-shadow var(--vl-motion-fast) var(--vl-motion-ease);
}
.vl-input::placeholder,
.vl-textarea::placeholder {
color: var(--forge-text-tertiary);
font-family: var(--vl-font-serif);
font-style: italic;
}
.vl-input:hover:not(:disabled),
.vl-textarea:hover:not(:disabled) {
border-color: var(--forge-border-strong);
}
.vl-input:focus,
.vl-textarea:focus {
border-color: var(--forge-interactive-default);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--forge-interactive-default) 18%, transparent);
background: var(--forge-surface-primary);
}
.vl-input:disabled,
.vl-textarea:disabled {
opacity: 0.55;
cursor: not-allowed;
background: var(--vl-surface-inset);
}
.vl-input--sm { padding: 6px 10px; font-size: 13px; }
.vl-input--lg { padding: 12px 14px; font-size: 16px; }
.vl-input[aria-invalid="true"],
.vl-textarea[aria-invalid="true"] {
border-color: oklch(0.50 0.16 30);
}
.vl-input[aria-invalid="true"]:focus,
.vl-textarea[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px rgba(186, 88, 64, 0.2);
}
.vl-textarea { min-height: 96px; resize: vertical; }
.vl-textarea--autogrow { resize: none; overflow: hidden; }
/* Input wrapper for leading/trailing icons. */
.vl-input-wrap {
position: relative;
display: block;
}
.vl-input-wrap .vl-input { padding-left: 12px; padding-right: 12px; }
.vl-input-wrap--with-leading .vl-input { padding-left: 36px; }
.vl-input-wrap--with-trailing .vl-input { padding-right: 36px; }
.vl-input-wrap__icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--forge-text-tertiary);
pointer-events: none;
}
.vl-input-wrap__icon--leading { left: 12px; }
.vl-input-wrap__icon--trailing { right: 12px; }
/* ============================================================================
* 06 SELECT — .vl-select (native) and .vl-select-pop (custom popover)
* ============================================================================ */
.vl-select {
display: block;
width: 100%;
padding: 9px 36px 9px 12px;
font-family: var(--vl-font-sans);
font-size: 14px;
color: var(--forge-text-primary);
background: var(--vl-surface-well);
border: 1px solid var(--forge-border-default);
border-radius: var(--vl-radius-control);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,
");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
outline: 0;
transition: border-color var(--vl-motion-fast), box-shadow var(--vl-motion-fast);
}
.vl-select:hover:not(:disabled) { border-color: var(--forge-border-strong); }
.vl-select:focus {
border-color: var(--forge-interactive-default);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--forge-interactive-default) 18%, transparent);
}
.vl-select:disabled { opacity: 0.55; cursor: not-allowed; background: var(--vl-surface-inset); }
/* Custom popover variant — button trigger + ul listbox. */
.vl-select-pop { position: relative; display: inline-block; min-width: 180px; }
.vl-select-pop__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 9px 12px;
background: var(--vl-surface-well);
border: 1px solid var(--forge-border-default);
border-radius: var(--vl-radius-control);
font-family: var(--vl-font-sans);
font-size: 14px;
color: var(--forge-text-primary);
cursor: pointer;
text-align: left;
outline: 0;
transition: border-color var(--vl-motion-fast), box-shadow var(--vl-motion-fast);
}
.vl-select-pop__trigger:hover { border-color: var(--forge-border-strong); }
.vl-select-pop__trigger:focus-visible {
border-color: var(--forge-interactive-default);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--forge-interactive-default) 18%, transparent);
}
.vl-select-pop__trigger[aria-expanded="true"] {
border-color: var(--forge-interactive-default);
}
.vl-select-pop__chevron { width: 12px; height: 12px; color: var(--forge-text-tertiary); }
.vl-select-pop__list {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
margin: 0;
padding: 6px;
list-style: none;
background: var(--vl-surface-deep);
border: 1px solid var(--vl-border-subtle);
border-radius: var(--vl-radius-control);
box-shadow: var(--vl-shadow-popover);
z-index: 50;
max-height: 280px;
overflow-y: auto;
-webkit-backdrop-filter: blur(var(--vl-blur-deep)) saturate(180%);
backdrop-filter: blur(var(--vl-blur-deep)) saturate(180%);
}
.vl-select-pop__list[hidden] { display: none; }
.vl-select-pop__option {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: var(--vl-radius-control-sm);
font-size: 14px;
color: var(--forge-text-primary);
cursor: pointer;
}
.vl-select-pop__option[aria-selected="true"] {
color: var(--forge-interactive-default);
font-weight: 500;
}
.vl-select-pop__option:hover,
.vl-select-pop__option.is-active {
background: color-mix(in oklch, var(--forge-interactive-default) 10%, transparent);
}
/* ============================================================================
* 07 CHECKBOX / RADIO — .vl-check, .vl-radio
* Built as
+ sibling visual via :checked. Hidden input retains a11y.
* ============================================================================ */
.vl-check,
.vl-radio {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--vl-font-sans);
font-size: 14px;
color: var(--forge-text-primary);
cursor: pointer;
user-select: none;
}
.vl-check__input,
.vl-radio__input {
appearance: none;
-webkit-appearance: none;
margin: 0;
width: 18px;
height: 18px;
border: 1.5px solid var(--forge-border-strong);
background: var(--vl-surface-well);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--vl-motion-fast), border-color var(--vl-motion-fast);
flex-shrink: 0;
}
.vl-check__input { border-radius: 4px; }
.vl-radio__input { border-radius: 50%; }
.vl-check__input:hover,
.vl-radio__input:hover { border-color: var(--forge-interactive-default); }
.vl-check__input:focus-visible,
.vl-radio__input:focus-visible {
outline: 2px solid var(--forge-interactive-default);
outline-offset: 2px;
}
.vl-check__input:checked,
.vl-radio__input:checked {
background: var(--forge-interactive-default);
border-color: var(--forge-interactive-default);
}
.vl-check__input:checked::after {
content: "";
width: 10px;
height: 6px;
border-left: 2px solid var(--forge-text-on-brand);
border-bottom: 2px solid var(--forge-text-on-brand);
transform: rotate(-45deg) translate(1px, -1px);
}
.vl-check__input:indeterminate {
background: var(--forge-interactive-default);
border-color: var(--forge-interactive-default);
}
.vl-check__input:indeterminate::after {
content: "";
width: 10px;
height: 2px;
background: var(--forge-text-on-brand);
border-radius: 1px;
}
.vl-radio__input:checked::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--forge-text-on-brand);
}
.vl-check__input:disabled,
.vl-radio__input:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.vl-check__input:disabled + *,
.vl-radio__input:disabled + * { opacity: 0.55; }
.vl-check-group,
.vl-radio-group {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ============================================================================
* 08 SWITCH / TOGGLE — .vl-switch
* ============================================================================ */
.vl-switch {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
font-family: var(--vl-font-sans);
font-size: 14px;
color: var(--forge-text-primary);
}
.vl-switch__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.vl-switch__track {
width: 36px;
height: 20px;
border-radius: 999px;
background: var(--forge-border-default);
position: relative;
transition: background var(--vl-motion-duration) var(--vl-motion-ease);
flex-shrink: 0;
}
.vl-switch__thumb {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--forge-surface-primary);
box-shadow: 0 2px 4px rgba(60, 50, 80, 0.25);
transition: transform var(--vl-motion-duration) var(--vl-motion-ease);
}
.vl-switch__input:checked ~ .vl-switch__track { background: var(--forge-interactive-default); }
.vl-switch__input:checked ~ .vl-switch__track .vl-switch__thumb { transform: translateX(16px); }
.vl-switch__input:focus-visible ~ .vl-switch__track {
box-shadow: 0 0 0 3px color-mix(in oklch, var(--forge-interactive-default) 28%, transparent);
}
.vl-switch__input:disabled ~ .vl-switch__track { opacity: 0.45; cursor: not-allowed; }
.vl-switch--sm .vl-switch__track { width: 28px; height: 16px; }
.vl-switch--sm .vl-switch__thumb { width: 12px; height: 12px; }
.vl-switch--sm .vl-switch__input:checked ~ .vl-switch__track .vl-switch__thumb { transform: translateX(12px); }
.vl-switch--lg .vl-switch__track { width: 48px; height: 26px; }
.vl-switch--lg .vl-switch__thumb { width: 22px; height: 22px; }
.vl-switch--lg .vl-switch__input:checked ~ .vl-switch__track .vl-switch__thumb { transform: translateX(22px); }
/* ============================================================================
* 09 FIELD GROUP — .vl-field (label + input + help + error)
* ============================================================================ */
.vl-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.vl-field__label {
font-family: var(--vl-font-sans);
font-size: 13px;
font-weight: 500;
color: var(--forge-text-primary);
letter-spacing: var(--vl-letter-sans);
}
.vl-field__required {
color: oklch(0.50 0.16 30);
margin-left: 2px;
}
.vl-field__help {
font-size: 12.5px;
color: var(--forge-text-tertiary);
font-family: var(--vl-font-serif);
font-style: italic;
}
.vl-field__error {
font-size: 12.5px;
color: oklch(0.45 0.17 30);
font-family: var(--vl-font-sans);
display: flex;
align-items: center;
gap: 4px;
}
/* ============================================================================
* 10 AVATAR — .vl-avatar
* Sizes: --xs (24), --sm (32), --md (44), --lg (64), --xl (96)
* ============================================================================ */
.vl-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--vl-surface-well);
color: var(--forge-text-secondary);
font-family: var(--vl-font-sans);
font-size: 14px;
font-weight: 600;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--vl-border-subtle);
position: relative;
user-select: none;
}
.vl-avatar img,
.vl-avatar svg.vl-avatar__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vl-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.vl-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.vl-avatar--md { width: 44px; height: 44px; font-size: 14px; }
.vl-avatar--lg { width: 64px; height: 64px; font-size: 20px; }
.vl-avatar--xl { width: 96px; height: 96px; font-size: 30px; }
.vl-avatar-stack {
display: inline-flex;
align-items: center;
}
.vl-avatar-stack .vl-avatar { box-shadow: 0 0 0 2px var(--forge-surface-primary); }
.vl-avatar-stack .vl-avatar + .vl-avatar { margin-left: -10px; }
.vl-avatar-stack--sm .vl-avatar + .vl-avatar { margin-left: -8px; }
.vl-avatar-stack__overflow {
background: var(--vl-surface-deep);
color: var(--forge-text-secondary);
font-weight: 600;
}
/* ============================================================================
* 11 BADGE — .vl-badge
* Variants: --count (number), --dot, --pill (text), severity --high/--med/--low
* Position: --on (overlay on target via parent .vl-badge-anchor)
* ============================================================================ */
.vl-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-family: var(--vl-font-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.4;
color: var(--forge-text-secondary);
background: var(--vl-surface-well);
border: 1px solid var(--vl-border-hairline);
border-radius: 999px;
white-space: nowrap;
}
.vl-badge--count {
min-width: 18px;
height: 18px;
padding: 0 5px;
justify-content: center;
font-variant-numeric: tabular-nums;
background: var(--forge-interactive-default);
border-color: var(--forge-interactive-default);
color: var(--forge-text-on-brand);
font-size: 11px;
}
.vl-badge--dot {
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
background: var(--forge-interactive-default);
border: 0;
}
.vl-badge--high { background: var(--vl-sev-high-surface); color: var(--vl-sev-high-text); border-color: rgba(186, 88, 64, 0.4); }
.vl-badge--medium { background: var(--vl-sev-medium-surface); color: var(--vl-sev-medium-text); border-color: rgba(186, 132, 64, 0.4); }
.vl-badge--low { background: var(--vl-sev-low-surface); color: var(--vl-sev-low-text); border-color: rgba(120, 130, 150, 0.4); }
.vl-badge--success { background: var(--vl-success-surface); color: var(--vl-success-text); border-color: rgba(70, 140, 80, 0.4); }
.vl-badge__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* Anchor for positioning a badge on top of another element (avatar/icon). */
.vl-badge-anchor { position: relative; display: inline-block; }
.vl-badge-anchor > .vl-badge--on {
position: absolute;
top: -4px;
right: -4px;
box-shadow: 0 0 0 2px var(--forge-surface-primary);
}
/* ============================================================================
* 12 CHIP / TAG — .vl-chip
* Variants: --clickable (interactive), --remove, --readonly, tone --lavender, --sage, --peach
* ============================================================================ */
.vl-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-family: var(--vl-font-sans);
font-size: 12.5px;
color: var(--forge-text-secondary);
background: transparent;
border: 1px solid var(--vl-border-hairline);
border-radius: 999px;
cursor: default;
white-space: nowrap;
transition: background var(--vl-motion-fast), border-color var(--vl-motion-fast), color var(--vl-motion-fast);
}
/* Link-mode chip: renders as
(nav/filter chips that navigate). Strip the
* UA anchor underline so it matches span.vl-chip; color already comes from
* .vl-chip and its tone/active modifiers, which outrank the UA link color. */
a.vl-chip { text-decoration: none; }
.vl-chip--clickable { cursor: pointer; }
.vl-chip--clickable:hover {
border-color: color-mix(in oklch, var(--forge-interactive-default) 32%, var(--vl-border-hairline));
color: var(--forge-text-primary);
}
.vl-chip--clickable:focus-visible {
outline: 2px solid var(--forge-interactive-default);
outline-offset: 2px;
}
.vl-chip--clickable.is-active,
.vl-chip--clickable[aria-pressed="true"] {
background: color-mix(in oklch, var(--forge-interactive-default) 10%, transparent);
border-color: color-mix(in oklch, var(--forge-interactive-default) 38%, transparent);
color: var(--forge-interactive-default);
font-weight: 500;
}
.vl-chip__close {
background: transparent;
border: 0;
padding: 0;
margin-left: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 14px;
height: 14px;
border-radius: 50%;
color: currentColor;
opacity: 0.55;
transition: opacity var(--vl-motion-fast), background var(--vl-motion-fast);
}
.vl-chip__close:hover { opacity: 1; background: rgba(60, 50, 80, 0.08); }
.vl-chip__close:focus-visible { outline: 2px solid var(--forge-interactive-default); outline-offset: 1px; }
.vl-chip--lavender { background: var(--vl-accent-lavender-surface); color: var(--vl-accent-lavender-text); border-color: transparent; }
.vl-chip--sage { background: var(--vl-accent-sage-surface); color: var(--vl-accent-sage-text); border-color: transparent; }
.vl-chip--peach { background: var(--vl-accent-peach-surface); color: var(--vl-accent-peach-text); border-color: transparent; }
/* ============================================================================
* 13 CARD — .vl-card
* ============================================================================ */
.vl-card {
display: flex;
flex-direction: column;
background: var(--forge-surface-primary);
border: 1px solid var(--vl-border-hairline);
border-radius: var(--vl-radius-card);
box-shadow: var(--vl-shadow-rest);
overflow: hidden;
transition: box-shadow var(--vl-motion-duration) var(--vl-motion-ease),
transform var(--vl-motion-duration) var(--vl-motion-ease);
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
.vl-card {
background: var(--vl-surface-content);
border-color: var(--vl-border-subtle);
-webkit-backdrop-filter: blur(var(--vl-blur-content)) saturate(150%);
backdrop-filter: blur(var(--vl-blur-content)) saturate(150%);
}
}
.vl-card__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 16px 20px 8px;
}
.vl-card__title {
font-family: var(--vl-font-serif);
font-weight: 700;
font-size: 17px;
color: var(--forge-text-primary);
letter-spacing: -0.01em;
margin: 0;
}
.vl-card__meta {
font-family: var(--vl-font-serif);
font-style: italic;
font-size: 12.5px;
color: var(--forge-text-tertiary);
}
.vl-card__body {
padding: 12px 20px 16px;
color: var(--forge-text-secondary);
font-size: 14px;
line-height: 1.55;
flex: 1;
}
.vl-card__footer {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--vl-border-hairline);
background: var(--vl-surface-well);
}
.vl-card--interactive { cursor: pointer; }
.vl-card--interactive:hover {
box-shadow: var(--vl-shadow-hover);
transform: translateY(-2px);
}
.vl-card--interactive:focus-visible {
outline: 2px solid var(--forge-interactive-default);
outline-offset: 2px;
}
/* ============================================================================
* 14 STAT / METRIC TILE — .vl-stat
* ============================================================================ */
.vl-stat {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 20px;
background: var(--forge-surface-primary);
border: 1px solid var(--vl-border-hairline);
border-radius: var(--vl-radius-card);
box-shadow: var(--vl-shadow-rest);
min-width: 0;
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
.vl-stat {
background: var(--vl-surface-content);
border-color: var(--vl-border-subtle);
-webkit-backdrop-filter: blur(var(--vl-blur-content)) saturate(150%);
backdrop-filter: blur(var(--vl-blur-content)) saturate(150%);
}
}
.vl-stat__label {
font-family: var(--vl-font-sans);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--forge-text-tertiary);
font-weight: 500;
}
.vl-stat__value {
font-family: var(--vl-font-serif);
font-weight: 700;
font-size: 32px;
line-height: 1.05;
color: var(--forge-text-primary);
letter-spacing: var(--vl-letter-display);
font-variant-numeric: tabular-nums;
}
.vl-stat__value em {
font-style: italic;
font-weight: 600;
color: var(--vel-accent-italic-color);
}
.vl-stat__delta {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--vl-font-sans);
font-size: 12.5px;
color: var(--forge-text-secondary);
}
.vl-stat__delta--up { color: var(--vl-success-text); }
.vl-stat__delta--down { color: var(--vl-danger-text); }
.vl-stat__delta-icon { width: 12px; height: 12px; }
/* ============================================================================
* 15 ALERT / BANNER — .vl-alert
* Severities: --info, --success, --warning, --danger
* ============================================================================ */
.vl-alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
border-radius: var(--vl-radius-card-sm);
border: 1px solid transparent;
font-family: var(--vl-font-sans);
font-size: 14px;
line-height: 1.5;
color: var(--forge-text-primary);
background: var(--vl-info-surface);
position: relative;
}
.vl-alert__icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.vl-alert__body { flex: 1; min-width: 0; }
.vl-alert__title { font-weight: 600; margin-bottom: 2px; color: var(--forge-text-primary); }
.vl-alert__message { color: var(--forge-text-secondary); }
.vl-alert__close {
background: transparent;
border: 0;
padding: 4px;
margin: -4px;
cursor: pointer;
color: var(--forge-text-tertiary);
border-radius: 4px;
flex-shrink: 0;
display: inline-flex;
}
.vl-alert__close:hover { color: var(--forge-text-primary); background: rgba(60, 50, 80, 0.06); }
.vl-alert__close:focus-visible { outline: 2px solid var(--forge-interactive-default); outline-offset: 1px; }
.vl-alert--info { background: var(--vl-info-surface); color: var(--vl-info-text); }
.vl-alert--success { background: var(--vl-success-surface); color: var(--vl-success-text); }
.vl-alert--warning { background: var(--vl-warn-surface); color: var(--vl-warn-text); }
.vl-alert--danger { background: var(--vl-danger-surface); color: var(--vl-danger-text); }
.vl-alert--info .vl-alert__title { color: var(--vl-info-text); }
.vl-alert--success .vl-alert__title { color: var(--vl-success-text); }
.vl-alert--warning .vl-alert__title { color: var(--vl-warn-text); }
.vl-alert--danger .vl-alert__title { color: var(--vl-danger-text); }
.vl-alert--banner {
border-radius: 0;
padding: 10px 24px;
}
/* ============================================================================
* 16 TOOLTIP — .vl-tooltip
* Hover/focus-triggered via data-tooltip attribute → CSS pseudo.
* Placements: --top (default), --right, --bottom, --left
* ============================================================================ */
.vl-tooltip {
position: relative;
display: inline-flex;
}
.vl-tooltip[data-tooltip]::after,
.vl-tooltip[data-tooltip]::before {
position: absolute;
pointer-events: none;
opacity: 0;
transition: opacity var(--vl-motion-fast) var(--vl-motion-ease);
z-index: 80;
}
.vl-tooltip[data-tooltip]::after {
content: attr(data-tooltip);
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
background: var(--vl-surface-deep);
-webkit-backdrop-filter: blur(var(--vl-blur-deep)) saturate(180%);
backdrop-filter: blur(var(--vl-blur-deep)) saturate(180%);
border: 1px solid var(--vl-border-subtle);
border-radius: 6px;
box-shadow: var(--vl-shadow-popover);
color: var(--forge-text-primary);
font-family: var(--vl-font-sans);
font-size: 12px;
white-space: nowrap;
}
.vl-tooltip:hover::after,
.vl-tooltip:focus-within::after,
.vl-tooltip.is-open::after { opacity: 1; }
.vl-tooltip--right[data-tooltip]::after {
bottom: auto; top: 50%; left: calc(100% + 8px);
transform: translateY(-50%);
}
.vl-tooltip--bottom[data-tooltip]::after {
bottom: auto; top: calc(100% + 8px);
}
.vl-tooltip--left[data-tooltip]::after {
bottom: auto; top: 50%; left: auto; right: calc(100% + 8px);
transform: translateY(-50%);
}
/* ============================================================================
* 17 SKELETON — .vl-skeleton
* Shimmer disabled under prefers-reduced-motion.
* ============================================================================ */
.vl-skeleton {
display: block;
background: linear-gradient(
90deg,
var(--vl-skeleton-base) 0%,
var(--vl-skeleton-shine) 50%,
var(--vl-skeleton-base) 100%
);
background-size: 200% 100%;
border-radius: 6px;
animation: vl-shimmer var(--vl-skeleton-duration, 1400ms) ease-in-out infinite;
min-height: 12px;
}
.vl-skeleton--line { height: 12px; border-radius: 6px; }
.vl-skeleton--line-lg { height: 18px; border-radius: 6px; }
.vl-skeleton--circle { width: 44px; height: 44px; border-radius: 50%; }
.vl-skeleton--rect { height: 120px; border-radius: var(--vl-radius-card-sm); }
@keyframes vl-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.vl-skeleton { animation: none; background: var(--vl-skeleton-base); }
}
/* ============================================================================
* 18 EMPTY STATE — .vl-empty
* ============================================================================ */
.vl-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 48px 32px;
gap: 12px;
color: var(--forge-text-secondary);
}
.vl-empty__art {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
background: var(--vl-surface-well);
border-radius: 50%;
color: var(--forge-text-tertiary);
margin-bottom: 8px;
}
.vl-empty__art svg { width: 32px; height: 32px; }
.vl-empty__title {
font-family: var(--vl-font-serif);
font-weight: 700;
font-size: 22px;
color: var(--forge-text-primary);
letter-spacing: var(--vl-letter-display);
margin: 0;
}
.vl-empty__body {
font-size: 14px;
max-width: 360px;
line-height: 1.55;
margin: 0;
}
.vl-empty__actions {
display: flex;
gap: 8px;
margin-top: 8px;
}
/* ============================================================================
* 19 TABS — .vl-tabs
* Aria pattern: role=tablist / role=tab / role=tabpanel + arrow-key nav.
* ============================================================================ */
.vl-tabs { display: flex; flex-direction: column; }
.vl-tabs__list {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
margin: 0;
border-bottom: 1px solid var(--vl-border-hairline);
}
.vl-tabs__tab {
background: transparent;
border: 0;
padding: 10px 14px;
margin: 0;
font-family: var(--vl-font-sans);
font-size: 14px;
font-weight: 500;
color: var(--forge-text-secondary);
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: var(--vl-radius-control-sm) var(--vl-radius-control-sm) 0 0;
transition: color var(--vl-motion-fast), background var(--vl-motion-fast);
}
.vl-tabs__tab:hover { color: var(--forge-text-primary); background: var(--vl-surface-well); }
.vl-tabs__tab:focus-visible {
outline: 2px solid var(--forge-interactive-default);
outline-offset: -2px;
}
.vl-tabs__tab[aria-selected="true"] {
color: var(--forge-interactive-default);
font-weight: 600;
}
.vl-tabs__tab[aria-selected="true"]::after {
content: "";
position: absolute;
left: 8px; right: 8px;
bottom: -1px;
height: 2px;
background: var(--forge-interactive-default);
border-radius: 1px;
}
.vl-tabs__panel {
padding: 18px 4px;
}
.vl-tabs__panel[hidden] { display: none; }
/* ============================================================================
* 20 PAGINATION — .vl-pagination
* ============================================================================ */
.vl-pagination {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--vl-font-sans);
font-size: 13px;
color: var(--forge-text-tertiary);
}
.vl-pagination__meta { flex: 1; }
.vl-pagination__meta strong { color: var(--forge-text-primary); font-weight: 500; }
.vl-pagination__nav { display: inline-flex; align-items: center; gap: 4px; }
.vl-pagination__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: transparent;
border: 1px solid var(--vl-border-hairline);
color: var(--forge-text-secondary);
cursor: pointer;
transition: background var(--vl-motion-fast), border-color var(--vl-motion-fast), color var(--vl-motion-fast);
}
.vl-pagination__btn:hover:not(:disabled):not([aria-disabled="true"]) {
background: var(--vl-surface-well);
border-color: color-mix(in oklch, var(--forge-interactive-default) 30%, var(--vl-border-hairline));
color: var(--forge-text-primary);
}
.vl-pagination__btn:focus-visible {
outline: 2px solid var(--forge-interactive-default);
outline-offset: 1px;
}
/* Anchor renderers mark dead endpoints with aria-disabled — an never
matches :disabled. pointer-events pairs with the missing href to keep
the inert anchor hover-silent as well as unclickable. */
.vl-pagination__btn:disabled,
.vl-pagination__btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.vl-pagination__btn svg { width: 14px; height: 14px; }
.vl-pagination__page {
min-width: 28px;
height: 28px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
border: 0;
background: transparent;
font-family: var(--vl-font-sans);
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--forge-text-secondary);
cursor: pointer;
}
.vl-pagination__page:hover { background: var(--vl-surface-well); color: var(--forge-text-primary); }
.vl-pagination__page.is-current,
.vl-pagination__page[aria-current="page"] {
background: color-mix(in oklch, var(--forge-interactive-default) 12%, transparent);
color: var(--forge-interactive-default);
font-weight: 500;
}
/* ============================================================================
* 21 BREADCRUMBS — .vl-crumbs
* ============================================================================ */
.vl-crumbs {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-family: var(--vl-font-sans);
font-size: 13px;
color: var(--forge-text-tertiary);
}
.vl-crumbs ol { display: contents; list-style: none; margin: 0; padding: 0; }
.vl-crumbs__item { display: inline-flex; align-items: center; gap: 6px; }
.vl-crumbs__link {
color: var(--forge-text-secondary);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--vl-motion-fast), border-color var(--vl-motion-fast);
}
.vl-crumbs__link:hover { color: var(--forge-interactive-default); border-bottom-color: currentColor; }
.vl-crumbs__link:focus-visible { outline: 2px solid var(--forge-interactive-default); outline-offset: 2px; border-radius: 2px; }
.vl-crumbs__sep {
color: var(--forge-text-tertiary);
opacity: 0.6;
width: 12px;
height: 12px;
display: inline-flex;
}
.vl-crumbs__current { color: var(--forge-text-primary); font-weight: 500; }
/* ============================================================================
* 22 DIALOG / DRAWER — .vl-dialog, .vl-drawer
* Built on the native element; focus trap and Esc handled by browser.
* ============================================================================ */
dialog.vl-dialog,
dialog.vl-drawer {
border: 0;
padding: 0;
background: transparent;
color: var(--forge-text-primary);
max-width: none;
max-height: none;
}
dialog.vl-dialog::backdrop,
dialog.vl-drawer::backdrop {
background: rgba(40, 30, 60, 0.36);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.vl-dialog__panel,
.vl-drawer__panel {
background: var(--vl-surface-deep);
-webkit-backdrop-filter: blur(var(--vl-blur-deep)) saturate(180%);
backdrop-filter: blur(var(--vl-blur-deep)) saturate(180%);
border: 1px solid var(--vl-border-subtle);
border-radius: var(--vl-radius-card);
box-shadow: var(--vl-shadow-popover);
display: flex;
flex-direction: column;
overflow: hidden;
}
dialog.vl-dialog {
margin: auto;
}
.vl-dialog__panel {
width: min(520px, calc(100vw - 32px));
max-height: calc(100vh - 64px);
}
/* Drawer slides in from the right. */
dialog.vl-drawer {
margin: 0 0 0 auto;
height: 100vh;
}
.vl-drawer__panel {
width: min(440px, 92vw);
height: 100vh;
border-radius: 0;
border-right: 0;
border-top: 0;
border-bottom: 0;
}
.vl-dialog__header,
.vl-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--vl-border-hairline);
}
.vl-dialog__title,
.vl-drawer__title {
font-family: var(--vl-font-serif);
font-weight: 700;
font-size: 19px;
color: var(--forge-text-primary);
letter-spacing: var(--vl-letter-display);
margin: 0;
}
.vl-dialog__close,
.vl-drawer__close {
background: transparent;
border: 0;
padding: 6px;
margin: -6px;
cursor: pointer;
color: var(--forge-text-tertiary);
border-radius: 6px;
display: inline-flex;
}
.vl-dialog__close:hover,
.vl-drawer__close:hover { color: var(--forge-text-primary); background: var(--vl-surface-well); }
.vl-dialog__close:focus-visible,
.vl-drawer__close:focus-visible { outline: 2px solid var(--forge-interactive-default); outline-offset: 1px; }
.vl-dialog__body,
.vl-drawer__body {
padding: 16px 20px;
overflow-y: auto;
flex: 1;
color: var(--forge-text-secondary);
font-size: 14px;
line-height: 1.55;
}
.vl-dialog__footer,
.vl-drawer__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--vl-border-hairline);
background: var(--vl-surface-well);
}
/* ============================================================================
* 23 TABLE — .vl-table (carries the vellum-compact queue pattern)
* ============================================================================ */
.vl-table {
background: var(--forge-surface-primary);
border: 1px solid var(--vl-border-hairline);
border-radius: var(--vl-radius-card);
overflow: hidden;
box-shadow: var(--vl-shadow-rest);
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
.vl-table {
background: var(--vl-surface-content);
border-color: var(--vl-border-subtle);
-webkit-backdrop-filter: blur(var(--vl-blur-content)) saturate(140%);
backdrop-filter: blur(var(--vl-blur-content)) saturate(140%);
}
}
.vl-table__toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
border-bottom: 1px solid var(--vl-border-hairline);
flex-wrap: wrap;
}
.vl-table__filter-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--forge-text-tertiary);
font-weight: 500;
margin-right: 4px;
}
.vl-table__toolbar-spacer { flex: 1; }
.vl-table__search {
position: relative;
display: inline-flex;
align-items: center;
background: var(--vl-surface-well);
border: 1px solid var(--vl-border-hairline);
border-radius: var(--vl-radius-chip);
padding: 4px 10px 4px 28px;
min-width: 200px;
transition: border-color var(--vl-motion-fast);
}
.vl-table__search:focus-within {
border-color: color-mix(in oklch, var(--forge-interactive-default) 42%, var(--vl-border-hairline));
}
.vl-table__search svg {
position: absolute; left: 9px; width: 14px; height: 14px;
color: var(--forge-text-tertiary);
}
.vl-table__search input {
background: transparent; border: 0; outline: 0;
font-family: var(--vl-font-sans); font-size: 12.5px;
color: var(--forge-text-primary);
width: 100%;
}
.vl-table__search input::placeholder { color: var(--forge-text-tertiary); }
.vl-table table {
width: 100%;
border-collapse: collapse;
}
.vl-table thead th {
text-align: left;
padding: 12px 16px 10px;
color: var(--forge-text-tertiary);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
border-bottom: 1px solid var(--vl-border-hairline);
background: transparent;
}
.vl-table__sort {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: 0;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
letter-spacing: inherit;
text-transform: inherit;
font-weight: inherit;
transition: color var(--vl-motion-fast);
}
.vl-table__sort:hover { color: var(--forge-text-primary); }
.vl-table__sort:focus-visible { outline: 2px solid var(--forge-interactive-default); outline-offset: 2px; border-radius: 2px; }
.vl-table__sort svg { width: 10px; height: 10px; opacity: 0.55; transition: opacity var(--vl-motion-fast); }
.vl-table__sort:hover svg { opacity: 0.85; }
.vl-table__sort.is-sorted,
.vl-table__sort[aria-sort="ascending"],
.vl-table__sort[aria-sort="descending"] { color: var(--forge-interactive-default); }
.vl-table__sort.is-sorted svg,
.vl-table__sort[aria-sort="ascending"] svg,
.vl-table__sort[aria-sort="descending"] svg { opacity: 1; color: var(--forge-interactive-default); }
.vl-table tbody td {
padding: 12px 16px;
font-size: 14px;
color: var(--forge-text-primary);
border-bottom: 1px solid var(--vl-border-hairline);
vertical-align: middle;
}
.vl-table tbody tr:last-child td { border-bottom: 0; }
.vl-table tbody tr:hover td { background: var(--vl-surface-well); }
.vl-table__footer {
padding: 10px 20px;
border-top: 1px solid var(--vl-border-hairline);
}
/* ============================================================================
* 24 UTILITY HELPERS
* ============================================================================ */
.vl-stack { display: flex; flex-direction: column; gap: 12px; }
.vl-stack--lg { gap: 20px; }
.vl-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vl-row--lg { gap: 20px; }
/* Equal-column grid for card galleries, dashboards, side-by-side comparisons.
Default 1-up; --2/--3/--4 set the column count. Collapses to single column
under 720px so cards remain readable on narrow viewports. */
.vl-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.vl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vl-grid--lg { gap: 24px; }
@media (max-width: 720px) {
.vl-grid--2, .vl-grid--3, .vl-grid--4 { grid-template-columns: 1fr; }
}
.vl-divider {
height: 1px;
background: var(--vl-border-hairline);
border: 0;
margin: 16px 0;
}
.vl-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Focus-ring helper for non-native interactive elements. */
.vl-focus-ring:focus-visible {
outline: 2px solid var(--forge-interactive-default);
outline-offset: 2px;
}
/* Hidden helper for pagination/filter hiding without removing from DOM order. */
[data-vl-hidden="true"] { display: none !important; }