/* * Venturaline design system: tokens and component styles. * Version: 26f2f459 * * Generated by docs/design-system/system/make_vln.js from docs/design-system/system/project/. * Edit the source there and regenerate; changes made here are lost on the next build. * Rules and guidance: docs/design-system/README.md, rules.md and copy-rules.md. */ /* * Component rules match only inside an element with the vln-ui class (scope_css.js adds a * zero-specificity :where(.vln-ui) to each selector), so linking this stylesheet does not * restyle anything outside such an element. The token, theme and density rules set custom * properties on :root (or a data-density attribute) and nothing else. Link this file after * every legacy stylesheet. */ /* Tokens */ :root, [data-theme="light"] { --neutral-50: #f3f7fb; --neutral-100: #e5ecf2; --neutral-200: #cfd8e1; --neutral-300: #b5bfcb; --neutral-400: #98a5b2; --neutral-500: #7c8a99; --neutral-600: #627181; --neutral-700: #4d5b6a; --neutral-800: #3a4856; --neutral-900: #293644; --neutral-950: #182532; --blue-50: #f1f7ff; --blue-100: #deecff; --blue-200: #bddaff; --blue-300: #92c1ff; --blue-400: #63a5fb; --blue-500: #488adf; --blue-600: #2c70c4; --blue-700: #0b58ad; --blue-800: #00458e; --blue-900: #00346d; --blue-950: #03234b; --rose-50: #fff4f4; --rose-100: #ffe5e6; --rose-200: #ffcacd; --rose-300: #ffa6ac; --rose-400: #fb7c89; --rose-500: #e7576b; --rose-600: #c93952; --rose-700: #a62941; --rose-800: #842133; --rose-900: #621b26; --rose-950: #43131a; --violet-50: #fcf4ff; --violet-100: #f7e5ff; --violet-200: #edccfa; --violet-300: #dfabf4; --violet-400: #cf87eb; --violet-500: #be62df; --violet-600: #a641c8; --violet-700: #8830a6; --violet-800: #6c2783; --violet-900: #4f1f60; --violet-950: #351740; --cyan-50: #eef8fe; --cyan-100: #d6effe; --cyan-200: #b1ddf9; --cyan-300: #79c7f5; --cyan-400: #3cade7; --cyan-500: #0492cc; --cyan-600: #0077a8; --cyan-700: #006088; --cyan-800: #004c6d; --cyan-900: #003953; --cyan-950: #00273a; --teal-50: #edf9f7; --teal-100: #d1f2ec; --teal-200: #a8e3da; --teal-300: #64d0c2; --teal-400: #43b4a7; --teal-500: #1a998d; --teal-600: #007d73; --teal-700: #00655c; --teal-800: #005049; --teal-900: #003c37; --teal-950: #002925; --green-50: #eff9ef; --green-100: #d8f2da; --green-200: #b6e2bb; --green-300: #89ce92; --green-400: #54b766; --green-500: #199e41; --green-600: #008130; --green-700: #006825; --green-800: #00531c; --green-900: #003e13; --green-950: #002b0a; --yellow-50: #f8f8e4; --yellow-100: #eeeec4; --yellow-200: #dcdb99; --yellow-300: #c6c25e; --yellow-400: #ada70f; --yellow-500: #918c00; --yellow-600: #777200; --yellow-700: #5f5c00; --yellow-800: #4b4900; --yellow-900: #383600; --yellow-950: #262500; --amber-50: #fff5ec; --amber-100: #ffe7d1; --amber-200: #ffcea0; --amber-300: #fbae5f; --amber-400: #e88e20; --amber-500: #c67600; --amber-600: #a36000; --amber-700: #844c00; --amber-800: #693c00; --amber-900: #502c00; --amber-950: #381d00; --red-50: #fff4f2; --red-100: #ffe5e1; --red-200: #ffcbc2; --red-300: #ffa899; --red-400: #fc7e6b; --red-500: #e75a48; --red-600: #c93e2e; --red-700: #a52e21; --red-800: #83251a; --red-900: #621d14; --red-950: #43140e; --white: #ffffff; --logo-red: #c02026; --logo-navy: #24337a; --text-primary: var(--neutral-900); --text-secondary: var(--neutral-700); --text-disabled: var(--neutral-700); --text-on-color: var(--white); --text-accent: var(--blue-800); --text-accent-strong: var(--blue-950); --text-link: var(--blue-700); --text-error: var(--red-700); --text-success: var(--green-700); --text-warning: var(--amber-800); --layer-page: var(--neutral-50); --layer-surface: var(--white); --layer-subtle: var(--neutral-50); --layer-muted: var(--neutral-100); --layer-accent: var(--blue-200); --layer-accent-hover: var(--blue-300); --layer-accent-active: var(--blue-400); --layer-hover: var(--blue-200); --layer-active: var(--blue-300); --layer-selected: var(--blue-200); --layer-selected-hover: var(--blue-300); --layer-brand: var(--blue-800); --layer-brand-hover: var(--blue-900); --layer-brand-active: var(--blue-950); --layer-inverse: var(--neutral-900); --layer-disabled: var(--neutral-200); --layer-error: var(--red-100); --layer-error-active: var(--red-200); --layer-warning: var(--amber-100); --layer-success: var(--green-100); --field: var(--white); --border-subtle: var(--neutral-300); --border-strong: var(--neutral-600); --border-disabled: var(--neutral-300); --border-accent-subtle: var(--blue-300); --border-accent: var(--blue-400); --border-brand: var(--blue-800); --interactive: var(--blue-600); --interactive-hover: var(--blue-700); --interactive-active: var(--blue-800); --focus: var(--blue-600); --focus-gap: var(--white); --focus-inverse: var(--white); --support-error: var(--red-700); --support-success: var(--green-700); --support-warning: var(--amber-700); --support-info: var(--blue-600); --interactive-danger: var(--red-700); --interactive-danger-hover: var(--red-800); --interactive-danger-active: var(--red-900); --scrim-base: rgb(24 37 50 / 0.48); --scrim: var(--scrim-base); --brand-logo: var(--logo-navy); --brand-logo-accent: var(--logo-red); --table-stripe: var(--neutral-50); --table-hover: var(--blue-100); --table-selected: var(--layer-selected); --table-selected-hover: var(--layer-selected-hover); --table-selected-bar: var(--blue-700); --table-focus-selected: var(--blue-700); --table-heading: var(--neutral-50); --table-heading-ink: var(--blue-900); --table-heading-mark: var(--interactive); --table-heading-hover: var(--neutral-100); --table-heading-active: var(--neutral-200); --table-heading-line: var(--border-brand); --table-row-line: var(--neutral-200); --table-frame: var(--neutral-300); --tab-inactive: var(--blue-100); --tab-edge: var(--blue-400); --tab-hover-fill: var(--blue-200); --tab-hover-ink: var(--blue-900); --tab-hover-edge: var(--blue-500); --tab-press-fill: var(--blue-300); --tab-press-ink: var(--blue-950); --tab-press-edge: var(--blue-700); --tab-selected-ink: var(--text-accent); --tab-selected-top: var(--blue-600); --status-order-entry-ink: var(--blue-900); --status-order-entry-bg: var(--blue-200); --status-in-production-ink: var(--yellow-900); --status-in-production-bg: var(--yellow-200); --status-shipped-ink: var(--green-900); --status-shipped-bg: var(--green-200); --status-canceled-ink: var(--red-900); --status-canceled-bg: var(--red-200); --status-on-hold-ink: var(--amber-900); --status-on-hold-bg: var(--amber-200); --status-open-ink: var(--cyan-900); --status-open-bg: var(--cyan-200); --status-ready-to-ship-ink: var(--teal-900); --status-ready-to-ship-bg: var(--teal-200); --tag-neutral-bg: var(--neutral-200); --tag-neutral-ink: var(--neutral-900); --tag-blue-bg: var(--blue-200); --tag-blue-ink: var(--blue-900); --tag-cyan-bg: var(--cyan-200); --tag-cyan-ink: var(--cyan-900); --tag-teal-bg: var(--teal-200); --tag-teal-ink: var(--teal-900); --tag-green-bg: var(--green-200); --tag-green-ink: var(--green-900); --tag-yellow-bg: var(--yellow-200); --tag-yellow-ink: var(--yellow-900); --tag-amber-bg: var(--amber-200); --tag-amber-ink: var(--amber-900); --tag-red-bg: var(--red-200); --tag-red-ink: var(--red-900); --tag-rose-bg: var(--rose-200); --tag-rose-ink: var(--rose-900); --tag-violet-bg: var(--violet-200); --tag-violet-ink: var(--violet-900); --shadow-popup: 0 1px 2px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.18); --shadow-float: 0 1px 3px rgba(0, 0, 0, 0.18); --shadow-field-inset: inset 0 1px 2px rgba(16, 37, 66, 0.22), inset 0 0 1px rgba(16, 37, 66, 0.10); } :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --radius-control: 2px; --radius-popup: 6px; --radius-pill: 999px; --radius-tab: 4px; --control-height: 32px; --row-height-compact: 32px; --table-row-height: 34px; --table-heading-height: 36px; --table-row-height-popup: 32px; --control-height-customer: 44px; --icon-size: 16px; --icon-size-large: 24px; --popup-header-height: 40px; --popup-header-height-context: 48px; --popup-footer-height: 48px; --popup-width-notice: 400px; --popup-width-form: 560px; --popup-width-data-max: 1200px; --target-min: 24px; --z-sticky: 1; --z-local: 5; --z-skip-link: 20; --z-dropdown: 40; --z-scrim: 1000; --z-overlay: 1100; --z-toast: 1200; --duration-fast: 70ms; --duration-moderate: 110ms; --duration-slow: 150ms; --easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9); --easing-entrance: cubic-bezier(0, 0, 0.38, 0.9); --easing-exit: cubic-bezier(0.2, 0, 1, 0.9); --font-sans: Arial, Helvetica, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --type-page-title: 700 20px/26px var(--font-sans); --type-page-title-size: 20px; --type-heading: 700 16px/22px var(--font-sans); --type-heading-size: 16px; --type-popup-title: 700 15px/20px var(--font-sans); --type-popup-title-size: 15px; --type-body: 400 14px/20px var(--font-sans); --type-body-size: 14px; --type-label: 700 13px/18px var(--font-sans); --type-label-size: 13px; --type-hint: 400 13px/18px var(--font-sans); --type-hint-size: 13px; --type-input: 400 14px/20px var(--font-sans); --type-input-size: 14px; --type-input-customer: 400 16px/24px var(--font-sans); --type-input-customer-size: 16px; --type-button: 700 14px/20px var(--font-sans); --type-button-size: 14px; --type-table: 400 13px/18px var(--font-sans); --type-table-size: 13px; --type-table-heading: 700 13px/18px var(--font-sans); --type-table-heading-size: 13px; --type-caption: 400 12px/16px var(--font-sans); --type-caption-size: 12px; --type-mono: 400 13px/18px var(--font-mono); --type-mono-size: 13px; } /* Components */ /* Venturaline design system v2, foundations. Built from the variables compiled from tokens.json only. */ /* ---- Density ---------------------------------------------------------- */ :root, [data-density="staff"] { --density-control-height: var(--control-height); --density-input-size: var(--type-input-size); --density-input-line: 20px; --density-table-size: var(--type-table-size); } @media (max-width: 639.98px) { [data-density="customer"] { --density-control-height: var(--control-height-customer); --density-input-size: var(--type-input-customer-size); --density-input-line: 24px; --density-table-size: 14px; } } /* ---- Reset and base ---------------------------------------------------- */ .vln-ui, .vln-ui *, .vln-ui *::before, .vln-ui *::after { box-sizing: border-box; } .vln-ui { margin: 0; color: var(--text-primary); background: var(--layer-page); font: var(--type-body); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Resets carry zero specificity (:where) so every component class keeps the margins and weights it sets. */ :where(.vln-ui) :where(h1, h2, h3, p, ul, ol, fieldset, figure) { margin: 0; padding: 0; } :where(.vln-ui) :where(ul, ol) { list-style: none; } :where(.vln-ui) :where(fieldset) { border: 0; min-width: 0; } :where(.vln-ui) :where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; } :where(.vln-ui) :where(button) { cursor: pointer; } :where(.vln-ui) :where(img, svg) { display: block; max-width: 100%; } :where(.vln-ui) :where(a) { color: var(--text-link); text-decoration: underline; } :where(.vln-ui) :where(a:hover) { color: var(--interactive-hover); } :where(.vln-ui) :where(table) { border-collapse: collapse; border-spacing: 0; } .vln-ui [hidden] { display: none !important; } /* Identifiers and numbers */ :where(.vln-ui) .vln-mono { font-family: var(--font-mono); font-size: var(--type-mono-size); line-height: 18px; font-variant-numeric: tabular-nums; overflow-wrap: normal; white-space: nowrap; } :where(.vln-ui) .vln-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* ---- Focus ring: 2px blue with a 2px white gap ------------------------- */ .vln-ui :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); } .vln-ui :focus:not(:focus-visible) { outline: none; } /* A heading or dialog that script focuses (tabindex="-1") is not a control; it takes no ring. Controls and scroll regions keep theirs. */ .vln-ui :is(h1, h2, h3, h4, h5, h6, dialog)[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; } /* ---- Field inset ------------------------------------------------------- */ :where(.vln-ui) .vln-inset { box-shadow: var(--shadow-field-inset); } /* ---- Visually hidden --------------------------------------------------- */ :where(.vln-ui) .vln-visually-hidden, :where(.vln-ui) .vln-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---- Skeleton ---------------------------------------------------------- */ :where(.vln-ui) .vln-skeleton { display: block; min-height: 12px; border-radius: var(--radius-control); background: var(--layer-muted); background-image: linear-gradient(90deg, var(--layer-muted) 0%, var(--layer-subtle) 50%, var(--layer-muted) 100%); background-size: 200% 100%; animation: vln-skeleton-pulse 1.5s var(--easing-standard) infinite; } :where(.vln-ui) .vln-skeleton--line { height: 12px; } @keyframes vln-skeleton-pulse { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* ---- Icons ------------------------------------------------------------- */ :where(.vln-ui) .vln-icon { display: inline-block; width: var(--icon-size); height: var(--icon-size); flex: none; fill: currentColor; vertical-align: -3px; } /* ---- Field anatomy: label, control, error, hint ------------------------ */ :where(.vln-ui) .vln-field { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; } :where(.vln-ui) .vln-field + .vln-field { margin-top: var(--space-3); } :where(.vln-ui) .vln-field__label { font: var(--type-label); color: var(--text-primary); } :where(.vln-ui) .vln-field__required { color: var(--text-error); font-weight: 700; margin-left: 2px; } :where(.vln-ui) .vln-field__optional { color: var(--text-secondary); font-weight: 400; margin-left: var(--space-1); } :where(.vln-ui) .vln-field__control { width: 100%; min-height: var(--density-control-height); padding: 0 var(--space-2); font-size: var(--density-input-size); line-height: var(--density-input-line); color: var(--text-primary); background: var(--field); border: 1px solid var(--border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-field-inset); transition: border-color var(--duration-fast) var(--easing-standard); } :where(.vln-ui) textarea.vln-field__control { padding: var(--space-1) var(--space-2); min-height: 72px; resize: vertical; } :where(.vln-ui) .vln-field__control:hover { border-color: var(--interactive); } :where(.vln-ui) .vln-field__control[readonly] { background: var(--layer-page); } :where(.vln-ui) .vln-field__control:disabled { background: var(--layer-disabled); color: var(--text-disabled); border-color: var(--border-disabled); box-shadow: none; cursor: not-allowed; } :where(.vln-ui) .vln-field__error { display: flex; gap: var(--space-1); align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--text-error); } :where(.vln-ui) .vln-field__hint { font: var(--type-hint); color: var(--text-secondary); } :where(.vln-ui) .vln-field--invalid .vln-field__control { border: 2px solid var(--support-error); padding: 0 calc(var(--space-2) - 1px); } :where(.vln-ui) .vln-field--warning .vln-field__control { border: 2px solid var(--support-warning); padding: 0 calc(var(--space-2) - 1px); } /* ---- Popup zones: header, body, footer --------------------------------- */ :where(.vln-ui) .vln-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--scrim); } /* The popup frame has no fill of its own: the header, body and footer each paint theirs. A white frame behind the navy header shows as a pale sliver along the rounded top corners. */ :where(.vln-ui) .vln-modal { display: flex; flex-direction: column; width: 100%; max-width: var(--popup-width-form); max-height: calc(100vh - 2 * var(--space-6)); max-height: calc(100dvh - 2 * var(--space-6)); border-radius: var(--radius-popup); box-shadow: var(--shadow-popup); overflow: hidden; } :where(.vln-ui) .vln-modal--notice { max-width: var(--popup-width-notice); } :where(.vln-ui) .vln-modal--data { width: auto; max-width: var(--popup-width-data-max); } :where(.vln-ui) .vln-modal__header { position: relative; flex: none; min-height: var(--popup-header-height); display: flex; flex-direction: column; justify-content: center; padding: var(--space-1) 48px var(--space-1) var(--space-4); background: var(--layer-brand); color: var(--text-on-color); } /* A header with a context line (title plus a product code) is 48px, one modifier for every popup. */ :where(.vln-ui) .vln-modal__header--context { min-height: var(--popup-header-height-context); height: var(--popup-header-height-context); padding-top: var(--space-1); padding-bottom: var(--space-1); } :where(.vln-ui) .vln-modal__header--context .vln-modal__close { top: calc((var(--popup-header-height-context) - var(--control-height)) / 2); } :where(.vln-ui) .vln-modal__header--context .vln-modal__context { margin-top: 2px; } :where(.vln-ui) .vln-modal__title { font: var(--type-popup-title); color: var(--text-on-color); } :where(.vln-ui) .vln-modal__context { font: var(--type-caption); color: var(--text-on-color); } :where(.vln-ui) .vln-modal__close { position: absolute; top: calc((var(--popup-header-height) - var(--control-height)) / 2); right: var(--space-2); display: inline-flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); padding: 0; color: var(--text-on-color); background: transparent; border: 0; border-radius: var(--radius-control); } :where(.vln-ui) .vln-modal__close:is(:hover, .is-hover) { background: var(--layer-brand-hover); } :where(.vln-ui) .vln-modal__close:is(:active, .is-active) { background: var(--layer-brand-active); } :where(.vln-ui) .vln-modal__header .vln-modal__close:is(:focus-visible, .is-focus) { outline: 2px solid var(--focus-inverse); outline-offset: -2px; box-shadow: none; } :where(.vln-ui) .vln-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-4); background: var(--layer-surface); color: var(--text-primary); } :where(.vln-ui) .vln-modal--data .vln-modal__body { padding: var(--space-2) var(--space-3); } :where(.vln-ui) .vln-modal__footer { flex: none; flex-wrap: wrap; min-height: var(--popup-footer-height); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-4); background: var(--layer-subtle); border-top: 1px solid var(--border-subtle); } :where(.vln-ui) .vln-modal__status { margin-right: auto; font: var(--type-hint); color: var(--text-secondary); } /* A popup run by scripts/modal-component.js is a . The browser's dialog styles (border, padding, fill, inset) are replaced here; the script drags and resizes it by setting left, top, width and height. */ :where(.vln-ui) dialog.vln-modal { position: fixed; left: 50%; top: 50%; box-sizing: border-box; margin: 0; padding: 0; border: 0; transform: translate(-50%, -50%); background: transparent; font-family: var(--font-sans); color: var(--text-primary); } :where(.vln-ui) dialog.vln-modal:not([open]) { display: none; } :where(.vln-ui) dialog.vln-modal[data-vln-modal-positioned] { transform: none; } :where(.vln-ui) dialog.vln-modal::backdrop { background: var(--scrim); } /* A data popup is as wide as its table. */ :where(.vln-ui) dialog.vln-modal--data { width: max-content; max-width: min(var(--popup-width-data-max), calc(100vw - 2 * var(--space-2))); } :where(.vln-ui) .vln-modal__title { min-width: 0; overflow-wrap: anywhere; } :where(.vln-ui) .vln-modal__body { overscroll-behavior: contain; } :where(.vln-ui) .vln-modal__header[data-vln-modal-drag] { cursor: move; touch-action: none; user-select: none; } :where(.vln-ui) .vln-modal__resize { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; padding: 0; border: 0; touch-action: none; cursor: nwse-resize; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 11 11 4M8 11l3-3' fill='none' stroke='%23869bab' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") right 3px bottom 3px / 12px 12px no-repeat; } :where(.vln-ui) .vln-modal__resize:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; } /* The corner only changes the cursor, as a window's does. The footer keeps its last button clear of it. */ @media (min-width: 640.02px) and (min-height: 480.02px) { :where(.vln-ui) dialog.vln-modal:has(> .vln-modal__resize) .vln-modal__footer { padding-right: calc(24px + var(--space-2)); } } /* On a phone, or in a window under 480px tall, the popup fills the window and cannot be moved or resized. */ @media (max-width: 640px), (max-height: 480px) { :where(.vln-ui) dialog.vln-modal { left: var(--space-2); top: var(--space-2); width: calc(100vw - 2 * var(--space-2)); height: calc(100vh - 2 * var(--space-2)); height: calc(100dvh - 2 * var(--space-2)); transform: none; } :where(.vln-ui) .vln-modal__header[data-vln-modal-drag] { cursor: default; touch-action: auto; } :where(.vln-ui) .vln-modal__resize { display: none; } } @media (max-width: 639.98px) { :where(.vln-ui) dialog.vln-modal { max-width: calc(100vw - 2 * var(--space-2)); } } /* Input text is 16px on a phone, so the browser does not zoom in when a field is tapped (rules.md A4). */ @media (max-width: 640px) { :where(.vln-ui) dialog.vln-modal :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"]), select, textarea) { font-size: 16px; } } /* A control a script marks with aria-invalid alone, without .vln-field--invalid, gets the invalid look too. */ :where(.vln-ui) .vln-field__control[aria-invalid="true"] { border: 2px solid var(--support-error); padding: 0 calc(var(--space-2) - 1px); } :where(.vln-ui) textarea.vln-field__control[aria-invalid="true"], :where(.vln-ui) .vln-field--invalid textarea.vln-field__control { padding: calc(var(--space-1) - 1px) calc(var(--space-2) - 1px); } /* A field scrolled into view for an error keeps some space above and below it. */ :where(.vln-ui) .vln-field { scroll-margin-block: 12px; } /* A form popup's form stacks its fields the way the body stacks its children. */ .vln-ui .vln-modal__body > form > * + * { margin-top: var(--space-3); } /* The footer status line takes the colour of the result it reports. */ :where(.vln-ui) .vln-modal__status[data-state="error"] { color: var(--text-error); } :where(.vln-ui) .vln-modal__status[data-state="success"] { color: var(--text-success); } /* ---- Reduced motion: no movement, everything works instantly ----------- */ @media (prefers-reduced-motion: reduce) { .vln-ui *, .vln-ui *::before, .vln-ui *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } :where(.vln-ui) .vln-skeleton { animation: none; background-image: none; } } /* Venturaline design system v2, group A: Actions and Forms. Token variables only; builds on 00-foundations.css. */ /* ---- Shared: forced states for static previews, density demo ----------- */ .vln-ui .is-focus { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); } .vln-ui .vln-field__control.is-focus, .vln-ui .vln-field__control:focus-visible { box-shadow: var(--shadow-field-inset), 0 0 0 2px var(--focus-gap); } .vln-ui .vln-field__control.is-hover:not(:disabled) { border-color: var(--interactive); } /* ===================== ACTIONS ======================================== */ /* ---- Button ------------------------------------------------------------ */ :where(.vln-ui) .vln-button { --_bg: var(--interactive); --_fg: var(--text-on-color); --_bd: var(--interactive); } .vln-ui .vln-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 72px; min-height: var(--density-control-height); padding: 0 var(--space-4); font-size: var(--density-input-size); line-height: var(--density-input-line); font-weight: 700; white-space: nowrap; text-decoration: none; text-align: center; color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--radius-control); transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); } :where(.vln-ui) .vln-button--primary { --_bg: var(--interactive); --_fg: var(--text-on-color); --_bd: var(--interactive); } :where(.vln-ui) .vln-button--primary:is(:hover, .is-hover) { --_bg: var(--interactive-hover); --_bd: var(--interactive-hover); } :where(.vln-ui) .vln-button--primary:is(:active, .is-active) { --_bg: var(--interactive-active); --_bd: var(--interactive-active); } :where(.vln-ui) .vln-button--secondary { --_bg: var(--layer-accent); --_fg: var(--text-accent); --_bd: var(--layer-accent); } :where(.vln-ui) .vln-button--secondary:is(:hover, .is-hover) { --_bg: var(--layer-accent-hover); --_bd: var(--layer-accent-hover); } :where(.vln-ui) .vln-button--secondary:is(:active, .is-active) { --_bg: var(--layer-accent-active); --_fg: var(--text-accent-strong); --_bd: var(--layer-accent-active); } :where(.vln-ui) .vln-button--tertiary { --_bg: var(--layer-surface); --_fg: var(--interactive); --_bd: var(--interactive); } :where(.vln-ui) .vln-button--tertiary:is(:hover, .is-hover) { --_bg: var(--layer-hover); --_fg: var(--interactive-hover); --_bd: var(--interactive-hover); } :where(.vln-ui) .vln-button--tertiary:is(:active, .is-active) { --_bg: var(--layer-active); --_fg: var(--interactive-active); --_bd: var(--interactive-active); } :where(.vln-ui) .vln-button--ghost { --_bg: transparent; --_fg: var(--interactive); --_bd: transparent; } :where(.vln-ui) .vln-button--ghost:is(:hover, .is-hover) { --_bg: var(--layer-hover); --_fg: var(--interactive-hover); } :where(.vln-ui) .vln-button--ghost:is(:active, .is-active) { --_bg: var(--layer-active); --_fg: var(--interactive-active); } :where(.vln-ui) .vln-button--danger { --_bg: var(--interactive-danger); --_fg: var(--text-on-color); --_bd: var(--interactive-danger); } :where(.vln-ui) .vln-button--danger:is(:hover, .is-hover) { --_bg: var(--interactive-danger-hover); --_bd: var(--interactive-danger-hover); } :where(.vln-ui) .vln-button--danger:is(:active, .is-active) { --_bg: var(--interactive-danger-active); --_bd: var(--interactive-danger-active); } /* Danger tertiary: the tertiary outline in red, for a destructive action that is not the main one in its group. */ :where(.vln-ui) .vln-button--danger-tertiary { --_bg: var(--layer-surface); --_fg: var(--interactive-danger); --_bd: var(--interactive-danger); } :where(.vln-ui) .vln-button--danger-tertiary:is(:hover, .is-hover) { --_bg: var(--layer-error); --_fg: var(--interactive-danger-hover); --_bd: var(--interactive-danger-hover); } :where(.vln-ui) .vln-button--danger-tertiary:is(:active, .is-active) { --_bg: var(--layer-error-active); --_fg: var(--interactive-danger-active); --_bd: var(--interactive-danger-active); } :where(.vln-ui) .vln-button--danger-ghost { --_bg: transparent; --_fg: var(--text-error); --_bd: transparent; } :where(.vln-ui) .vln-button--danger-ghost:is(:hover, .is-hover) { --_bg: var(--layer-error); } :where(.vln-ui) .vln-button--danger-ghost:is(:active, .is-active) { --_bg: var(--layer-error-active); } /* Loading: the button stays in place and says what is happening. It is not disabled-looking and never loses its label. */ .vln-ui .vln-button.is-loading { --_bg: var(--layer-accent); --_fg: var(--text-accent); --_bd: var(--border-accent-subtle); cursor: progress; } .vln-ui .vln-button:disabled, .vln-ui .vln-button.is-disabled, .vln-ui .vln-button[aria-disabled="true"]:not([aria-busy="true"]) { --_bg: var(--layer-disabled); --_fg: var(--text-disabled); --_bd: var(--border-disabled); cursor: not-allowed; } :where(.vln-ui) .vln-button .vln-icon { margin: 0; } /* Small: for buttons that live inside a table row (24px, the minimum target; rows are 34px on pages and 32px in popups) */ .vln-ui .vln-button--small { min-width: 0; min-height: var(--target-min); padding: 0 var(--space-2); font-size: 13px; line-height: 18px; } :where(.vln-ui) .vln-button-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } :where(.vln-ui) .vln-button-group--end { justify-content: flex-end; } /* ---- Icon button ------------------------------------------ */ :where(.vln-ui) .vln-icon-button { --_bg: transparent; --_fg: var(--text-primary); } .vln-ui .vln-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--density-control-height); height: var(--density-control-height); padding: 0; color: var(--_fg); background: var(--_bg); border: 1px solid transparent; border-radius: var(--radius-control); transition: background-color var(--duration-fast) var(--easing-standard); } .vln-ui .vln-icon-button--compact { width: var(--target-min); height: var(--target-min); } :where(.vln-ui) .vln-icon-button:is(:hover, .is-hover) { --_bg: var(--layer-hover); } :where(.vln-ui) .vln-icon-button:is(:active, .is-active) { --_bg: var(--layer-active); } :where(.vln-ui) .vln-icon-button[aria-expanded="true"], :where(.vln-ui) .vln-icon-button[aria-pressed="true"] { --_bg: var(--layer-active); --_fg: var(--text-accent); } :where(.vln-ui) .vln-icon-button--danger { --_fg: var(--text-error); } :where(.vln-ui) .vln-icon-button--danger:is(:hover, .is-hover) { --_bg: var(--layer-error); } :where(.vln-ui) .vln-icon-button--danger:is(:active, .is-active) { --_bg: var(--layer-error-active); } .vln-ui .vln-icon-button:disabled { --_bg: var(--layer-disabled); --_fg: var(--text-disabled); border-color: var(--border-disabled); cursor: not-allowed; } :where(.vln-ui) .vln-icon-button .vln-icon { margin: 0; } /* Tooltips for icon buttons are the Tooltip component (.vln-tooltip-wrap, 20-feedback.css); nothing separate lives here. */ /* ---- Link ---------------------------------------------------------------- */ :where(.vln-ui) a.vln-link { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } :where(.vln-ui) a.vln-link:is(:hover, .is-hover) { color: var(--interactive-hover); text-decoration-thickness: 2px; } :where(.vln-ui) a.vln-link:is(:active, .is-active) { color: var(--interactive-active); } :where(.vln-ui) a.vln-link--standalone { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); font-weight: 700; text-decoration: none; } :where(.vln-ui) a.vln-link--standalone:is(:hover, .is-hover, :focus-visible) { text-decoration: underline; } :where(.vln-ui) .vln-link--standalone .vln-icon { margin: 0; } /* ---- Menu and overflow menu ---------------------------------------------- */ :where(.vln-ui) .vln-menu-wrap { position: relative; display: inline-block; } :where(.vln-ui) .vln-menu { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 2px); left: 0; min-width: 200px; padding: var(--space-1) 0; background: var(--layer-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); box-shadow: var(--shadow-float); } :where(.vln-ui) .vln-menu--end { left: auto; right: 0; } :where(.vln-ui) .vln-menu--up { top: auto; bottom: calc(100% + 2px); } :where(.vln-ui) .vln-menu.is-static { position: relative; top: 0; display: block; width: max-content; margin-top: var(--space-1); } :where(.vln-ui) .vln-menu__sep { height: 0; margin: var(--space-1) 0; border: 0; border-top: 1px solid var(--border-subtle); } :where(.vln-ui) .vln-menu__item { --_bg: var(--layer-surface); --_fg: var(--text-primary); } .vln-ui .vln-menu__item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--density-control-height); padding: 0 var(--space-3); text-align: left; white-space: nowrap; font-size: var(--density-input-size); line-height: var(--density-input-line); color: var(--_fg); background: var(--_bg); border: 0; border-radius: 0; } :where(.vln-ui) .vln-menu__item:is(:hover, .is-hover) { --_bg: var(--layer-hover); } :where(.vln-ui) .vln-menu__item:is(:active, .is-active) { --_bg: var(--layer-active); } .vln-ui .vln-menu__item:focus-visible, .vln-ui .vln-menu__item.is-focus { outline: 2px solid var(--focus); outline-offset: -4px; box-shadow: none; --_bg: var(--layer-hover); } :where(.vln-ui) .vln-menu__item--danger { --_fg: var(--text-error); } :where(.vln-ui) .vln-menu__item--danger:is(:hover, .is-hover) { --_bg: var(--layer-error); } :where(.vln-ui) .vln-menu__item--danger:is(:active, .is-active) { --_bg: var(--layer-error-active); } .vln-ui .vln-menu__item--danger:focus-visible, .vln-ui .vln-menu__item--danger.is-focus { --_bg: var(--layer-error); } /* ===================== FORMS ========================================== */ /* ---- Field extensions (anatomy classes live in the foundations) ---------- */ :where(.vln-ui) .vln-required-note { font: var(--type-hint); color: var(--text-secondary); margin-bottom: var(--space-3); } :where(.vln-ui) .vln-required-note .vln-field__required { margin: 0 var(--space-1) 0 0; } :where(.vln-ui) .vln-field-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); } :where(.vln-ui) .vln-field-row > .vln-field + .vln-field { margin-top: 0; } /* Two related fields that share a row equally (Your Name and Your Email Address); they stack when the row is narrower than two 200px fields. */ :where(.vln-ui) .vln-field-row--halves > .vln-field { flex: 1 1 0; min-width: min(200px, 100%); } :where(.vln-ui) .vln-field--sm { width: 160px; } :where(.vln-ui) .vln-field--md { width: 280px; } :where(.vln-ui) .vln-field--lg { width: 420px; } :where(.vln-ui) .vln-field--date { width: 176px; } :where(.vln-ui) .vln-field__control-wrap { position: relative; display: flex; align-items: center; width: 100%; } :where(.vln-ui) .vln-field__control-wrap > .vln-field__control { padding-right: 40px; } :where(.vln-ui) .vln-field__trailing { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); display: inline-flex; } :where(.vln-ui) .vln-field__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); width: 100%; } :where(.vln-ui) .vln-field__counter { margin-left: auto; flex: none; font-size: 13px; line-height: 18px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } :where(.vln-ui) .vln-field__counter.is-near { color: var(--text-warning); font-weight: 700; } :where(.vln-ui) .vln-field__counter.is-over { color: var(--text-error); font-weight: 700; } :where(.vln-ui) .vln-field__warning, :where(.vln-ui) .vln-field__success, :where(.vln-ui) .vln-field__reason { display: flex; gap: var(--space-1); align-items: flex-start; font-size: 13px; line-height: 18px; } :where(.vln-ui) .vln-field__warning { color: var(--text-warning); } :where(.vln-ui) .vln-field__success { color: var(--text-success); } :where(.vln-ui) .vln-field__reason { color: var(--text-secondary); } :where(.vln-ui) .vln-field__reason .vln-icon { color: var(--text-secondary); } :where(.vln-ui) .vln-field__error .vln-icon, :where(.vln-ui) .vln-field__warning .vln-icon, :where(.vln-ui) .vln-field__success .vln-icon, :where(.vln-ui) .vln-field__reason .vln-icon { margin-top: 1px; } :where(.vln-ui) .vln-field--invalid .vln-field__control-wrap > .vln-field__control { padding-right: 39px; } /* Error fields keep the white fill so the inset shadow still reads; the 2px red border and the message carry the state. */ :where(.vln-ui) .vln-field--invalid .vln-field__control { background: var(--field); } :where(.vln-ui) .vln-field--success .vln-field__control { border: 2px solid var(--support-success); padding: 0 calc(var(--space-2) - 1px); } :where(.vln-ui) :is(.vln-field--invalid, .vln-field--warning, .vln-field--success) textarea.vln-field__control { padding: calc(var(--space-1) - 1px) calc(var(--space-2) - 1px); } :where(.vln-ui) .vln-field--locked .vln-field__control { background: var(--layer-page); color: var(--text-primary); } :where(.vln-ui) .vln-field--locked .vln-field__control:hover { border-color: var(--border-strong); } /* Locked ComboBox: the same gray look as the other locked controls. */ :where(.vln-ui) .vln-field--locked .vln-combobox .vln-field__control, :where(.vln-ui) .vln-combobox.vln-field--locked .vln-field__control { background: var(--layer-page); color: var(--text-primary); } :where(.vln-ui) .vln-field--locked .vln-combobox__chevron { color: var(--text-secondary); } :where(.vln-ui) .vln-field--loading .vln-field__control { background: var(--layer-page); } .vln-ui select.vln-field__control, .vln-ui input.vln-field__control { height: var(--density-control-height); } .vln-ui textarea.vln-field__control { line-height: var(--density-input-line); } .vln-ui input[type="date"].vln-field__control { font-variant-numeric: tabular-nums; color-scheme: light; } .vln-ui input[type="date"].vln-field__control::-webkit-calendar-picker-indicator { cursor: pointer; padding: var(--space-1); } :where(.vln-ui) .vln-field__control::placeholder { color: var(--text-secondary); } /* Password toggle sits inside the input as a 24px icon button. */ :where(.vln-ui) .vln-field__trailing .vln-icon-button { width: var(--target-min); height: var(--target-min); } /* Narrow fields (and the last field of a row) let their message run past the control instead of wrapping word by word. */ :where(.vln-ui) :is(.vln-field--sm, .vln-field--date):not(.vln-field-row > :not(:last-child)) > :is(.vln-field__error, .vln-field__warning, .vln-field__success, .vln-field__reason, .vln-field__hint) { width: max-content; max-width: 320px; } :where(.vln-ui) .vln-field-row > .vln-field:last-child > .vln-field__error { width: max-content; max-width: 320px; } /* ---- Select (native) ----------------------------------------------------- */ :where(.vln-ui) .vln-select { position: relative; width: 100%; } .vln-ui .vln-select > select.vln-field__control { display: block; appearance: none; -webkit-appearance: none; padding-right: 32px; text-overflow: ellipsis; cursor: pointer; } .vln-ui .vln-select > select.vln-field__control:disabled { cursor: not-allowed; } :where(.vln-ui) .vln-select__icon { position: absolute; right: var(--space-2); top: calc(var(--density-control-height) / 2 - 8px); pointer-events: none; color: var(--text-primary); } :where(.vln-ui) .vln-field--invalid .vln-select__icon { right: calc(var(--space-2) - 1px); } :where(.vln-ui) .vln-select > select:disabled ~ .vln-select__icon { color: var(--text-disabled); } /* ---- Listbox (ComboBox and Multiselect popup) ---------------------------- */ :where(.vln-ui) .vln-listbox { position: absolute; z-index: var(--z-dropdown); left: 0; right: 0; top: calc(100% + 2px); max-height: 240px; overflow: auto; margin: 0; padding: var(--space-1) 0; background: var(--layer-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-float); } :where(.vln-ui) .vln-listbox.is-static { position: relative; top: 0; margin-top: var(--space-1); } :where(.vln-ui) .vln-option { display: flex; align-items: center; gap: var(--space-2); min-height: var(--density-control-height); padding: var(--space-1) var(--space-2); font-size: var(--density-input-size); line-height: var(--density-input-line); color: var(--text-primary); cursor: pointer; background: var(--layer-surface); } :where(.vln-ui) .vln-option__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } :where(.vln-ui) .vln-option__meta { font: var(--type-hint); color: var(--text-secondary); } :where(.vln-ui) .vln-option__match { font-weight: 700; } :where(.vln-ui) .vln-option:is(:hover, .is-hover) { background: var(--layer-hover); } :where(.vln-ui) .vln-option.is-active { background: var(--layer-hover); outline: 2px solid var(--focus); outline-offset: -4px; } :where(.vln-ui) .vln-option[aria-selected="true"] .vln-option__label { font-weight: 700; } :where(.vln-ui) .vln-option[aria-selected="true"]:is(:hover, .is-hover) { background: var(--layer-selected-hover); } :where(.vln-ui) .vln-option__check { margin-left: auto; color: var(--interactive); visibility: hidden; } :where(.vln-ui) .vln-option[aria-selected="true"] .vln-option__check { visibility: visible; } :where(.vln-ui) .vln-option__box { position: relative; flex: none; width: 16px; height: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--field); box-shadow: var(--shadow-field-inset); } :where(.vln-ui) .vln-option[aria-selected="true"] .vln-option__box { background: var(--interactive); border-color: var(--interactive); } :where(.vln-ui) .vln-option[aria-selected="true"] .vln-option__box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--text-on-color); border-width: 0 2px 2px 0; transform: rotate(45deg); } :where(.vln-ui) .vln-listbox__status { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); font: var(--type-hint); color: var(--text-secondary); } :where(.vln-ui) .vln-listbox__status .vln-icon { margin-top: 1px; color: var(--support-info); } :where(.vln-ui) .vln-listbox__status--error { color: var(--text-error); } :where(.vln-ui) .vln-listbox__status--error .vln-icon { color: var(--support-error); } :where(.vln-ui) .vln-listbox__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; } /* ---- ComboBox ------------------------------------------------------------ */ :where(.vln-ui) .vln-combobox { position: relative; width: 100%; } :where(.vln-ui) .vln-combobox .vln-field__control { padding-right: 56px; } :where(.vln-ui) .vln-combobox__clear { position: absolute; right: 28px; top: calc(var(--density-control-height) / 2 - 12px); } :where(.vln-ui) .vln-combobox__chevron { position: absolute; right: var(--space-2); top: calc(var(--density-control-height) / 2 - 8px); pointer-events: none; color: var(--text-primary); transition: transform var(--duration-fast) var(--easing-standard); } :where(.vln-ui) .vln-combobox.is-open .vln-combobox__chevron { transform: rotate(180deg); } :where(.vln-ui) .vln-field--invalid .vln-combobox__clear { right: 27px; } :where(.vln-ui) .vln-field--invalid .vln-combobox__chevron { right: calc(var(--space-2) - 1px); } :where(.vln-ui) .vln-combobox .vln-field__control:disabled ~ .vln-combobox__chevron { color: var(--text-disabled); } /* ---- Multiselect ---------------------------------------------------------- */ :where(.vln-ui) .vln-multiselect { position: relative; width: 100%; } :where(.vln-ui) .vln-multiselect__control { --_multiselect-pad-y: calc((var(--density-control-height) - 26px) / 2); display: flex; align-items: center; gap: var(--space-1); width: 100%; min-height: var(--density-control-height); padding: var(--_multiselect-pad-y) var(--space-2); background: var(--field); border: 1px solid var(--border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-field-inset); cursor: text; } :where(.vln-ui) .vln-multiselect__control:is(:hover, .is-hover) { border-color: var(--interactive); } :where(.vln-ui) .vln-multiselect__control:has(.vln-multiselect__input:focus), :where(.vln-ui) .vln-multiselect__control.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: var(--shadow-field-inset), 0 0 0 2px var(--focus-gap); } :where(.vln-ui) .vln-multiselect__chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); } .vln-ui .vln-multiselect__input { flex: 1 1 60px; min-width: 60px; height: var(--target-min); padding: 0; border: 0; background: transparent; font-size: var(--density-input-size); line-height: var(--density-input-line); } .vln-ui .vln-multiselect__input:focus-visible { outline: none; box-shadow: none; } :where(.vln-ui) .vln-multiselect__chip { flex: none; min-width: 0; cursor: default; } :where(.vln-ui) .vln-multiselect.is-disabled .vln-multiselect__chip, :where(.vln-ui) .vln-multiselect.is-locked .vln-multiselect__chip { padding-right: var(--space-2); } .vln-ui .vln-multiselect__chip .vln-tag__remove:focus-visible, .vln-ui .vln-multiselect__chip .vln-tag__remove.is-focus { outline: 2px solid var(--focus); outline-offset: -2px; box-shadow: none; } :where(.vln-ui) .vln-multiselect__chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } :where(.vln-ui) .vln-multiselect__chip.is-selected { background: var(--layer-accent-active); color: var(--text-accent-strong); outline: 2px solid var(--interactive); outline-offset: 1px; } .vln-ui .vln-multiselect__more { padding: 0 var(--space-2); cursor: pointer; font-family: inherit; } .vln-ui .vln-multiselect__more:is(:hover, .is-hover) { background: var(--layer-accent-hover); } .vln-ui .vln-multiselect__more:is(:active, .is-active) { background: var(--layer-accent-active); color: var(--text-accent-strong); } :where(.vln-ui) .vln-multiselect__trail { flex: none; align-self: stretch; display: flex; align-items: center; gap: var(--space-1); } :where(.vln-ui) .vln-multiselect__chevron { flex: none; color: var(--text-primary); } :where(.vln-ui) .vln-multiselect.is-open .vln-multiselect__chevron { transform: rotate(180deg); } :where(.vln-ui) .vln-multiselect.is-disabled .vln-multiselect__control { background: var(--layer-disabled); border-color: var(--border-disabled); box-shadow: none; cursor: not-allowed; } :where(.vln-ui) .vln-multiselect.is-disabled .vln-multiselect__chevron, :where(.vln-ui) .vln-multiselect.is-disabled .vln-multiselect__input { color: var(--text-disabled); } :where(.vln-ui) .vln-multiselect.is-disabled .vln-multiselect__chip { color: var(--text-disabled); background: transparent; border-color: var(--border-disabled); } :where(.vln-ui) .vln-multiselect.is-locked .vln-multiselect__control { background: var(--layer-page); cursor: default; } :where(.vln-ui) .vln-multiselect.is-locked .vln-multiselect__control:hover { border-color: var(--border-strong); } :where(.vln-ui) .vln-multiselect.is-locked .vln-multiselect__chevron { color: var(--text-secondary); } :where(.vln-ui) .vln-multiselect.is-locked .vln-multiselect__chip { color: var(--text-primary); background: var(--layer-surface); border-color: var(--border-strong); } :where(.vln-ui) .vln-field--invalid .vln-multiselect__control { border: 2px solid var(--support-error); background: var(--field); padding: calc(var(--_multiselect-pad-y) - 1px) calc(var(--space-2) - 1px); } /* ---- Checkbox, checkbox group, radio ------------------------------------- */ :where(.vln-ui) .vln-checkbox, :where(.vln-ui) .vln-radio { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-2); min-height: var(--target-min); padding: var(--space-1) 0; cursor: pointer; font-size: 14px; line-height: 16px; color: var(--text-primary); } @media (max-width: 639.98px) { :where(.vln-ui)[data-density="customer"] .vln-checkbox,[data-density="customer"] :where(.vln-ui) .vln-checkbox, :where(.vln-ui)[data-density="customer"] .vln-radio,[data-density="customer"] :where(.vln-ui) .vln-radio { min-height: var(--control-height-customer); align-items: center; font-size: var(--type-input-customer-size); line-height: 22px; } } .vln-ui .vln-checkbox__input, .vln-ui .vln-radio__input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 16px; height: 16px; margin: 0; background: var(--field); border: 1px solid var(--border-strong); box-shadow: var(--shadow-field-inset); cursor: inherit; transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard); } .vln-ui .vln-checkbox__input { border-radius: var(--radius-control); } .vln-ui .vln-radio__input { border-radius: 50%; } .vln-ui .vln-checkbox__input:focus-visible, .vln-ui .vln-radio__input:focus-visible, .vln-ui .vln-checkbox__input.is-focus, .vln-ui .vln-radio__input.is-focus { box-shadow: var(--shadow-field-inset), 0 0 0 2px var(--focus-gap); } :where(.vln-ui) .vln-checkbox__input.is-hover, :where(.vln-ui) .vln-checkbox:hover .vln-checkbox__input, :where(.vln-ui) .vln-radio__input.is-hover, :where(.vln-ui) .vln-radio:hover .vln-radio__input { border-color: var(--interactive); } :where(.vln-ui) .vln-checkbox__input:checked, :where(.vln-ui) .vln-checkbox__input:indeterminate { background: var(--interactive); border-color: var(--interactive); } :where(.vln-ui) .vln-checkbox__input:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--text-on-color); border-width: 0 2px 2px 0; transform: rotate(45deg); } :where(.vln-ui) .vln-checkbox__input:indeterminate::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 2px; background: var(--text-on-color); } :where(.vln-ui) .vln-checkbox__input:checked.is-hover, :where(.vln-ui) .vln-checkbox__input:indeterminate.is-hover, :where(.vln-ui) .vln-checkbox:hover .vln-checkbox__input:is(:checked, :indeterminate) { background: var(--interactive-hover); border-color: var(--interactive-hover); } :where(.vln-ui) .vln-checkbox__input.is-active, :where(.vln-ui) .vln-checkbox:active .vln-checkbox__input { background: var(--layer-active); border-color: var(--interactive-active); } :where(.vln-ui) .vln-checkbox__input:is(:checked, :indeterminate).is-active, :where(.vln-ui) .vln-checkbox:active .vln-checkbox__input:is(:checked, :indeterminate) { background: var(--interactive-active); border-color: var(--interactive-active); } :where(.vln-ui) .vln-radio__input:checked { border-color: var(--interactive); } :where(.vln-ui) .vln-radio__input:checked::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--interactive); } :where(.vln-ui) .vln-radio__input:checked.is-hover, :where(.vln-ui) .vln-radio:hover .vln-radio__input:checked { border-color: var(--interactive-hover); } :where(.vln-ui) .vln-radio__input:checked.is-hover::after, :where(.vln-ui) .vln-radio:hover .vln-radio__input:checked::after { background: var(--interactive-hover); } :where(.vln-ui) .vln-radio__input.is-active, :where(.vln-ui) .vln-radio:active .vln-radio__input { background: var(--layer-active); } :where(.vln-ui) .vln-checkbox__input:disabled, :where(.vln-ui) .vln-radio__input:disabled { background: var(--layer-disabled); border-color: var(--border-disabled); box-shadow: none; cursor: not-allowed; } :where(.vln-ui) .vln-checkbox__input:disabled:is(:checked, :indeterminate) { background: var(--border-disabled); } :where(.vln-ui) .vln-checkbox__input:disabled:checked::after { border-color: var(--text-disabled); } :where(.vln-ui) .vln-checkbox__input:disabled:indeterminate::after { background: var(--text-disabled); } :where(.vln-ui) .vln-radio__input:disabled:checked::after { background: var(--text-disabled); } :where(.vln-ui) .vln-checkbox:has(:disabled), :where(.vln-ui) .vln-radio:has(:disabled) { color: var(--text-disabled); cursor: not-allowed; } :where(.vln-ui) .vln-checkbox__input[aria-readonly="true"] { background: var(--layer-page); cursor: default; } :where(.vln-ui) .vln-checkbox__input[aria-readonly="true"]:is(:checked, :indeterminate) { background: var(--text-secondary); border-color: var(--text-secondary); } :where(.vln-ui) .vln-radio__input[aria-readonly="true"] { background: var(--layer-page); cursor: default; } :where(.vln-ui) .vln-radio__input[aria-readonly="true"]:checked { border-color: var(--text-secondary); } :where(.vln-ui) .vln-radio__input[aria-readonly="true"]:checked::after { background: var(--text-secondary); } :where(.vln-ui) .vln-checkbox:has([aria-readonly="true"]), :where(.vln-ui) .vln-radio:has([aria-readonly="true"]) { cursor: default; } :where(.vln-ui) .vln-choice-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; } :where(.vln-ui) .vln-choice-group__legend { padding: 0; font: var(--type-label); color: var(--text-primary); } :where(.vln-ui) .vln-choice-group__items { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); } :where(.vln-ui) .vln-choice-group__items--inline { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-4); } :where(.vln-ui) .vln-choice-group--invalid .vln-checkbox__input, :where(.vln-ui) .vln-choice-group--invalid .vln-radio__input, :where(.vln-ui) .vln-field--invalid .vln-checkbox__input, :where(.vln-ui) .vln-field--invalid .vln-radio__input { border: 2px solid var(--support-error); background: var(--field); } :where(.vln-ui) .vln-choice-group--invalid .vln-checkbox__input:is(:checked, :indeterminate), :where(.vln-ui) .vln-field--invalid .vln-checkbox__input:is(:checked, :indeterminate) { background: var(--interactive); } :where(.vln-ui) .vln-choice-group--invalid .vln-radio__input:checked, :where(.vln-ui) .vln-field--invalid .vln-radio__input:checked { background: var(--field); } :where(.vln-ui) .vln-choice-group--warning .vln-checkbox__input, :where(.vln-ui) .vln-choice-group--warning .vln-radio__input { border: 2px solid var(--support-warning); } :where(.vln-ui) .vln-choice-group--warning .vln-checkbox__input:is(:checked, :indeterminate) { background: var(--interactive); } :where(.vln-ui) .vln-checkbox__children { display: flex; flex-direction: column; gap: var(--space-1); padding-left: var(--space-6); } /* ---- File upload (button variant) ----------------------------------------- */ :where(.vln-ui) .vln-upload { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); width: 100%; min-width: 0; } :where(.vln-ui) .vln-upload__input:focus-visible + .vln-upload__button { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); } :where(.vln-ui) .vln-upload__button { cursor: pointer; } :where(.vln-ui) .vln-upload__list { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; margin-top: var(--space-1); } :where(.vln-ui) .vln-upload__row { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); background: var(--layer-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); } :where(.vln-ui) .vln-upload__icon { flex: none; margin-top: 2px; color: var(--text-secondary); } :where(.vln-ui) .vln-upload__icon > .vln-icon { display: block; } :where(.vln-ui) .vln-upload__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } :where(.vln-ui) .vln-upload__name { overflow-wrap: anywhere; font-size: 14px; line-height: 20px; color: var(--text-primary); } :where(.vln-ui) .vln-upload__size { margin-left: var(--space-2); font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } :where(.vln-ui) .vln-upload__status { display: flex; align-items: flex-start; gap: var(--space-1); font: var(--type-hint); color: var(--text-secondary); } :where(.vln-ui) .vln-upload__status .vln-icon { margin-top: 1px; } :where(.vln-ui) .vln-upload__bar { height: 4px; border-radius: var(--radius-control); background: var(--layer-accent); overflow: hidden; } :where(.vln-ui) .vln-upload__bar > span { display: block; height: 100%; background: var(--interactive); transition: width var(--duration-moderate) var(--easing-standard); } :where(.vln-ui) .vln-upload__actions { display: flex; align-items: center; gap: var(--space-1); flex: none; } :where(.vln-ui) .vln-upload__row--done .vln-upload__status { color: var(--text-success); } :where(.vln-ui) .vln-upload__row--done .vln-upload__icon { color: var(--support-success); } :where(.vln-ui) .vln-upload__row--failed { background: var(--layer-error); border-color: var(--support-error); } :where(.vln-ui) .vln-upload__row--failed .vln-upload__status { color: var(--text-error); } :where(.vln-ui) .vln-upload__row--failed .vln-upload__icon { color: var(--support-error); } /* ---- Error summary --------------------------------------------------------- */ :where(.vln-ui) .vln-error-summary { padding: var(--space-3) var(--space-4); background: var(--layer-error); border: 2px solid var(--support-error); border-radius: var(--radius-control); color: var(--text-primary); } .vln-ui .vln-error-summary:focus, .vln-ui .vln-error-summary.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); } :where(.vln-ui) .vln-error-summary__title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font: var(--type-heading); color: var(--text-error); } :where(.vln-ui) .vln-error-summary__list { display: flex; flex-direction: column; gap: var(--space-1); padding: 0; margin: 0; } .vln-ui .vln-error-summary__list a { font-weight: 700; color: var(--text-error); text-decoration: underline; text-underline-offset: 2px; } .vln-ui .vln-error-summary__list a:is(:hover, .is-hover) { color: var(--text-primary); text-decoration-thickness: 2px; } /* ---- Fieldset (staff only) -------------------------------------------------- */ :where(.vln-ui) .vln-fieldset { position: relative; min-width: 0; margin: 0; padding: 12px var(--space-4) var(--space-4); background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); } :where(.vln-ui) .vln-fieldset__legend { padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); font: var(--type-label); color: var(--text-accent); } :where(.vln-ui) .vln-fieldset__desc { margin: 0 0 var(--space-3); font: var(--type-hint); color: var(--text-secondary); } :where(.vln-ui) .vln-fieldset:disabled { background: var(--layer-disabled); border-color: var(--border-disabled); } :where(.vln-ui) .vln-fieldset:disabled .vln-fieldset__legend, :where(.vln-ui) .vln-fieldset:disabled .vln-fieldset__desc, :where(.vln-ui) .vln-fieldset:disabled .vln-field__label { color: var(--text-disabled); } /* ---- Read-only record view ---------------------------------------------------- */ :where(.vln-ui) .vln-readonly { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-2); margin: 0; } :where(.vln-ui) .vln-readonly > div { display: contents; } :where(.vln-ui) .vln-readonly dt { font-size: 13px; line-height: 20px; font-weight: 700; color: var(--text-secondary); margin: 0; } :where(.vln-ui) .vln-readonly dd { margin: 0; min-width: 0; font-size: 14px; line-height: 20px; color: var(--text-primary); overflow-wrap: anywhere; } :where(.vln-ui) .vln-readonly__missing { display: flex; align-items: flex-start; gap: var(--space-1); color: var(--text-warning); } :where(.vln-ui) .vln-readonly__missing .vln-icon { margin-top: 2px; } :where(.vln-ui) .vln-readonly__asof { margin-left: var(--space-2); font-size: 13px; color: var(--text-secondary); } :where(.vln-ui) .vln-locked { padding: var(--space-3); background: var(--layer-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); } @media (max-width: 639.98px) { :where(.vln-ui) .vln-readonly { grid-template-columns: minmax(0, 1fr); row-gap: 0; } :where(.vln-ui) .vln-readonly dd { margin-bottom: var(--space-2); } } /* A value with an action: one centered line; the 24px button overhangs the 20px line by 2px each side so rows keep their rhythm. */ :where(.vln-ui) .vln-readonly dd:has(> .vln-readonly__action) { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); margin-block: -2px; } :where(.vln-ui) .vln-readonly dd:has(> .vln-readonly__action) > .vln-readonly__asof { margin-left: 0; } /* Venturaline design system v2, group B: messages and feedback, plus copy examples. Token variables only. Builds on 00-foundations.css and never redefines its classes. */ /* Buttons, icon buttons and close buttons in this group are group A's .vln-button and .vln-icon-button. */ :where(.vln-ui) [data-vln-icon] { display: contents; } /* ---- InlineNotification --------------------------------------------------- */ :where(.vln-ui) .vln-notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon body close" ". actions actions"; align-items: start; column-gap: var(--space-3); row-gap: 0; width: 100%; min-width: 0; padding: var(--space-3); color: var(--text-primary); border: 1px solid var(--notice-edge, var(--border-subtle)); border-left-width: 4px; border-radius: var(--radius-control); background: var(--notice-bg, var(--layer-surface)); } :where(.vln-ui) .vln-notice--error { --notice-edge: var(--support-error); --notice-bg: var(--layer-error); --notice-icon: var(--support-error); } :where(.vln-ui) .vln-notice--warning { --notice-edge: var(--support-warning); --notice-bg: var(--layer-warning); --notice-icon: var(--support-warning); } :where(.vln-ui) .vln-notice--success { --notice-edge: var(--support-success); --notice-bg: var(--layer-success); --notice-icon: var(--support-success); } :where(.vln-ui) .vln-notice--info { --notice-edge: var(--support-info); --notice-bg: var(--layer-accent); --notice-icon: var(--support-info); } :where(.vln-ui) .vln-notice__icon { grid-area: icon; margin-top: 2px; color: var(--notice-icon); } .vln-ui .vln-notice > .vln-icon-button { grid-area: close; } :where(.vln-ui) .vln-notice__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; } :where(.vln-ui) .vln-notice__title { font-weight: 700; } :where(.vln-ui) .vln-notice__text { overflow-wrap: anywhere; } :where(.vln-ui) .vln-notice__actions { grid-area: actions; margin-top: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } /* High contrast: solid fill, white text */ :where(.vln-ui) .vln-notice--high { color: var(--text-on-color); background: var(--notice-edge); border-color: var(--notice-edge); } :where(.vln-ui) .vln-notice--high .vln-notice__icon { color: var(--text-on-color); } :where(.vln-ui) .vln-notice--high .vln-button { --_fg: var(--text-on-color); --_bg: transparent; --_bd: var(--text-on-color); } :where(.vln-ui) .vln-notice--high .vln-button:is(:hover, .is-hover):not(:disabled, [aria-disabled="true"]) { --_fg: var(--text-primary); --_bg: var(--layer-surface); --_bd: var(--text-on-color); } :where(.vln-ui) .vln-notice--high .vln-button:is(:active, .is-active):not(:disabled, [aria-disabled="true"]) { --_fg: var(--text-primary); --_bg: var(--layer-active); --_bd: var(--text-on-color); } :where(.vln-ui) .vln-notice--high .vln-icon-button { --_fg: var(--text-on-color); } :where(.vln-ui) .vln-notice--high .vln-icon-button:is(:hover, .is-hover):not(:disabled, [aria-disabled="true"]) { --_fg: var(--text-primary); --_bg: var(--layer-surface); } :where(.vln-ui) .vln-notice--high a { color: var(--text-on-color); } .vln-ui .vln-notice--high :focus-visible, :where(.vln-ui) .vln-notice--high .is-focus { outline: 2px solid var(--focus-inverse); outline-offset: 1px; box-shadow: none; } :where(.vln-ui) .vln-notice--error.vln-notice--high { --notice-edge: var(--support-error); } /* High-contrast warning: pale fill, 4px bar and heavier outline in warning-800, text in warning-800 (error and info stay solid). */ :where(.vln-ui) .vln-notice--warning.vln-notice--high { color: var(--text-warning); background: var(--layer-warning); border-width: 2px 2px 2px 4px; border-color: var(--support-warning); } :where(.vln-ui) .vln-notice--warning.vln-notice--high .vln-notice__icon, :where(.vln-ui) .vln-notice--warning.vln-notice--high a { color: var(--text-warning); } :where(.vln-ui) .vln-notice--warning.vln-notice--high .vln-notice__title { font-weight: 700; } :where(.vln-ui) .vln-notice--warning.vln-notice--high .vln-button { --_fg: var(--text-warning); --_bg: transparent; --_bd: var(--support-warning); } :where(.vln-ui) .vln-notice--warning.vln-notice--high .vln-button:is(:hover, .is-hover):not(:disabled, [aria-disabled="true"]) { --_fg: var(--text-on-color); --_bg: var(--support-warning); --_bd: var(--support-warning); } :where(.vln-ui) .vln-notice--warning.vln-notice--high .vln-button:is(:active, .is-active):not(:disabled, [aria-disabled="true"]) { --_fg: var(--text-on-color); --_bg: var(--layer-inverse); --_bd: var(--layer-inverse); } :where(.vln-ui) .vln-notice--warning.vln-notice--high .vln-icon-button { --_fg: var(--text-warning); } :where(.vln-ui) .vln-notice--warning.vln-notice--high .vln-icon-button:is(:hover, .is-hover):not(:disabled, [aria-disabled="true"]) { --_fg: var(--text-warning); --_bg: var(--layer-hover); } .vln-ui .vln-notice--warning.vln-notice--high :focus-visible, :where(.vln-ui) .vln-notice--warning.vln-notice--high .is-focus { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); } /* ---- Banner (site-wide staff notice) -------------------------------------- */ :where(.vln-ui) .vln-banner { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-4); color: var(--text-primary); background: var(--banner-bg, var(--layer-accent)); border-bottom: 2px solid var(--banner-edge, var(--support-info)); } :where(.vln-ui) .vln-banner--info { --banner-bg: var(--layer-accent); --banner-edge: var(--support-info); } :where(.vln-ui) .vln-banner--warning { --banner-bg: var(--layer-warning); --banner-edge: var(--support-warning); } :where(.vln-ui) .vln-banner__icon { flex: none; margin-top: 2px; color: var(--banner-edge); } :where(.vln-ui) .vln-banner__text { flex: 1 1 auto; min-width: 0; } :where(.vln-ui) .vln-banner__title { font-weight: 700; margin-right: var(--space-1); } /* ---- Callout (fixed information; no live region, no role) ------------------ */ :where(.vln-ui) .vln-callout { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); color: var(--text-primary); background: var(--layer-surface); border: 1px solid var(--border-subtle); border-left: 4px solid var(--border-brand); border-radius: var(--radius-control); } :where(.vln-ui) .vln-callout__icon { flex: none; margin-top: 2px; color: var(--text-accent); } :where(.vln-ui) .vln-callout__body { display: flex; flex-direction: column; min-width: 0; } /* ---- Toast ----------------------------------------------------------------- */ :where(.vln-ui) .vln-toast-region { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; width: min(360px, calc(100vw - 2 * var(--space-4))); pointer-events: none; } :where(.vln-ui) .vln-toast-region--inline { position: absolute; z-index: var(--z-local); } :where(.vln-ui) .vln-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-3); color: var(--text-primary); background: var(--layer-surface); border: 1px solid var(--border-subtle); border-left: 4px solid var(--support-success); border-radius: var(--radius-control); box-shadow: var(--shadow-float); animation: vln-toast-in var(--duration-moderate) var(--easing-entrance); } :where(.vln-ui) .vln-toast--info { border-left-color: var(--support-info); } :where(.vln-ui) .vln-toast__icon { flex: none; margin-top: 2px; color: var(--support-success); } :where(.vln-ui) .vln-toast--info .vln-toast__icon { color: var(--support-info); } /* The icon wrappers hold the svg as a block, so it does not sit on a text line and drop below the first line of text. */ :where(.vln-ui) :is(.vln-notice__icon, .vln-banner__icon, .vln-callout__icon, .vln-toast__icon, .vln-empty__icon) > .vln-icon { display: block; } :where(.vln-ui) .vln-toast__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } /* Close buttons (32px) sit centered on the first 20px line of text: (20 - 32) / 2 = -6px. */ .vln-ui .vln-toast > .vln-icon-button, .vln-ui .vln-notice > .vln-icon-button { margin-top: -6px; margin-bottom: -6px; margin-right: -4px; } .vln-ui .vln-banner > .vln-icon-button { margin-block: -6px; } :where(.vln-ui) .vln-toast.is-paused { border-color: var(--border-strong); border-left-color: var(--support-success); } :where(.vln-ui) .vln-toast--info.is-paused { border-left-color: var(--support-info); } :where(.vln-ui) .vln-toast.is-leaving { animation: vln-toast-out var(--duration-moderate) var(--easing-exit) forwards; } @keyframes vln-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes vln-toast-out { from { opacity: 1; } to { opacity: 0; } } /* ---- InlineLoading ----------------------------------------------------------- */ /* The icon is centered on the first 18px text line; a long message wraps under itself and an action sits below the message. */ :where(.vln-ui) .vln-inline-loading { display: inline-grid; grid-template-columns: auto minmax(0, auto); justify-content: start; align-items: start; gap: var(--space-2); min-height: var(--target-min); padding-top: 3px; color: var(--text-primary); } :where(.vln-ui) .vln-inline-loading__icon { display: inline-flex; align-items: center; height: 18px; } :where(.vln-ui) .vln-inline-loading__text { min-width: 0; font: var(--type-hint); } :where(.vln-ui) .vln-inline-loading > .vln-button { grid-column: 2; justify-self: start; } :where(.vln-ui) .vln-inline-loading[data-state="finished"] .vln-inline-loading__icon { color: var(--support-success); } :where(.vln-ui) .vln-inline-loading[data-state="finished"] .vln-inline-loading__text { color: var(--support-success); } :where(.vln-ui) .vln-inline-loading[data-state="error"] .vln-inline-loading__icon { color: var(--support-error); } :where(.vln-ui) .vln-inline-loading[data-state="error"] .vln-inline-loading__text { color: var(--text-error); } :where(.vln-ui) .vln-inline-loading[data-state="idle"] { visibility: hidden; } /* ---- Spinner ----------------------------------------------------------------- */ :where(.vln-ui) .vln-spinner { display: inline-block; flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--border-accent-subtle); border-top-color: var(--interactive); border-radius: 50%; animation: vln-spin 700ms linear infinite; } :where(.vln-ui) .vln-spinner--md { width: var(--icon-size-large); height: var(--icon-size-large); border-width: 3px; } :where(.vln-ui) .vln-spin-text { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-hint); color: var(--text-primary); min-height: var(--target-min); } @keyframes vln-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .vln-ui .vln-spinner { animation: none; border-color: var(--interactive); border-bottom-color: var(--border-accent-subtle); } } /* ---- Skeleton compositions (the .vln-skeleton block lives in foundations) ----- */ :where(.vln-ui) .vln-skel { background: var(--layer-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); overflow: hidden; } :where(.vln-ui) .vln-skel__row { display: grid; align-items: center; gap: var(--space-4); height: var(--table-row-height); padding: 0 var(--space-3); border-top: 1px solid var(--border-subtle); } :where(.vln-ui) .vln-skel__row:first-child { border-top: 0; } :where(.vln-ui) .vln-skel__row--head { background: var(--layer-subtle); } :where(.vln-ui) .vln-skel--table .vln-skel__row { grid-template-columns: 1fr 2fr 1fr 1fr; } :where(.vln-ui) .vln-skel--list .vln-skel__item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--border-subtle); } :where(.vln-ui) .vln-skel--list .vln-skel__item:first-child { border-top: 0; } :where(.vln-ui) .vln-skel--panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); } :where(.vln-ui) .vln-skel__pair { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-4); } /* ---- ProgressBar --------------------------------------------------------------- */ :where(.vln-ui) .vln-progress { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; min-width: 0; } :where(.vln-ui) .vln-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font: var(--type-hint); } :where(.vln-ui) .vln-progress__label { font-weight: 700; color: var(--text-primary); } :where(.vln-ui) .vln-progress__value { font-variant-numeric: tabular-nums; color: var(--text-secondary); } :where(.vln-ui) .vln-progress__track { position: relative; height: 8px; overflow: hidden; background: var(--layer-accent); border: 1px solid var(--border-strong); border-radius: var(--radius-control); } :where(.vln-ui) .vln-progress__fill { height: 100%; background: var(--interactive); transition: width var(--duration-moderate) var(--easing-standard); } :where(.vln-ui) .vln-progress[data-state="success"] .vln-progress__fill { background: var(--support-success); } :where(.vln-ui) .vln-progress[data-state="error"] .vln-progress__fill { background: var(--support-error); } :where(.vln-ui) .vln-progress[data-state="indeterminate"] .vln-progress__fill { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; animation: vln-progress-slide 1.4s var(--easing-standard) infinite; } :where(.vln-ui) .vln-progress__helper { display: flex; align-items: flex-start; gap: var(--space-1); font: var(--type-hint); color: var(--text-secondary); } :where(.vln-ui) .vln-progress[data-state="success"] .vln-progress__helper { color: var(--support-success); } :where(.vln-ui) .vln-progress[data-state="error"] .vln-progress__helper { color: var(--text-error); } :where(.vln-ui) .vln-progress__helper .vln-icon { margin-top: 0; } :where(.vln-ui) .vln-progress__helper { flex-wrap: wrap; align-items: center; } :where(.vln-ui) .vln-progress__helper > span { flex: 1 1 140px; } :where(.vln-ui) .vln-progress__helper > .vln-button { margin-top: 0; } @keyframes vln-progress-slide { from { left: -35%; } to { left: 100%; } } @media (prefers-reduced-motion: reduce) { .vln-ui .vln-progress[data-state="indeterminate"] .vln-progress__fill { animation: none; left: 32%; } } /* ---- EmptyState ------------------------------------------------------------------ */ :where(.vln-ui) .vln-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-8) var(--space-6); text-align: center; color: var(--text-primary); background: var(--layer-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); } :where(.vln-ui) .vln-empty__icon { color: var(--text-secondary); } :where(.vln-ui) .vln-empty__icon .vln-icon { width: var(--icon-size-large); height: var(--icon-size-large); } :where(.vln-ui) .vln-empty--no-data .vln-empty__icon { color: var(--support-info); } :where(.vln-ui) .vln-empty--failed .vln-empty__icon { color: var(--support-error); } :where(.vln-ui) .vln-empty--failed .vln-empty__title { color: var(--text-error); } :where(.vln-ui) .vln-empty--no-permission .vln-empty__icon { color: var(--support-warning); } :where(.vln-ui) .vln-empty__title { font: var(--type-heading); max-width: 44ch; } :where(.vln-ui) .vln-empty__text { max-width: 52ch; color: var(--text-secondary); } :where(.vln-ui) .vln-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); } /* ---- StatusTag ---------------------------------------------------------------------- */ :where(.vln-ui) .vln-tag { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); width: max-content; max-width: none; flex-shrink: 0; padding: 0 var(--space-2) 0 6px; font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; color: var(--_tag-ink, var(--text-primary)); background: var(--_tag-bg, var(--layer-accent)); border-radius: var(--radius-pill); /* A faint edge in the tag's own ink keeps a tag visible on a row filled with a similar colour (a yellow tag on a row filled with a pale hover). */ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_tag-ink, var(--text-primary)) 22%, transparent); } :where(.vln-ui) .vln-tag .vln-icon { width: 14px; height: 14px; flex: none; vertical-align: 0; } :where(.vln-ui) .vln-tag > span { white-space: nowrap; } :where(.vln-ui) .vln-tag--order-entry { --_tag-ink: var(--status-order-entry-ink); --_tag-bg: var(--status-order-entry-bg); } :where(.vln-ui) .vln-tag--in-production { --_tag-ink: var(--status-in-production-ink); --_tag-bg: var(--status-in-production-bg); } :where(.vln-ui) .vln-tag--shipped { --_tag-ink: var(--status-shipped-ink); --_tag-bg: var(--status-shipped-bg); } :where(.vln-ui) .vln-tag--canceled { --_tag-ink: var(--status-canceled-ink); --_tag-bg: var(--status-canceled-bg); } :where(.vln-ui) .vln-tag--on-hold { --_tag-ink: var(--status-on-hold-ink); --_tag-bg: var(--status-on-hold-bg); } :where(.vln-ui) .vln-tag--open { --_tag-ink: var(--status-open-ink); --_tag-bg: var(--status-open-bg); } :where(.vln-ui) .vln-tag--ready-to-ship { --_tag-ink: var(--status-ready-to-ship-ink); --_tag-bg: var(--status-ready-to-ship-bg); } /* Category chips: one hue per category, for filters and labels with no status meaning. */ :where(.vln-ui) .vln-tag--neutral { --_tag-ink: var(--tag-neutral-ink); --_tag-bg: var(--tag-neutral-bg); } :where(.vln-ui) .vln-tag--blue { --_tag-ink: var(--tag-blue-ink); --_tag-bg: var(--tag-blue-bg); } :where(.vln-ui) .vln-tag--cyan { --_tag-ink: var(--tag-cyan-ink); --_tag-bg: var(--tag-cyan-bg); } :where(.vln-ui) .vln-tag--teal { --_tag-ink: var(--tag-teal-ink); --_tag-bg: var(--tag-teal-bg); } :where(.vln-ui) .vln-tag--green { --_tag-ink: var(--tag-green-ink); --_tag-bg: var(--tag-green-bg); } :where(.vln-ui) .vln-tag--yellow { --_tag-ink: var(--tag-yellow-ink); --_tag-bg: var(--tag-yellow-bg); } :where(.vln-ui) .vln-tag--amber { --_tag-ink: var(--tag-amber-ink); --_tag-bg: var(--tag-amber-bg); } :where(.vln-ui) .vln-tag--red { --_tag-ink: var(--tag-red-ink); --_tag-bg: var(--tag-red-bg); } :where(.vln-ui) .vln-tag--rose { --_tag-ink: var(--tag-rose-ink); --_tag-bg: var(--tag-rose-bg); } :where(.vln-ui) .vln-tag--violet { --_tag-ink: var(--tag-violet-ink); --_tag-bg: var(--tag-violet-bg); } :where(.vln-ui) .vln-tag--missing { --_tag-ink: var(--text-warning); --_tag-bg: var(--layer-warning); box-shadow: inset 0 0 0 1px var(--support-warning); } :where(.vln-ui) .vln-tag--filter { max-width: 100%; padding: 0 0 0 var(--space-2); font-weight: 400; font-size: 13px; line-height: 18px; --_tag-ink: var(--text-accent); --_tag-bg: var(--layer-accent); border: 1px solid var(--border-accent); border-radius: var(--radius-control); } .vln-ui .vln-tag__remove { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--target-min); height: var(--target-min); margin: -1px 0; padding: 0; color: var(--_tag-ink); background: transparent; border: 0; border-radius: var(--radius-control); } .vln-ui .vln-tag__remove:hover, .vln-ui .vln-tag__remove.is-hover { background: var(--layer-accent-hover); } .vln-ui .vln-tag__remove:active, .vln-ui .vln-tag__remove.is-active { background: var(--layer-accent-active); } /* ---- Tooltip ----------------------------------------------------------------------------- */ :where(.vln-ui) .vln-tooltip-wrap { position: relative; display: inline-flex; } :where(.vln-ui) .vln-tooltip { position: absolute; z-index: var(--z-overlay); left: 50%; bottom: 100%; width: max-content; max-width: 240px; padding-bottom: 6px; transform: translateX(calc(-50% + var(--vln-tip-x, 0px))); visibility: hidden; opacity: 0; transition: opacity var(--duration-fast) var(--easing-standard), visibility 0s linear var(--duration-fast); } :where(.vln-ui) .vln-tooltip.is-open { visibility: visible; opacity: 1; transition-delay: 0s; } :where(.vln-ui) .vln-tooltip--below { bottom: auto; top: 100%; padding-bottom: 0; padding-top: 6px; } :where(.vln-ui) .vln-tooltip__box { position: relative; display: block; padding: var(--space-1) var(--space-2); font-size: 13px; line-height: 18px; text-align: left; color: var(--text-on-color); background: var(--layer-inverse); border-radius: var(--radius-control); box-shadow: var(--shadow-float); } :where(.vln-ui) .vln-tooltip__box::after { content: ""; position: absolute; left: calc(50% - var(--vln-tip-x, 0px)); bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--layer-inverse); } :where(.vln-ui) .vln-tooltip--below .vln-tooltip__box::after { bottom: auto; top: -4px; border-bottom: 4px solid var(--layer-inverse); border-top: 0; } /* ---- Toggletip ------------------------------------------------------------------------------- */ :where(.vln-ui) .vln-toggletip { position: relative; display: inline-flex; } :where(.vln-ui) .vln-toggletip__btn { --_fg: var(--support-info); } :where(.vln-ui) .vln-toggletip__live { position: absolute; left: 50%; top: 100%; width: 0; height: 0; z-index: var(--z-overlay); } :where(.vln-ui) .vln-toggletip__content { position: absolute; left: 0; top: 4px; width: max-content; max-width: 260px; padding: var(--space-2) var(--space-3); transform: translateX(calc(-50% + var(--vln-tip-x, 0px))); font-size: 13px; line-height: 18px; color: var(--text-primary); background: var(--layer-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-float); } :where(.vln-ui) .vln-toggletip__content[hidden] { display: none; } :where(.vln-ui) .vln-toggletip--above .vln-toggletip__live { top: 0; } :where(.vln-ui) .vln-toggletip--above .vln-toggletip__content { top: auto; bottom: 4px; } :where(.vln-ui) .vln-toggletip__title { display: block; font-weight: 700; } /* ---- VoiceExamples ----------------------------------------------------------------------------- */ :where(.vln-ui) .vln-voice { width: 100%; border-collapse: collapse; background: var(--layer-surface); font-size: 13px; line-height: 18px; } :where(.vln-ui) .vln-voice caption { text-align: left; padding: var(--space-2) 0; color: var(--text-secondary); } :where(.vln-ui) .vln-voice th, :where(.vln-ui) .vln-voice td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); } :where(.vln-ui) .vln-voice thead th { background: var(--layer-brand); color: var(--text-on-color); font-weight: 700; } :where(.vln-ui) .vln-voice__group th { background: var(--layer-accent); color: var(--text-accent); font-weight: 700; font-size: 13px; border-top: 2px solid var(--border-accent); } :where(.vln-ui) .vln-voice tbody th[scope="row"] { width: 96px; white-space: nowrap; font-weight: 400; color: var(--text-secondary); background: none; } :where(.vln-ui) .vln-voice__no, :where(.vln-ui) .vln-voice__yes { display: flex; align-items: flex-start; gap: var(--space-2); } :where(.vln-ui) .vln-voice__no .vln-icon { color: var(--support-error); margin-top: 2px; } :where(.vln-ui) .vln-voice__yes .vln-icon { color: var(--support-success); margin-top: 2px; } :where(.vln-ui) .vln-voice__label { flex: none; font-size: 12px; line-height: 20px; font-weight: 700; } :where(.vln-ui) .vln-voice__no .vln-voice__label { color: var(--text-error); } :where(.vln-ui) .vln-voice__yes .vln-voice__label { color: var(--support-success); } :where(.vln-ui) .vln-voice__text { min-width: 0; overflow-wrap: anywhere; } :where(.vln-ui) .vln-voice__no .vln-voice__text { text-decoration: line-through; text-decoration-color: var(--support-error); text-decoration-thickness: 1px; } :where(.vln-ui) .vln-voice__note { display: block; margin-top: var(--space-1); font: var(--type-caption); color: var(--text-secondary); } @media (max-width: 639.98px) { :where(.vln-ui) .vln-voice tbody th[scope="row"] { width: auto; white-space: normal; } } /* Venturaline design system v2, group C: Popups and Navigation. Builds on the foundation popup zones (.vln-scrim, .vln-modal, __header, __body, __footer). Token variables only. */ /* ---- Popup additions ---------------------------------------------------- */ :where(.vln-ui) .vln-modal--media { width: auto; max-width: calc(100vw - 2 * var(--space-6)); } .vln-ui .vln-modal__body > * + * { margin-top: var(--space-3); } /* A hidden first child, such as the error summary before a failed submit, leaves no gap. */ .vln-ui .vln-modal__body > [hidden]:first-child + * { margin-top: 0; } .vln-ui .vln-modal--data .vln-modal__body > * + * { margin-top: 0; } /* The status line shares the row with the actions and wraps within it; it starts at 200px so a long message does not push the actions onto a second row. */ :where(.vln-ui) .vln-modal__footer .vln-modal__status { flex: 1 1 200px; min-width: 0; padding: var(--space-1) 0; } /* A live popup opens inside a contained scrim when given a container. */ :where(.vln-ui) .vln-scrim--contained { position: absolute; z-index: var(--z-local); padding: var(--space-3); align-items: flex-start; } :where(.vln-ui) .vln-scrim--contained .vln-modal { max-height: 100%; } /* Actions inside popups and steps. The Button group owns .vln-button; these only lay the actions out. */ :where(.vln-ui) .vln-popup-reason { display: flex; align-items: flex-start; gap: var(--space-1); font-size: 13px; line-height: 18px; color: var(--text-secondary); } :where(.vln-ui) .vln-popup-warn { vertical-align: top; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-warning); font-size: 13px; line-height: 18px; } /* ---- Popup data table (sticky heading under the header) ---------------- */ /* The table sits in a gray frame with tight 2px corners, inset from the popup edges, with the same rows as the page table: gray-50 heading (table-heading), dark navy text, 1px navy line, and hairlines or stripes. border-collapse: separate lets the frame's corners round; the corner cells carry the radius. */ :where(.vln-ui) .vln-popup-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--table-frame); border-radius: var(--radius-control); font-size: var(--density-table-size); line-height: 18px; font-variant-numeric: tabular-nums; } :where(.vln-ui) .vln-popup-table thead th { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--table-heading-height); padding: 0 var(--space-3); background: var(--table-heading); color: var(--table-heading-ink); box-shadow: inset 0 -1px 0 var(--table-heading-line); font-weight: 700; text-align: left; white-space: nowrap; } :where(.vln-ui) .vln-popup-table thead th:first-child { border-top-left-radius: calc(var(--radius-control) - 1px); } :where(.vln-ui) .vln-popup-table thead th:last-child { border-top-right-radius: calc(var(--radius-control) - 1px); } :where(.vln-ui) .vln-popup-table tbody tr:last-child > :first-child { border-bottom-left-radius: calc(var(--radius-control) - 1px); } :where(.vln-ui) .vln-popup-table tbody tr:last-child > :last-child { border-bottom-right-radius: calc(var(--radius-control) - 1px); } :where(.vln-ui) .vln-popup-table th { text-align: left; } :where(.vln-ui) .vln-popup-table th.vln-num, :where(.vln-ui) .vln-popup-table td.vln-num { text-align: right; font-variant-numeric: tabular-nums; } /* Dates are centred, heading and cells alike, so a column of dates reads as one block. */ :where(.vln-ui) .vln-popup-table th.vln-date, :where(.vln-ui) .vln-popup-table td.vln-date { text-align: center; font-variant-numeric: tabular-nums; } :where(.vln-ui) .vln-popup-table td { height: var(--table-row-height-popup); padding: 0 var(--space-3); vertical-align: middle; } /* Rows stay 32px in popups, which must fit a laptop screen without scrolling (page tables use 34px). A hairline by default; a striped table (vln-popup-table--striped) uses the stripe alone. */ :where(.vln-ui) .vln-popup-table:not(.vln-popup-table--striped) tbody > tr:not(:last-child) > * { box-shadow: inset 0 -1px 0 var(--table-row-line); } :where(.vln-ui) .vln-popup-table--striped tbody tr:nth-child(even) > * { background: var(--table-stripe); } :where(.vln-ui) .vln-popup-table tbody tr:hover > * { background: var(--table-hover); } :where(.vln-ui) .vln-popup-table tbody th { height: var(--table-row-height-popup); padding: 0 var(--space-3); text-align: left; font-weight: 400; } :where(.vln-ui) .vln-popup-state { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); color: var(--text-primary); } :where(.vln-ui) .vln-popup-state--error { color: var(--text-error); } /* Media */ :where(.vln-ui) .vln-popup-media { display: block; width: 100%; max-width: 100%; height: auto; background: var(--layer-page); border: 1px solid var(--border-subtle); } /* A photo that loads by URL (product and imprint photos): the frame keeps one height while the photo loads, fails or changes, so the popup does not jump; the feedback covers the frame while loading or after a failure; the thumbnail strip picks the photo (aria-pressed marks the one shown). The state is data-state on .vln-popup-gallery: loading, error, ready or idle. */ :where(.vln-ui) .vln-popup-gallery { display: grid; gap: var(--space-3); min-width: 0; } :where(.vln-ui) .vln-popup-gallery__frame { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: min(560px, calc(100vw - 2 * var(--space-6) - 2 * var(--space-4))); height: clamp(60px, 45dvh, 500px); min-width: 0; overflow: hidden; } :where(.vln-ui) .vln-popup-gallery__frame .vln-popup-media { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; background: transparent; border: 0; } :where(.vln-ui) .vln-popup-gallery[data-state="error"] .vln-popup-media { visibility: hidden; } :where(.vln-ui) .vln-popup-gallery__feedback { position: absolute; inset: 0; display: none; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: var(--space-3); padding: var(--space-4); background: var(--layer-page); } :where(.vln-ui) .vln-popup-gallery:is([data-state="loading"], [data-state="error"]) .vln-popup-gallery__feedback { display: flex; } :where(.vln-ui) .vln-popup-gallery__status { font: var(--type-hint); color: var(--text-secondary); } :where(.vln-ui) .vln-popup-gallery[data-state="error"] .vln-popup-gallery__status { color: var(--text-error); } :where(.vln-ui) .vln-popup-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); } :where(.vln-ui) .vln-popup-thumb { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 3px; background: var(--layer-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-control); } :where(.vln-ui) .vln-popup-thumb img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } :where(.vln-ui) .vln-popup-thumb:is(:hover, .is-hover) { background: var(--layer-hover); border-color: var(--interactive); } :where(.vln-ui) .vln-popup-thumb:is(:active, .is-active) { background: var(--layer-active); } :where(.vln-ui) .vln-popup-thumb[aria-pressed="true"] { border-color: var(--interactive); box-shadow: inset 0 0 0 1px var(--interactive); } @media (max-width: 639.98px) { :where(.vln-ui) .vln-popup-gallery__frame { width: 100%; } } /* ---- Confirm dialog ----------------------------------------------------- */ :where(.vln-ui) .vln-confirm__name { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; } :where(.vln-ui) .vln-confirm__reason { margin-top: var(--space-2); } :where(.vln-ui) .vln-confirm__reason.is-met { color: var(--text-success); } :where(.vln-ui) .vln-undo { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: var(--space-2) var(--space-3); background: var(--layer-surface); border: 1px solid var(--border-strong); border-left: 4px solid var(--support-info); border-radius: var(--radius-control); box-shadow: var(--shadow-float); } :where(.vln-ui) .vln-undo__text { flex: 1 1 auto; } :where(.vln-ui) .vln-undo__button { min-height: var(--target-min); padding: 0 var(--space-2); color: var(--interactive); background: transparent; border: 0; font-weight: 700; text-decoration: underline; border-radius: var(--radius-control); } :where(.vln-ui) .vln-undo__button:is(:hover, .is-hover) { background: var(--layer-hover); text-decoration: none; } :where(.vln-ui) .vln-undo__button:is(:active, .is-active) { background: var(--layer-active); text-decoration: none; } :where(.vln-ui) .vln-undo__button.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); } /* A confirmation inside a popup's footer, for a popup that cannot stack a second one: the footer holds two rows, the status line and actions, and the question with Cancel then the danger button; one shows at a time. */ :where(.vln-ui) .vln-modal__footer-row { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; } :where(.vln-ui) .vln-modal__footer-row--confirm .vln-modal__status { font-weight: 700; color: var(--text-primary); } :where(.vln-ui) .vln-confirm-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-height-compact); padding: 0 var(--space-3); border-bottom: 1px solid var(--border-subtle); background: var(--layer-surface); } :where(.vln-ui) .vln-confirm-row__main { flex: 1 1 auto; font-size: 13px; } /* ---- Step progress ------------------------------------------------------ */ :where(.vln-ui) .vln-steps { display: flex; list-style: none; margin: 0; padding: 4px 4px var(--space-3); width: 100%; } :where(.vln-ui) .vln-steps__item { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding-top: 0; } :where(.vln-ui) .vln-steps__item::before { content: ""; position: absolute; top: 11px; left: 28px; right: 4px; height: 2px; background: var(--border-strong); } :where(.vln-ui) .vln-steps__item:last-child::before { display: none; } :where(.vln-ui) .vln-steps__item.is-done::before { background: var(--interactive); } :where(.vln-ui) .vln-steps__marker { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--text-secondary); background: var(--layer-surface); border: 2px solid var(--border-strong); } :where(.vln-ui) .vln-steps__label { font: var(--type-hint); color: var(--text-secondary); padding-right: var(--space-2); overflow-wrap: anywhere; } :where(.vln-ui) .vln-steps__item.is-done .vln-steps__marker { color: var(--text-on-color); background: var(--interactive); border-color: var(--interactive); } :where(.vln-ui) .vln-steps__item.is-done .vln-steps__label { color: var(--text-primary); } :where(.vln-ui) .vln-steps__item.is-current .vln-steps__marker { color: var(--text-on-color); background: var(--layer-brand); border-color: var(--border-brand); } :where(.vln-ui) .vln-steps__item.is-current .vln-steps__label { color: var(--text-accent); font-weight: 700; } :where(.vln-ui) .vln-steps__item.is-error .vln-steps__marker { color: var(--text-on-color); background: var(--support-error); border-color: var(--support-error); } :where(.vln-ui) .vln-steps__item.is-error .vln-steps__label { color: var(--text-error); font-weight: 700; } :where(.vln-ui) .vln-steps__marker .vln-icon { width: 14px; height: 14px; vertical-align: 0; } :where(.vln-ui) .vln-steps__panel[hidden] { display: none; } /* ---- Staff header ------------------------------------------------------- */ :where(.vln-ui) .vln-skip { position: absolute; left: var(--space-2); top: -48px; z-index: var(--z-skip-link); padding: var(--space-2) var(--space-3); background: var(--layer-surface); color: var(--text-link); text-decoration: none; font-weight: 700; border-radius: var(--radius-control); box-shadow: var(--shadow-float); } :where(.vln-ui) .vln-skip:focus, :where(.vln-ui) .vln-skip.is-focus { top: var(--space-2); outline: 2px solid var(--focus); outline-offset: 2px; } :where(.vln-ui) .vln-header { display: flex; align-items: center; gap: var(--space-4); min-height: 48px; padding: 0 var(--space-4); background: var(--layer-brand); color: var(--text-on-color); } :where(.vln-ui) .vln-header__product { font: var(--type-heading); color: var(--text-on-color); text-decoration: none; padding: var(--space-1) 0; margin-right: var(--space-4); white-space: nowrap; } :where(.vln-ui) .vln-header__nav { display: flex; align-items: stretch; align-self: stretch; gap: 0; list-style: none; margin: 0; padding: 0; } :where(.vln-ui) .vln-header__nav--global { margin-left: auto; align-items: center; gap: var(--space-1); } :where(.vln-ui) .vln-header__link { display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-3); color: var(--text-on-color); text-decoration: none; font-size: 14px; line-height: 20px; border-radius: var(--radius-control); white-space: nowrap; } :where(.vln-ui) .vln-header__nav--main .vln-header__link { min-height: 48px; border-radius: 0; border-bottom: 3px solid transparent; padding-top: 3px; } :where(.vln-ui) .vln-header__link:is(:hover, .is-hover) { background: var(--layer-brand-hover); color: var(--text-on-color); } :where(.vln-ui) .vln-header__link:is(:active, .is-active) { background: var(--layer-brand-active); } :where(.vln-ui) .vln-header__link[aria-current="page"] { font-weight: 700; border-bottom-color: var(--text-on-color); } .vln-ui .vln-header__link:focus-visible, .vln-ui .vln-header__product:focus-visible, :where(.vln-ui) .vln-header__link.is-focus { outline: 2px solid var(--focus-inverse); outline-offset: -2px; box-shadow: none; } :where(.vln-ui) .vln-header__link.is-focus { outline: 2px solid var(--focus-inverse); outline-offset: -2px; } :where(.vln-ui) .vln-header__user { color: var(--text-on-color); font: var(--type-hint); padding: 0 var(--space-2); white-space: nowrap; } /* ---- Side navigation ---------------------------------------------------- */ :where(.vln-ui) .vln-sidenav { width: 240px; flex: none; background: var(--layer-surface); border-right: 1px solid var(--border-subtle); padding: var(--space-2) 0; } :where(.vln-ui) .vln-sidenav__list { list-style: none; margin: 0; padding: 0; } :where(.vln-ui) .vln-sidenav__group-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: var(--control-height); padding: 0 var(--space-3) 0 var(--space-4); text-align: left; background: transparent; border: 0; border-left: 3px solid transparent; color: var(--text-accent); font-size: 14px; line-height: 20px; font-weight: 700; } :where(.vln-ui) .vln-sidenav__group-btn .vln-icon { transition: transform var(--duration-fast) var(--easing-standard); } :where(.vln-ui) .vln-sidenav__group-btn[aria-expanded="true"] .vln-icon { transform: rotate(180deg); } :where(.vln-ui) .vln-sidenav__group-btn:hover, :where(.vln-ui) .vln-sidenav__group-btn.is-hover { background: var(--layer-hover); } :where(.vln-ui) .vln-sidenav__group-btn.is-active, :where(.vln-ui) .vln-sidenav__group-btn:active { background: var(--layer-active); } :where(.vln-ui) .vln-sidenav__sub { list-style: none; margin: 0; padding: 0 0 var(--space-1); } :where(.vln-ui) .vln-sidenav__link { display: flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-3) 0 var(--space-6); color: var(--text-primary); text-decoration: none; font-size: 14px; line-height: 20px; border-left: 3px solid transparent; } :where(.vln-ui) .vln-sidenav__link:hover, :where(.vln-ui) .vln-sidenav__link.is-hover { background: var(--layer-hover); color: var(--text-accent); text-decoration: underline; } :where(.vln-ui) .vln-sidenav__link.is-active, :where(.vln-ui) .vln-sidenav__link:active { background: var(--layer-active); } :where(.vln-ui) .vln-sidenav__link[aria-current="page"] { background: var(--layer-selected); color: var(--text-accent); font-weight: 700; border-left-color: var(--interactive); } :where(.vln-ui) .vln-sidenav__link[aria-current="page"]:hover, :where(.vln-ui) .vln-sidenav__link[aria-current="page"].is-hover { background: var(--layer-selected-hover); } :where(.vln-ui) .vln-sidenav .is-focus { outline: 2px solid var(--focus); outline-offset: -2px; box-shadow: none; } .vln-ui .vln-sidenav a:focus-visible, .vln-ui .vln-sidenav button:focus-visible { outline-offset: -2px; box-shadow: none; } :where(.vln-ui) .vln-sidenav__group--current > .vln-sidenav__group-btn { border-left-color: var(--interactive); } /* ---- Tabs (legacy folder tabs, refined) --------------------------------- Production's raised folder tabs. The strip starts 8px in from the panel's edge, past the panel's 6px corner, so the panel keeps its plain rounded corner and the panel line runs straight for 2px before the first tab. The join: the strip overlaps the panel by 1px (margin-bottom: -1px, z-index 1). Unselected tabs stand on that row (margin-bottom: 1px), so the panel line runs beneath them. The selected tab is 3px taller and 1px deeper: it paints the panel's white over the line, so the line stops at its outer edges and its side borders turn into the panel border. The strip clips at the panel line. The look is set by the custom properties on .vln-tabs; the Tabs README lists the values for the two alternates. */ :where(.vln-ui) .vln-tabs { --_tabs-indent: var(--space-2); --_tabs-fade: 24px; --_tabs-rise: 3px; --_tab-fill: var(--tab-inactive); --_tab-ink: var(--text-secondary); --_tab-edge: var(--tab-edge); /* Hover: the tab-hover-fill, tab-hover-ink and tab-hover-edge tokens and a heavier top line that previews the open tab's accent. Pressed: the tab-press-fill, tab-press-ink and tab-press-edge tokens. */ --_tab-hover-fill: var(--tab-hover-fill); --_tab-hover-ink: var(--tab-hover-ink); --_tab-hover-edge: var(--tab-hover-edge); --_tab-press-fill: var(--tab-press-fill); --_tab-press-ink: var(--tab-press-ink); --_tab-press-edge: var(--tab-press-edge); --_tab-sel-ink: var(--tab-selected-ink); --_tab-sel-top: var(--tab-selected-top); --_tab-sel-top-width: 2px; min-width: 0; } :where(.vln-ui) .vln-tabs__bar { display: flex; align-items: flex-start; min-width: 0; } :where(.vln-ui) .vln-tabs__list { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; gap: var(--space-1); margin: 0 0 -1px; padding: 0 var(--_tabs-indent); list-style: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; } :where(.vln-ui) .vln-tabs__list::-webkit-scrollbar { display: none; } /* The fade marks a clipped edge; the strip keeps its own background behind it. */ :where(.vln-ui) .vln-tabs.is-clip-end .vln-tabs__list { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--_tabs-fade)); mask-image: linear-gradient(to left, transparent 0, #000 var(--_tabs-fade)); } :where(.vln-ui) .vln-tabs.is-clip-start .vln-tabs__list { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--_tabs-fade)); mask-image: linear-gradient(to right, transparent 0, #000 var(--_tabs-fade)); } :where(.vln-ui) .vln-tabs.is-clip-start.is-clip-end .vln-tabs__list { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--_tabs-fade), #000 calc(100% - var(--_tabs-fade)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--_tabs-fade), #000 calc(100% - var(--_tabs-fade)), transparent 100%); } .vln-ui .vln-tabs__scroll { margin-top: var(--_tabs-rise); } .vln-ui .vln-tabs__scroll[hidden] { display: none; } :where(.vln-ui) .vln-tabs__scroll--prev .vln-icon { transform: scaleX(-1); } /* Control height above the panel line. The label is centered between the top border and the line. */ :where(.vln-ui) .vln-tabs__tab { flex: none; position: relative; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; height: var(--control-height); margin: 0 0 1px; padding: 0 var(--space-4); background: var(--_tab-fill); color: var(--_tab-ink); font: inherit; font-size: 14px; line-height: 20px; white-space: nowrap; cursor: pointer; border: 1px solid var(--_tab-edge); border-bottom: 0; border-radius: var(--radius-tab) var(--radius-tab) 0 0; } /* Reserves the bold width so selecting a tab never shifts its neighbors. */ :where(.vln-ui) .vln-tabs__tab[data-label]::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; } :where(.vln-ui) .vln-tabs__tab { transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast), color var(--duration-fast); } :where(.vln-ui) .vln-tabs__tab:hover, :where(.vln-ui) .vln-tabs__tab.is-hover { background: var(--_tab-hover-fill); border-color: var(--_tab-hover-edge); color: var(--_tab-hover-ink); box-shadow: inset 0 1px 0 var(--_tab-hover-edge); } :where(.vln-ui) .vln-tabs__tab:active, :where(.vln-ui) .vln-tabs__tab.is-active { background: var(--_tab-press-fill); border-color: var(--_tab-press-edge); color: var(--_tab-press-ink); box-shadow: inset 0 1px 0 var(--_tab-press-edge); } @media (prefers-reduced-motion: reduce) { :where(.vln-ui) .vln-tabs__tab { transition: none; } } /* Selected: the rise plus 32px above the line, plus the 1px it paints over the line. Hover and press leave it as it is. The top border carries the accent and follows the top corners. */ :where(.vln-ui) .vln-tabs__tab[aria-selected="true"], :where(.vln-ui) .vln-tabs__tab[aria-selected="true"]:is(:hover, .is-hover, :active, .is-active) { height: calc(33px + var(--_tabs-rise)); margin-bottom: 0; padding-bottom: 1px; cursor: default; background: var(--layer-surface); color: var(--_tab-sel-ink); font-weight: 700; border-color: var(--border-strong); border-top: var(--_tab-sel-top-width) solid var(--_tab-sel-top); } /* Focus: a complete 2px ring inside the tab, 3px in from its sides and 2px clear of the panel line, so it never touches the line or the tab's own border. */ :where(.vln-ui) .vln-tabs__tab.is-focus, .vln-ui .vln-tabs__tab:focus-visible { outline: none; box-shadow: none; } :where(.vln-ui) .vln-tabs__tab.is-focus::before, :where(.vln-ui) .vln-tabs__tab:focus-visible::before { content: ""; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; pointer-events: none; border: 2px solid var(--focus); border-radius: var(--radius-control); } :where(.vln-ui) .vln-tabs__tab[aria-selected="true"].is-focus::before, :where(.vln-ui) .vln-tabs__tab[aria-selected="true"]:focus-visible::before { top: calc(4px - var(--_tab-sel-top-width)); bottom: 3px; } :where(.vln-ui) .vln-tabs__panel { position: relative; padding: var(--space-4); background: var(--layer-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-popup); } /* ---- Breadcrumb --------------------------------------------------------- */ :where(.vln-ui) .vln-breadcrumb { min-width: 0; } :where(.vln-ui) .vln-breadcrumb__list { display: flex; flex-wrap: nowrap; align-items: center; margin: 0; padding: 4px 0; list-style: none; white-space: nowrap; } :where(.vln-ui) .vln-breadcrumb__item { display: inline-flex; align-items: center; flex: none; min-height: var(--target-min); font-size: 14px; line-height: 20px; } :where(.vln-ui) .vln-breadcrumb__item + .vln-breadcrumb__item::before { content: "/"; color: var(--text-secondary); padding: 0 var(--space-2); } :where(.vln-ui) .vln-breadcrumb__item--current { flex: 0 1 auto; min-width: 0; color: var(--text-primary); font-weight: 700; } :where(.vln-ui) .vln-breadcrumb__current { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(.vln-ui) .vln-breadcrumb__link { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--text-link); text-decoration: underline; } :where(.vln-ui) .vln-breadcrumb__link:is(:hover, .is-hover) { color: var(--interactive-hover); text-decoration: none; } :where(.vln-ui) .vln-breadcrumb__link:is(:active, .is-active) { color: var(--interactive-active); } :where(.vln-ui) .vln-breadcrumb__link.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); } :where(.vln-ui) .vln-breadcrumb__more { min-width: var(--target-min); min-height: var(--target-min); padding: 0 var(--space-1); color: var(--text-link); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-control); font-weight: 700; } :where(.vln-ui) .vln-breadcrumb__more:is(:hover, .is-hover) { background: var(--layer-hover); } :where(.vln-ui) .vln-breadcrumb__more:is(:active, .is-active) { background: var(--layer-active); } /* ---- Accordion (storefront) -------------------------------------------- */ :where(.vln-ui) .vln-accordion { border-top: 1px solid var(--border-subtle); } :where(.vln-ui) .vln-accordion__item { border-bottom: 1px solid var(--border-subtle); } :where(.vln-ui) .vln-accordion__heading { margin: 0; font-size: 16px; line-height: 22px; } :where(.vln-ui) .vln-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); text-align: left; background: transparent; border: 0; color: var(--text-primary); font: var(--type-heading); } :where(.vln-ui) .vln-accordion__trigger .vln-icon { transition: transform var(--duration-moderate) var(--easing-standard); } :where(.vln-ui) .vln-accordion__trigger[aria-expanded="true"] .vln-icon { transform: rotate(180deg); } :where(.vln-ui) .vln-accordion__trigger:hover, :where(.vln-ui) .vln-accordion__trigger.is-hover { background: var(--layer-hover); color: var(--text-accent); } :where(.vln-ui) .vln-accordion__trigger.is-active, :where(.vln-ui) .vln-accordion__trigger:active { background: var(--layer-active); } :where(.vln-ui) .vln-accordion__trigger[aria-expanded="true"] { color: var(--text-accent); } :where(.vln-ui) .vln-accordion__trigger.is-focus { outline: 2px solid var(--focus); outline-offset: -4px; } .vln-ui .vln-accordion__trigger:focus-visible { outline-offset: -4px; box-shadow: none; } :where(.vln-ui) .vln-accordion__panel { padding: var(--space-1) var(--space-3) var(--space-4); color: var(--text-primary); } :where(.vln-ui) .vln-accordion__panel p + p { margin-top: var(--space-2); } /* ---- 640px: popups shrink to the window, actions wrap ------------------- */ @media (max-width: 639.98px) { :where(.vln-ui) .vln-scrim { padding: var(--space-2); } :where(.vln-ui) .vln-modal, :where(.vln-ui) .vln-modal--data, :where(.vln-ui) .vln-modal--media { width: 100%; max-width: 100%; } :where(.vln-ui) .vln-modal { max-height: calc(100vh - 2 * var(--space-2)); max-height: calc(100dvh - 2 * var(--space-2)); } :where(.vln-ui) .vln-modal__footer { padding: var(--space-2) var(--space-3); } :where(.vln-ui) .vln-modal__footer .vln-modal__status { flex-basis: 100%; } :where(.vln-ui) .vln-steps__label { font-size: 12px; } :where(.vln-ui) .vln-sidenav { width: 100%; border-right: 0; } } :where(.vln-ui) .vln-modal--inline { max-height: none; } .vln-ui .vln-steps__panel > * + * { margin-top: var(--space-3); } :where(.vln-ui) .vln-popup-state > .vln-icon { color: var(--support-info); } :where(.vln-ui) .vln-popup-state--error > .vln-icon { color: var(--support-error); } /* Venturaline design system v2, group D (Data): DataTable, TableSelection, TableExpandable, TableInlineEdit, TableReveal, TableToolbar, TablePaging, TableStates, StructuredList. Token variables only. Rules T1-T13 (T9a distinct rows, T13 reveal). */ /* Buttons here are group A's .vln-button (small size inside rows) and .vln-icon-button. */ /* ---- Frame ------------------------------------------------------------- */ :where(.vln-ui) .vln-dt { position: relative; display: block; min-width: 0; max-width: 100%; color: var(--text-primary); } :where(.vln-ui) .vln-dt__title { font: var(--type-heading); color: var(--text-accent); margin: 0 0 var(--space-1); } :where(.vln-ui) .vln-dt__note { margin: 0 0 var(--space-2); font: var(--type-caption); color: var(--text-secondary); } :where(.vln-ui) .vln-dt__scroll { position: relative; max-width: 100%; max-height: var(--vln-dt-max, 360px); overflow: auto; border: 1px solid var(--table-frame); border-radius: var(--radius-control); background: var(--layer-surface); } :where(.vln-ui) .vln-dt__scroll--flat { max-height: none; } :where(.vln-ui) .vln-dt__scroll { overflow-x: auto; overscroll-behavior-x: contain; } /* Sideways scroll cue (T2, P4): a visible scrollbar and a soft shadow on each clipped edge that goes away at the end. A shadow, not a white fade, so the stripes and heading under it keep their colour. --vln-sb-x/--vln-sb-y are the measured scrollbar sizes (0 where scrollbars float over the content, as on phones and macOS), so the cue sits flush with the frame. Its z-index is local: 4 puts the cue above the sticky heading (2) and total (1). */ :where(.vln-ui) .vln-dt__wrap { position: relative; max-width: 100%; --vln-sb-x: 0px; --vln-sb-y: 0px; } :where(.vln-ui) .vln-dt__wrap::before, :where(.vln-ui) .vln-dt__wrap::after { content: ""; position: absolute; top: 1px; bottom: calc(1px + var(--vln-sb-y)); width: 12px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--easing-standard); } :where(.vln-ui) .vln-dt__wrap::before { left: 1px; background: linear-gradient(to right, color-mix(in srgb, var(--text-primary) 14%, transparent), transparent); } :where(.vln-ui) .vln-dt__wrap::after { right: calc(1px + var(--vln-sb-x)); background: linear-gradient(to left, color-mix(in srgb, var(--text-primary) 14%, transparent), transparent); } :where(.vln-ui) .vln-dt__wrap.has-fade-start::before, :where(.vln-ui) .vln-dt__wrap.has-fade-end::after { opacity: 1; } :where(.vln-ui) .vln-dt__scroll::-webkit-scrollbar { width: 10px; height: 10px; } :where(.vln-ui) .vln-dt__scroll::-webkit-scrollbar-track { background: var(--layer-subtle); } :where(.vln-ui) .vln-dt__scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid var(--layer-subtle); } :where(.vln-ui) .vln-dt__scroll::-webkit-scrollbar-corner { background: var(--layer-subtle); } @supports not selector(::-webkit-scrollbar) { :where(.vln-ui) .vln-dt__scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--layer-subtle); } } :where(.vln-ui) .vln-dt__table { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; font-size: var(--density-table-size); line-height: 18px; font-variant-numeric: tabular-nums; } :where(.vln-ui) .vln-dt__table th, :where(.vln-ui) .vln-dt__table td { padding: 0 var(--space-3); text-align: left; vertical-align: middle; border: 0; } /* Rows are separated one way only. By default a hairline; a striped table (vln-dt--striped, for wide, number-heavy tables read across many columns) uses the stripe instead and no rules: striping was most preferred and never worse than rules (Enders, A List Apart), and helps most where rows are long. */ :where(.vln-ui) .vln-dt__table tbody td { height: var(--table-row-height); box-sizing: border-box; line-height: 18px; } :where(.vln-ui) .vln-dt:not(.vln-dt--striped) .vln-dt__table tbody td { background-image: linear-gradient(var(--table-row-line), var(--table-row-line)); background-size: 100% 1px; background-position: left bottom; background-repeat: no-repeat; } :where(.vln-ui) .vln-dt:not(.vln-dt--striped) .vln-dt__table tbody tr:last-child td { background-image: none; } :where(.vln-ui) .vln-dt__table td .vln-tag { vertical-align: middle; } /* T9a heading row: gray-50 heading (table-heading), dark navy text, 1px navy line; stays in view (T3) */ :where(.vln-ui) .vln-dt__table thead th { position: sticky; top: 0; z-index: 2; padding: 0 var(--space-3); height: var(--table-heading-height); background: var(--table-heading); color: var(--table-heading-ink); font-weight: 700; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--table-heading-line); } :where(.vln-ui) .vln-dt__table thead .vln-dt__th--static { padding: 0 var(--space-3); } :where(.vln-ui) .vln-dt__table .vln-dt__th--num, :where(.vln-ui) .vln-dt__table .vln-dt__num { text-align: right; } :where(.vln-ui) .vln-dt__table .vln-dt__num { font-variant-numeric: tabular-nums; white-space: nowrap; } :where(.vln-ui) .vln-dt__table .vln-dt__id { white-space: nowrap; } :where(.vln-ui) .vln-dt__table .vln-dt__date { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Dates are centred, and their heading with them: every heading takes its column's alignment. */ :where(.vln-ui) .vln-dt__table .vln-dt__date, :where(.vln-ui) .vln-dt__table th[data-type="date"] { text-align: center; } :where(.vln-ui) .vln-dt__table .vln-dt__status { white-space: nowrap; min-width: max-content; } :where(.vln-ui) .vln-dt__table th, :where(.vln-ui) .vln-dt__table tfoot td { white-space: nowrap; } :where(.vln-ui) .vln-dt__table .vln-dt__id a { font-family: var(--font-mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } :where(.vln-ui) .vln-dt__table .vln-dt__th--check, :where(.vln-ui) .vln-dt__table .vln-dt__cell--check { width: 40px; padding: 0 0 0 var(--space-2); } :where(.vln-ui) .vln-dt__table .vln-dt__th--expand, :where(.vln-ui) .vln-dt__table .vln-dt__cell--expand { width: 36px; padding: 0 0 0 var(--space-1); } /* Sort heading button (T1) */ :where(.vln-ui) .vln-dt__sort { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 30px; margin: 0 calc(-1 * var(--space-1)); padding: 0 var(--space-1); background: transparent; border: 0; border-radius: var(--radius-control); font: inherit; font-weight: 700; color: inherit; white-space: nowrap; } :where(.vln-ui) .vln-dt__th--num .vln-dt__sort { flex-direction: row-reverse; } :where(.vln-ui) .vln-dt__sort:is(:hover, .is-hover) { background: var(--table-heading-hover); } :where(.vln-ui) .vln-dt__sort:is(:active, .is-active) { background: var(--table-heading-active); } :where(.vln-ui) .vln-dt__sortmark { display: inline-flex; width: 16px; height: 16px; color: var(--table-heading-mark); } :where(.vln-ui) .vln-dt__sort:hover .vln-dt__sortmark:empty::before { content: ""; } :where(.vln-ui) .vln-dt__sortmark--hint { opacity: 0; } :where(.vln-ui) .vln-dt__sort:hover .vln-dt__sortmark--hint, :where(.vln-ui) .vln-dt__sort.is-hover .vln-dt__sortmark--hint, :where(.vln-ui) .vln-dt__sort:focus-visible .vln-dt__sortmark--hint { opacity: 1; color: var(--table-heading-mark); } /* In-table focus ring: the 2px focus outline with an inset focus-gap shadow, drawn inside so no scroller clips it */ :where(.vln-ui) .vln-dt__table :focus-visible, :where(.vln-ui) .vln-dt__table .is-focus, :where(.vln-ui) .vln-dt__scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--focus-gap); } :where(.vln-ui) .vln-dt__table thead th :focus-visible { box-shadow: inset 0 0 0 4px var(--focus-gap); } /* Links in cells are inline text: the ring sits outside the glyphs (cells have 12px padding, so nothing clips it). */ :where(.vln-ui) .vln-dt__table td a:focus-visible, :where(.vln-ui) .vln-dt__table td a.is-focus { outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); border-radius: var(--radius-control); } /* T9a rows: stripe, hover, selected, selected + hover are four distinct colors */ :where(.vln-ui) .vln-dt__table tbody tr > td { background-color: var(--layer-surface); } :where(.vln-ui) .vln-dt--striped .vln-dt__table tbody tr.is-stripe > td { background-color: var(--table-stripe); } :where(.vln-ui) .vln-dt__table tbody tr:hover > td, :where(.vln-ui) .vln-dt__table tbody tr.is-hover > td { background-color: var(--table-hover); } :where(.vln-ui) .vln-dt__table tbody tr.is-selected > td { background-color: var(--table-selected); } :where(.vln-ui) .vln-dt__table tbody tr.is-selected:hover > td, :where(.vln-ui) .vln-dt__table tbody tr.is-selected.is-hover > td { background-color: var(--table-selected-hover); } :where(.vln-ui) .vln-dt__table tbody tr.is-selected > td:first-child { box-shadow: inset 3px 0 0 var(--table-selected-bar); } /* Focus ring inside a selected row: the global focus colour is under 3:1 on table-selected-hover. */ :where(.vln-ui) .vln-dt__table tbody tr.is-selected:focus-visible, :where(.vln-ui) .vln-dt__table tbody tr.is-selected .is-focus, :where(.vln-ui) .vln-dt__table tbody tr.is-selected :focus-visible { outline-color: var(--table-focus-selected); } /* Links in a selected row under the pointer turn navy: text-link measures 3.7:1 on table-selected-hover, text-accent 5.0:1. */ :where(.vln-ui) .vln-dt__table tbody tr.is-selected:hover > td a, :where(.vln-ui) .vln-dt__table tbody tr.is-selected.is-hover > td a { color: var(--text-accent); } :where(.vln-ui) .vln-dt__table tbody .vln-dt__detail > td, :where(.vln-ui) .vln-dt__table tbody .vln-dt__detail:hover > td { background-color: var(--layer-surface); } :where(.vln-ui) .vln-dt__table tbody .vln-dt__rowmsg > td, :where(.vln-ui) .vln-dt__table tbody .vln-dt__rowmsg:hover > td { background-color: var(--layer-error); } /* Totals row: computed by the caller over every matching row */ :where(.vln-ui) .vln-dt__table tfoot td { position: sticky; bottom: 0; z-index: var(--z-sticky); padding: 0 var(--space-3); height: var(--table-row-height); background: var(--layer-surface); font-weight: 700; border-top: 2px solid var(--border-brand); } /* Missing value: a dash with a warning, never 0 (S3) */ :where(.vln-ui) .vln-dt__missing { vertical-align: top; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-warning); font-weight: 700; white-space: nowrap; } :where(.vln-ui) .vln-dt__missing .vln-icon { width: 14px; height: 14px; vertical-align: 0; } /* Status tags are group B's .vln-tag; this group adds no copy of them. */ /* ---- Checkboxes (selection) -------------------------------------------- */ :where(.vln-ui) .vln-dt__checklabel { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; cursor: pointer; } :where(.vln-ui) .vln-dt__check { width: 16px; height: 16px; margin: 0; accent-color: var(--interactive); cursor: pointer; } :where(.vln-ui) .vln-dt__check:focus-visible, :where(.vln-ui) .vln-dt__check.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); } /* ---- Expand control: before the cell content --------------------------- */ :where(.vln-ui) .vln-dt__expander { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: var(--interactive); background: transparent; border: 0; border-radius: var(--radius-control); } :where(.vln-ui) .vln-dt__expander:is(:hover, .is-hover) { background: var(--layer-hover); } :where(.vln-ui) .vln-dt__expander:is(:active, .is-active) { background: var(--layer-active); } :where(.vln-ui) .vln-dt__expander .vln-icon { transition: transform var(--duration-fast) var(--easing-standard); } :where(.vln-ui) .vln-dt__expander[aria-expanded="true"] .vln-icon { transform: rotate(90deg); } :where(.vln-ui) .vln-dt__detail > td { padding: var(--space-3) var(--space-4) var(--space-3) 52px; } :where(.vln-ui) .vln-dt__detail dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; } :where(.vln-ui) .vln-dt__detail dt { color: var(--text-secondary); } :where(.vln-ui) .vln-dt__detail dd { margin: 0; } /* ---- T13 one-line clamp (prose and text columns) and reveal ---------------------------------------- */ :where(.vln-ui) .vln-dt__clamp { display: block; max-width: var(--vln-prose-w, 200px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 18px; } :where(.vln-ui) .vln-dt__table .vln-dt__text .vln-dt__clamp { max-width: var(--vln-text-w, 220px); } :where(.vln-ui) .vln-dt__clamp.is-truncated { cursor: default; border-radius: var(--radius-control); } :where(.vln-ui) .vln-dt__clamp.is-truncated:hover { background: var(--layer-hover); } :where(.vln-ui) .vln-reveal { position: fixed; z-index: var(--z-overlay); box-sizing: border-box; max-width: 420px; min-width: 160px; padding: var(--space-2) var(--space-3); background: var(--layer-surface); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-float); font: var(--type-table); user-select: text; -webkit-user-select: text; cursor: text; overflow-wrap: anywhere; white-space: normal; } :where(.vln-ui) .vln-reveal:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ---- Toolbar ------------------------------------------------------------ */ :where(.vln-ui) .vln-dt__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; } :where(.vln-ui) .vln-dt__search { position: relative; flex: 0 1 260px; min-width: 160px; } :where(.vln-ui) .vln-dt__search .vln-icon { position: absolute; left: var(--space-2); top: 8px; color: var(--text-secondary); pointer-events: none; } :where(.vln-ui) .vln-dt__search input { padding-left: 32px; } :where(.vln-ui) .vln-dt__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } :where(.vln-ui) .vln-dt__filter { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--type-label); } :where(.vln-ui) .vln-dt__filter select { min-width: 120px; } :where(.vln-ui) .vln-dt__filter .vln-select { width: auto; } :where(.vln-ui) .vln-dt__applied { display: block; font: var(--type-table); color: var(--text-secondary); } :where(.vln-ui) .vln-dt__applied strong { color: var(--text-primary); } :where(.vln-ui) .vln-dt__toolbar > .vln-dt__title { margin: 0; } :where(.vln-ui) .vln-dt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; } /* ---- Batch-action bar --------------------------------------------------- */ :where(.vln-ui) .vln-dt__batch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); background: var(--layer-accent); border-left: 3px solid var(--interactive); border-radius: var(--radius-control); } :where(.vln-ui) .vln-dt__batch-count { font-weight: 700; margin-right: auto; } /* ---- Foot: count and paging (T4) ---------------------------------------- */ :where(.vln-ui) .vln-dt__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0 0; min-height: 40px; } :where(.vln-ui) .vln-dt__count { font: var(--type-table); color: var(--text-secondary); } :where(.vln-ui) .vln-dt__count strong { color: var(--text-primary); } :where(.vln-ui) .vln-dt__paging { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ---- Inline edit -------------------------------------------------------- */ :where(.vln-ui) .vln-dt__rowactions { display: inline-flex; gap: var(--space-1); white-space: nowrap; vertical-align: top; } :where(.vln-ui) .vln-dt__table td .vln-field__control { min-height: var(--control-height); width: 100%; min-width: 96px; vertical-align: top; } :where(.vln-ui) .vln-dt__table td .vln-dt__cellfield { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); } :where(.vln-ui) .vln-dt__table td .vln-field__error { max-width: 220px; } /* Text in a row being edited, such as a row number, sits on the fields' center line. */ :where(.vln-ui) .vln-dt__table tr.is-editing > td { padding-top: var(--space-1); padding-bottom: var(--space-1); vertical-align: top; line-height: var(--density-control-height); } /* A number field takes its column's alignment: right, like the figures in a view row (T2). */ :where(.vln-ui) .vln-dt__table td.vln-dt__num .vln-field__control { text-align: right; } /* On a touch screen the controls in a row being edited are the 44px customer size (A1). */ @media (pointer: coarse) { :where(.vln-ui) .vln-dt__table tr.is-editing { --density-control-height: var(--control-height-customer); --density-input-size: var(--type-input-customer-size); --density-input-line: 24px; } } :where(.vln-ui) .vln-dt__rowmsg-body { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-2); color: var(--text-error); font-size: 13px; line-height: 18px; } :where(.vln-ui) .vln-dt__rowmsg-body span { flex: 1 1 260px; } /* ---- Container states --------------------------------------------------- */ :where(.vln-ui) .vln-dt-state { padding: var(--space-6) var(--space-4); text-align: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--layer-surface); } :where(.vln-ui) p.vln-dt-state__title, :where(.vln-ui) span.vln-dt-state__title { margin: 0 0 var(--space-1); font-size: 14px; line-height: 20px; font-weight: 700; } :where(.vln-ui) span.vln-dt-state__title { display: block; } :where(.vln-ui) .vln-dt-state--error p.vln-dt-state__title { margin-bottom: var(--space-3); } :where(.vln-ui) p.vln-dt-state__text, :where(.vln-ui) span.vln-dt-state__text { display: block; margin: 0 0 var(--space-3); color: var(--text-secondary); font-size: 13px; line-height: 18px; } :where(.vln-ui) .vln-dt-state--error p.vln-dt-state__title { color: var(--text-error); display: flex; justify-content: center; gap: var(--space-1); align-items: center; } :where(.vln-ui) p.vln-dt-asof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: 13px; line-height: 20px; color: var(--text-secondary); } :where(.vln-ui) .vln-dt__skeleton-cell { padding: 10px var(--space-3); } /* ---- Structured list ---------------------------------------------------- */ :where(.vln-ui) .vln-sl { margin: 0; background: var(--layer-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); } :where(.vln-ui) .vln-sl__heading { margin: 0; padding: var(--space-2) var(--space-3); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--text-accent); background: var(--layer-subtle); border-bottom: 1px solid var(--border-subtle); } :where(.vln-ui) .vln-sl__list { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; margin: 0; } :where(.vln-ui) .vln-sl__list dt, :where(.vln-ui) .vln-sl__list dd { margin: 0; padding: 6px var(--space-3); border-bottom: 1px solid var(--border-subtle); font-size: 13px; line-height: 18px; } :where(.vln-ui) .vln-sl__list dt { color: var(--text-secondary); } :where(.vln-ui) .vln-sl__list dd { min-width: 0; overflow-wrap: anywhere; } :where(.vln-ui) .vln-sl__list > :nth-last-child(-n+2) { border-bottom: 0; } :where(.vln-ui) .vln-sl__list .vln-sl__money { text-align: right; font-variant-numeric: tabular-nums; } :where(.vln-ui) .vln-sl__list .vln-sl__total { font-weight: 700; font-size: 14px; border-top: 2px solid var(--border-brand); border-bottom: 0; color: var(--text-primary); } :where(.vln-ui) .vln-sl__list .vln-sl__total { color: var(--text-primary); } :where(.vln-ui) .vln-sl__list .vln-tag { vertical-align: top; margin-block: -3px; } :where(.vln-ui) .vln-sl__list .vln-sl__mono { font-family: var(--font-mono); font-size: 13px; } :where(.vln-ui) .vln-sl__addr { margin: 0; padding: var(--space-3); font-style: normal; font-size: 13px; line-height: 20px; } :where(.vln-ui) .vln-sl__addr strong { display: block; } :where(.vln-ui) .vln-sl__panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); } @media (max-width: 639.98px) { :where(.vln-ui) .vln-dt__search { flex: 1 1 100%; } :where(.vln-ui) .vln-dt__actions { margin-left: 0; } :where(.vln-ui) .vln-dt__scroll { max-height: 320px; } } @media (prefers-reduced-motion: reduce) { :where(.vln-ui) .vln-dt__expander .vln-icon { transition: none; } } /* ---- Toolbar on one row: search and filters shrink, actions stay in place ---------------------------------------- */ @media (min-width: 900px) { :where(.vln-ui) .vln-dt__toolbar { flex-wrap: nowrap; } :where(.vln-ui) .vln-dt__search { flex: 1 1 200px; min-width: 140px; } :where(.vln-ui) .vln-dt__filters { flex-wrap: nowrap; flex: 0 0 auto; } :where(.vln-ui) .vln-dt__actions { flex-wrap: nowrap; flex: 0 0 auto; } :where(.vln-ui) .vln-dt__applied, :where(.vln-ui) .vln-dt__toolbar > .vln-button { flex: 0 0 auto; white-space: nowrap; } } /* Fitted table (vln-dt--fit): for number-heavy tables, the table hugs its columns instead of stretching across the page, so related figures sit close together (NN/g: keep related columns near each other), with 16px column padding for white space between them. It still scrolls sideways when too wide. */ :where(.vln-ui) .vln-dt--fit .vln-dt__wrap, :where(.vln-ui) .vln-dt--fit .vln-dt__scroll { width: max-content; max-width: 100%; } :where(.vln-ui) .vln-dt--fit .vln-dt__table { width: auto; } :where(.vln-ui) .vln-dt--fit .vln-dt__table :is(th, td) { padding: 0 var(--space-4); }