/* ============================================================
   SolsticioUI — Design Tokens
   Base stylesheet with CSS custom properties, layers, and themes.
   ============================================================ */

@layer solsticio-tokens, solsticio-reset, solsticio-base, solsticio-components, solsticio-utilities;

/* Design tokens (typography, spacing, palettes, flavors, shell, fonts) live in
   the framework-agnostic token package (src/SolsticioUI.Tokens), copied into this
   package's static assets at build time. */
@import url('solsticio-tokens.css');

/* ============================================================
   Layer: Base — Minimal scoped resets
   ============================================================ */
@layer solsticio-base {

  /* Scoped reset — NEVER global. Only applies inside SolsticioUI provider. */
  .sol-root,
  .sol-root * {
    box-sizing: border-box;
  }

  .sol-root {
    font-family: var(--sol-font-family);
    font-size: var(--sol-font-size-base);
    line-height: var(--sol-line-height-normal);
    color: var(--sol-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ============================================================
   Layer: Components — AI-Ready Interface
   Shared CSS classes for AI/NLP sections across all components
   (SolGrid, SolScheduler, etc.)
   ============================================================ */
@layer solsticio-components {

  /* --- AI Section Container --- */
  .sol-ai-section {
    padding: var(--sol-space-4);
    background: var(--sol-bg-muted);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-card);
    margin-bottom: var(--sol-space-4);
  }

  .sol-ai-section__label {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-muted);
    font-weight: var(--sol-font-weight-semibold);
    margin-bottom: var(--sol-space-2);
    display: flex;
    align-items: center;
    gap: var(--sol-space-2);
  }

  /* --- AI Input Row --- */
  .sol-ai-input-row {
    display: flex;
    gap: var(--sol-space-2);
    margin-bottom: var(--sol-space-2);
  }

  .sol-ai-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--sol-space-2) var(--sol-space-3);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-surface);
    color: var(--sol-text-primary);
    font-size: max(var(--sol-font-size-base), var(--sol-font-size-field-min, 0px));
    font-family: var(--sol-font-family);
  }

  .sol-ai-input:focus {
    outline: none;
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-ai-input::placeholder {
    color: var(--sol-text-muted);
  }

  .sol-ai-btn {
    padding: var(--sol-space-2) var(--sol-space-5);
    border: none;
    background: var(--sol-accent);
    color: var(--sol-on-accent);
    border-radius: var(--sol-radius-action);
    cursor: pointer;
    font-size: var(--sol-font-size-base);
    font-weight: var(--sol-font-weight-semibold);
    font-family: var(--sol-font-family);
  }

  .sol-ai-btn:hover {
    background: var(--sol-accent-hover);
  }

  .sol-ai-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .sol-ai-btn--secondary {
    background: transparent;
    border: 1px solid var(--sol-border);
    color: var(--sol-text-muted);
  }

  .sol-ai-btn--secondary:hover {
    border-color: var(--sol-accent);
    color: var(--sol-accent);
  }

  .sol-ai-btn--outline {
    background: transparent;
    border: 1px solid var(--sol-accent);
    color: var(--sol-accent);
  }

  .sol-ai-btn--outline:hover {
    background: var(--sol-accent-muted);
  }

  /* --- Locale Select --- */
  .sol-ai-locale-select {
    padding: 2px var(--sol-space-2);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-surface);
    color: var(--sol-text-secondary);
    font-size: max(var(--sol-font-size-xs), var(--sol-font-size-field-min, 0px));
    font-family: var(--sol-font-family);
    cursor: pointer;
  }

  /* --- Suggestion Pills (quick examples) --- */
  .sol-ai-pills {
    display: flex;
    gap: var(--sol-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--sol-space-3);
  }

  .sol-ai-pill {
    padding: var(--sol-space-1) var(--sol-space-3);
    border: 1px solid var(--sol-border);
    background: var(--sol-bg-surface);
    border-radius: var(--sol-radius-full);
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-secondary);
    cursor: pointer;
    font-family: var(--sol-font-family);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }

  .sol-ai-pill:hover {
    border-color: var(--sol-accent);
    color: var(--sol-accent);
    background: var(--sol-accent-muted);
  }

  /* Phone: the field takes its own line and the buttons wrap under it. */
  @media (max-width: 480px) {
    .sol-ai-input-row {
      flex-wrap: wrap;
    }

    .sol-ai-input {
      flex-basis: 100%;
    }
  }

  /* Touch: every control of the query bar reaches the 44px target. */
  @media (pointer: coarse) {
    .sol-ai-input,
    .sol-ai-btn,
    .sol-ai-pill,
    .sol-ai-locale-select {
      box-sizing: border-box;
      min-height: var(--sol-touch-target-min);
    }
  }

  /* Forced touch (data-sol-touch on <html>): the block above, whatever the pointer. */
  :where([data-sol-touch]) .sol-ai-input,
  :where([data-sol-touch]) .sol-ai-btn,
  :where([data-sol-touch]) .sol-ai-pill,
  :where([data-sol-touch]) .sol-ai-locale-select {
    box-sizing: border-box;
    min-height: var(--sol-touch-target-min);
  }

  /* --- Result Feedback --- */
  .sol-ai-result {
    padding: var(--sol-space-4);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-card);
    margin-bottom: var(--sol-space-4);
  }

  .sol-ai-result--success {
    border-color: var(--sol-success);
    background: var(--sol-success-muted);
  }

  .sol-ai-result--error {
    border-color: var(--sol-danger);
    background: var(--sol-danger-muted);
  }

  .sol-ai-result__header {
    font-weight: var(--sol-font-weight-semibold);
    font-size: var(--sol-font-size-base);
    margin-bottom: var(--sol-space-2);
  }

  .sol-ai-result__body {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-secondary);
  }

  .sol-ai-result__detail {
    margin-top: var(--sol-space-3);
    padding: var(--sol-space-3);
    background: var(--sol-bg-surface);
    border-radius: var(--sol-radius-control);
    font-size: var(--sol-font-size-sm);
    white-space: pre-wrap;
  }

  /* --- Suggestion Cards Grid --- */
  .sol-ai-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sol-space-2);
    margin-bottom: var(--sol-space-4);
  }

  .sol-ai-card {
    text-align: start;
    padding: var(--sol-space-2) var(--sol-space-3);
    border: 1px solid var(--sol-border);
    background: var(--sol-bg-surface);
    border-radius: var(--sol-radius-card);
    cursor: pointer;
    font-family: var(--sol-font-family);
    transition: border-color 0.15s, background 0.15s;
  }

  .sol-ai-card:hover {
    border-color: var(--sol-accent);
    background: var(--sol-accent-muted);
  }

  .sol-ai-card__title {
    font-size: var(--sol-font-size-base);
    color: var(--sol-text-primary);
  }

  .sol-ai-card__subtitle {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
  }

  /* --- Analytics Cards --- */
  .sol-ai-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sol-space-2);
    margin-top: var(--sol-space-3);
  }

  .sol-ai-stat {
    padding: var(--sol-space-3);
    background: var(--sol-bg-surface);
    border-radius: var(--sol-radius-card);
    text-align: center;
  }

  .sol-ai-stat__label {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .sol-ai-stat__value {
    font-size: var(--sol-font-size-xl);
    font-weight: var(--sol-font-weight-bold);
    color: var(--sol-text-primary);
    margin-top: var(--sol-space-1);
  }

  /* --- Proposed Event Banner --- */
  .sol-ai-proposed {
    margin-top: var(--sol-space-3);
    padding: var(--sol-space-2) var(--sol-space-3);
    background: var(--sol-bg-surface);
    border-radius: var(--sol-radius-card);
    font-size: var(--sol-font-size-sm);
  }

  /* --- Provider / Category Badges --- */
  .sol-ai-badge {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-tertiary);
    margin-inline-end: var(--sol-space-2);
  }

  .sol-ai-category {
    font-size: var(--sol-font-size-xs);
    padding: 2px 8px;
    border-radius: var(--sol-radius-full);
    background: var(--sol-accent-muted);
    color: var(--sol-accent);
    font-weight: var(--sol-font-weight-medium);
  }

  /* --- Autocomplete Dropdown --- */
  .sol-ai-dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 80px;
    margin-top: var(--sol-space-1);
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-elev-overlay);
    max-height: 240px;
    overflow-y: auto;
    z-index: 9999;
  }

  .sol-ai-dropdown__item {
    padding: var(--sol-space-2) var(--sol-space-3);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--sol-border-muted);
  }

  .sol-ai-dropdown__item:hover {
    background: var(--sol-accent-muted);
  }

  .sol-ai-dropdown__query {
    font-size: var(--sol-font-size-base);
    color: var(--sol-text-primary);
  }

  .sol-ai-dropdown__query-alt {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
  }

  /* --- Confirmation Modal --- */
  .sol-ai-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--sol-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--sol-z-modal-backdrop, 1100);
  }

  .sol-ai-modal {
    background: var(--sol-bg-surface);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-card);
    padding: var(--sol-space-6);
    min-width: 360px;
    max-width: 480px;
    box-shadow: var(--sol-elev-overlay);
    z-index: var(--sol-z-modal, 1110);
  }

  .sol-ai-modal__title {
    font-size: var(--sol-font-size-md);
    font-weight: var(--sol-font-weight-semibold);
    color: var(--sol-text-primary);
    margin-bottom: var(--sol-space-4);
  }

  .sol-ai-modal__field {
    display: flex;
    justify-content: space-between;
    padding: var(--sol-space-2) 0;
    border-bottom: 1px solid var(--sol-border-muted);
    font-size: var(--sol-font-size-sm);
  }

  .sol-ai-modal__field-label {
    color: var(--sol-text-muted);
  }

  .sol-ai-modal__field-value {
    color: var(--sol-text-primary);
    font-weight: var(--sol-font-weight-medium);
  }

  .sol-ai-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sol-space-2);
    margin-top: var(--sol-space-5);
  }

  /* --- Schema / API Output --- */
  .sol-ai-output {
    background: var(--sol-bg-sunken);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    padding: var(--sol-space-3);
    font-size: var(--sol-font-size-xs);
    font-family: var(--sol-font-family-mono);
    overflow-x: auto;
    max-height: 400px;
    color: var(--sol-text-primary);
  }

  .sol-ai-output-wrapper {
    position: relative;
    margin-bottom: var(--sol-space-3);
  }

  .sol-ai-output-wrapper .sol-ai-btn--copy {
    position: absolute;
    top: var(--sol-space-2);
    inset-inline-end: var(--sol-space-2);
    padding: 2px 8px;
    font-size: var(--sol-font-size-xs);
  }

  /* --- Collapsible Sections (details/summary) --- */
  .sol-ai-details {
    margin-bottom: var(--sol-space-3);
  }

  .sol-ai-details > summary {
    cursor: pointer;
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-semibold);
    color: var(--sol-accent);
    list-style: revert;
  }

  .sol-ai-details--warning > summary {
    color: var(--sol-warning, var(--sol-accent));
  }

  .sol-ai-details__body {
    margin-top: var(--sol-space-2);
  }

  /* --- Log / History List --- */
  .sol-ai-log {
    padding: var(--sol-space-2);
    background: var(--sol-bg-sunken);
    border-radius: var(--sol-radius-control);
    max-height: 200px;
    overflow-y: auto;
  }

  .sol-ai-log__entry {
    padding: var(--sol-space-1) var(--sol-space-2);
    font-size: var(--sol-font-size-xs);
    border-bottom: 1px solid var(--sol-border-muted, var(--sol-border));
  }

  .sol-ai-log__query {
    color: var(--sol-warning, var(--sol-accent));
  }

  .sol-ai-log__timestamp {
    color: var(--sol-text-muted);
    margin-inline-start: var(--sol-space-2);
  }

  .sol-ai-log__meta {
    color: var(--sol-text-secondary);
    margin-inline-start: var(--sol-space-2);
  }

  /* --- Textarea for JSON / Code Input --- */
  .sol-ai-textarea {
    box-sizing: border-box;
    width: 100%;
    height: 120px;
    font-family: var(--sol-font-family-mono);
    font-size: max(var(--sol-font-size-xs), var(--sol-font-size-field-min, 0px));
    padding: var(--sol-space-2);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-elevated);
    color: var(--sol-text-primary);
    resize: vertical;
  }

  /* --- Section Label (non-AI label for grouped content) --- */
  .sol-ai-section-label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-semibold);
    color: var(--sol-text-secondary);
  }

  /* --- Hint / Muted Paragraph --- */
  .sol-ai-hint {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-muted);
  }

  /* ============================================================
     Foundation Controls — SolButton, SolBadge, SolInput
     ============================================================ */

  /* --- SolButton --- */
  .sol-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sol-space-2);
    border: 1px solid transparent;
    border-radius: var(--sol-radius-action);
    font-family: var(--sol-font-family);
    font-weight: var(--sol-font-weight-semibold);
    cursor: pointer;
    transition: background var(--sol-transition-fast), color var(--sol-transition-fast), border-color var(--sol-transition-fast), box-shadow var(--sol-transition-fast), opacity var(--sol-transition-fast);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
  }

  .sol-btn:focus-visible {
    outline: none;
    box-shadow: var(--sol-focus-shadow);
  }

  /* Composed SolIcons glyphs scale with the button's font size. */
  .sol-btn__icon svg {
    width: 1em;
    height: 1em;
    display: block;
  }

  /* Sizes — derived from the skin's control height. */
  .sol-btn--sm {
    height: calc(var(--sol-control-h) - 4px);
    padding: 0 var(--sol-space-3);
    font-size: var(--sol-font-size-xs);
  }
  .sol-btn--md {
    height: var(--sol-control-h);
    padding: 0 var(--sol-space-4);
    font-size: var(--sol-font-size-sm);
  }
  .sol-btn--lg {
    height: calc(var(--sol-control-h) + 6px);
    padding: 0 var(--sol-space-6);
    font-size: var(--sol-font-size-base);
  }

  /* Variants: primary | tonal | outline | text | danger (secondary/ghost are legacy aliases) */
  .sol-btn--primary {
    background: var(--sol-accent);
    color: var(--sol-on-accent);
    border-color: var(--sol-accent);
  }
  .sol-btn--primary:hover:not(:disabled) {
    background: var(--sol-accent-hover);
    border-color: var(--sol-accent-hover);
  }
  .sol-btn--primary:active:not(:disabled) {
    background: var(--sol-accent-active);
    border-color: var(--sol-accent-active);
  }

  .sol-btn--tonal,
  .sol-btn--secondary {
    background: var(--sol-accent-muted);
    color: var(--sol-accent-fg);
    border-color: transparent;
  }
  .sol-btn--tonal:hover:not(:disabled),
  .sol-btn--secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sol-accent) 24%, transparent);
  }

  .sol-btn--outline {
    background: transparent;
    color: var(--sol-accent);
    border-color: var(--sol-accent);
  }
  .sol-btn--outline:hover:not(:disabled) {
    background: var(--sol-accent-muted);
  }

  .sol-btn--danger {
    background: var(--sol-danger);
    color: #fff;
    border-color: var(--sol-danger);
  }
  .sol-btn--danger:hover:not(:disabled) {
    opacity: 0.9;
  }

  /* An outcome (Outcome): a check or a cross that draws itself and a short label, laid over the button's
     own content, which keeps its place so the button keeps its width. It stays clickable. */
  /* The announcing status (a visually hidden span) stays inside the button, not the page's scroll box. */
  .sol-btn--outcome,
  .sol-btn--announces {
    position: relative;
  }

  .sol-btn--outcome > :not(.sol-btn__outcome, .sol-sr-only) {
    visibility: hidden;
  }

  .sol-btn__outcome {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sol-space-2);
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
  }

  .sol-btn__mark {
    flex: none;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    animation: sol-btn-mark-draw var(--sol-motion-draw) var(--sol-ease-enter) backwards;
  }

  @keyframes sol-btn-mark-draw {
    from { stroke-dashoffset: 1; }
  }

  /* A filled button takes the outcome's own color, with its text derived as a danger button's is. */
  .sol-btn.sol-btn--succeeded:is(.sol-btn--primary, .sol-btn--danger) {
    background: var(--sol-success);
    border-color: var(--sol-success);
    color: #fff;
  }

  .sol-btn.sol-btn--failed.sol-btn--primary {
    background: var(--sol-danger);
    border-color: var(--sol-danger);
    color: #fff;
  }

  .sol-btn.sol-btn--succeeded:is(.sol-btn--tonal, .sol-btn--outline, .sol-btn--text) {
    color: var(--sol-success);
  }

  .sol-btn.sol-btn--failed:is(.sol-btn--tonal, .sol-btn--outline, .sol-btn--text) {
    color: var(--sol-danger);
  }

  .sol-btn.sol-btn--succeeded.sol-btn--outline {
    border-color: var(--sol-success);
  }

  .sol-btn.sol-btn--failed.sol-btn--outline {
    border-color: var(--sol-danger);
  }

  .sol-btn--text,
  .sol-btn--ghost {
    background: transparent;
    color: var(--sol-accent-fg);
    border-color: transparent;
  }
  .sol-btn--text:hover:not(:disabled),
  .sol-btn--ghost:hover:not(:disabled) {
    background: var(--sol-accent-muted);
  }

  /* Warm skin: pill buttons with a colored glow on solid variants. */
  [data-sol-skin="warm"] .sol-btn--primary {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--sol-accent) 30%, transparent);
  }
  [data-sol-skin="warm"] .sol-btn--danger {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--sol-danger) 30%, transparent);
  }
  [data-sol-skin="warm"] .sol-btn:disabled {
    box-shadow: none;
  }

  /* Material skin: UPPERCASE action labels, medium weight. */
  [data-sol-skin="material"] .sol-btn {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--sol-font-weight-medium);
  }
  [data-sol-skin="material"] .sol-btn--primary,
  [data-sol-skin="material"] .sol-btn--danger {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  [data-sol-skin="material"] .sol-btn--primary:active:not(:disabled),
  [data-sol-skin="material"] .sol-btn--danger:active:not(:disabled) {
    box-shadow: none;
  }

  /* States */
  .sol-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .sol-btn--loading {
    cursor: wait;
    position: relative;
  }

  .sol-btn--full-width {
    width: 100%;
  }

  /* Link mode (<a> rendered as button) */
  a.sol-btn {
    text-decoration: none;
    color: inherit;
  }
  a.sol-btn:hover {
    text-decoration: none;
  }

  .sol-btn--icon-only {
    padding: 0;
    width: var(--sol-control-h);
  }
  .sol-btn--icon-only.sol-btn--sm { width: calc(var(--sol-control-h) - 4px); }
  .sol-btn--icon-only.sol-btn--lg { width: calc(var(--sol-control-h) + 6px); }

  /* Warm/Material icon-only buttons are circular. */
  [data-sol-skin="warm"] .sol-btn--icon-only,
  [data-sol-skin="material"] .sol-btn--icon-only {
    border-radius: 50%;
  }

  /* Spinner */
  .sol-btn__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: sol-spin 0.6s linear infinite;
  }

  .sol-btn__icon {
    display: inline-flex;
    font-size: 1.1em;
  }

  .sol-btn__text {
    display: inline-block;
  }

  @keyframes sol-spin {
    to { transform: rotate(360deg); }
  }

  /* --- SolBadge --- */
  .sol-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-1);
    font-family: var(--sol-font-family);
    font-weight: var(--sol-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }

  /* Sizes */
  .sol-badge--sm {
    padding: 1px 6px;
    font-size: 0.625rem;
  }
  .sol-badge--md {
    padding: 2px 8px;
    font-size: var(--sol-font-size-xs);
  }
  .sol-badge--lg {
    padding: 3px 10px;
    font-size: var(--sol-font-size-sm);
  }

  .sol-badge--rounded {
    border-radius: var(--sol-radius-full);
  }

  /* Color variants */
  .sol-badge--default {
    background: var(--sol-bg-muted);
    color: var(--sol-text-secondary);
  }
  .sol-badge--success {
    background: var(--sol-success-muted);
    color: var(--sol-success);
  }
  .sol-badge--warning {
    background: var(--sol-warning-muted);
    color: var(--sol-warning);
  }
  .sol-badge--danger {
    background: var(--sol-danger-muted);
    color: var(--sol-danger);
  }
  .sol-badge--info {
    background: var(--sol-info-muted);
    color: var(--sol-info);
  }
  .sol-badge--neutral {
    background: var(--sol-bg-elevated);
    color: var(--sol-text-tertiary);
    border: 1px solid var(--sol-border);
  }

  /* Dot mode */
  .sol-badge--dot {
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }
  .sol-badge--dot.sol-badge--sm { width: 6px; height: 6px; }
  .sol-badge--dot.sol-badge--lg { width: 10px; height: 10px; }
  .sol-badge--dot.sol-badge--success { background: var(--sol-success); }
  .sol-badge--dot.sol-badge--warning { background: var(--sol-warning); }
  .sol-badge--dot.sol-badge--danger { background: var(--sol-danger); }
  .sol-badge--dot.sol-badge--info { background: var(--sol-info); }
  .sol-badge--dot.sol-badge--default { background: var(--sol-text-tertiary); }

  /* Own keyframes name: keyframes are global, and the spinner dots define sol-pulse. */
  .sol-badge--pulse {
    animation: sol-badge-pulse 1.5s ease-in-out infinite;
  }

  @keyframes sol-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .sol-badge__icon {
    font-size: 0.9em;
  }
  .sol-badge__icon > svg { width: 1em; height: 1em; }

  /* Overlay mode — badge positioned on wrapped content */
  .sol-badge-overlay {
    position: relative;
    display: inline-flex;
  }
  .sol-badge-overlay > .sol-badge {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    transform: translate(50%, -50%);
    z-index: 1;
  }
  .sol-badge-overlay > .sol-badge--dot {
    transform: translate(30%, -30%);
  }

  /* Visibility toggle */
  .sol-badge--hidden {
    transform: scale(0);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .sol-badge-overlay > .sol-badge--hidden {
    transform: translate(50%, -50%) scale(0);
  }
  .sol-badge:not(.sol-badge--hidden) {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* Clickable badge */
  .sol-badge--clickable {
    cursor: pointer;
  }
  .sol-badge--clickable:hover {
    filter: brightness(0.9);
  }

  /* --- SolInput --- */
  .sol-input {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1);
    font-family: var(--sol-font-family);
  }

  .sol-input__label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-secondary);
  }

  .sol-input__container {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: var(--sol-control-h);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    transition: border-color var(--sol-transition-fast), box-shadow var(--sol-transition-fast), background var(--sol-transition-fast);
    overflow: hidden;
  }

  .sol-input:not(.sol-input--disabled, .sol-input--focused, .sol-input--error) .sol-input__container:hover {
    border-color: var(--sol-border-strong);
  }

  .sol-input--focused .sol-input__container {
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-input--error .sol-input__container {
    border-color: var(--sol-danger);
  }
  .sol-input--error.sol-input--focused .sol-input__container {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sol-danger) 25%, transparent);
  }

  /* Material skin — filled-field anatomy shared by all text-like controls: top-rounded fill, resting 1px underline, 2px accent bar on focus. */
  [data-sol-skin="material"] .sol-input__container,
  [data-sol-skin="material"] .sol-numeric__container,
  [data-sol-skin="material"] .sol-textarea__container,
  [data-sol-skin="material"] .sol-select__trigger,
  [data-sol-skin="material"] .sol-datepicker__trigger,
  [data-sol-skin="material"] .sol-time-picker__field,
  [data-sol-skin="material"] .sol-datetime-picker__trigger,
  [data-sol-skin="material"] .sol-date-range-picker__trigger,
  [data-sol-skin="material"] .sol-autocomplete__input-container {
    border-color: transparent;
    border-radius: var(--sol-radius-control) var(--sol-radius-control) 0 0;
    background: var(--sol-bg-muted);
    box-shadow: inset 0 -1px 0 0 var(--sol-line);
  }
  [data-sol-skin="material"] .sol-input--focused .sol-input__container,
  [data-sol-skin="material"] .sol-numeric--focused .sol-numeric__container,
  [data-sol-skin="material"] .sol-textarea--focused .sol-textarea__container,
  [data-sol-skin="material"] .sol-select--open .sol-select__trigger,
  [data-sol-skin="material"] .sol-datepicker--open .sol-datepicker__trigger,
  [data-sol-skin="material"] .sol-datepicker__trigger:focus-visible,
  [data-sol-skin="material"] .sol-time-picker__field:focus-within,
  [data-sol-skin="material"] .sol-time-picker--open .sol-time-picker__field,
  [data-sol-skin="material"] .sol-datetime-picker--open .sol-datetime-picker__trigger,
  [data-sol-skin="material"] .sol-datetime-picker__trigger:focus-visible,
  [data-sol-skin="material"] .sol-date-range-picker--open .sol-date-range-picker__trigger,
  [data-sol-skin="material"] .sol-date-range-picker__trigger:focus-visible,
  [data-sol-skin="material"] .sol-autocomplete--open .sol-autocomplete__input-container {
    border-color: transparent;
    box-shadow: inset 0 -2px 0 0 var(--sol-accent);
  }
  [data-sol-skin="material"] .sol-input--error .sol-input__container,
  [data-sol-skin="material"] .sol-numeric--error .sol-numeric__container,
  [data-sol-skin="material"] .sol-textarea--error .sol-textarea__container,
  [data-sol-skin="material"] .sol-select--error .sol-select__trigger,
  [data-sol-skin="material"] .sol-datepicker--error .sol-datepicker__trigger,
  [data-sol-skin="material"] .sol-time-picker--error .sol-time-picker__field,
  [data-sol-skin="material"] .sol-datetime-picker--error .sol-datetime-picker__trigger,
  [data-sol-skin="material"] .sol-date-range-picker--error .sol-date-range-picker__trigger,
  [data-sol-skin="material"] .sol-autocomplete--error .sol-autocomplete__input-container {
    border-color: transparent;
    box-shadow: inset 0 -1px 0 0 var(--sol-danger);
  }
  [data-sol-skin="material"] .sol-input--error.sol-input--focused .sol-input__container,
  [data-sol-skin="material"] .sol-numeric--error.sol-numeric--focused .sol-numeric__container,
  [data-sol-skin="material"] .sol-textarea--error.sol-textarea--focused .sol-textarea__container,
  [data-sol-skin="material"] .sol-autocomplete--error.sol-autocomplete--open .sol-autocomplete__input-container {
    box-shadow: inset 0 -2px 0 0 var(--sol-danger);
  }

  .sol-input--disabled .sol-input__container {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--sol-bg-muted);
  }

  .sol-input__field {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--sol-text-primary);
    font-family: inherit;
    font-size: max(var(--sol-font-size-base), var(--sol-font-size-field-min, 0px));
    padding: 0 var(--sol-space-3);
    height: 100%;
    min-width: 0;
  }

  .sol-input__field::placeholder {
    color: var(--sol-text-muted);
  }

  .sol-input__field:disabled {
    cursor: not-allowed;
  }

  .sol-input__prefix,
  .sol-input__suffix {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-muted);
    padding: 0 var(--sol-space-2);
    white-space: nowrap;
    user-select: none;
  }

  .sol-input__prefix {
    padding-inline-start: var(--sol-space-3);
  }

  .sol-input__suffix {
    padding-inline-end: var(--sol-space-3);
  }

  .sol-input__icon {
    padding-inline-start: var(--sol-space-3);
    color: var(--sol-text-muted);
    font-size: var(--sol-font-size-md);
    display: flex;
    align-items: center;
  }

  .sol-input__icon > svg {
    width: 1em;
    height: 1em;
  }

  .sol-input__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-inline-end: var(--sol-space-2);
    border: none;
    background: var(--sol-bg-muted);
    color: var(--sol-text-muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    transition: background var(--sol-transition-fast), color var(--sol-transition-fast);
  }

  .sol-input__clear:hover {
    background: var(--sol-danger-muted);
    color: var(--sol-danger);
  }

  .sol-input__helper {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
    padding-inline-start: var(--sol-space-1);
  }

  .sol-input__error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
    padding-inline-start: var(--sol-space-1);
  }

  /* Footer row (helper/error + counter) */
  .sol-input__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 1.2em;
  }

  .sol-input__counter {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
    padding-inline-end: var(--sol-space-1);
    white-space: nowrap;
    margin-inline-start: auto;
  }

  /* Password toggle button */
  .sol-input__password-toggle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-inline-end: var(--sol-space-1);
    border: 1px solid var(--sol-border);
    background: var(--sol-bg-muted);
    color: var(--sol-text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    border-radius: var(--sol-radius-sm);
    transition: background var(--sol-transition-fast), border-color var(--sol-transition-fast);
  }
  /* The glyph tracks the button's font-size, matching the other icon affordances. */
  .sol-input__password-toggle svg {
    width: 1em;
    height: 1em;
  }
  .sol-input__password-toggle:focus-visible {
    outline: none;
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-input__password-toggle:hover {
    background: var(--sol-bg-muted);
    border-color: var(--sol-accent);
  }

  /* Floating label */
  .sol-input--floating {
    position: relative;
  }
  .sol-input--floating .sol-input__container {
    position: relative;
    overflow: visible;
  }
  .sol-input__floating-label {
    position: absolute;
    inset-inline-start: var(--sol-space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--sol-font-size-base);
    color: var(--sol-text-muted);
    pointer-events: none;
    transition: all 0.15s ease;
    background: transparent;
    padding: 0 var(--sol-space-1);
    z-index: 1;
    line-height: 1;
  }
  .sol-input--floating-active .sol-input__floating-label {
    top: 0;
    transform: translateY(-50%);
    font-size: var(--sol-font-size-xs);
    color: var(--sol-accent);
    font-weight: var(--sol-font-weight-medium);
    background: var(--sol-bg-surface);
  }
  /* Material's filled field keeps the shrunk label INSIDE the fill, not on the border. */
  [data-sol-skin="material"] .sol-input--floating-active .sol-input__floating-label {
    top: 4px;
    transform: none;
    background: transparent;
  }
  .sol-input--error.sol-input--floating-active .sol-input__floating-label {
    color: var(--sol-danger);
  }

  /* Scanner mode indicator */
  .sol-input--scanner .sol-input__container {
    border-style: dashed;
  }
  .sol-input--scanner.sol-input--focused .sol-input__container {
    border-style: solid;
    border-color: var(--sol-success);
    box-shadow: 0 0 0 2px var(--sol-success-muted);
  }

  /* --- SolNumericInput --- */
  .sol-numeric {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1);
    font-family: var(--sol-font-family);
  }

  .sol-numeric__label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-secondary);
  }

  .sol-numeric__container {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: var(--sol-control-h);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    transition: border-color var(--sol-transition-fast), box-shadow var(--sol-transition-fast);
    overflow: hidden;
  }

  .sol-numeric:not(.sol-numeric--disabled, .sol-numeric--focused, .sol-numeric--error) .sol-numeric__container:hover {
    border-color: var(--sol-border-strong);
  }

  .sol-numeric--focused .sol-numeric__container {
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-numeric--error .sol-numeric__container {
    border-color: var(--sol-danger);
  }
  .sol-numeric--error.sol-numeric--focused .sol-numeric__container {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sol-danger) 25%, transparent);
  }

  .sol-numeric--disabled .sol-numeric__container {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--sol-bg-muted);
  }

  .sol-numeric__field {
    font-variant-numeric: tabular-nums;
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--sol-text-primary);
    font-family: inherit;
    font-size: max(var(--sol-font-size-base), var(--sol-font-size-field-min, 0px));
    padding: 0 var(--sol-space-3);
    height: 100%;
    min-width: 0;
    text-align: center;
  }

  .sol-numeric__field::placeholder {
    color: var(--sol-text-muted);
  }

  .sol-numeric__field:disabled {
    cursor: not-allowed;
  }

  .sol-numeric__prefix,
  .sol-numeric__suffix {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-muted);
    padding: 0 var(--sol-space-2);
    white-space: nowrap;
    user-select: none;
  }

  .sol-numeric__btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    border: none;
    background: var(--sol-bg-muted);
    color: var(--sol-text-secondary);
    cursor: pointer;
    font-size: var(--sol-font-size-md);
    font-weight: var(--sol-font-weight-semibold);
    transition: background var(--sol-transition-fast), color var(--sol-transition-fast);
    user-select: none;
    flex-shrink: 0;
  }

  .sol-numeric__btn:hover:not(:disabled) {
    background: var(--sol-accent-muted);
    color: var(--sol-accent);
  }

  .sol-numeric__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .sol-numeric__btn--minus {
    border-inline-end: 1px solid var(--sol-border);
  }

  .sol-numeric__btn--plus {
    border-inline-start: 1px solid var(--sol-border);
  }

  .sol-numeric__helper {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
    padding-inline-start: var(--sol-space-1);
  }

  .sol-numeric__error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
    padding-inline-start: var(--sol-space-1);
  }

  /* --- SolSelect --- */
  .sol-select {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1);
    font-family: var(--sol-font-family);
    position: relative;
  }

  .sol-select__label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-secondary);
  }

  .sol-select__trigger {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: var(--sol-control-h);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    padding: 0 var(--sol-space-3);
    cursor: pointer;
    transition: border-color var(--sol-transition-fast), box-shadow var(--sol-transition-fast);
    gap: var(--sol-space-2);
  }

  .sol-select:not(.sol-select--disabled, .sol-select--open, .sol-select--error) .sol-select__trigger:hover {
    border-color: var(--sol-border-strong);
  }

  .sol-select--open .sol-select__trigger {
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-select--error .sol-select__trigger {
    border-color: var(--sol-danger);
  }

  .sol-select--disabled .sol-select__trigger {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--sol-bg-muted);
  }

  .sol-select__display {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sol-text-primary);
    font-size: var(--sol-font-size-base);
  }

  .sol-select__placeholder {
    flex: 1;
    color: var(--sol-text-muted);
    font-size: var(--sol-font-size-base);
  }

  .sol-select__actions {
    display: flex;
    align-items: center;
    gap: var(--sol-space-1);
    margin-inline-start: auto;
    flex-shrink: 0;
  }

  .sol-select__arrow {
    color: var(--sol-text-muted);
    font-size: 12px;
    transition: transform var(--sol-transition-fast);
  }
  .sol-select--open .sol-select__arrow {
    transform: rotate(180deg);
  }

  .sol-select__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: var(--sol-bg-muted);
    color: var(--sol-text-muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    line-height: 1;
    transition: background var(--sol-transition-fast), color var(--sol-transition-fast);
  }
  .sol-select__clear:hover {
    background: var(--sol-danger-muted);
    color: var(--sol-danger);
  }

  /* Click-outside overlay */
  .sol-select__overlay {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    background: transparent;
    cursor: default;
  }

  /* Dropdown — final position (fixed + top/left) is set by floating.js so the
     panel escapes any ancestor overflow:hidden / overflow:clip / contain.
     Initial absolute fallback applies only when JS is unavailable (e.g. pre-render). */
  .sol-select__dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    margin-top: var(--sol-space-1);
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-elev-overlay);
    overflow-y: auto;
    z-index: 9999;
  }

  .sol-select__search-container {
    padding: var(--sol-space-2);
    border-bottom: 1px solid var(--sol-border);
  }

  .sol-select__search {
    width: 100%;
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    padding: var(--sol-space-1) var(--sol-space-2);
    background: var(--sol-bg-surface);
    color: var(--sol-text-primary);
    font-size: max(var(--sol-font-size-sm), var(--sol-font-size-field-min, 0px));
    outline: none;
  }
  .sol-select__search:focus {
    border-color: var(--sol-accent);
  }

  .sol-select__option {
    padding: var(--sol-space-2) var(--sol-space-3);
    cursor: pointer;
    font-size: var(--sol-font-size-base);
    color: var(--sol-text-primary);
    transition: background var(--sol-transition-fast);
  }
  .sol-select__option:hover {
    background: var(--sol-bg-muted);
  }
  .sol-select__option--selected {
    background: var(--sol-accent-muted);
    color: var(--sol-accent);
    font-weight: var(--sol-font-weight-medium);
  }
  .sol-select__option--highlighted {
    background: var(--sol-bg-muted);
  }

  .sol-select__group {
    padding: var(--sol-space-2) var(--sol-space-3) var(--sol-space-1);
    font-size: var(--sol-font-size-xs);
    font-weight: var(--sol-font-weight-semibold);
    color: var(--sol-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .sol-select__no-data {
    padding: var(--sol-space-4) var(--sol-space-3);
    text-align: center;
    color: var(--sol-text-muted);
    font-size: var(--sol-font-size-sm);
  }

  /* Chips (multi-select) */
  .sol-select__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sol-space-1);
    flex: 1;
    padding: var(--sol-space-1) 0;
  }

  .sol-select__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-1);
    padding: 2px var(--sol-space-2);
    background: var(--sol-accent-muted);
    color: var(--sol-accent);
    border-radius: var(--sol-radius-full);
    font-size: var(--sol-font-size-xs);
    font-weight: var(--sol-font-weight-medium);
  }

  .sol-select__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    color: var(--sol-accent);
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
  }
  .sol-select__chip-remove:hover {
    background: var(--sol-danger-muted);
    color: var(--sol-danger);
  }

  .sol-select__helper {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
    padding-inline-start: var(--sol-space-1);
  }

  .sol-select__error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
    padding-inline-start: var(--sol-space-1);
  }

  /* --- SolToast --- */
  .sol-toast-container {
    box-sizing: border-box;
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-2);
    pointer-events: none;
    max-width: 420px;
    width: 100%;
    /* The gutter grows by the device's unsafe edges (zero without viewport-fit=cover). */
    padding: calc(var(--sol-space-4) + var(--sol-safe-area-top)) calc(var(--sol-space-4) + var(--sol-safe-area-right))
      calc(var(--sol-space-4) + var(--sol-safe-area-bottom)) calc(var(--sol-space-4) + var(--sol-safe-area-left));
  }
  .sol-toast-container--top-right { top: 0; inset-inline-end: 0; }
  .sol-toast-container--top-left { top: 0; inset-inline-start: 0; }
  .sol-toast-container--top-center { top: 0; left: 50%; transform: translateX(-50%); }
  .sol-toast-container--bottom-right { bottom: 0; inset-inline-end: 0; }
  .sol-toast-container--bottom-left { bottom: 0; inset-inline-start: 0; }
  .sol-toast-container--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }

  .sol-toast {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--sol-space-3);
    padding: var(--sol-space-3) var(--sol-space-4);
    border-radius: var(--sol-radius-menu);
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-card-border);
    box-shadow: var(--sol-elev-overlay);
    pointer-events: auto;
    cursor: default;
    font-family: var(--sol-font-family);
    min-width: 280px;
  }

  /* Warm/Material toasts are borderless surfaces; the stripe is Standard's tell. */
  [data-sol-skin="warm"] .sol-toast,
  [data-sol-skin="material"] .sol-toast {
    border-inline-start-color: transparent !important;
  }

  .sol-toast--entering {
    animation: sol-toast-enter 0.3s ease forwards;
  }
  .sol-toast--leaving {
    animation: sol-toast-leave 0.3s ease forwards;
  }

  @keyframes sol-toast-enter {
    from { opacity: 0; transform: translateX(calc(100% * var(--sol-dir, 1))); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes sol-toast-leave {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(calc(100% * var(--sol-dir, 1))); }
  }

  /* One accent per variant, declared on the toast root so every part of the toast —
     stripe, icon, prominent bar and badge — reads the same value instead of each
     rule repeating the variant list. */
  .sol-toast--success { --sol-toast-accent: var(--sol-success); }
  .sol-toast--error { --sol-toast-accent: var(--sol-danger); }
  .sol-toast--warning { --sol-toast-accent: var(--sol-warning); }
  .sol-toast--info { --sol-toast-accent: var(--sol-info); }

  .sol-toast { border-inline-start: 4px solid var(--sol-toast-accent, var(--sol-info)); }
  .sol-toast__icon { color: var(--sol-toast-accent, var(--sol-info)); }
  .sol-toast__icon > svg { width: 1em; height: 1em; }

  .sol-toast__icon {
    font-size: var(--sol-font-size-lg);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .sol-toast__content {
    flex: 1;
    min-width: 0;
  }

  .sol-toast__title {
    font-weight: var(--sol-font-weight-semibold);
    font-size: var(--sol-font-size-base);
    color: var(--sol-text-primary);
    margin-bottom: var(--sol-space-1);
  }

  .sol-toast__message {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-secondary);
    line-height: 1.4;
  }

  /*
   * The suggested action, subordinated on purpose. Folding it into the message
   * would read as more bad news; the softer register is what makes it read as a
   * way out instead.
   */
  .sol-toast__secondary {
    margin-top: var(--sol-space-1);
    font-size: var(--sol-font-size-sm);
    font-style: italic;
    color: var(--sol-text-muted);
    line-height: 1.4;
  }

  /* A reference the user cannot act on but support can. */
  .sol-toast__detail {
    margin-top: var(--sol-space-2);
    padding-top: var(--sol-space-2);
    border-top: 1px dashed var(--sol-border);
    font-family: var(--sol-font-family-mono, monospace);
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
    word-break: break-all;
  }

  /* Coalesced duplicates: one toast, a counter — not a stack of copies. */
  .sol-toast__count {
    flex: none;
    align-self: flex-start;
    padding: 1px 7px;
    border-radius: var(--sol-radius-full, 999px);
    background: var(--sol-bg-muted);
    color: var(--sol-text-muted);
    font-size: var(--sol-font-size-xs);
    font-weight: var(--sol-font-weight-semibold, 600);
    line-height: 1.5;
  }

  /* === Prominent appearance (opt-in) === */
  /* The container widens with its panel: a panel wider than the container hangs past the
     screen edge in the corner positions. */
  .sol-toast-container--prominent {
    max-width: calc(480px + 2 * var(--sol-space-4));
  }

  .sol-toast-container--prominent .sol-toast {
    width: 480px;
    max-width: calc(100vw - 32px);
    padding: var(--sol-space-4);
    box-shadow: var(--sol-elev-overlay);
    /* The stripe becomes a bottom bar: at this size a side stripe reads as
       decoration, while a full-width bar reads as severity. */
    border-inline-start: none;
    border-bottom: 3px solid var(--sol-toast-accent, var(--sol-info));
  }

  /* The badge is the loud part — a filled disc with a white glyph, so the
     variant is legible from across a counter. */
  .sol-toast-container--prominent .sol-toast__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--sol-radius-full);
    background: var(--sol-toast-accent, var(--sol-info));
    color: #fff;
  }

  .sol-toast-container--prominent .sol-toast__icon > * {
    color: #fff;
  }

  .sol-toast-container--prominent .sol-toast__title {
    font-size: var(--sol-font-size-md, 15px);
    color: var(--sol-toast-accent, var(--sol-text-primary));
  }

  .sol-toast-container--prominent .sol-toast__message,
  .sol-toast-container--prominent .sol-toast__secondary {
    color: var(--sol-text-primary);
  }

  .sol-toast-container--prominent .sol-toast__secondary {
    color: var(--sol-text-secondary);
  }

  .sol-toast__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--sol-text-tertiary);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    border-radius: var(--sol-radius-action);
    flex-shrink: 0;
    transition: background var(--sol-transition-fast), color var(--sol-transition-fast);
  }
  .sol-toast__close:hover {
    background: var(--sol-bg-muted);
    color: var(--sol-text-primary);
  }

  .sol-toast__action {
    background: transparent;
    border: none;
    color: var(--sol-accent-fg);
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-semibold);
    font-family: var(--sol-font-family);
    border-radius: var(--sol-radius-action);
    padding: var(--sol-space-1) var(--sol-space-2);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--sol-transition-fast);
  }
  .sol-toast__action:hover {
    background: var(--sol-accent-muted);
  }
  [data-sol-skin="material"] .sol-toast__action {
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  /* --- SolDialog --- */
  .sol-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: var(--sol-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    /* The gutter grows by the device's unsafe edges (zero without viewport-fit=cover). */
    padding: calc(var(--sol-space-4) + var(--sol-safe-area-top)) calc(var(--sol-space-4) + var(--sol-safe-area-right))
      calc(var(--sol-space-4) + var(--sol-safe-area-bottom)) calc(var(--sol-space-4) + var(--sol-safe-area-left));
    animation: sol-dialog-fade-in 0.2s ease;
  }

  @keyframes sol-dialog-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .sol-dialog {
    background: var(--sol-bg-elevated);
    border-radius: var(--sol-radius-card);
    box-shadow: var(--sol-elev-overlay);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-height: 90vh;
    max-width: 100%;
    overflow: hidden;
    animation: sol-dialog-scale-in 0.2s ease;
    font-family: var(--sol-font-family);
  }

  @keyframes sol-dialog-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  .sol-dialog--sm { width: 400px; }
  .sol-dialog--md { width: 560px; }
  .sol-dialog--lg { width: 720px; }
  .sol-dialog--fullscreen {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  /* On a phone every size takes the full width inside the backdrop's gutter. */
  @media (max-width: 480px) {
    .sol-dialog {
      width: 100%;
    }
  }

  /* Header/footer dividers ride the card border token — Standard only. */
  .sol-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-4) var(--sol-space-5);
    border-bottom: 1px solid var(--sol-card-border);
  }

  .sol-dialog__title {
    margin: 0;
    font-size: var(--sol-font-size-lg);
    font-weight: var(--sol-font-weight-semibold);
    color: var(--sol-text-primary);
  }

  .sol-dialog__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--sol-text-tertiary);
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    border-radius: var(--sol-radius-action);
    transition: background var(--sol-transition-fast), color var(--sol-transition-fast);
  }
  .sol-dialog__close:hover {
    background: var(--sol-bg-muted);
    color: var(--sol-text-primary);
  }

  .sol-dialog__body {
    padding: var(--sol-space-5);
    overflow-y: auto;
    flex: 1;
    color: var(--sol-text-primary);
    font-size: var(--sol-font-size-base);
    line-height: 1.6;
  }

  .sol-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sol-space-2);
    padding: var(--sol-space-3) var(--sol-space-5);
    border-top: 1px solid var(--sol-card-border);
  }

  /* ═══════════════════════════════════════════════════
     SolCard
     ═══════════════════════════════════════════════════ */

  .sol-card {
    box-sizing: border-box;
    background: var(--sol-bg-surface);
    border: 1px solid var(--sol-card-border);
    border-radius: var(--sol-radius-card);
    box-shadow: var(--sol-elev-card);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }

  /* Lumen skin: a surface tinted by the brand, a lit top edge, and a light under the pointer (theme.js /
     the theme service write --sol-pointer-x/y on the card the pointer is over). */
  [data-sol-skin="lumen"] .sol-card {
    border-color: color-mix(in srgb, var(--sol-fx-tint) 16%, var(--sol-card-border));
    background-image:
      radial-gradient(240px circle at var(--sol-pointer-x, 50%) var(--sol-pointer-y, -60%), color-mix(in srgb, var(--sol-fx-tint) calc(var(--sol-fx-glow) * 15%), transparent), transparent 70%),
      linear-gradient(90deg, transparent 12%, color-mix(in srgb, var(--sol-fx-tint) calc(var(--sol-fx-glow) * 70%), transparent) 50%, transparent 88%),
      linear-gradient(180deg, color-mix(in srgb, var(--sol-fx-tint) calc(var(--sol-fx-glow) * 4%), transparent), transparent);
    background-size: auto, 100% 1px, auto;
    background-repeat: no-repeat;
  }

  .sol-card--outlined {
    background: transparent;
    border: 1px solid var(--sol-border);
    box-shadow: none;
  }

  .sol-card--elevated {
    border-color: transparent;
    box-shadow: var(--sol-elev-overlay);
  }

  /* An interactive card is an <a> or a <button>, so the element's own defaults have to
     be neutralized before the card treatment reads the same on all three. */
  a.sol-card,
  button.sol-card {
    box-sizing: border-box;
    display: block;
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: inherit;
    text-decoration: none;
  }

  .sol-card--clickable {
    cursor: pointer;
  }

  .sol-card--clickable:hover {
    border-color: var(--sol-accent);
    box-shadow: var(--sol-elev-overlay);
  }

  .sol-card--clickable:active {
    transform: scale(0.99);
  }

  /* The card is reachable by Tab now, so it has to show where the focus is. */
  .sol-card--clickable:focus-visible {
    outline: none;
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  /* Dividers ride the card border token: visible in Standard, gone in Warm/Material. */
  .sol-card__header {
    padding: var(--sol-space-3) var(--sol-card-pad);
    border-bottom: 1px solid var(--sol-card-border);
    font-weight: var(--sol-font-weight-semibold);
  }

  .sol-card__body {
    padding: var(--sol-card-pad);
  }

  /* The card clips at its rounded edge; an opted-in body scrolls sideways instead. */
  .sol-card__body--scroll-x {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .sol-card__footer {
    padding: var(--sol-space-3) var(--sol-card-pad);
    border-top: 1px solid var(--sol-card-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--sol-space-2);
  }

  /* ═══════════════════════════════════════════════════
     SolTabs
     ═══════════════════════════════════════════════════ */

  .sol-tabs__header {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--sol-border);
    margin-bottom: var(--sol-space-4);
  }

  /* Material action labels: UPPERCASE tabs over the same 2px indicator. */
  [data-sol-skin="material"] .sol-tab-header {
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .sol-tabs--full-width .sol-tabs__header {
    width: 100%;
  }

  .sol-tabs--full-width .sol-tab-header {
    flex: 1;
  }

  /* Tab header buttons */
  .sol-tab-header {
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-2);
    padding: var(--sol-space-2) var(--sol-space-4);
    border: none;
    background: transparent;
    color: var(--sol-text-tertiary);
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.15s ease;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
  }

  .sol-tab-header:hover:not(:disabled) {
    color: var(--sol-text-primary);
  }

  .sol-tab-header:focus-visible {
    outline: none;
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-tab-header--active {
    color: var(--sol-accent);
    border-bottom-color: var(--sol-accent);
  }

  .sol-tab-header--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .sol-tab-header__icon {
    font-size: var(--sol-font-size-base);
    line-height: 1;
  }
  .sol-tab-header__icon > svg { width: 1em; height: 1em; }

  .sol-tab-header__badge {
    margin-inline-start: var(--sol-space-1);
  }

  /* Enclosed variant */
  .sol-tabs--enclosed .sol-tabs__header {
    border-bottom: 1px solid var(--sol-border);
  }

  .sol-tabs--enclosed .sol-tab-header {
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--sol-radius-control) var(--sol-radius-control) 0 0;
    margin-bottom: -1px;
  }

  .sol-tabs--enclosed .sol-tab-header--active {
    background: var(--sol-bg-surface);
    border-color: var(--sol-border);
    border-bottom-color: var(--sol-bg-surface);
    color: var(--sol-text-primary);
  }

  /* Pills variant */
  .sol-tabs--pills .sol-tabs__header {
    border-bottom: none;
    gap: var(--sol-space-1);
    margin-bottom: var(--sol-space-4);
  }

  .sol-tabs--pills .sol-tab-header {
    border-radius: var(--sol-radius-full);
    border-bottom: none;
    margin-bottom: 0;
    padding: var(--sol-space-1) var(--sol-space-3);
  }

  .sol-tabs--pills .sol-tab-header--active {
    background: var(--sol-accent);
    color: var(--sol-on-accent);
  }

  /* One indicator slides to the selected tab (line and pills). The script that measures marks the strip
     --ink; until it does, and in forced colors, each tab draws its own. */
  .sol-tabs__header {
    position: relative;
  }

  .sol-tabs__ink {
    display: none;
  }

  @media (forced-colors: none) {
    .sol-tabs--line .sol-tabs__header--ink > .sol-tabs__ink,
    .sol-tabs--pills .sol-tabs__header--ink > .sol-tabs__ink {
      display: block;
      position: absolute;
      left: 0;
      width: var(--sol-tab-ink-w, 0px);
      transform: translateX(var(--sol-tab-ink-x, 0px));
      background: var(--sol-accent);
      pointer-events: none;
    }

    .sol-tabs--line .sol-tabs__header--ink > .sol-tabs__ink {
      bottom: -2px;
      height: 2px;
    }

    .sol-tabs--pills .sol-tabs__header--ink > .sol-tabs__ink {
      top: var(--sol-tab-ink-y, 0px);
      height: var(--sol-tab-ink-h, 0px);
      border-radius: var(--sol-radius-full);
    }

    .sol-tabs__header--ink-ready > .sol-tabs__ink {
      transition: transform var(--sol-motion-slide) var(--sol-ease-enter),
                  width var(--sol-motion-slide) var(--sol-ease-enter);
    }

    .sol-tabs--line .sol-tabs__header--ink > .sol-tab-header--active {
      border-bottom-color: transparent;
    }

    .sol-tabs--pills .sol-tabs__header--ink > .sol-tab-header--active {
      background: transparent;
    }

    /* The label turns as the pill arrives, not before it. */
    .sol-tabs--pills .sol-tabs__header--ink-ready > .sol-tab-header {
      transition: color var(--sol-motion-slide) var(--sol-ease-enter);
    }
  }

  /* Tab panel */
  .sol-tab-panel {
    min-height: 0;
  }

  /* ═══════════════════════════════════════════════════
     SolForm
     ═══════════════════════════════════════════════════ */

  .sol-form__fields {
    display: grid;
    gap: var(--sol-space-4);
  }

  /* minmax(0, 1fr): a track never grows to its widest control's intrinsic width. */
  .sol-form--cols-1 .sol-form__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .sol-form--cols-2 .sol-form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sol-form--cols-3 .sol-form__fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sol-form--readonly {
    pointer-events: none;
    opacity: 0.8;
  }

  .sol-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sol-space-2);
    padding-top: var(--sol-space-4);
    border-top: 1px solid var(--sol-border);
    margin-top: var(--sol-space-4);
  }

  /* Form Field */
  .sol-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1);
  }

  .sol-form-field--span-2 {
    grid-column: span 2;
  }

  .sol-form-field--span-3 {
    grid-column: span 3;
  }

  .sol-form-field__label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-secondary);
  }

  .sol-form-field__required {
    color: var(--sol-danger);
    margin-inline-start: 2px;
  }

  .sol-form-field__control {
    width: 100%;
  }

  .sol-form-field__helper {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
  }

  .sol-form-field__error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
  }

  .sol-form-field--error .sol-form-field__label {
    color: var(--sol-danger);
  }

  /* Multi-column forms stack at their CollapseBreakpoint, on the suite's 480/768/1024 scale. */
  @media (max-width: 480px) {
    .sol-form--collapse-sm.sol-form--cols-2 .sol-form__fields,
    .sol-form--collapse-sm.sol-form--cols-3 .sol-form__fields {
      grid-template-columns: minmax(0, 1fr);
    }

    .sol-form--collapse-sm .sol-form-field--span-2,
    .sol-form--collapse-sm .sol-form-field--span-3 {
      grid-column: span 1;
    }
  }

  @media (max-width: 768px) {
    .sol-form--collapse-md.sol-form--cols-2 .sol-form__fields,
    .sol-form--collapse-md.sol-form--cols-3 .sol-form__fields {
      grid-template-columns: minmax(0, 1fr);
    }

    .sol-form--collapse-md .sol-form-field--span-2,
    .sol-form--collapse-md .sol-form-field--span-3 {
      grid-column: span 1;
    }
  }

  @media (max-width: 1024px) {
    .sol-form--collapse-lg.sol-form--cols-2 .sol-form__fields,
    .sol-form--collapse-lg.sol-form--cols-3 .sol-form__fields {
      grid-template-columns: minmax(0, 1fr);
    }

    .sol-form--collapse-lg .sol-form-field--span-2,
    .sol-form--collapse-lg .sol-form-field--span-3 {
      grid-column: span 1;
    }
  }

  /* =============================================
     SolCheckbox
     ============================================= */

  .sol-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--sol-space-2);
    cursor: pointer;
    position: relative;
    user-select: none;
  }

  /* The label holds the box and the text; without its own layout it stacked them. */
  .sol-checkbox__wrapper {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--sol-space-2);
    cursor: inherit;
  }

  .sol-checkbox--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .sol-checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .sol-checkbox__control {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--sol-line);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-surface);
    transition: background var(--sol-transition-fast), border-color var(--sol-transition-fast);
    margin-top: 1px;
  }

  .sol-checkbox__control svg {
    width: 12px;
    height: 12px;
    color: var(--sol-on-accent);
    display: block;
  }

  .sol-checkbox--checked .sol-checkbox__control {
    background: var(--sol-accent);
    border-color: var(--sol-accent);
  }

  .sol-checkbox--indeterminate .sol-checkbox__control {
    background: var(--sol-accent);
    border-color: var(--sol-accent);
  }

  .sol-checkbox--error .sol-checkbox__control {
    border-color: var(--sol-danger);
  }

  /* The marks are always there; ticking draws the check and the partial state grows its dash, both
     as transitions, so only a change the user sees animates. Clearing is instant. */
  .sol-checkbox__control {
    position: relative;
  }

  .sol-checkbox__control svg {
    position: absolute;
    inset: 0;
    margin: auto;
  }

  .sol-checkbox__check path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
  }

  .sol-checkbox--checked:not(.sol-checkbox--indeterminate) .sol-checkbox__check path {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: stroke-dashoffset var(--sol-motion-draw) var(--sol-ease-enter);
  }

  .sol-checkbox__indeterminate path {
    transform-box: fill-box;
    transform-origin: center;
    transform: scaleX(0);
    opacity: 0;
  }

  .sol-checkbox--indeterminate .sol-checkbox__indeterminate path {
    transform: none;
    opacity: 1;
    transition: transform var(--sol-motion-draw) var(--sol-ease-enter);
  }

  .sol-checkbox:not(.sol-checkbox--disabled):hover .sol-checkbox__control {
    border-color: var(--sol-accent);
  }

  .sol-checkbox__input:focus-visible + .sol-checkbox__control {
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-checkbox__label {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-primary);
    line-height: 1.4;
  }

  /* Setting row: name, muted description, control on the inline-end edge. The shape a
     settings list wants — without it the description lands under the box, misaligned. */
  .sol-checkbox__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .sol-checkbox__description {
    color: var(--sol-text-tertiary, var(--sol-text-secondary));
    font-size: var(--sol-font-size-sm);
    line-height: 1.35;
  }

  .sol-checkbox--setting-row {
    width: 100%;
  }

  .sol-checkbox--setting-row .sol-checkbox__wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: var(--sol-space-4, 1rem);
    width: 100%;
  }

  .sol-checkbox__helper {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
    margin-top: var(--sol-space-1);
    margin-inline-start: calc(18px + var(--sol-space-2));
  }

  .sol-checkbox__error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
    margin-top: var(--sol-space-1);
    margin-inline-start: calc(18px + var(--sol-space-2));
  }

  /* =============================================
     SolSwitch
     ============================================= */

  .sol-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-3);
    cursor: pointer;
    position: relative;
    user-select: none;
  }

  .sol-switch__wrapper {
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-3);
    cursor: inherit;
  }

  .sol-switch--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .sol-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sol-switch__track {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--sol-bg-muted);
    border: 1px solid var(--sol-line);
    transition: background var(--sol-transition-fast), border-color var(--sol-transition-fast);
  }

  /* With on/off text the track grows with the longer text, up to a cap past which the text
     truncates with an ellipsis. The padding reserves the thumb's side, which swaps with state. */
  .sol-switch--has-text .sol-switch__track {
    box-sizing: border-box;
    width: auto;
    min-width: 52px;
    max-width: 8rem;
    height: 22px;
    border-radius: 11px;
    padding-inline: 24px 6px;
  }

  .sol-switch--on.sol-switch--has-text .sol-switch__track {
    padding-inline: 6px 24px;
  }

  .sol-switch__thumb {
    position: absolute;
    inset-inline-start: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: var(--sol-elev-card);
    transition: transform var(--sol-transition-fast);
  }

  .sol-switch--has-text .sol-switch__thumb {
    width: 18px;
    height: 18px;
    transition: inset-inline-start var(--sol-transition-fast);
  }

  .sol-switch--on .sol-switch__track {
    background: var(--sol-accent);
    border-color: var(--sol-accent);
  }

  /* A 36px border-box track: a 16px thumb 2px inside either end travels 14px. */
  .sol-switch--on .sol-switch__thumb {
    transform: translateX(calc(14px * var(--sol-dir, 1)));
    background: var(--sol-on-accent);
  }

  /* The track's width varies, so the thumb is placed from its end rather than translated. */
  .sol-switch--on.sol-switch--has-text .sol-switch__thumb {
    transform: none;
    inset-inline-start: calc(100% - 20px);
  }

  .sol-switch__texts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1 1 auto;
    min-width: 0;
    pointer-events: none;
  }

  .sol-switch__text {
    grid-area: 1 / 1;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 9px;
    font-weight: var(--sol-font-weight-semibold);
    color: var(--sol-text-muted);
  }

  .sol-switch__text--on {
    justify-self: start;
    color: var(--sol-on-accent);
  }

  .sol-switch__text--off {
    justify-self: end;
  }

  .sol-switch--on .sol-switch__text--off,
  .sol-switch:not(.sol-switch--on) .sol-switch__text--on {
    visibility: hidden;
  }

  .sol-switch--error .sol-switch__track {
    border-color: var(--sol-danger);
  }

  .sol-switch:not(.sol-switch--disabled):hover .sol-switch__track {
    border-color: var(--sol-accent);
  }

  .sol-switch__input:focus-visible + .sol-switch__track {
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-switch__label {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-primary);
  }

  /* Setting row: name, muted description, control on the inline-end edge. The shape a
     settings list wants — without it the description lands under the box, misaligned. */
  .sol-switch__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .sol-switch__description {
    color: var(--sol-text-tertiary, var(--sol-text-secondary));
    font-size: var(--sol-font-size-sm);
    line-height: 1.35;
  }

  .sol-switch--setting-row {
    width: 100%;
  }

  .sol-switch--setting-row .sol-switch__wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: var(--sol-space-4, 1rem);
    width: 100%;
  }

  .sol-switch__helper {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
    margin-top: var(--sol-space-1);
  }

  .sol-switch__error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
    margin-top: var(--sol-space-1);
  }

  /* =============================================
     SolTextArea
     ============================================= */

  .sol-textarea {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1);
    width: 100%;
  }

  .sol-textarea__label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-secondary);
  }

  .sol-textarea__container {
    display: flex;
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    transition: border-color var(--sol-transition-fast), box-shadow var(--sol-transition-fast);
  }

  .sol-textarea:not(.sol-textarea--disabled, .sol-textarea--focused, .sol-textarea--error) .sol-textarea__container:hover {
    border-color: var(--sol-border-strong);
  }

  .sol-textarea--focused .sol-textarea__container {
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-textarea--error .sol-textarea__container {
    border-color: var(--sol-danger);
  }

  .sol-textarea--error.sol-textarea--focused .sol-textarea__container {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sol-danger) 25%, transparent);
  }

  .sol-textarea--disabled .sol-textarea__container {
    background: var(--sol-bg-muted);
    cursor: not-allowed;
  }

  .sol-textarea__field {
    width: 100%;
    padding: var(--sol-space-2) var(--sol-space-3);
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: max(var(--sol-font-size-sm), var(--sol-font-size-field-min, 0px));
    color: var(--sol-text-primary);
    resize: vertical;
    outline: none;
    line-height: 1.5;
  }

  .sol-textarea--autogrow .sol-textarea__field {
    resize: none;
    overflow: hidden;
  }

  .sol-textarea--disabled .sol-textarea__field {
    cursor: not-allowed;
    color: var(--sol-text-muted);
  }

  .sol-textarea__field::placeholder {
    color: var(--sol-text-muted);
  }

  .sol-textarea__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sol-space-2);
  }

  .sol-textarea__helper {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
  }

  .sol-textarea__error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
  }

  .sol-textarea__counter {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
    margin-inline-start: auto;
  }

  .sol-textarea__counter--limit {
    color: var(--sol-warning);
  }

  /* =============================================
     SolRadioGroup + SolRadioOption
     ============================================= */

  .sol-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-2);
  }

  .sol-radio-group__label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-secondary);
  }

  .sol-radio-group__options {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-2);
  }

  .sol-radio-group--horizontal .sol-radio-group__options {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sol-space-4);
  }

  .sol-radio-group--disabled {
    opacity: 0.5;
  }

  .sol-radio-group__helper {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
  }

  .sol-radio-group__error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
  }

  .sol-radio-group--error .sol-radio-group__label {
    color: var(--sol-danger);
  }

  .sol-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-2);
    cursor: pointer;
    user-select: none;
    outline: none;
  }

  .sol-radio:focus-visible .sol-radio__control {
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-radio--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .sol-radio__control {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--sol-line);
    border-radius: 50%;
    background: var(--sol-bg-surface);
    transition: border-color var(--sol-transition-fast);
  }

  .sol-radio__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sol-accent);
    transform: scale(1);
    transition: transform var(--sol-transition-fast);
  }

  .sol-radio--selected .sol-radio__control {
    border-color: var(--sol-accent);
  }

  .sol-radio:not(.sol-radio--disabled):hover .sol-radio__control {
    border-color: var(--sol-accent);
  }

  .sol-radio__label {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-primary);
  }

  /* =============================================
     SolSignaturePad
     ============================================= */

  .sol-signature-pad {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: var(--sol-signature-pad-height, 180px);
    border: 1px dashed var(--sol-line);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-surface);
    color: var(--sol-text-primary);
    overflow: hidden;
  }

  /* The canvas owns every touch: without this the finger scrolls the page instead of signing. */
  .sol-signature-pad__canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
  }

  .sol-signature-pad--disabled .sol-signature-pad__canvas {
    cursor: not-allowed;
  }

  .sol-signature-pad--disabled {
    opacity: 0.6;
  }

  .sol-signature-pad__baseline {
    position: absolute;
    left: var(--sol-space-6);
    right: var(--sol-space-6);
    bottom: 28%;
    border-bottom: 1px solid var(--sol-line);
    pointer-events: none;
  }

  .sol-signature-pad__placeholder {
    position: absolute;
    left: var(--sol-space-6);
    bottom: calc(28% + var(--sol-space-2));
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-muted);
    pointer-events: none;
    user-select: none;
  }

  .sol-signature-pad__clear {
    position: absolute;
    top: var(--sol-space-2);
    right: var(--sol-space-2);
  }

  /* =============================================
     SolDatePicker
     ============================================= */

  .sol-datepicker {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1);
    position: relative;
    width: 100%;
  }

  .sol-datepicker__label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-secondary);
  }

  .sol-datepicker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--sol-control-h);
    padding: 0 var(--sol-space-3);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    cursor: pointer;
    transition: border-color var(--sol-transition-fast), box-shadow var(--sol-transition-fast);
    outline: none;
    box-sizing: border-box;
  }

  .sol-datepicker:not(.sol-datepicker--disabled, .sol-datepicker--open, .sol-datepicker--error) .sol-datepicker__trigger:hover {
    border-color: var(--sol-border-strong);
  }

  .sol-datepicker__trigger:focus-visible {
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-datepicker--open .sol-datepicker__trigger {
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-datepicker--error .sol-datepicker__trigger {
    border-color: var(--sol-danger);
  }

  .sol-datepicker--disabled .sol-datepicker__trigger {
    background: var(--sol-bg-muted);
    cursor: not-allowed;
    color: var(--sol-text-muted);
  }

  .sol-datepicker__display {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-primary);
  }

  .sol-datepicker__placeholder {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-muted);
  }

  .sol-datepicker__actions {
    display: flex;
    align-items: center;
    gap: var(--sol-space-1);
    margin-inline-start: auto;
  }

  .sol-datepicker__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sol-text-muted);
    cursor: pointer;
    border-radius: var(--sol-radius-sm);
    transition: color var(--sol-transition-fast), background var(--sol-transition-fast);
  }

  .sol-datepicker__clear:hover {
    color: var(--sol-text-primary);
    background: var(--sol-bg-muted);
  }

  .sol-datepicker__clear svg {
    width: 14px;
    height: 14px;
  }

  .sol-datepicker__icon {
    display: flex;
    align-items: center;
    color: var(--sol-text-muted);
  }

  .sol-datepicker__icon svg {
    width: 18px;
    height: 18px;
  }

  .sol-datepicker__helper {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
  }

  .sol-datepicker__error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
  }

  /* Click-outside overlay */
  .sol-datepicker__overlay {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 100vw;
    height: 100vh;
    z-index: 49;
    background: transparent;
    cursor: default;
  }

  /* Calendar dropdown */

  .sol-datepicker__dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 50;
    margin-top: var(--sol-space-1);
    padding: var(--sol-space-3);
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-elev-overlay);
    min-width: 280px;
  }

  /* Calendar (month grid; shared by the date picker and the range picker) */

  .sol-calendar {
    display: block;
  }

  .sol-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sol-space-3);
  }

  .sol-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sol-text-secondary);
    cursor: pointer;
    border-radius: var(--sol-radius-sm);
    transition: background var(--sol-transition-fast), color var(--sol-transition-fast);
  }

  .sol-calendar__nav:hover {
    background: var(--sol-bg-muted);
    color: var(--sol-text-primary);
  }

  .sol-calendar__nav:focus-visible {
    outline: none;
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-calendar__nav svg {
    width: 14px;
    height: 14px;
  }

  .sol-calendar__title {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-semibold);
    color: var(--sol-text-primary);
  }

  .sol-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: var(--sol-space-1);
  }

  .sol-calendar__weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-size: var(--sol-font-size-xs);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-muted);
    text-transform: uppercase;
  }

  .sol-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
  }

  .sol-calendar__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 1px auto;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sol-text-primary);
    font-size: var(--sol-font-size-sm);
    cursor: pointer;
    border-radius: var(--sol-radius-control);
    transition: background var(--sol-transition-fast), color var(--sol-transition-fast);
  }

  .sol-calendar__day:hover:not(:disabled) {
    background: var(--sol-bg-muted);
  }

  .sol-calendar__day:focus-visible {
    outline: none;
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-calendar__day--today {
    font-weight: var(--sol-font-weight-semibold);
    color: var(--sol-accent);
  }

  .sol-calendar__day--in-range {
    background: var(--sol-accent-muted);
    border-radius: 0;
  }

  .sol-calendar__day--range-start,
  .sol-calendar__day--range-end,
  .sol-calendar__day--selected {
    background: var(--sol-accent) !important;
    color: var(--sol-on-accent) !important;
    font-weight: var(--sol-font-weight-medium);
  }

  .sol-calendar__day--outside {
    color: var(--sol-text-muted);
    opacity: 0.4;
  }

  .sol-calendar__day--disabled {
    color: var(--sol-text-muted);
    opacity: 0.3;
    cursor: not-allowed;
  }

  /* =============================================
     Pickers — SolTimePicker, SolDateTimePicker, SolDateRangePicker
     Same field anatomy as the date picker; the panels differ.
     ============================================= */

  .sol-time-picker,
  .sol-datetime-picker,
  .sol-date-range-picker {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1);
    position: relative;
    width: 100%;
  }

  .sol-time-picker__label,
  .sol-datetime-picker__label,
  .sol-date-range-picker__label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-secondary);
  }

  /* Field / trigger */

  .sol-time-picker__field,
  .sol-datetime-picker__trigger,
  .sol-date-range-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--sol-control-h);
    padding: 0 var(--sol-space-3);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    transition: border-color var(--sol-transition-fast), box-shadow var(--sol-transition-fast);
    outline: none;
    box-sizing: border-box;
  }

  .sol-datetime-picker__trigger,
  .sol-date-range-picker__trigger {
    cursor: pointer;
  }

  .sol-time-picker:not(.sol-time-picker--disabled, .sol-time-picker--open, .sol-time-picker--error) .sol-time-picker__field:hover,
  .sol-datetime-picker:not(.sol-datetime-picker--disabled, .sol-datetime-picker--open, .sol-datetime-picker--error) .sol-datetime-picker__trigger:hover,
  .sol-date-range-picker:not(.sol-date-range-picker--disabled, .sol-date-range-picker--open, .sol-date-range-picker--error) .sol-date-range-picker__trigger:hover {
    border-color: var(--sol-border-strong);
  }

  .sol-time-picker__field:focus-within,
  .sol-time-picker--open .sol-time-picker__field,
  .sol-datetime-picker__trigger:focus-visible,
  .sol-datetime-picker--open .sol-datetime-picker__trigger,
  .sol-date-range-picker__trigger:focus-visible,
  .sol-date-range-picker--open .sol-date-range-picker__trigger {
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-time-picker--error .sol-time-picker__field,
  .sol-datetime-picker--error .sol-datetime-picker__trigger,
  .sol-date-range-picker--error .sol-date-range-picker__trigger {
    border-color: var(--sol-danger);
  }

  .sol-time-picker--disabled .sol-time-picker__field,
  .sol-datetime-picker--disabled .sol-datetime-picker__trigger,
  .sol-date-range-picker--disabled .sol-date-range-picker__trigger {
    background: var(--sol-bg-muted);
    cursor: not-allowed;
    color: var(--sol-text-muted);
  }

  .sol-time-picker--readonly .sol-time-picker__field,
  .sol-datetime-picker--readonly .sol-datetime-picker__trigger,
  .sol-date-range-picker--readonly .sol-date-range-picker__trigger {
    cursor: default;
  }

  .sol-time-picker__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--sol-text-primary);
    font-family: inherit;
    font-size: max(var(--sol-font-size-sm), var(--sol-font-size-field-min, 0px));
    padding: 0;
  }

  .sol-time-picker__input::placeholder {
    color: var(--sol-text-muted);
  }

  .sol-time-picker__input:disabled {
    cursor: not-allowed;
    color: var(--sol-text-muted);
  }

  .sol-datetime-picker__display,
  .sol-date-range-picker__display {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sol-datetime-picker__placeholder,
  .sol-date-range-picker__placeholder {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-muted);
  }

  .sol-time-picker__actions,
  .sol-datetime-picker__actions,
  .sol-date-range-picker__actions {
    display: flex;
    align-items: center;
    gap: var(--sol-space-1);
    margin-inline-start: auto;
    flex-shrink: 0;
  }

  .sol-time-picker__clear,
  .sol-time-picker__toggle,
  .sol-datetime-picker__clear,
  .sol-date-range-picker__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sol-text-muted);
    cursor: pointer;
    border-radius: var(--sol-radius-sm);
    transition: color var(--sol-transition-fast), background var(--sol-transition-fast);
  }

  .sol-time-picker__clear:hover,
  .sol-time-picker__toggle:hover:not(:disabled),
  .sol-datetime-picker__clear:hover,
  .sol-date-range-picker__clear:hover {
    color: var(--sol-text-primary);
    background: var(--sol-bg-muted);
  }

  .sol-time-picker__toggle:disabled {
    cursor: not-allowed;
  }

  .sol-time-picker__clear svg,
  .sol-datetime-picker__clear svg,
  .sol-date-range-picker__clear svg {
    width: 14px;
    height: 14px;
  }

  .sol-time-picker__toggle svg,
  .sol-datetime-picker__icon svg,
  .sol-date-range-picker__icon svg {
    width: 18px;
    height: 18px;
  }

  .sol-datetime-picker__icon,
  .sol-date-range-picker__icon {
    display: flex;
    align-items: center;
    color: var(--sol-text-muted);
  }

  .sol-time-picker__helper,
  .sol-datetime-picker__helper,
  .sol-date-range-picker__helper {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
  }

  .sol-time-picker__error,
  .sol-datetime-picker__error,
  .sol-date-range-picker__error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
  }

  /* Click-outside overlay + floating panels (final position set by floating.js) */

  .sol-time-picker__overlay,
  .sol-datetime-picker__overlay,
  .sol-date-range-picker__overlay {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 100vw;
    height: 100vh;
    z-index: 49;
    background: transparent;
    cursor: default;
  }

  .sol-time-picker__panel,
  .sol-datetime-picker__panel,
  .sol-date-range-picker__panel {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 50;
    margin-top: var(--sol-space-1);
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-elev-overlay);
  }

  .sol-time-picker__panel {
    padding: var(--sol-space-1) 0;
    min-width: 8rem;
  }

  .sol-datetime-picker__panel,
  .sol-date-range-picker__panel {
    padding: var(--sol-space-3);
  }

  /* Time list (shared by the time picker and the date-time picker) */

  .sol-time-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 15rem;
    overflow-y: auto;
    outline: none;
  }

  .sol-time-list:focus-visible {
    box-shadow: inset 0 0 0 2px var(--sol-accent);
    border-radius: var(--sol-radius-sm);
  }

  .sol-time-list__option {
    padding: var(--sol-space-1) var(--sol-space-3);
    cursor: pointer;
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background var(--sol-transition-fast);
  }

  .sol-time-list__option--highlighted {
    background: var(--sol-bg-muted);
  }

  .sol-time-list__option--selected {
    background: var(--sol-accent-muted);
    color: var(--sol-accent);
    font-weight: var(--sol-font-weight-medium);
  }

  /* Date-time panel: calendar + list side by side, footer with Now / Done */

  .sol-datetime-picker__body {
    display: flex;
    gap: var(--sol-space-3);
    align-items: stretch;
  }

  .sol-datetime-picker__time {
    display: flex;
    min-width: 7rem;
    border-inline-start: 1px solid var(--sol-line);
    padding-inline-start: var(--sol-space-2);
  }

  .sol-datetime-picker__time .sol-time-list {
    max-height: 17rem;
    flex: 1;
  }

  .sol-datetime-picker__footer {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2);
    margin-top: var(--sol-space-3);
    padding-top: var(--sol-space-2);
    border-top: 1px solid var(--sol-line);
  }

  .sol-datetime-picker__draft {
    flex: 1;
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-secondary);
    font-variant-numeric: tabular-nums;
  }

  .sol-datetime-picker__action,
  .sol-date-range-picker__preset {
    height: calc(var(--sol-control-h) - var(--sol-space-2));
    padding: 0 var(--sol-space-3);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-action);
    background: transparent;
    color: var(--sol-text-primary);
    font-family: inherit;
    font-size: var(--sol-font-size-sm);
    cursor: pointer;
    transition: background var(--sol-transition-fast), border-color var(--sol-transition-fast);
  }

  .sol-datetime-picker__action:hover:not(:disabled),
  .sol-date-range-picker__preset:hover {
    background: var(--sol-bg-muted);
    border-color: var(--sol-border-strong);
  }

  .sol-datetime-picker__action:focus-visible,
  .sol-date-range-picker__preset:focus-visible {
    outline: none;
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-datetime-picker__action--primary {
    background: var(--sol-accent);
    border-color: var(--sol-accent);
    color: var(--sol-on-accent);
  }

  .sol-datetime-picker__action--primary:hover:not(:disabled) {
    background: var(--sol-accent-hover);
    border-color: var(--sol-accent-hover);
  }

  .sol-datetime-picker__action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Range panel: preset rail on the start side, calendars in a row */

  .sol-date-range-picker__panel {
    display: flex;
    gap: var(--sol-space-3);
  }

  .sol-date-range-picker__presets {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1);
    min-width: 8rem;
    border-inline-end: 1px solid var(--sol-line);
    padding-inline-end: var(--sol-space-3);
  }

  .sol-date-range-picker__preset {
    text-align: start;
    border-color: transparent;
  }

  .sol-date-range-picker__calendars {
    display: flex;
    gap: var(--sol-space-4);
  }

  .sol-date-range-picker__calendars .sol-calendar {
    min-width: 248px;
  }

  /* Two months stop fitting at 768px: one month shows, and its arrows page through the
     range. Only while Months is unset — an explicit count wins at every width. */
  @media (max-width: 768px) {
    .sol-date-range-picker__calendars--adaptive .sol-calendar:not(:first-child) {
      display: none;
    }
  }

  /* The time list goes under the calendar, and the preset rail above it, where they stop
     fitting beside it. contain keeps the rail's row from widening the panel. */
  @media (max-width: 480px) {
    .sol-datetime-picker__body,
    .sol-date-range-picker__panel {
      flex-direction: column;
    }

    .sol-datetime-picker__time {
      border-inline-start: none;
      padding-inline-start: 0;
      border-top: 1px solid var(--sol-line);
      padding-top: var(--sol-space-2);
    }

    .sol-datetime-picker__time .sol-time-list {
      max-height: 10rem;
    }

    .sol-date-range-picker__presets {
      flex-direction: row;
      flex-wrap: wrap;
      min-width: 0;
      contain: inline-size;
      border-inline-end: none;
      padding-inline-end: 0;
      border-bottom: 1px solid var(--sol-line);
      padding-bottom: var(--sol-space-3);
    }
  }

  /* =============================================
     SolDivider
     ============================================= */

  .sol-divider {
    display: flex;
    align-items: center;
    border: 0;
    border-top: 1px solid var(--sol-line);
    margin: var(--sol-space-4) 0;
  }

  .sol-divider--vertical {
    border-top: 0;
    border-inline-start: 1px solid var(--sol-line);
    margin: 0 var(--sol-space-4);
    min-height: 1em;
    align-self: stretch;
  }

  .sol-divider--labeled {
    border-top: 0;
    gap: var(--sol-space-3);
  }

  .sol-divider--labeled::before,
  .sol-divider--labeled::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--sol-line);
  }

  .sol-divider__label {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-tertiary);
    white-space: nowrap;
  }

  /* =============================================
     SolSpinner
     ============================================= */

  .sol-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sol-space-2);
    color: var(--sol-accent);
  }

  .sol-spinner__label {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-secondary);
  }

  .sol-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Circle */
  .sol-spinner--circle .sol-spinner__ring {
    box-sizing: border-box;
    border: 3px solid var(--sol-line);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: sol-spin 0.7s linear infinite;
  }
  .sol-spinner--sm .sol-spinner__ring { width: 16px; height: 16px; border-width: 2px; }
  .sol-spinner--md .sol-spinner__ring { width: 24px; height: 24px; }
  .sol-spinner--lg .sol-spinner__ring { width: 36px; height: 36px; border-width: 4px; }

  /* Dots */
  .sol-spinner--dots { gap: var(--sol-space-1); }
  .sol-spinner__dot {
    border-radius: 50%;
    background: currentColor;
    animation: sol-pulse 1.2s ease-in-out infinite;
  }
  .sol-spinner__dot:nth-child(2) { animation-delay: 0.2s; }
  .sol-spinner__dot:nth-child(3) { animation-delay: 0.4s; }
  .sol-spinner--sm .sol-spinner__dot { width: 6px; height: 6px; }
  .sol-spinner--md .sol-spinner__dot { width: 8px; height: 8px; }
  .sol-spinner--lg .sol-spinner__dot { width: 12px; height: 12px; }

  /* Bars */
  .sol-spinner--bars { gap: 2px; align-items: end; }
  .sol-spinner__bar {
    background: currentColor;
    border-radius: 1px;
    animation: sol-bars 1s ease-in-out infinite;
  }
  .sol-spinner__bar:nth-child(2) { animation-delay: 0.15s; }
  .sol-spinner__bar:nth-child(3) { animation-delay: 0.3s; }
  .sol-spinner__bar:nth-child(4) { animation-delay: 0.45s; }
  .sol-spinner--sm .sol-spinner__bar { width: 3px; height: 14px; }
  .sol-spinner--md .sol-spinner__bar { width: 4px; height: 20px; }
  .sol-spinner--lg .sol-spinner__bar { width: 5px; height: 28px; }

  @keyframes sol-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
  @keyframes sol-bars { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }

  /* =============================================
     SolOrb — the canvas draws in this element's `color`.
     ============================================= */

  .sol-orb {
    box-sizing: border-box;
    display: inline-block;
    flex: none;
    vertical-align: middle;
    line-height: 0;
    color: var(--sol-text-primary);
  }

  .sol-orb--accent {
    color: var(--sol-accent);
  }

  /* How the work ended: the orb's dots gather into the symbol in this color. */
  .sol-orb--success {
    color: var(--sol-success);
  }

  .sol-orb--error {
    color: var(--sol-danger);
  }

  /* The presets are tuned in CSS pixels: the box is exactly what the geometry was drawn for. */
  .sol-orb--sm { width: 20px; height: 20px; }
  .sol-orb--md { width: 64px; height: 64px; }
  .sol-orb--lg { width: 128px; height: 128px; }

  .sol-orb__canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* =============================================
     SolBusyOverlay
     ============================================= */

  .sol-busy-overlay--page {
    display: contents;
  }

  .sol-busy-overlay--container {
    position: relative;
    display: block;
  }

  .sol-busy-overlay__veil {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sol-space-4);
    animation: sol-busy-overlay-in 0.2s ease;
  }

  @keyframes sol-busy-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .sol-busy-overlay--page .sol-busy-overlay__veil {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: var(--sol-overlay);
    padding: calc(var(--sol-space-4) + var(--sol-safe-area-top)) calc(var(--sol-space-4) + var(--sol-safe-area-right))
      calc(var(--sol-space-4) + var(--sol-safe-area-bottom)) calc(var(--sol-space-4) + var(--sol-safe-area-left));
  }

  /* Over a container the content stays visible, dimmed: the user sees what is waiting. */
  .sol-busy-overlay--container .sol-busy-overlay__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--sol-bg-surface) 70%, transparent);
  }

  .sol-busy-overlay__panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sol-space-3);
    max-width: 320px;
    text-align: center;
    font-family: var(--sol-font-family);
    color: var(--sol-text-primary);
    outline: none;
  }

  .sol-busy-overlay--page .sol-busy-overlay__panel {
    min-width: 200px;
    padding: var(--sol-space-6);
    background: var(--sol-bg-elevated);
    border-radius: var(--sol-radius-card);
    box-shadow: var(--sol-elev-overlay);
  }

  /* Lumen skin: an ambient glow behind the wait. */
  [data-sol-skin="lumen"] .sol-busy-overlay--page .sol-busy-overlay__panel {
    background-image:
      radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--sol-fx-tint) calc(var(--sol-fx-glow) * 30%), transparent), transparent 60%),
      radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--sol-fx-tint) calc(var(--sol-fx-glow) * 20%), transparent), transparent 55%);
  }

  .sol-busy-overlay__message {
    margin: 0;
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-secondary);
  }

  .sol-busy-overlay__message--success,
  .sol-busy-overlay__message--error {
    font-weight: var(--sol-font-weight-semibold, 600);
  }

  .sol-busy-overlay__message--success { color: var(--sol-success); }
  .sol-busy-overlay__message--error { color: var(--sol-danger); }

  /* Hold to confirm: light fills the button while it is held; letting go drains it (--sol-hold, 0–1). */
  .sol-btn--hold {
    --sol-hold: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }

  .sol-btn__hold-fill {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: color-mix(in srgb, currentColor 22%, transparent);
    clip-path: inset(0 calc((1 - var(--sol-hold)) * 100%) 0 0);
  }

  .sol-btn__hold-fill:dir(rtl) {
    clip-path: inset(0 0 0 calc((1 - var(--sol-hold)) * 100%));
  }

  .sol-btn__hold-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: calc(var(--sol-hold) * 100% - 2px);
    width: 2px;
    z-index: -1;
    pointer-events: none;
    background: currentColor;
    opacity: min(1, calc(var(--sol-hold) * 20));
    box-shadow: 0 0 10px 2px color-mix(in srgb, currentColor calc(var(--sol-fx-glow) * 100%), transparent);
  }

  .sol-btn--held .sol-btn__hold-fill {
    background: color-mix(in srgb, currentColor 32%, transparent);
  }

  /* =============================================
     Light — the edge of a control lit while the system works on it,
     waits for input, or has just finished (SolEdgeLight)
     ============================================= */

  /* The host of a light: positions it. Its own overflow clipping keeps the light inside the border. */
  .sol-lit {
    position: relative;
  }

  .sol-edge-light {
    --sol-edge-light-color: var(--sol-accent);
    position: absolute;
    inset: 0;
    z-index: 1;
    box-sizing: border-box;
    border-radius: inherit;
    pointer-events: none;
  }

  .sol-edge-light--succeeded { --sol-edge-light-color: var(--sol-success); }
  .sol-edge-light--failed { --sol-edge-light-color: var(--sol-danger); }

  /* ::after is the lit edge; ::before the bloom, inward: light bleeding into the surface. */
  .sol-edge-light::before,
  .sol-edge-light::after {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: inherit;
    background: var(--sol-edge-light-color);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .sol-edge-light::after {
    padding: var(--sol-fx-edge);
  }

  .sol-edge-light::before {
    padding: 4px;
    filter: blur(3px);
    opacity: var(--sol-fx-glow);
  }

  /* A whole edge lit at once blooms as a soft inner shadow: a masked band would read as a frame. */
  .sol-edge-light--listening::before,
  .sol-edge-light--succeeded::before,
  .sol-edge-light--failed::before {
    padding: 0;
    filter: none;
    opacity: 1;
    background: none;
    -webkit-mask: none;
    mask: none;
    box-shadow: inset 0 0 12px color-mix(in srgb, var(--sol-edge-light-color) calc(var(--sol-fx-glow) * 100%), transparent);
  }

  /* Working: a light travels round the edge. */
  .sol-edge-light--working::before,
  .sol-edge-light--working::after {
    background: conic-gradient(from var(--sol-fx-angle),
      transparent 0turn 0.6turn,
      color-mix(in srgb, var(--sol-edge-light-color) 0%, transparent) 0.62turn,
      var(--sol-edge-light-color) 0.9turn,
      color-mix(in srgb, var(--sol-edge-light-color) 0%, transparent) 0.94turn,
      transparent 1turn);
    animation: sol-edge-light-trace var(--sol-fx-trace-duration) linear infinite;
  }

  /* Listening: the edge breathes. Done: it flashes once and goes out. */
  .sol-edge-light--listening {
    animation: sol-edge-light-breathe var(--sol-fx-breathe-duration) ease-in-out infinite;
  }

  .sol-edge-light--succeeded,
  .sol-edge-light--failed {
    animation: sol-edge-light-flash 0.9s ease-out forwards;
  }

  @keyframes sol-edge-light-trace { to { --sol-fx-angle: 1turn; } }
  @keyframes sol-edge-light-breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
  @keyframes sol-edge-light-flash { from { opacity: 1; } to { opacity: 0; } }

  /* Light on opposite corners: what is active, without painting the whole surface. */
  .sol-corner-light {
    --sol-corner-light-color: var(--sol-accent);
    position: absolute;
    inset: 0;
    z-index: 1;
    box-sizing: border-box;
    pointer-events: none;
  }

  .sol-corner-light::before,
  .sol-corner-light::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border: 0 solid var(--sol-corner-light-color);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sol-corner-light-color) calc(var(--sol-fx-glow) * 100%), transparent));
    animation: sol-corner-light-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  }

  .sol-corner-light::before {
    inset-block-start: 0;
    inset-inline-start: 0;
    border-block-start-width: 2px;
    border-inline-start-width: 2px;
    border-start-start-radius: var(--sol-corner-light-radius, var(--sol-radius-card));
  }

  .sol-corner-light::after {
    inset-block-end: 0;
    inset-inline-end: 0;
    border-block-end-width: 2px;
    border-inline-end-width: 2px;
    border-end-end-radius: var(--sol-corner-light-radius, var(--sol-radius-card));
  }

  @keyframes sol-corner-light-in { from { opacity: 0; transform: scale(0.7); } }

  /* =============================================
     SolScanFrame — four lit corners where input is expected
     ============================================= */

  .sol-scan-frame {
    position: relative;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    min-height: 140px;
    padding: var(--sol-space-6);
    border-radius: var(--sol-radius-card);
    background: var(--sol-bg-sunken);
    color: var(--sol-text-tertiary);
    font-size: var(--sol-font-size-sm);
    text-align: center;
  }

  .sol-scan-frame__corner {
    position: absolute;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border: 0 solid var(--sol-accent);
    opacity: 0.4;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sol-accent) calc(var(--sol-fx-glow) * 100%), transparent));
  }

  .sol-scan-frame--active .sol-scan-frame__corner {
    opacity: 1;
    animation: sol-scan-frame-breathe var(--sol-fx-breathe-duration) ease-in-out infinite;
  }

  .sol-scan-frame__corner--start-start { inset-block-start: 14px; inset-inline-start: 14px; border-block-start-width: 2px; border-inline-start-width: 2px; border-start-start-radius: 6px; }
  .sol-scan-frame__corner--start-end { inset-block-start: 14px; inset-inline-end: 14px; border-block-start-width: 2px; border-inline-end-width: 2px; border-start-end-radius: 6px; }
  .sol-scan-frame__corner--end-start { inset-block-end: 14px; inset-inline-start: 14px; border-block-end-width: 2px; border-inline-start-width: 2px; border-end-start-radius: 6px; }
  .sol-scan-frame__corner--end-end { inset-block-end: 14px; inset-inline-end: 14px; border-block-end-width: 2px; border-inline-end-width: 2px; border-end-end-radius: 6px; }

  @keyframes sol-scan-frame-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

  .sol-scan-frame__content {
    position: relative;
    max-width: 100%;
    min-width: 0;
  }

  /* =============================================
     SolSkeleton
     ============================================= */

  .sol-skeleton--text {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-2);
  }

  .sol-skeleton__line {
    height: 14px;
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
  }

  .sol-skeleton--circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sol-bg-sunken);
  }

  .sol-skeleton--rect {
    width: 100%;
    height: 80px;
    border-radius: var(--sol-radius-card);
    background: var(--sol-bg-sunken);
  }

  .sol-skeleton--animated .sol-skeleton__line,
  .sol-skeleton--animated.sol-skeleton--circle,
  .sol-skeleton--animated.sol-skeleton--rect {
    background: linear-gradient(90deg, var(--sol-bg-sunken) 25%, var(--sol-line) 50%, var(--sol-bg-sunken) 75%);
    background-size: 200% 100%;
    animation: sol-skeleton-wave 1.5s ease-in-out infinite;
  }

  @keyframes sol-skeleton-wave { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  /* =============================================
     SolConfirm (host of ISolConfirmService)
     ============================================= */

  .sol-confirm__body {
    display: flex;
    align-items: flex-start;
    gap: var(--sol-space-3);
  }

  .sol-confirm__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sol-bg-muted);
    color: var(--sol-text-secondary);
  }

  .sol-confirm__icon svg {
    width: 20px;
    height: 20px;
  }

  .sol-confirm__message {
    margin: 0;
    line-height: 1.5;
    color: var(--sol-text-primary);
    flex: 1;
    min-width: 0;
  }

  /* Variant accents on the icon bubble */
  .sol-confirm--danger .sol-confirm__icon {
    background: var(--sol-danger-muted);
    color: var(--sol-danger);
  }
  .sol-confirm--warning .sol-confirm__icon {
    background: var(--sol-warning-muted);
    color: var(--sol-warning);
  }

  /* =============================================
     SolEmptyState
     ============================================= */

  .sol-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sol-space-6) var(--sol-space-4);
    color: var(--sol-text-secondary);
    gap: var(--sol-space-2);
  }

  .sol-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--sol-text-muted);
    margin-bottom: var(--sol-space-1);
  }

  .sol-empty-state__icon svg {
    width: 100%;
    height: 100%;
  }

  .sol-empty-state__title {
    margin: 0;
    font-size: var(--sol-font-size-md);
    font-weight: var(--sol-font-weight-semibold);
    color: var(--sol-text-primary);
  }

  .sol-empty-state__message {
    margin: 0;
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-secondary);
    max-width: 360px;
  }

  .sol-empty-state__action {
    margin-top: var(--sol-space-2);
  }

  /* =============================================
     SolAvatar
     ============================================= */

  .sol-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--sol-bg-muted);
    color: var(--sol-text-secondary);
  }

  .sol-avatar--circle { border-radius: 50%; }
  .sol-avatar--square { border-radius: var(--sol-radius-control); }
  /* Material avatars are always circles per its identity rules. */
  [data-sol-skin="material"] .sol-avatar--square { border-radius: 50%; }
  .sol-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
  .sol-avatar--md { width: 36px; height: 36px; font-size: 13px; }
  .sol-avatar--lg { width: 48px; height: 48px; font-size: 16px; }

  .sol-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sol-avatar__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: var(--sol-font-weight-semibold);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .sol-avatar__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .sol-avatar__fallback svg {
    width: 60%;
    height: 60%;
    color: var(--sol-text-tertiary);
  }

  /* =============================================
     SolAlert
     ============================================= */

  .sol-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sol-space-3);
    padding: var(--sol-space-3) var(--sol-space-4);
    border-radius: var(--sol-radius-menu);
    border-inline-start: 4px solid;
    transition: opacity var(--sol-transition-normal), max-height var(--sol-transition-normal);
    overflow: hidden;
  }

  /* Warm/Material banners are borderless tints; the stripe is Standard's tell. */
  [data-sol-skin="warm"] .sol-alert,
  [data-sol-skin="material"] .sol-alert {
    border-inline-start-color: transparent !important;
  }

  .sol-alert--hidden {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .sol-alert--info { background: color-mix(in srgb, var(--sol-info) 10%, transparent); border-inline-start-color: var(--sol-info); }
  .sol-alert--success { background: color-mix(in srgb, var(--sol-success) 10%, transparent); border-inline-start-color: var(--sol-success); }
  .sol-alert--warning { background: color-mix(in srgb, var(--sol-warning) 10%, transparent); border-inline-start-color: var(--sol-warning); }
  .sol-alert--danger { background: color-mix(in srgb, var(--sol-danger) 10%, transparent); border-inline-start-color: var(--sol-danger); }

  .sol-alert--info .sol-alert__icon { color: var(--sol-info); }
  .sol-alert--success .sol-alert__icon { color: var(--sol-success); }
  .sol-alert--warning .sol-alert__icon { color: var(--sol-warning); }
  .sol-alert--danger .sol-alert__icon { color: var(--sol-danger); }

  .sol-alert__icon { flex-shrink: 0; margin-top: 1px; }
  .sol-alert__icon svg { width: 18px; height: 18px; }

  .sol-alert__content { flex: 1; min-width: 0; }

  .sol-alert__title {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-semibold);
    color: var(--sol-text-primary);
    margin-bottom: var(--sol-space-1);
  }

  .sol-alert__body {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-secondary);
    line-height: 1.5;
  }

  .sol-alert__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sol-text-tertiary);
    cursor: pointer;
    border-radius: var(--sol-radius-action);
    transition: color var(--sol-transition-fast), background var(--sol-transition-fast);
  }
  .sol-alert__close:hover { color: var(--sol-text-primary); background: var(--sol-bg-muted); }
  .sol-alert__close svg { width: 14px; height: 14px; }

  /* =============================================
     SolChip
     ============================================= */

  .sol-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-1);
    border-radius: var(--sol-radius-full);
    font-weight: var(--sol-font-weight-medium);
    white-space: nowrap;
    border: 1px solid transparent;
    box-sizing: border-box;
    text-decoration: none;
    transition: background var(--sol-transition-fast), border-color var(--sol-transition-fast);
  }

  /* Heights track the skin's control height. */
  .sol-chip--sm { font-size: var(--sol-font-size-xs); padding: 0 8px; height: calc(var(--sol-control-h) - 10px); }
  .sol-chip--md { font-size: var(--sol-font-size-xs); padding: 0 10px; height: calc(var(--sol-control-h) - 4px); }
  .sol-chip--lg { font-size: var(--sol-font-size-sm); padding: 0 12px; height: var(--sol-control-h); }

  .sol-chip--default { background: var(--sol-bg-sunken); color: var(--sol-text-primary); border-color: var(--sol-border); }
  .sol-chip--success { background: color-mix(in srgb, var(--sol-success) 12%, transparent); color: var(--sol-success); }
  .sol-chip--warning { background: color-mix(in srgb, var(--sol-warning) 12%, transparent); color: var(--sol-warning); }
  .sol-chip--danger { background: color-mix(in srgb, var(--sol-danger) 12%, transparent); color: var(--sol-danger); }
  .sol-chip--info { background: color-mix(in srgb, var(--sol-info) 12%, transparent); color: var(--sol-info); }
  .sol-chip--neutral { background: var(--sol-bg-muted); color: var(--sol-text-muted); }

  .sol-chip--clickable { cursor: pointer; }
  .sol-chip--clickable:hover { filter: brightness(0.95); }
  .sol-chip--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

  .sol-chip__icon { display: flex; align-items: center; font-size: 0.9em; }
  .sol-chip__icon > svg { width: 1em; height: 1em; }

  .sol-chip__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.6;
    transition: opacity var(--sol-transition-fast);
    margin-inline-start: 2px;
  }
  .sol-chip__close:hover { opacity: 1; }
  .sol-chip__close svg { width: 10px; height: 10px; }

  /* =============================================
     SolProgress
     ============================================= */

  .sol-progress--bar {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2);
    width: 100%;
  }

  .sol-progress__track {
    flex: 1;
    background: var(--sol-bg-sunken);
    border-radius: var(--sol-radius-full);
    overflow: hidden;
  }

  .sol-progress--sm .sol-progress__track { height: 4px; }
  .sol-progress--md .sol-progress__track { height: 8px; }
  .sol-progress--lg .sol-progress__track { height: 12px; }

  .sol-progress__fill {
    height: 100%;
    background: var(--sol-accent);
    border-radius: var(--sol-radius-full);
    transition: width var(--sol-transition-normal);
  }

  .sol-progress--striped .sol-progress__fill {
    background-image: linear-gradient(
      45deg,
      rgba(255,255,255,0.15) 25%, transparent 25%,
      transparent 50%, rgba(255,255,255,0.15) 50%,
      rgba(255,255,255,0.15) 75%, transparent 75%,
      transparent
    );
    background-size: 16px 16px;
    animation: sol-progress-stripe 0.6s linear infinite;
  }

  .sol-progress--indeterminate.sol-progress--bar .sol-progress__fill {
    width: 40% !important;
    animation: sol-progress-indeterminate 1.5s ease-in-out infinite;
  }

  .sol-progress--bar .sol-progress__label {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-secondary);
    white-space: nowrap;
    min-width: 32px;
    text-align: end;
  }

  /* Circular */
  .sol-progress--circular {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .sol-progress__track-circle { stroke: var(--sol-bg-sunken); }
  .sol-progress__fill-circle {
    stroke: var(--sol-accent);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--sol-transition-normal);
  }

  .sol-progress--indeterminate.sol-progress--circular .sol-progress__fill-circle {
    stroke-dashoffset: 0 !important;
    animation: sol-spin 1.2s linear infinite;
    transform-origin: center;
  }

  .sol-progress--circular .sol-progress__label {
    position: absolute;
    font-size: var(--sol-font-size-xs);
    font-weight: var(--sol-font-weight-semibold);
    color: var(--sol-text-primary);
  }

  @keyframes sol-progress-stripe { 0% { background-position: 16px 0; } 100% { background-position: 0 0; } }
  @keyframes sol-progress-indeterminate { 0% { margin-inline-start: 0; margin-inline-end: 60%; } 50% { margin-inline-start: 30%; margin-inline-end: 30%; } 100% { margin-inline-start: 60%; margin-inline-end: 0; } }

  /* =============================================
     SolTooltip
     ============================================= */

  .sol-tooltip {
    position: relative;
    display: inline-flex;
  }

  /* Inverse-surface bubble: swapped text/bg pair stays legible in BOTH themes. */
  .sol-tooltip__content {
    position: absolute;
    z-index: var(--sol-z-dropdown);
    padding: var(--sol-space-1) var(--sol-space-2);
    font-size: var(--sol-font-size-xs);
    color: var(--sol-bg-base);
    background: var(--sol-text-primary);
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-shadow-md);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sol-transition-fast) var(--sol-tooltip-delay, 200ms),
                visibility var(--sol-transition-fast) var(--sol-tooltip-delay, 200ms);
  }

  .sol-tooltip:hover .sol-tooltip__content,
  .sol-tooltip:focus-within .sol-tooltip__content {
    opacity: 1;
    visibility: visible;
  }

  /* Escape hides it without moving focus; leaving the trigger re-arms it. */
  .sol-tooltip[data-sol-dismissed] .sol-tooltip__content {
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  .sol-tooltip__content::after {
    content: "";
    position: absolute;
    border: 5px solid transparent;
  }

  /* Top */
  .sol-tooltip--top .sol-tooltip__content {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
  }
  .sol-tooltip--top .sol-tooltip__content::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--sol-text-primary);
  }

  /* Bottom */
  .sol-tooltip--bottom .sol-tooltip__content {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
  }
  .sol-tooltip--bottom .sol-tooltip__content::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--sol-text-primary);
  }

  /* Left */
  .sol-tooltip--left .sol-tooltip__content {
    inset-inline-end: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
  }
  .sol-tooltip--left .sol-tooltip__content::after {
    inset-inline-start: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-inline-start-color: var(--sol-text-primary);
  }

  /* Right */
  .sol-tooltip--right .sol-tooltip__content {
    inset-inline-start: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
  }
  .sol-tooltip--right .sol-tooltip__content::after {
    inset-inline-end: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-inline-end-color: var(--sol-text-primary);
  }

  /* =============================================
     SolBreadcrumb
     ============================================= */

  .sol-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: var(--sol-space-1);
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
  }

  .sol-breadcrumb__item {
    display: inline-flex;
    align-items: center;
  }

  .sol-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-1);
    font-size: var(--sol-font-size-sm);
    color: var(--sol-accent);
    text-decoration: none;
    transition: color var(--sol-transition-fast);
  }
  .sol-breadcrumb__link:hover { text-decoration: underline; }

  .sol-breadcrumb__text {
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-1);
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-primary);
  }

  .sol-breadcrumb__item--current .sol-breadcrumb__text {
    font-weight: var(--sol-font-weight-medium);
  }

  .sol-breadcrumb__separator {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
    margin: 0 var(--sol-space-1);
  }

  .sol-breadcrumb__ellipsis {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-muted);
    letter-spacing: 2px;
  }

  .sol-breadcrumb__icon {
    font-size: 0.9em;
  }
  .sol-breadcrumb__icon > svg { width: 1em; height: 1em; }

  /* =============================================
     SolDropdown
     ============================================= */

  .sol-dropdown {
    position: relative;
    display: inline-flex;
  }

  .sol-dropdown__trigger {
    cursor: pointer;
    outline: none;
  }

  .sol-dropdown__trigger:focus-visible {
    border-radius: var(--sol-radius-control);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-dropdown--disabled .sol-dropdown__trigger {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .sol-dropdown__menu {
    position: absolute;
    z-index: var(--sol-z-dropdown);
    min-width: 180px;
    padding: var(--sol-space-1) 0;
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-elev-overlay);
  }

  .sol-dropdown--bottom-left .sol-dropdown__menu { top: 100%; inset-inline-start: 0; margin-top: var(--sol-space-1); }
  .sol-dropdown--bottom-right .sol-dropdown__menu { top: 100%; inset-inline-end: 0; margin-top: var(--sol-space-1); }
  .sol-dropdown--top-left .sol-dropdown__menu { bottom: 100%; inset-inline-start: 0; margin-bottom: var(--sol-space-1); }
  .sol-dropdown--top-right .sol-dropdown__menu { bottom: 100%; inset-inline-end: 0; margin-bottom: var(--sol-space-1); }

  .sol-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2);
    width: 100%;
    padding: var(--sol-space-2) var(--sol-space-3);
    border: none;
    background: transparent;
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-primary);
    cursor: pointer;
    text-align: start;
    transition: background var(--sol-transition-fast);
  }
  .sol-dropdown__item:hover { background: var(--sol-bg-muted); }
  .sol-dropdown__item:focus-visible {
    outline: 2px solid var(--sol-accent);
    outline-offset: -2px;
    background: var(--sol-bg-muted);
  }

  /* Composed SVG glyphs (e.g. SolIcons) size to the item text — without this,
     a viewBox-only inline SVG renders at the browser's 300x150 default. */
  .sol-dropdown__item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .sol-dropdown__item--danger { color: var(--sol-danger); }
  .sol-dropdown__item--danger:hover { background: color-mix(in srgb, var(--sol-danger) 8%, transparent); }

  .sol-dropdown__item--disabled {
    color: var(--sol-text-muted);
    cursor: not-allowed;
    opacity: 0.5;
  }
  .sol-dropdown__item--disabled:hover { background: transparent; }

  .sol-dropdown__icon {
    display: flex;
    align-items: center;
    font-size: 1em;
    color: var(--sol-text-muted);
  }
  .sol-dropdown__icon > svg { width: 1em; height: 1em; }
  .sol-dropdown__item--danger .sol-dropdown__icon { color: var(--sol-danger); }

  .sol-dropdown__divider {
    height: 1px;
    margin: var(--sol-space-1) 0;
    background: var(--sol-border);
  }

  /* ═══════════════════════════════════════════════════
     SolAutocomplete
     ═══════════════════════════════════════════════════ */

  .sol-autocomplete {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1);
    font-family: var(--sol-font-family);
    position: relative;
  }

  .sol-autocomplete__label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-secondary);
  }

  .sol-autocomplete__input-container {
    display: flex;
    align-items: center;
    gap: var(--sol-space-1);
    min-height: var(--sol-control-h);
    box-sizing: border-box;
    padding: 0 var(--sol-space-3);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    transition: border-color var(--sol-transition-fast), box-shadow var(--sol-transition-fast);
    cursor: text;
  }
  .sol-autocomplete:not(.sol-autocomplete--disabled, .sol-autocomplete--open, .sol-autocomplete--error) .sol-autocomplete__input-container:hover {
    border-color: var(--sol-border-strong);
  }
  .sol-autocomplete--open .sol-autocomplete__input-container {
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }
  .sol-autocomplete--error .sol-autocomplete__input-container {
    border-color: var(--sol-danger);
  }
  .sol-autocomplete--error.sol-autocomplete--open .sol-autocomplete__input-container {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sol-danger) 25%, transparent);
  }
  .sol-autocomplete--disabled .sol-autocomplete__input-container {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--sol-bg-muted);
  }

  .sol-autocomplete__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: max(var(--sol-font-size-md), var(--sol-font-size-field-min, 0px));
    font-family: inherit;
    color: var(--sol-text-primary);
    min-width: 0;
  }
  .sol-autocomplete__input::placeholder {
    color: var(--sol-text-muted);
  }
  .sol-autocomplete--disabled .sol-autocomplete__input {
    cursor: not-allowed;
  }

  .sol-autocomplete__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--sol-text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--sol-radius-sm);
    transition: color var(--sol-transition-fast), background var(--sol-transition-fast);
    flex-shrink: 0;
  }
  .sol-autocomplete__clear:hover {
    color: var(--sol-text-primary);
    background: var(--sol-bg-muted);
  }

  .sol-autocomplete__loading-indicator {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .sol-autocomplete__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--sol-border);
    border-top-color: var(--sol-accent);
    border-radius: 50%;
    animation: sol-spin 0.6s linear infinite;
  }

  .sol-autocomplete__overlay {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 100vw;
    height: 100vh;
    z-index: calc(var(--sol-z-dropdown) - 1);
    background: transparent;
    cursor: default;
  }

  .sol-autocomplete__dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    margin-top: var(--sol-space-1);
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-menu);
    box-shadow: var(--sol-elev-overlay);
    z-index: var(--sol-z-dropdown);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sol-autocomplete__item {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2);
    padding: var(--sol-space-2) var(--sol-space-3);
    cursor: pointer;
    font-size: var(--sol-font-size-md);
    color: var(--sol-text-primary);
    transition: background var(--sol-transition-fast);
  }
  .sol-autocomplete__item:hover,
  .sol-autocomplete__item--highlighted {
    background: var(--sol-bg-muted);
  }

  .sol-autocomplete__item--add {
    font-style: italic;
    color: var(--sol-accent);
    gap: var(--sol-space-1);
  }
  .sol-autocomplete__item--add:hover,
  .sol-autocomplete__item--add.sol-autocomplete__item--highlighted {
    background: color-mix(in srgb, var(--sol-accent) 8%, transparent);
  }

  .sol-autocomplete__add-icon {
    flex-shrink: 0;
  }

  .sol-autocomplete__match {
    background: color-mix(in srgb, var(--sol-accent) 15%, transparent);
    color: var(--sol-accent);
    font-weight: var(--sol-font-weight-semibold);
    border-radius: 2px;
    padding: 0 1px;
  }

  .sol-autocomplete__no-data,
  .sol-autocomplete__loading-text {
    padding: var(--sol-space-3);
    text-align: center;
    color: var(--sol-text-muted);
    font-size: var(--sol-font-size-sm);
  }

  .sol-autocomplete__error {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-danger);
  }

  .sol-autocomplete__helper {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-muted);
  }

  /* --- SolFileManager --- */

  .sol-file-manager {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-3);
    font-family: var(--sol-font-family);
    font-size: var(--sol-font-size-base);
    color: var(--sol-text-primary);
    outline: none;
  }

  .sol-file-manager--disabled {
    opacity: 0.55;
    pointer-events: none;
  }

  .sol-file-manager__label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-primary);
    margin-bottom: var(--sol-space-1);
  }

  .sol-file-manager__drop-zone {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sol-space-2);
    min-height: 8rem;
    padding: var(--sol-space-6);
    border: 2px dashed var(--sol-border);
    border-radius: var(--sol-radius-card);
    background: var(--sol-bg-surface);
    cursor: pointer;
    transition: border-color var(--sol-transition-fast), background var(--sol-transition-fast);
  }

  .sol-file-manager__drop-zone:hover {
    border-color: var(--sol-accent);
    background: color-mix(in srgb, var(--sol-accent) 5%, var(--sol-bg-surface));
  }

  .sol-file-manager--drag-active .sol-file-manager__drop-zone {
    border-color: var(--sol-accent);
    border-style: solid;
    background: color-mix(in srgb, var(--sol-accent) 10%, var(--sol-bg-surface));
  }

  .sol-file-manager--error .sol-file-manager__drop-zone {
    border-color: var(--sol-danger);
  }

  .sol-file-manager__drop-zone-icon {
    color: var(--sol-text-muted);
    transition: color var(--sol-transition-fast);
  }

  .sol-file-manager__drop-zone:hover .sol-file-manager__drop-zone-icon,
  .sol-file-manager--drag-active .sol-file-manager__drop-zone-icon {
    color: var(--sol-accent);
  }

  .sol-file-manager__drop-zone-text {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-muted);
    text-align: center;
  }

  .sol-file-manager__drop-zone-hint {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
    opacity: 0.7;
  }

  .sol-file-manager__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .sol-file-manager__file-list {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-2);
  }

  .sol-file-manager__file-item {
    display: flex;
    align-items: center;
    gap: var(--sol-space-3);
    padding: var(--sol-space-2) var(--sol-space-3);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-surface);
    transition: border-color var(--sol-transition-fast);
  }

  .sol-file-manager__file-item--completed {
    border-color: color-mix(in srgb, var(--sol-success) 40%, var(--sol-border));
  }

  .sol-file-manager__file-item--failed {
    border-color: color-mix(in srgb, var(--sol-danger) 40%, var(--sol-border));
    background: color-mix(in srgb, var(--sol-danger) 3%, var(--sol-bg-surface));
  }

  .sol-file-manager__file-item--rejected {
    border-color: color-mix(in srgb, var(--sol-warning) 40%, var(--sol-border));
    background: color-mix(in srgb, var(--sol-warning) 3%, var(--sol-bg-surface));
    opacity: 0.75;
  }

  .sol-file-manager__file-preview {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--sol-radius-control);
    overflow: hidden;
    background: var(--sol-bg-muted);
  }

  .sol-file-manager__file-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-orientation: from-image;
  }

  .sol-file-manager__file-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sol-text-muted);
    background: var(--sol-bg-muted);
    border-radius: var(--sol-radius-control);
  }

  .sol-file-manager__file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .sol-file-manager__file-name {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sol-file-manager__file-size {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
  }

  .sol-file-manager__file-error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
  }

  .sol-file-manager__file-progress {
    flex: 0 0 5rem;
    height: 4px;
    background: var(--sol-bg-muted);
    border-radius: 2px;
    overflow: hidden;
  }

  .sol-file-manager__file-progress-fill {
    height: 100%;
    background: var(--sol-accent);
    border-radius: 2px;
    transition: width 0.15s ease;
  }

  .sol-file-manager__file-item--uploading .sol-file-manager__file-status svg {
    animation: sol-spin 1s linear infinite;
  }

  .sol-file-manager__file-status {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    line-height: 0;
  }

  .sol-file-manager__file-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: var(--sol-text-muted);
    cursor: pointer;
    border-radius: var(--sol-radius-sm);
    transition: color var(--sol-transition-fast), background var(--sol-transition-fast);
    padding: 0;
  }

  .sol-file-manager__file-remove:hover {
    color: var(--sol-danger);
    background: color-mix(in srgb, var(--sol-danger) 10%, transparent);
  }

  .sol-file-manager__error {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-danger);
  }

  .sol-file-manager__helper {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-muted);
  }

  /* --- SolChart --- */

  .sol-chart {
    /* relative: the sr-only data table is absolutely positioned — without this
       anchor it resolves to the initial containing block and inflates the
       document's scroll height (phantom page scroll below the app shell). */
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: var(--sol-font-family);
    color: var(--sol-text-primary);
    width: 100%;
    /* How far a non-hovered mark recedes when a legend entry is hovered. */
    --sol-chart-dim-opacity: 0.1;
  }

  .sol-chart__title {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-semibold, 600);
    color: var(--sol-text-primary);
    margin-bottom: var(--sol-space-2);
  }

  .sol-chart__svg {
    display: block;
    width: 100%;
    /* Fill the wrapper height MINUS in-flow siblings (title, legend); height:100%
       ignored them and pushed content past the fixed-height wrapper. */
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  /* Categorical palette: --sol-chart-1..8 live in the design-token contract
     (solsticio-tokens.css, theme-token group — slot 1 tracks the brand accent). */

  .sol-chart__grid {
    stroke: var(--sol-border, rgba(0, 0, 0, 0.08));
    stroke-width: 1;
  }

  .sol-chart__axis-label {
    fill: var(--sol-text-tertiary, var(--sol-text));
    font-family: var(--sol-font-family);
    font-size: 10px;
  }

  .sol-chart__line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .sol-chart__area {
    stroke: none;
    opacity: 0.15;
  }

  .sol-chart__marker {
    stroke: var(--sol-bg-surface);
    stroke-width: 1;
    cursor: pointer;
  }

  .sol-chart__bar {
    cursor: pointer;
  }

  .sol-chart__bar:hover,
  .sol-chart__slice:hover {
    opacity: 0.85;
  }

  /* Legend hover isolates a series: every other mark drops to a whisper so the hovered
     one reads alone. The dim level is a variable rather than a literal because how far
     "other" should recede depends on how dense the chart is. */
  .sol-chart__series,
  .sol-chart__slice {
    transition: opacity var(--sol-transition-fast);
  }

  .sol-chart__mark--dimmed {
    opacity: var(--sol-chart-dim-opacity);
  }

  .sol-chart__slice {
    stroke: var(--sol-bg-surface);
    stroke-width: 1;
    cursor: pointer;
  }

  /* --- Chart Phase 2: data labels, crosshair tooltip, enter animations --- */

  .sol-chart__data-label {
    fill: var(--sol-text-secondary, var(--sol-text));
    font-family: var(--sol-font-family);
    font-size: 10px;
    /* Halo so labels stay legible on top of marks and gridlines. */
    paint-order: stroke;
    stroke: var(--sol-bg-surface, #FFFFFF);
    stroke-width: 3px;
    pointer-events: none;
  }

  .sol-chart__data-label--inverse {
    fill: var(--sol-on-accent);
    stroke: rgba(0, 0, 0, 0.35);
  }

  @supports (color: color(from red xyz-d65 x y z)) {
    .sol-chart__data-label--inverse {
      fill: color(from var(--sol-chart-slice, var(--sol-accent)) xyz-d65 calc(0.9505 * clamp(0, (0.1791 - y) * 100000, 1)) clamp(0, (0.1791 - y) * 100000, 1) calc(1.089 * clamp(0, (0.1791 - y) * 100000, 1)));
      stroke: color(from var(--sol-chart-slice, var(--sol-accent)) xyz-d65 calc(0.9505 * clamp(0, (y - 0.1791) * 100000, 1)) clamp(0, (y - 0.1791) * 100000, 1) calc(1.089 * clamp(0, (y - 0.1791) * 100000, 1)) / 0.35);
    }
  }

  .sol-chart__crosshair {
    stroke: var(--sol-text-tertiary, var(--sol-text));
    stroke-width: 1;
    stroke-dasharray: 4 3;
    pointer-events: none;
  }

  .sol-chart__tooltip {
    pointer-events: none;
  }

  .sol-chart__tooltip-box {
    fill: var(--sol-bg-elevated, #FFFFFF);
    stroke: var(--sol-border, rgba(0, 0, 0, 0.1));
    stroke-width: 1;
  }

  .sol-chart__tooltip-text {
    fill: var(--sol-text-secondary, var(--sol-text));
    font-family: var(--sol-font-family);
    font-size: 11px;
  }

  .sol-chart__tooltip-text--header {
    fill: var(--sol-text-primary, var(--sol-text));
    font-weight: 600;
  }

  /* Enter animations: lines draw in (pathLength=1 normalizes any path), everything
     else fades. Guarded for prefers-reduced-motion in the block at the end of this file. */
  .sol-chart__line {
    stroke-dasharray: 1;
    animation: sol-chart-draw 0.6s ease-out forwards;
  }

  .sol-chart__area,
  .sol-chart__bar,
  .sol-chart__marker,
  .sol-chart__slice {
    animation: sol-chart-fade 0.45s ease-out;
  }

  @keyframes sol-chart-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }

  @keyframes sol-chart-fade {
    from { opacity: 0; }
  }

  .sol-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sol-space-3);
    margin-top: var(--sol-space-2);
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-secondary, var(--sol-text));
  }

  /* Each entry is a toggle button that reads as the text it was: a press isolates its series
     until pressed again (aria-pressed), from the keyboard as from the pointer. */
  .sol-chart__legend-item {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--sol-space-1, 4px);
    border-radius: var(--sol-radius-action);
    cursor: pointer;
  }

  .sol-chart__legend-item:focus-visible {
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-chart__legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }

  /* --- SolKpi --- */

  /* Lumen skin: a surface tinted by the brand, a lit top edge, and a light under the pointer (theme.js /
     the theme service write --sol-pointer-x/y on the card the pointer is over). */
  [data-sol-skin="lumen"] .sol-kpi {
    border-color: color-mix(in srgb, var(--sol-fx-tint) 16%, var(--sol-card-border));
    background-image:
      radial-gradient(240px circle at var(--sol-pointer-x, 50%) var(--sol-pointer-y, -60%), color-mix(in srgb, var(--sol-fx-tint) calc(var(--sol-fx-glow) * 15%), transparent), transparent 70%),
      linear-gradient(90deg, transparent 12%, color-mix(in srgb, var(--sol-fx-tint) calc(var(--sol-fx-glow) * 70%), transparent) 50%, transparent 88%),
      linear-gradient(180deg, color-mix(in srgb, var(--sol-fx-tint) calc(var(--sol-fx-glow) * 4%), transparent), transparent);
    background-size: auto, 100% 1px, auto;
    background-repeat: no-repeat;
  }

  .sol-kpi {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-2);
    padding: var(--sol-card-pad);
    background: var(--sol-bg-surface);
    border: 1px solid var(--sol-card-border);
    border-radius: var(--sol-radius-card);
    box-shadow: var(--sol-elev-card);
    font-family: var(--sol-font-family);
    color: var(--sol-text-primary);
    min-width: 180px;
  }

  .sol-kpi__header {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2);
  }

  .sol-kpi__icon {
    font-size: 1.25rem;
    line-height: 1;
  }
  .sol-kpi__icon > svg { width: 1em; height: 1em; }

  /* An interactive tile is an <a> or a <button>, so the element's own defaults have to be
     neutralized before all three read the same. */
  a.sol-kpi,
  button.sol-kpi {
    width: 100%;
    font: inherit;
    color: var(--sol-text-primary);
    text-align: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }

  .sol-kpi--clickable {
    cursor: pointer;
  }

  .sol-kpi--clickable:hover {
    border-color: var(--sol-accent);
    box-shadow: var(--sol-elev-overlay);
  }

  .sol-kpi--clickable:active {
    transform: scale(0.99);
  }

  .sol-kpi--clickable:focus-visible {
    outline: none;
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  /* The placeholder occupies the figure's own box, so nothing shifts when the value lands. */
  .sol-kpi__value--loading {
    display: flex;
    align-items: center;
    min-height: calc(1.75rem * 1.2);
  }

  .sol-kpi__subtitle {
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-secondary);
    margin-top: calc(var(--sol-space-2) * -1);
  }

  .sol-kpi__title {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .sol-kpi__value {
    font-size: 1.75rem;
    font-weight: var(--sol-font-weight-bold);
    line-height: 1.2;
    color: var(--sol-text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  .sol-kpi__value--animate {
    animation: sol-kpi-pop 0.4s ease-out;
  }

  @keyframes sol-kpi-pop {
    0% { opacity: 0.4; transform: translateY(4px); }
    50% { opacity: 1; transform: translateY(-2px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* Delta reads as a tinted tag: semantic color at low alpha behind full-strength text. */
  .sol-kpi__delta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--sol-space-1);
    font-family: var(--sol-font-family-mono);
    font-size: var(--sol-font-size-xs);
    font-weight: var(--sol-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    padding: 1px var(--sol-space-2);
    border-radius: var(--sol-radius-full);
  }

  .sol-kpi--trend-up .sol-kpi__delta {
    color: var(--sol-success);
    background: color-mix(in srgb, var(--sol-success) 14%, transparent);
  }

  .sol-kpi--trend-down .sol-kpi__delta {
    color: var(--sol-danger);
    background: color-mix(in srgb, var(--sol-danger) 14%, transparent);
  }

  .sol-kpi--trend-neutral .sol-kpi__delta {
    color: var(--sol-text-tertiary);
    background: var(--sol-bg-muted);
  }

  .sol-kpi__delta-arrow {
    flex-shrink: 0;
  }

  .sol-kpi__sparkline {
    width: 100%;
    height: 32px;
    margin-top: var(--sol-space-1);
  }

  .sol-kpi__sparkline-line {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sol-kpi--trend-up .sol-kpi__sparkline-line { stroke: var(--sol-success); }
  .sol-kpi--trend-down .sol-kpi__sparkline-line { stroke: var(--sol-danger); }
  .sol-kpi--trend-neutral .sol-kpi__sparkline-line { stroke: var(--sol-accent); }

  .sol-kpi__sparkline-area {
    opacity: 0.1;
  }

  .sol-kpi--trend-up .sol-kpi__sparkline-area { fill: var(--sol-success); }
  .sol-kpi--trend-down .sol-kpi__sparkline-area { fill: var(--sol-danger); }
  .sol-kpi--trend-neutral .sol-kpi__sparkline-area { fill: var(--sol-accent); }

  /* ============================================================
     SolSparkline — Standalone SVG sparkline
     ============================================================ */

  .sol-sparkline {
    width: 100%;
    height: 24px;
    display: block;
  }

  .sol-sparkline__line {
    fill: none;
    stroke: var(--sol-accent, #4F7FFF);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sol-sparkline__area {
    fill: var(--sol-accent, #4F7FFF);
    opacity: 0.1;
  }

  .sol-sparkline--success .sol-sparkline__line { stroke: var(--sol-success); }
  .sol-sparkline--success .sol-sparkline__area { fill: var(--sol-success); }

  .sol-sparkline--warning .sol-sparkline__line { stroke: var(--sol-warning); }
  .sol-sparkline--warning .sol-sparkline__area { fill: var(--sol-warning); }

  .sol-sparkline--danger .sol-sparkline__line { stroke: var(--sol-danger); }
  .sol-sparkline--danger .sol-sparkline__area { fill: var(--sol-danger); }

  /* --- Cell utility: compact sparkline for grid cells --- */
  .sol-sparkline--cell {
    height: 20px;
    min-width: 60px;
  }

  /* --- Cell utility: compact progress bar for grid cells --- */
  .sol-progress--cell {
    flex: 1;
    min-width: 50px;
  }
  .sol-progress--cell .sol-progress__track {
    height: 6px;
  }
}

/* Unlayered coexistence guard: host-app global resets (e.g. button { border-radius: 0 })
   sit outside @layer and would beat the layered suite rules. */
button.sol-btn,
a.sol-btn {
  border-radius: var(--sol-radius-action);
}
[data-sol-skin="warm"] .sol-btn--icon-only,
[data-sol-skin="material"] .sol-btn--icon-only {
  border-radius: 50%;
}

/* ─────────────────────────────────────────────
   Reduced motion — overlay enter/leave and KPI pop become instant.
   Loading indicators (spinner, skeleton, progress) stay animated by design;
   token-driven transitions are collapsed by the guard in solsticio-tokens.css.
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  @layer solsticio-components {
    .sol-toast--entering,
    .sol-toast--leaving,
    .sol-dialog-backdrop,
    .sol-dialog,
    .sol-busy-overlay__veil,
    .sol-kpi__value--animate,
    .sol-chart__line,
    .sol-chart__area,
    .sol-chart__bar,
    .sol-chart__marker,
    .sol-chart__slice {
      animation-duration: 0.01ms;
    }

    /* A decorative loop stops: collapsing an infinite animation's duration would flicker it. */
    .sol-badge--pulse {
      animation: none;
    }

    /* The light stays, the movement stops: a still lit edge. A flash still fades: it does not move. */
    .sol-edge-light--working::before,
    .sol-edge-light--working::after {
      animation: none;
      background: var(--sol-edge-light-color);
    }

    .sol-edge-light--listening {
      animation: none;
      opacity: 0.85;
    }

    .sol-corner-light::before,
    .sol-corner-light::after,
    .sol-scan-frame--active .sol-scan-frame__corner {
      animation: none;
    }

    /* Press feedback is an instant transform rather than an animation, so the duration
       collapse above does not reach it. */
    .sol-card--clickable:active,
    .sol-kpi--clickable:active {
      transform: none;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SolMaskedInput — same field anatomy as SolInput; tabular digits so
   prompts and typed characters keep their columns while editing.
   ═══════════════════════════════════════════════════════════════════ */
@layer solsticio-components {
  .sol-masked-input {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-1);
    font-family: var(--sol-font-family);
  }

  .sol-masked-input__label {
    font-size: var(--sol-font-size-sm);
    font-weight: var(--sol-font-weight-medium);
    color: var(--sol-text-secondary);
  }

  .sol-masked-input__container {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: var(--sol-control-h);
    border: 1px solid var(--sol-border);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-sunken);
    transition: border-color var(--sol-transition-fast), box-shadow var(--sol-transition-fast), background var(--sol-transition-fast);
    overflow: hidden;
  }

  .sol-masked-input:not(.sol-masked-input--disabled, .sol-masked-input--focused, .sol-masked-input--error) .sol-masked-input__container:hover {
    border-color: var(--sol-border-strong);
  }

  .sol-masked-input--focused .sol-masked-input__container {
    border-color: var(--sol-accent);
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-masked-input--error .sol-masked-input__container {
    border-color: var(--sol-danger);
  }
  .sol-masked-input--error.sol-masked-input--focused .sol-masked-input__container {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sol-danger) 25%, transparent);
  }

  .sol-masked-input--disabled .sol-masked-input__container {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--sol-bg-muted);
  }

  .sol-masked-input__field {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--sol-text-primary);
    font-family: inherit;
    font-size: max(var(--sol-font-size-base), var(--sol-font-size-field-min, 0px));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    padding: 0 var(--sol-space-3);
    height: 100%;
    min-width: 0;
  }

  .sol-masked-input__field::placeholder {
    color: var(--sol-text-muted);
  }

  .sol-masked-input__field:disabled {
    cursor: not-allowed;
  }

  .sol-masked-input__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-inline-end: var(--sol-space-2);
    border: none;
    background: var(--sol-bg-muted);
    color: var(--sol-text-muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    transition: background var(--sol-transition-fast), color var(--sol-transition-fast);
  }

  .sol-masked-input__clear:hover {
    background: var(--sol-danger-muted);
    color: var(--sol-danger);
  }

  .sol-masked-input__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 1.2em;
  }

  .sol-masked-input__helper {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-text-muted);
    padding-inline-start: var(--sol-space-1);
  }

  .sol-masked-input__error {
    font-size: var(--sol-font-size-xs);
    color: var(--sol-danger);
    padding-inline-start: var(--sol-space-1);
  }

  /* Material skin — the filled-field anatomy shared by the text-like controls. */
  [data-sol-skin="material"] .sol-masked-input__container {
    border-color: transparent;
    border-radius: var(--sol-radius-control) var(--sol-radius-control) 0 0;
    background: var(--sol-bg-muted);
    box-shadow: inset 0 -1px 0 0 var(--sol-line);
  }
  [data-sol-skin="material"] .sol-masked-input--focused .sol-masked-input__container {
    border-color: transparent;
    box-shadow: inset 0 -2px 0 0 var(--sol-accent);
  }
  [data-sol-skin="material"] .sol-masked-input--error .sol-masked-input__container {
    border-color: transparent;
    box-shadow: inset 0 -1px 0 0 var(--sol-danger);
  }
  [data-sol-skin="material"] .sol-masked-input--error.sol-masked-input--focused .sol-masked-input__container {
    box-shadow: inset 0 -2px 0 0 var(--sol-danger);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SolTreeView — flat rows indented per level; one focus ring, one
   selection tint, checkbox anatomy shared with SolCheckbox.
   ═══════════════════════════════════════════════════════════════════ */
@layer solsticio-components {
  .sol-tree {
    box-sizing: border-box;
    --sol-tree-indent: var(--sol-space-5);
    --sol-tree-item-size: var(--sol-control-h);
    display: block;
    font-family: var(--sol-font-family);
    font-size: var(--sol-font-size-sm);
    color: var(--sol-text-primary);
    outline: none;
  }

  .sol-tree--virtual {
    --sol-tree-item-size: 32px;
    overflow-y: auto;
    contain: strict;
  }

  /* An unset ItemSize follows the pointer: a finger gets the plain tree's touch row. A set
     one is pinned inline and holds. */
  @media (pointer: coarse) {
    .sol-tree--virtual {
      --sol-tree-item-size: var(--sol-control-h);
    }
  }

  /* Forced touch (data-sol-touch on <html>): the block above, whatever the pointer. */
  :where([data-sol-touch]) .sol-tree--virtual {
    --sol-tree-item-size: var(--sol-control-h);
  }

  .sol-tree__row {
    display: flex;
    align-items: center;
    gap: var(--sol-space-1);
    box-sizing: border-box;
    height: var(--sol-tree-item-size);
    padding-inline-start: calc(var(--sol-space-1) + var(--sol-tree-level, 0) * var(--sol-tree-indent));
    padding-inline-end: var(--sol-space-2);
    border-radius: var(--sol-radius-control);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    outline: none;
    transition: background var(--sol-transition-fast);
  }

  /* A branch that opens drops its rows in one step apart, like a menu's items, and grows them, so the
     rows below move down instead of jumping (tokens: entrance primitive). Collapsing is instant; a
     virtual tree, whose rows hold fixed places, only fades them in. */
  .sol-tree__row--unfold {
    overflow: hidden;
    animation: sol-tree-unfold var(--sol-motion-item) var(--sol-ease-enter)
      calc(var(--sol-step, 0) * var(--sol-motion-step)) backwards;
  }

  .sol-tree--virtual .sol-tree__row--unfold {
    animation-name: sol-enter-item;
  }

  @keyframes sol-tree-unfold {
    from { height: 0; opacity: 0; }
  }

  .sol-tree__row:hover {
    background: var(--sol-bg-muted);
  }

  .sol-tree__row--selected {
    background: var(--sol-accent-muted);
    color: var(--sol-accent);
    font-weight: var(--sol-font-weight-medium);
  }

  .sol-tree__row:focus-visible,
  .sol-tree:focus-within .sol-tree__row--focused {
    box-shadow: var(--sol-focus-shadow);
  }

  .sol-tree__row--disabled,
  .sol-tree--disabled .sol-tree__row {
    color: var(--sol-text-disabled);
    cursor: not-allowed;
  }

  .sol-tree--disabled .sol-tree__row:hover {
    background: transparent;
  }

  .sol-tree__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--sol-radius-control);
    background: transparent;
    color: var(--sol-text-muted);
    cursor: pointer;
  }

  .sol-tree__toggle:hover {
    background: var(--sol-bg-sunken);
    color: var(--sol-text-primary);
  }

  .sol-tree__toggle--leaf {
    cursor: default;
  }

  .sol-tree__chevron {
    width: 14px;
    height: 14px;
    transition: transform var(--sol-transition-fast);
  }

  .sol-tree__row--expanded > .sol-tree__toggle .sol-tree__chevron {
    transform: rotate(90deg);
  }

  [dir="rtl"] .sol-tree__chevron {
    transform: rotate(180deg);
  }

  [dir="rtl"] .sol-tree__row--expanded > .sol-tree__toggle .sol-tree__chevron {
    transform: rotate(90deg);
  }

  .sol-tree__spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--sol-border);
    border-top-color: var(--sol-accent);
    border-radius: 50%;
    animation: sol-tree-spin 0.8s linear infinite;
  }

  @keyframes sol-tree-spin {
    to { transform: rotate(360deg); }
  }

  .sol-tree__checkbox {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    border: 2px solid var(--sol-line);
    border-radius: var(--sol-radius-control);
    background: var(--sol-bg-surface);
    transition: background var(--sol-transition-fast), border-color var(--sol-transition-fast);
  }

  .sol-tree__checkbox svg {
    width: 11px;
    height: 11px;
  }

  .sol-tree__checkbox--checked,
  .sol-tree__checkbox--mixed {
    background: var(--sol-accent);
    border-color: var(--sol-accent);
    color: var(--sol-on-accent);
  }

  .sol-tree__row:not(.sol-tree__row--disabled):hover .sol-tree__checkbox {
    border-color: var(--sol-accent);
  }

  .sol-tree__icon {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--sol-text-secondary);
  }

  .sol-tree__icon svg {
    width: 16px;
    height: 16px;
  }

  .sol-tree__row--selected .sol-tree__icon {
    color: inherit;
  }

  .sol-tree__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media (prefers-reduced-motion: reduce) {
    .sol-tree__chevron,
    .sol-tree__row,
    .sol-tree__checkbox {
      transition: none;
    }
    .sol-tree__spinner {
      animation: none;
    }
  }
}

/* ============================================================
   Touch — the tokens raise controls and rows to a finger-sized
   height; these are the targets sized apart from the control
   height, brought to the same 44px minimum. Transparent ones simply
   grow (nothing shows at rest); the filled clear circles keep their
   size and gain a transparent border, which hit-tests but does not
   paint.
   ============================================================ */
@layer solsticio-components {
  @media (pointer: coarse) {
    .sol-numeric__btn {
      width: var(--sol-touch-target-min);
    }

    .sol-input__password-toggle,
    .sol-datepicker__clear,
    .sol-time-picker__clear,
    .sol-time-picker__toggle,
    .sol-datetime-picker__clear,
    .sol-date-range-picker__clear,
    .sol-autocomplete__clear {
      width: var(--sol-touch-target-min);
      height: var(--sol-touch-target-min);
    }

    .sol-input__clear,
    .sol-masked-input__clear,
    .sol-select__clear {
      box-sizing: content-box;
      border: calc((var(--sol-touch-target-min) - 20px) / 2) solid transparent;
      background-clip: padding-box;
      margin-inline-end: 0;
    }
    .sol-select__clear {
      border-width: calc((var(--sol-touch-target-min) - 18px) / 2);
    }

    /* These controls only set a minimum height, so the input sizes to its text and a
       tap above or below it misses; stretched, the whole control focuses it. */
    .sol-time-picker__input,
    .sol-autocomplete__input {
      align-self: stretch;
      height: auto; /* a percentage height blocks the stretch */
    }

    /* A choice control's target is its whole label row. Padded to centre one line, so a
       multi-line description keeps the box on its first line; the minimum covers rounding. */
    .sol-checkbox__wrapper,
    .sol-switch__wrapper,
    .sol-radio {
      box-sizing: border-box;
      min-width: var(--sol-touch-target-min);
      min-height: var(--sol-touch-target-min);
      padding-block: calc((var(--sol-touch-target-min) - 1lh) / 2);
    }
    .sol-tab-header,
    .sol-breadcrumb__link {
      min-width: var(--sol-touch-target-min);
      min-height: var(--sol-touch-target-min);
    }

    /* A short label must not narrow a button below the minimum. */
    .sol-btn {
      min-width: var(--sol-touch-target-min);
    }

    /* Close buttons are transparent at rest, like the in-field ones above. */
    .sol-chip__close,
    .sol-select__chip-remove,
    .sol-alert__close,
    .sol-dialog__close,
    .sol-toast__close {
      width: var(--sol-touch-target-min);
      height: var(--sol-touch-target-min);
    }

    /* The calendar simply grows: seven 44px days still fit a phone's width. */
    .sol-calendar__nav,
    .sol-calendar__day {
      width: var(--sol-touch-target-min);
      height: var(--sol-touch-target-min);
    }
    .sol-date-range-picker__preset {
      height: var(--sol-touch-target-min);
    }
    .sol-datetime-picker__action {
      height: var(--sol-touch-target-min);
      min-width: var(--sol-touch-target-min);
    }
    .sol-toast__action {
      min-width: var(--sol-touch-target-min);
      min-height: var(--sol-touch-target-min);
    }

    /* A link chip's hit area reaches the minimum; the chip keeps its size. */
    a.sol-chip {
      position: relative;
    }
    a.sol-chip::after {
      content: "";
      position: absolute;
      inset-block: min(-1px, (100% - var(--sol-touch-target-min)) / 2);
      inset-inline: min(-1px, (100% - var(--sol-touch-target-min)) / 2);
      border-radius: inherit;
    }
    a.sol-chip .sol-chip__close {
      position: relative;
      z-index: 1;
    }

    /* List options keep their inline flow (a template may hold rich text), so they are
       padded to the minimum rather than turned into flex rows. */
    .sol-select__option,
    .sol-time-list__option {
      padding-block: max(var(--sol-space-2), (var(--sol-touch-target-min) - 1lh) / 2);
    }
    .sol-dropdown__item,
    .sol-autocomplete__item {
      min-height: var(--sol-touch-target-min);
    }
    .sol-chart__legend-item {
      min-width: var(--sol-touch-target-min);
      min-height: var(--sol-touch-target-min);
    }
  }

  /* Forced touch (data-sol-touch on <html>): the block above, whatever the pointer. */
  :where([data-sol-touch]) .sol-numeric__btn {
    width: var(--sol-touch-target-min);
  }
  :where([data-sol-touch]) .sol-input__password-toggle,
  :where([data-sol-touch]) .sol-datepicker__clear,
  :where([data-sol-touch]) .sol-time-picker__clear,
  :where([data-sol-touch]) .sol-time-picker__toggle,
  :where([data-sol-touch]) .sol-datetime-picker__clear,
  :where([data-sol-touch]) .sol-date-range-picker__clear,
  :where([data-sol-touch]) .sol-autocomplete__clear {
    width: var(--sol-touch-target-min);
    height: var(--sol-touch-target-min);
  }
  :where([data-sol-touch]) .sol-input__clear,
  :where([data-sol-touch]) .sol-masked-input__clear,
  :where([data-sol-touch]) .sol-select__clear {
    box-sizing: content-box;
    border: calc((var(--sol-touch-target-min) - 20px) / 2) solid transparent;
    background-clip: padding-box;
    margin-inline-end: 0;
  }
  :where([data-sol-touch]) .sol-select__clear {
    border-width: calc((var(--sol-touch-target-min) - 18px) / 2);
  }
  :where([data-sol-touch]) .sol-time-picker__input,
  :where([data-sol-touch]) .sol-autocomplete__input {
    align-self: stretch;
    height: auto;
  }
  :where([data-sol-touch]) .sol-checkbox__wrapper,
  :where([data-sol-touch]) .sol-switch__wrapper,
  :where([data-sol-touch]) .sol-radio {
    box-sizing: border-box;
    min-width: var(--sol-touch-target-min);
    min-height: var(--sol-touch-target-min);
    padding-block: calc((var(--sol-touch-target-min) - 1lh) / 2);
  }
  :where([data-sol-touch]) .sol-tab-header,
  :where([data-sol-touch]) .sol-breadcrumb__link {
    min-width: var(--sol-touch-target-min);
    min-height: var(--sol-touch-target-min);
  }
  :where([data-sol-touch]) .sol-btn {
    min-width: var(--sol-touch-target-min);
  }
  :where([data-sol-touch]) .sol-chip__close,
  :where([data-sol-touch]) .sol-select__chip-remove,
  :where([data-sol-touch]) .sol-alert__close,
  :where([data-sol-touch]) .sol-dialog__close,
  :where([data-sol-touch]) .sol-toast__close {
    width: var(--sol-touch-target-min);
    height: var(--sol-touch-target-min);
  }
  :where([data-sol-touch]) .sol-calendar__nav,
  :where([data-sol-touch]) .sol-calendar__day {
    width: var(--sol-touch-target-min);
    height: var(--sol-touch-target-min);
  }
  :where([data-sol-touch]) .sol-date-range-picker__preset {
    height: var(--sol-touch-target-min);
  }
  :where([data-sol-touch]) .sol-datetime-picker__action {
    height: var(--sol-touch-target-min);
    min-width: var(--sol-touch-target-min);
  }
  :where([data-sol-touch]) .sol-toast__action {
    min-width: var(--sol-touch-target-min);
    min-height: var(--sol-touch-target-min);
  }
  :where([data-sol-touch]) a.sol-chip {
    position: relative;
  }
  :where([data-sol-touch]) a.sol-chip::after {
    content: "";
    position: absolute;
    inset-block: min(-1px, (100% - var(--sol-touch-target-min)) / 2);
    inset-inline: min(-1px, (100% - var(--sol-touch-target-min)) / 2);
    border-radius: inherit;
  }
  :where([data-sol-touch]) a.sol-chip .sol-chip__close {
    position: relative;
    z-index: 1;
  }
  :where([data-sol-touch]) .sol-select__option,
  :where([data-sol-touch]) .sol-time-list__option {
    padding-block: max(var(--sol-space-2), (var(--sol-touch-target-min) - 1lh) / 2);
  }
  :where([data-sol-touch]) .sol-dropdown__item,
  :where([data-sol-touch]) .sol-autocomplete__item {
    min-height: var(--sol-touch-target-min);
  }
  :where([data-sol-touch]) .sol-chart__legend-item {
    min-width: var(--sol-touch-target-min);
    min-height: var(--sol-touch-target-min);
  }

  /* The transparent border above is repainted by forced colors; match it to the ground. */
  @media (pointer: coarse) and (forced-colors: active) {
    .sol-input__clear,
    .sol-masked-input__clear,
    .sol-select__clear {
      border-color: Canvas;
    }
  }

  /* Forced touch (data-sol-touch on <html>): the block above, whatever the pointer. */
  @media (forced-colors: active) {
    :where([data-sol-touch]) .sol-input__clear,
    :where([data-sol-touch]) .sol-masked-input__clear,
    :where([data-sol-touch]) .sol-select__clear {
      border-color: Canvas;
    }
  }
}

/* ============================================================
   Forced colors — every state survives with an outline or border,
   never with a fill alone. System keywords adapt to the OS palette;
   forced-color-adjust: none is used only where a fill IS the state
   (switch track, checkbox box, radio dot, progress fill).
   ============================================================ */
@layer solsticio-components {
  @media (forced-colors: active) {
    /* Focus: box-shadow is dropped by the UA — draw an outline instead. */
    .sol-btn:focus-visible,
    .sol-card--clickable:focus-visible,
    .sol-datepicker__trigger:focus-visible,
    .sol-datetime-picker__trigger:focus-visible,
    .sol-date-range-picker__trigger:focus-visible,
    .sol-calendar__nav:focus-visible,
    .sol-calendar__day:focus-visible,
    .sol-time-list:focus-visible,
    .sol-checkbox__input:focus-visible + .sol-checkbox__control,
    .sol-switch__input:focus-visible + .sol-switch__track,
    .sol-radio:focus-visible .sol-radio__control,
    .sol-tab-header:focus-visible,
    .sol-dropdown__trigger:focus-visible,
    .sol-dropdown__item:focus-visible,
    .sol-input__password-toggle:focus-visible,
    .sol-chart__legend-item:focus-visible {
      outline: 2px solid Highlight;
      outline-offset: 2px;
      box-shadow: none;
    }
    .sol-chart__legend-item[aria-pressed="true"] { text-decoration: underline; }

    /* Signature pad: the dashed frame is the only cue of where to sign. */
    .sol-signature-pad { border: 1px dashed CanvasText; }

    /* Buttons: the primary variant is told apart by a thicker border. */
    .sol-btn { border: 1px solid ButtonText; }
    .sol-btn--primary { border: 2px solid ButtonText; }
    .sol-btn:disabled { border-color: GrayText; color: GrayText; }

    /* Inputs: error is a thick border plus the message, not a red tint. */
    .sol-input--error .sol-input__container,
    .sol-numeric--error .sol-numeric__container,
    .sol-textarea--error .sol-textarea__container,
    .sol-select--error .sol-select__trigger,
    .sol-datepicker--error .sol-datepicker__trigger,
    .sol-masked-input--error .sol-masked-input__container,
    .sol-autocomplete--error .sol-autocomplete__input-container {
      border: 2px solid CanvasText;
      box-shadow: none;
    }
    .sol-form-field--error .sol-form-field__label { text-decoration: underline; }
    .sol-form-field__error { border-inline-start: 3px solid CanvasText; padding-inline-start: 6px; }

    /* Checkbox / radio / switch: the box or track fill IS the state. */
    .sol-checkbox__control,
    .sol-radio__control,
    .sol-switch__track {
      forced-color-adjust: none;
      background: Canvas;
      border: 2px solid CanvasText;
    }
    .sol-checkbox--checked .sol-checkbox__control,
    .sol-checkbox--indeterminate .sol-checkbox__control {
      background: Highlight;
      border-color: Highlight;
    }
    .sol-checkbox--checked .sol-checkbox__control svg,
    .sol-checkbox--indeterminate .sol-checkbox__control svg { color: HighlightText; }
    .sol-radio--selected .sol-radio__control { border-color: Highlight; }
    .sol-radio__dot { forced-color-adjust: none; background: Highlight; }
    .sol-switch__thumb { forced-color-adjust: none; background: CanvasText; }
    .sol-switch--on .sol-switch__track { background: Highlight; border-color: Highlight; }
    .sol-switch--on .sol-switch__thumb { background: HighlightText; }
    .sol-checkbox--disabled .sol-checkbox__control,
    .sol-radio--disabled .sol-radio__control,
    .sol-switch--disabled .sol-switch__track { border-color: GrayText; }

    /* Progress: track outlined, fill painted with the highlight color. */
    .sol-progress__track { border: 1px solid CanvasText; }
    .sol-progress__fill { forced-color-adjust: none; background: Highlight; }
    .sol-progress__track-circle { stroke: CanvasText; }
    .sol-progress__fill-circle { stroke: Highlight; }

    /* Badges and chips: variants collapse to one palette; the border keeps the shape. */
    .sol-badge,
    .sol-chip { border: 1px solid CanvasText; }
    .sol-badge--dot { forced-color-adjust: none; background: CanvasText; }
    .sol-chip--disabled { border-color: GrayText; color: GrayText; opacity: 1; }
    .sol-chip--link .sol-chip__link:focus-visible::after { outline: 2px solid Highlight; }

    /* The hold's fill is the progress: it stays, in the system highlight. */
    .sol-btn__hold-fill { forced-color-adjust: none; background: Highlight; opacity: 0.4; }
    .sol-btn__hold-edge { display: none; }

    /* Lit corners: system highlight, no glow. */
    .sol-corner-light::before,
    .sol-corner-light::after,
    .sol-scan-frame__corner { border-color: Highlight; filter: none; }

    /* A lit edge becomes a system highlight border: gradients and blur do not survive here. */
    .sol-edge-light { forced-color-adjust: none; }
    .sol-edge-light::before { display: none; }
    .sol-edge-light::after { background: Highlight; animation: none; padding: 2px; }

    /* Orbs take the system text color; the page panel keeps an edge the system can draw. */
    .sol-orb,
    .sol-orb--accent,
    .sol-orb--success,
    .sol-orb--error { color: CanvasText; }
    .sol-busy-overlay--page .sol-busy-overlay__panel { border: 1px solid CanvasText; }
  }
}

/* ============================================================
   Light — a figure that rolls, a goal reached, a live series.
   ============================================================ */
@layer solsticio-components {
  /* The figure as odometer reels (ValueAnimation Roll): each digit's column of 0–9 slides to its value. */
  .sol-kpi__odometer { display: inline-flex; }

  .sol-kpi__digit {
    display: inline-block;
    height: 1.2em;
    overflow: hidden;
    vertical-align: top;
  }

  .sol-kpi__reel {
    display: flex;
    flex-direction: column;
    transform: translateY(calc(var(--sol-kpi-digit, 0) * -1.2em));
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .sol-kpi__reel > span {
    height: 1.2em;
    line-height: 1.2em;
  }

  /* A goal (GoalProgress): a bar that fills; reached, a light sweeps the tile once and a badge stays. */
  .sol-kpi__goal {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2);
  }

  .sol-kpi__goal-bar {
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--sol-bg-muted);
  }

  .sol-kpi__goal-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--sol-accent);
    transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .sol-kpi__goal-reached {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--sol-success-muted);
    color: var(--sol-success);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .sol-kpi__goal-reached:empty { display: none; }

  .sol-kpi--goal-reached { border-color: color-mix(in srgb, var(--sol-success) 50%, var(--sol-card-border)); }
  .sol-kpi--goal-reached .sol-kpi__goal-fill { background: var(--sol-success); }
  .sol-kpi--goal-sweep { position: relative; }

  .sol-kpi--goal-sweep::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 30%,
      color-mix(in srgb, var(--sol-success) calc(var(--sol-fx-glow) * 45%), transparent) 50%, transparent 70%);
    background-size: 250% 100%;
    pointer-events: none;
    animation: sol-kpi-sweep 1.3s ease-out forwards;
  }

  /* A live series (Live): its newest point, and a halo breathing out of it. A zero-length path with a
     round cap and a non-scaling stroke stays a circle in the stretched box. */
  .sol-sparkline--live { overflow: visible; }

  .sol-sparkline__head,
  .sol-sparkline__halo {
    fill: none;
    stroke: var(--sol-sparkline-head, var(--sol-accent));
    stroke-linecap: round;
    stroke-width: 5px;
    vector-effect: non-scaling-stroke;
  }

  .sol-sparkline__halo { animation: sol-sparkline-halo 2s ease-out infinite; }

  .sol-sparkline--success,
  .sol-kpi--trend-up { --sol-sparkline-head: var(--sol-success); }
  .sol-sparkline--warning { --sol-sparkline-head: var(--sol-warning); }
  .sol-sparkline--danger,
  .sol-kpi--trend-down { --sol-sparkline-head: var(--sol-danger); }

  @keyframes sol-kpi-sweep {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
  }

  @keyframes sol-sparkline-halo {
    0% { stroke-width: 5px; opacity: calc(var(--sol-fx-glow) * 0.9); }
    100% { stroke-width: 16px; opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sol-kpi__reel,
    .sol-kpi__goal-fill { transition: none; }
    .sol-kpi--goal-sweep::after { display: none; }
    .sol-sparkline__halo { animation: none; opacity: 0; }
  }

  @media (forced-colors: active) {
    .sol-kpi__goal-bar { border: 1px solid CanvasText; }
    .sol-kpi__goal-fill { forced-color-adjust: none; background: Highlight; }
    .sol-kpi__goal-reached { border: 1px solid CanvasText; }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Entrances — a menu-like panel pours out of its trigger and the items of
   its list follow one step apart (tokens: entrance primitive). Pickers
   pour without a cascade: a calendar is not a list. Closing is instant.
   ═══════════════════════════════════════════════════════════════════ */
@layer solsticio-components {
  .sol-dropdown__menu,
  .sol-select__dropdown,
  .sol-autocomplete__dropdown,
  .sol-datepicker__dropdown,
  .sol-time-picker__panel,
  .sol-date-range-picker__panel,
  .sol-datetime-picker__panel {
    animation: sol-enter-pour var(--sol-motion-enter) var(--sol-ease-enter) backwards;
  }

  .sol-dropdown__item,
  .sol-dropdown__divider,
  .sol-select__option,
  .sol-select__group,
  .sol-select__no-data,
  .sol-autocomplete__item,
  .sol-autocomplete__no-data,
  .sol-autocomplete__loading-text {
    animation: sol-enter-item var(--sol-step-time, 0s) var(--sol-ease-enter)
      calc(var(--sol-step, 0) * var(--sol-motion-step)) backwards;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Counts that roll — the badge's Count and a nav item's count (SolRollingText).
   ═══════════════════════════════════════════════════════════════════ */
@layer solsticio-components {
  /* A count that changed rolls the digits that changed: up when it grew, down when it shrank. The
     old digit leaves as the new one arrives; the width is the new digit's. */
  .sol-roll {
    display: inline-flex;
  }

  .sol-roll__digit {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
  }

  .sol-roll__in {
    display: inline-block;
    animation: sol-roll-in var(--sol-motion-slide) var(--sol-ease-enter) backwards;
  }

  .sol-roll__out {
    position: absolute;
    inset: 0;
    text-align: center;
    animation: sol-roll-out var(--sol-motion-slide) var(--sol-ease-enter) forwards;
  }

  .sol-roll--down .sol-roll__in {
    animation-name: sol-roll-in-down;
  }

  .sol-roll--down .sol-roll__out {
    animation-name: sol-roll-out-down;
  }

  @keyframes sol-roll-in { from { transform: translateY(100%); opacity: 0; } }
  @keyframes sol-roll-out { to { transform: translateY(-100%); opacity: 0; } }
  @keyframes sol-roll-in-down { from { transform: translateY(-100%); opacity: 0; } }
  @keyframes sol-roll-out-down { to { transform: translateY(100%); opacity: 0; } }
}