/* Framework-neutral examples. Pair with tokens.css. Component class prefix: sol-. */
:where([hidden]) {display:none!important;}
.sol-fieldset {min-width:0;margin:0;padding:var(--sol-space-4);border:1px solid var(--sol-color-border);border-radius:var(--sol-radius-inset);}
.sol-fieldset legend {padding-inline:var(--sol-space-2);font-size:var(--sol-text-sm);font-weight:600;}
.sol-icon {display:inline-block;flex:none;vertical-align:middle;pointer-events:none;}
.sol-icon.size-16 {width:var(--sol-icon-sm);height:var(--sol-icon-sm);}
.sol-icon.size-20 {width:var(--sol-icon-md);height:var(--sol-icon-md);}
.sol-icon.size-24 {width:var(--sol-icon-lg);height:var(--sol-icon-lg);}
.sol-icon-button {min-width:var(--sol-button-height);padding:var(--sol-space-1);}
.sol-icon-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:var(--sol-space-3);}
.sol-icon-grid>div {display:flex;gap:var(--sol-space-2);align-items:center;min-height:var(--sol-control-height);font-size:var(--sol-text-xs);}
.sol-icon-size {display:inline-flex;align-items:center;gap:var(--sol-space-2);font-size:var(--sol-text-xs);}
.sol-elevated {box-shadow:var(--sol-elevation-floating);}
.sol-avatar {display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--sol-color-accent-soft);color:var(--sol-color-accent);font-size:var(--sol-text-xs);font-weight:700;}
.sol-steps {list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--sol-space-3);font-size:var(--sol-text-sm);}
.sol-steps li {display:inline-flex;align-items:center;gap:var(--sol-space-2);color:var(--sol-color-muted);}
.sol-steps li span {display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--sol-color-control-border);border-radius:50%;}
.sol-steps [aria-current="step"] {font-weight:700;color:var(--sol-color-accent);}
.sol-steps [data-complete="true"] span {background:var(--sol-color-accent);color:var(--sol-color-on-accent);border-color:var(--sol-color-accent);}
.sol-chart {display:block;width:100%;max-width:480px;height:auto;margin-inline:auto;}
.sol-chart rect {fill:var(--sol-color-accent);}
.sol-chart text {fill:var(--sol-color-text);font:16px var(--sol-font-sans);}
.sol-chart-axis {stroke:var(--sol-color-control-border);fill:none;}
.sol-tree,.sol-tree [role="group"] {list-style:none;padding:0;margin:0;}
.sol-tree [role="group"] {padding-inline-start:var(--sol-space-6);}
.sol-tree [role="group"][hidden] {display:none;}
.sol-tree-row {box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:var(--sol-space-2);min-height:var(--sol-control-height);padding:var(--sol-space-2);border-radius:var(--sol-radius-small);font-size:var(--sol-text-sm);cursor:pointer;}
.sol-tree-state {color:var(--sol-color-muted);font-size:var(--sol-text-xs);margin-inline-start:auto;}
.sol-tree [aria-selected="true"]>.sol-tree-row {background:var(--sol-color-accent-soft);color:var(--sol-color-accent);font-weight:700;}
.sol-tree [role="treeitem"]:focus-visible {outline:none;}
.sol-tree [role="treeitem"]:focus-visible>.sol-tree-row {outline:var(--sol-focus-width) solid var(--sol-color-focus);outline-offset:var(--sol-focus-offset);}
.sol-dialog {box-sizing:border-box;width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 48px);overflow:auto;padding:var(--sol-space-6);border:1px solid var(--sol-color-border);border-radius:var(--sol-radius-panel);background:var(--sol-color-surface);color:var(--sol-color-text);}
.sol-dialog::backdrop {background:var(--sol-backdrop-color);}
.sol-button.danger {color:var(--sol-color-danger);border-color:var(--sol-color-danger);}
.sol-button.danger:hover {background:var(--sol-color-danger-soft);}
.sol-stepper {display:flex;align-items:center;gap:var(--sol-space-2);}
.sol-stepper input {max-width:7rem;min-width:0;}
.sol-tags {list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--sol-space-2);margin-block:var(--sol-space-3);}
.sol-tags li {display:flex;align-items:center;gap:var(--sol-space-1);padding-inline:var(--sol-space-3) var(--sol-space-1);border:1px solid var(--sol-color-border);background:var(--sol-color-accent-soft);border-radius:var(--sol-radius-small);font-size:var(--sol-text-sm);}
.sol-tabs [role="tablist"] {display:flex;flex-wrap:wrap;gap:var(--sol-space-1);border-bottom:1px solid var(--sol-color-border);padding-bottom:var(--sol-space-2);}
.sol-tabs [role="tab"][aria-selected="true"] {color:var(--sol-color-accent);background:var(--sol-color-accent-soft);border-bottom-color:var(--sol-color-accent);}
.sol-tabs [role="tabpanel"] {padding-block:var(--sol-space-4);}
.sol-tabs [role="tabpanel"][hidden] {display:none;}
.sol-menu {box-sizing:border-box;position:fixed;z-index:var(--sol-layer-floating);width:max-content;min-width:200px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:var(--sol-space-2);border:1px solid var(--sol-color-control-border);border-radius:var(--sol-radius-floating);background:var(--sol-color-surface);color:var(--sol-color-text);box-shadow:var(--sol-elevation-floating);}
.sol-menu[hidden] {display:none;}
.sol-menu [role="menuitem"] {display:flex;align-items:center;gap:var(--sol-space-2);width:100%;min-height:var(--sol-control-height);padding:var(--sol-space-2) var(--sol-space-3);font:inherit;font-size:var(--sol-text-sm);text-align:start;border:0;border-radius:var(--sol-radius-button);background:transparent;color:var(--sol-color-text);cursor:pointer;}
.sol-menu [role="menuitem"]:hover,.sol-menu [role="menuitem"]:focus-visible {background:var(--sol-color-accent-soft);}
.sol-menu [aria-disabled="true"] {color:var(--sol-color-muted);cursor:not-allowed;}
.sol-app-shell {container-type:inline-size;border:1px solid var(--sol-color-border);border-radius:var(--sol-radius-panel);overflow:clip;background:var(--sol-color-surface);color:var(--sol-color-text);}
.sol-app-shell * {box-sizing:border-box;min-width:0;}
.sol-app-header {display:flex;align-items:center;justify-content:space-between;gap:var(--sol-space-3);padding:var(--sol-space-4);border-bottom:1px solid var(--sol-color-border);}
.sol-app-body {display:grid;grid-template-columns:132px minmax(0,1fr);}
.sol-app-sidebar {padding:var(--sol-space-3);display:flex;flex-direction:column;gap:var(--sol-space-2);border-right:1px solid var(--sol-color-border);background:var(--sol-color-surface-alt);}
.sol-app-sidebar .sol-button[aria-current="page"],
.sol-app-sidebar .sol-button[aria-current="page"]:is(:hover,:focus-visible,:active):not(:disabled):not([aria-disabled="true"]) {color:var(--sol-color-text);background:var(--sol-color-accent-soft);}
.sol-app-mobile-nav {display:none;padding:var(--sol-space-3);border-bottom:1px solid var(--sol-color-border);}
.sol-app-mobile-nav summary {min-height:var(--sol-touch-target-min);cursor:pointer;align-content:center;font-size:var(--sol-text-sm);}
.sol-app-mobile-nav nav {display:flex;flex-wrap:wrap;gap:var(--sol-space-2);padding-block:var(--sol-space-2);}
.sol-app-content {padding:var(--sol-space-4);width:100%;max-width:var(--sol-content-max);margin-inline:auto;}
.sol-app-content>h3 {margin:0 0 var(--sol-space-4);}
.sol-master-detail {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sol-space-4);align-items:start;}
.sol-app-records {list-style:none;margin:0;padding:0;display:grid;gap:var(--sol-space-3);}
.sol-app-records li {padding-block-end:var(--sol-space-3);border-bottom:1px solid var(--sol-color-border);}
.sol-app-records .sol-button {justify-content:flex-start;width:100%;}
.sol-app-content article {max-width:var(--sol-reading-max);}
@container (max-width:600px) {.sol-app-body {grid-template-columns:minmax(0,1fr);}.sol-app-sidebar {display:none;}.sol-app-mobile-nav {display:block;}.sol-master-detail {grid-template-columns:minmax(0,1fr);}}
@media (max-width:680px) {.sol-app-body {grid-template-columns:minmax(0,1fr);}.sol-app-sidebar {display:none;}.sol-app-mobile-nav {display:block;}.sol-master-detail {grid-template-columns:minmax(0,1fr);}}
@media (max-width:680px),(pointer:coarse) {.sol-icon-button {min-width:var(--sol-touch-target-min);}}
:where(.sol-button,.sol-input,.sol-select,.sol-card,.sol-side-panel,.sol-popover,.sol-tooltip,.sol-toast,.sol-combobox-menu) {box-sizing: border-box;}
.sol-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sol-space-2);
  min-height: var(--sol-button-height); padding: var(--sol-space-1) var(--sol-space-3);
  border: 1px solid var(--sol-color-control-border); border-radius:var(--sol-radius-button);
  font: inherit; font-size: var(--sol-text-sm); font-weight: 600; line-height: 1.4;
  color: var(--sol-color-text); background: var(--sol-color-surface); text-decoration: none;
  cursor: pointer; transition: background var(--sol-motion-fast) var(--sol-motion-easing-standard), border-color var(--sol-motion-fast) var(--sol-motion-easing-standard);
}
.sol-button:hover:not(:disabled):not([aria-disabled="true"]) {background: var(--sol-color-surface-alt); border-color: var(--sol-color-accent);}
.sol-button.primary {background: var(--sol-color-accent); border-color: var(--sol-color-accent); color: var(--sol-color-on-accent);}
.sol-button.primary:hover:not(:disabled):not([aria-disabled="true"]) {background: var(--sol-color-accent-hover); border-color: var(--sol-color-accent-hover);}
.sol-button.subtle {border-color: transparent; background: transparent;}
.sol-button.danger {color: var(--sol-color-danger); border-color: var(--sol-color-danger);}
.sol-button:disabled, .sol-button[aria-disabled="true"] {color: var(--sol-color-muted); background: var(--sol-color-surface-alt); border-color: var(--sol-color-border); cursor: not-allowed;}
.sol-button[aria-busy="true"] {cursor: wait;}
.sol-button[aria-busy="true"]::before {content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sol-spin var(--sol-motion-duration-loading) var(--sol-motion-easing-linear) 1;}
/* Quiet secondary action: 36px desktop / 44px narrow or coarse pointer, no overlapping hit areas. */
.sol-button.inline-action {min-width: var(--sol-button-height); min-height: var(--sol-button-height); padding: 0 var(--sol-space-2); border: 0; background: transparent; color: inherit; font-size: var(--sol-text-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;}
.sol-button.inline-action:hover:not(:disabled):not([aria-disabled="true"]) {background: transparent; text-decoration-thickness: 2px;}
.sol-button.inline-action:disabled, .sol-button.inline-action[aria-disabled="true"] {color: var(--sol-color-muted); background: transparent;}
.sol-notice-actions {display: flex; flex-wrap: wrap; gap: var(--sol-space-2); margin-top: var(--sol-space-1);}
.sol-notice-actions > .inline-action {margin-inline-start: calc(-1 * var(--sol-space-2));}
.sol-notice-message {margin: var(--sol-space-1) 0 0;}
.sol-field {display: grid; align-content: start; gap: var(--sol-space-2); min-width: 0;}
.sol-label {font-weight: 650; font-size: var(--sol-text-sm);}
.sol-input, .sol-select {
  box-sizing: border-box; width: 100%; min-width: 0; padding: var(--sol-space-2) var(--sol-space-3);
  border: 1px solid var(--sol-color-control-border); border-radius:var(--sol-radius-control); color: var(--sol-color-text); background: var(--sol-color-surface); font: inherit; font-size: var(--sol-text-sm);
}
.sol-input:not(textarea), .sol-select {height:var(--sol-control-height);min-height:var(--sol-control-height);}
/* Multiline sizing is independent from the single-line control height, including narrow screens. */
.sol-input.sol-textarea {height:auto;min-height:6rem;max-width:100%;resize:vertical;line-height:var(--sol-line-body);overflow-y:auto;overflow-x:hidden;white-space:pre-wrap;overflow-wrap:anywhere;}
.sol-field-meta {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--sol-space-2);}
.sol-field-count {text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums;}
.sol-time-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sol-space-3);max-width:22rem;}
.sol-time-direct {max-width:22rem;font-variant-numeric:tabular-nums;}
.sol-input::placeholder {color: var(--sol-color-muted); opacity: 1;}
.sol-input:hover:not(:disabled), .sol-select:hover:not(:disabled) {border-color: var(--sol-color-accent);}
.sol-input[aria-invalid="true"] {border-color: var(--sol-color-danger); border-width: 2px;}
.sol-input:disabled, .sol-select:disabled {background: var(--sol-color-surface-alt); color: var(--sol-color-muted); cursor: not-allowed;}
.sol-hint {font-size: var(--sol-text-xs); color: var(--sol-color-muted); margin: 0; line-height: var(--sol-line-body);}
.sol-success-text {color: var(--sol-color-success);}
.sol-error {color: var(--sol-color-danger); font-size: var(--sol-text-sm); margin: 0;}
.sol-choice {display: flex; align-items: center; gap: var(--sol-space-2); min-height: var(--sol-control-height); cursor: pointer; font-size: var(--sol-text-sm);}
.sol-choice input {width: 20px; height: 20px; margin: 0; accent-color: var(--sol-color-accent); flex-shrink: 0; cursor: pointer;}
.sol-choice:has(input:disabled) {color: var(--sol-color-muted); cursor: not-allowed;}
.sol-choice:has(input:disabled) input {cursor: not-allowed;}
.sol-status {display: inline-flex; align-items: center; gap: var(--sol-space-1); padding: 3px 8px; border-radius:var(--sol-radius-small); font-size: var(--sol-text-xs); font-weight: 600; color: var(--sol-color-info); background: var(--sol-color-info-soft); white-space: nowrap;}
.sol-status.success {color: var(--sol-color-success); background: var(--sol-color-success-soft);}
.sol-status.warning {color: var(--sol-color-warning); background: var(--sol-color-warning-soft);}
.sol-status.danger {color: var(--sol-color-danger); background: var(--sol-color-danger-soft);}
.sol-notice {padding: var(--sol-space-4); border-radius:var(--sol-radius-inset); border-inline-start: 3px solid var(--sol-color-info); color: var(--sol-color-info); background: var(--sol-color-info-soft); font-size: var(--sol-text-sm);}
.sol-notice.success {color: var(--sol-color-success); border-color: var(--sol-color-success); background: var(--sol-color-success-soft);}
.sol-notice.danger {color: var(--sol-color-danger); border-color: var(--sol-color-danger); background: var(--sol-color-danger-soft);}
.sol-card {background: var(--sol-color-surface); color: var(--sol-color-text); border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-card); padding: var(--sol-space-6); min-width: 0;}
.sol-card h3 {margin-top: 0;}
.sol-progress {width: 100%; height: 6px; border: 0; border-radius: 99px; overflow: hidden; accent-color: var(--sol-color-accent); background: var(--sol-color-surface-alt);}
.sol-progress::-webkit-progress-bar {background: var(--sol-color-surface-alt); border-radius: 99px;}
.sol-progress::-webkit-progress-value {background: var(--sol-color-accent); border-radius: 99px;}
.sol-progress::-moz-progress-bar {background: var(--sol-color-accent); border-radius: 99px;}
.sol-divider {border: 0; border-top: 1px solid var(--sol-color-border); margin: var(--sol-space-4) 0;}
.sol-stack {display: grid; gap: var(--sol-space-4); min-width: 0;}
.sol-actions {display:flex;flex-wrap:wrap;align-items:center;gap:var(--sol-space-2);min-width:0;}
.sol-filterbar {display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.6fr); align-items: start; gap: var(--sol-space-4);}
.sol-filterbar.three {grid-template-columns: minmax(0,1.4fr) minmax(130px,.7fr) minmax(150px,.8fr);}
.sol-switch {display: inline-flex; align-items: center; gap: var(--sol-space-3); min-height: var(--sol-control-height); border: 0; padding: var(--sol-space-2) 0; background: transparent; color: var(--sol-color-text); font: inherit; font-size: var(--sol-text-sm); text-align: start; cursor: pointer;}
.sol-switch-track {position: relative; display: inline-block; flex: 0 0 40px; width: 40px; height: 24px; border: 1px solid var(--sol-color-control-border); border-radius: 99px; background: var(--sol-color-surface-alt);}
.sol-switch-track::after {content: ''; position: absolute; width: 16px; height: 16px; inset-block-start: 3px; inset-inline-start: 3px; border-radius: 50%; background: var(--sol-color-muted);}
.sol-switch[aria-checked="true"] .sol-switch-track {background: var(--sol-color-accent); border-color: var(--sol-color-accent);}
.sol-switch[aria-checked="true"] .sol-switch-track::after {inset-inline-start: 19px; background: var(--sol-color-on-accent);}
.sol-mini-list {display: grid; gap: var(--sol-space-2); list-style: none; padding: 0; margin: 0;}
.sol-mini-list.cards {grid-template-columns: repeat(2,minmax(0,1fr));}
.sol-mini-list li {padding: var(--sol-space-3); border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-inset); font-size: var(--sol-text-sm);}
.sol-tooltip {position: fixed; z-index: var(--sol-layer-floating); max-width: min(280px,calc(100vw - 32px)); padding: var(--sol-space-2) var(--sol-space-3); border: 1px solid var(--sol-color-control-border); border-radius:var(--sol-radius-floating); background: var(--sol-color-text); color: var(--sol-color-surface); font-size: var(--sol-text-xs); line-height: var(--sol-line-body);}
.sol-popover {position: fixed; z-index: var(--sol-layer-floating); width: min(320px,calc(100vw - 32px)); padding: var(--sol-space-4); border: 1px solid var(--sol-color-control-border); border-radius:var(--sol-radius-floating); background: var(--sol-color-surface); color: var(--sol-color-text); box-shadow: var(--sol-elevation-floating); font-size: var(--sol-text-sm);}
.sol-popover p {margin: var(--sol-space-2) 0 var(--sol-space-3);}
.sol-accordion {border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-inset); background: var(--sol-color-surface);}
.sol-accordion + .sol-accordion {margin-top: var(--sol-space-2);}
.sol-accordion summary {min-height: var(--sol-control-height); padding: var(--sol-space-3) var(--sol-space-4); cursor: pointer; font-size: var(--sol-text-sm); font-weight: 600;}
.sol-accordion[open] summary {border-bottom: 1px solid var(--sol-color-border);}
.sol-accordion-content {padding: var(--sol-space-4); font-size: var(--sol-text-sm);}
.sol-accordion-content p:last-child {margin-bottom: 0;}
.sol-breadcrumbs ol {display: flex; flex-wrap: wrap; align-items: center; gap: var(--sol-space-2); padding: 0; margin: 0 0 var(--sol-space-4); list-style: none; font-size: var(--sol-text-sm);}
.sol-breadcrumbs li + li::before {content: '/'; color: var(--sol-color-muted); margin-inline-end: var(--sol-space-2);}
.sol-breadcrumbs a {display: inline-flex; align-items: center; min-height: var(--sol-control-height); color: var(--sol-color-accent);}
.sol-breadcrumbs [aria-current] {color: var(--sol-color-muted);}
.sol-side-panel {position: fixed; inset: 0 0 0 auto; margin: 0; width: min(440px,100%); max-width: 100%; height: 100dvh; max-height: 100dvh; overflow: auto; padding: var(--sol-space-6); border: 0; border-inline-start: 1px solid var(--sol-color-border); border-radius: var(--sol-radius-panel) 0 0 var(--sol-radius-panel); background: var(--sol-color-surface); color: var(--sol-color-text);}
.sol-side-panel::backdrop {background: var(--sol-backdrop-color);}
.sol-side-panel-head {display: flex; justify-content: space-between; align-items: center; gap: var(--sol-space-3); margin-bottom: var(--sol-space-6);}
.sol-side-panel-head button {flex: 0 0 auto; white-space: nowrap;}
.sol-toast {position: fixed; inset-inline-end: max(16px,env(safe-area-inset-right)); inset-block-end: max(16px,env(safe-area-inset-bottom)); z-index: var(--sol-layer-toast); display: flex; align-items: center; gap: var(--sol-space-3); width: max-content; max-width: min(440px,calc(100% - max(16px,env(safe-area-inset-left)) - max(16px,env(safe-area-inset-right)))); padding: var(--sol-space-2) var(--sol-space-3) var(--sol-space-2) var(--sol-space-4); border: 1px solid var(--sol-color-control-border); border-radius:var(--sol-radius-floating); color: var(--sol-color-text); background: var(--sol-color-surface); box-shadow: var(--sol-elevation-floating); font-size: var(--sol-text-sm);}
.sol-toast .sol-button {flex-shrink: 0;}
.sol-table-wrap {max-width: 100%; overflow: auto;}
.sol-data-table {width: 100%; border-collapse: collapse; font-size: var(--sol-text-sm);line-height:1.4;}
.sol-data-table caption {text-align: start; font-weight: 650; padding: var(--sol-space-4) 0;}
.sol-data-table th, .sol-data-table td {text-align: start; padding: var(--sol-table-cell-padding-y) var(--sol-space-3); border-bottom: 1px solid var(--sol-color-border); vertical-align: middle;}
.sol-data-table th {font-weight: 600; color: var(--sol-color-muted);}
.sol-data-table tbody th {color: var(--sol-color-text);}
.sol-data-table.sol-selectable-table th:first-child, .sol-data-table.sol-selectable-table td:first-child {width:var(--sol-table-selection-width);}
/* The compact chart alternative has no selection column. Short day labels stay intact. */
.sol-chart-table {table-layout:fixed;}
.sol-chart-table th:first-child {width:50%;white-space:nowrap;}
.sol-chart-table th,.sol-chart-table td {padding:var(--sol-space-2) var(--sol-space-3);}
.sol-chart-table td {font-variant-numeric:tabular-nums;}
.sol-data-table .sol-choice {justify-content:center;min-height:var(--sol-button-height);}
.sol-data-table tbody tr:has(input:checked) {background: var(--sol-color-accent-soft);}
.sol-table-sub {display: block; margin-top: 2px;line-height:1.35; color: var(--sol-color-muted); font-size: var(--sol-text-xs);}
.sol-record-cards {display: none; list-style: none; padding: 0; margin: var(--sol-space-4) 0; gap: var(--sol-space-3);}
.sol-record-cards li {padding: var(--sol-space-4); border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-card);}
.sol-record-cards li:has(input:checked) {border-color: var(--sol-color-accent); background: var(--sol-color-accent-soft);}
.sol-record-cards dl {margin: var(--sol-space-2) 0; font-size: var(--sol-text-xs);}
.sol-record-cards dl div {display: grid; grid-template-columns: 60px minmax(0,1fr); gap: var(--sol-space-2);}
.sol-record-cards dt {color: var(--sol-color-muted);}
.sol-record-cards dd {margin: 0;}
.sol-mobile-select {display: none;}
.sol-pagination {display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap;padding:0;}
.sol-pagination label {display: flex; align-items: center; gap: var(--sol-space-2); font-size: var(--sol-text-sm);}
.sol-pagination select {width: auto; min-width: 76px;}
.sol-skeleton {display: grid; gap: var(--sol-space-3); padding: var(--sol-space-4) 0;}
.sol-skeleton span {display: block; height: 16px; max-width: 100%; border-radius:var(--sol-radius-small); background: var(--sol-color-surface-alt); animation: sol-pulse var(--sol-motion-duration-loading) var(--sol-motion-easing-standard) 1;}
.sol-skeleton span:nth-child(2) {width: 76%;}
.sol-skeleton span:nth-child(3) {width: 88%;}
@keyframes sol-pulse {50% {opacity: .45;}}
.sol-file-input {box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: var(--sol-control-height); padding: 0; color: var(--sol-color-text); font: inherit; font-size: var(--sol-text-sm);}
.sol-dropzone {display: grid; gap: var(--sol-space-3); padding: var(--sol-space-4); border: 2px dashed var(--sol-color-control-border); border-radius:var(--sol-radius-card); background: var(--sol-color-surface); min-width: 0; transition: border-color var(--sol-motion-fast) var(--sol-motion-easing-standard), background var(--sol-motion-fast) var(--sol-motion-easing-standard);}
.sol-dropzone[data-drag-state="over"] {border-style: solid; border-color: var(--sol-color-accent); background: var(--sol-color-accent-soft);}
.sol-dropzone strong {font-size: var(--sol-text-sm);}
.sol-file-errors {overflow-wrap: anywhere;}
.sol-file-input::file-selector-button {box-sizing: border-box; height: var(--sol-button-height); min-height: var(--sol-button-height); padding: var(--sol-space-1) var(--sol-space-3); margin-inline-end: var(--sol-space-2); border: 1px solid var(--sol-color-control-border); border-radius:var(--sol-radius-button); background: var(--sol-color-surface); color: var(--sol-color-text); font: inherit; font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: middle; cursor: pointer;}
.sol-file-list {padding: 0; margin: 0; list-style: none; display: grid; gap: var(--sol-space-2);}
.sol-file-list li {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sol-space-2); padding: var(--sol-space-2) var(--sol-space-3); border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-inset); font-size: var(--sol-text-sm);}
.sol-file-list li > span {min-width: 0; overflow-wrap: anywhere; flex: 1;}
.sol-file-list .sol-button {flex: 0 0 auto;}
.sol-combobox-menu {max-height: 240px; overflow: auto; margin-top: var(--sol-space-1); border: 1px solid var(--sol-color-control-border); border-radius:var(--sol-radius-floating); background: var(--sol-color-surface);}
.sol-combobox-menu ul {padding: 0; margin: 0; list-style: none;}
.sol-combobox-menu [role="option"] {display: flex; align-items: center; min-height: var(--sol-control-height); padding: var(--sol-space-2) var(--sol-space-3); font-size: var(--sol-text-sm); cursor: pointer;}
.sol-combobox-menu [role="option"][aria-selected="true"] {background: var(--sol-color-accent-soft); color: var(--sol-color-accent); font-weight: 600;}
.sol-combobox-menu p {margin: 0; padding: var(--sol-space-3); font-size: var(--sol-text-sm); color: var(--sol-color-muted);}
.sol-motion-stage {min-height: 12rem; display: grid; align-items: start;}
.sol-date-field {display: flex; align-items: stretch; gap: var(--sol-space-2); min-width: 0;}
.sol-date-field .sol-input {flex: 1; width: 0; font-variant-numeric: tabular-nums;}
.sol-date-open {flex: 0 0 var(--sol-control-height); min-width: var(--sol-control-height); min-height: var(--sol-control-height); padding: 0; color: var(--sol-color-accent);}
.sol-date-summary {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sol-space-2);}
.sol-date-summary > span {min-width: 0; overflow-wrap: anywhere;}
.sol-date-output {font-size: var(--sol-text-xs); white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--sol-space-1) 0 0; padding: var(--sol-space-3); border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-inset); background: var(--sol-color-surface-alt);}
.sol-calendar-status {min-height: 3.3em; margin: var(--sol-space-2) 0;}
.sol-calendar-dialog {box-sizing: border-box; position: fixed; margin: auto; width: min(384px,calc(100vw - 8px)); max-width: calc(100vw - 8px); max-height: calc(100dvh - 48px); overflow: auto; padding: var(--sol-space-4); border: 1px solid var(--sol-color-border); border-radius:var(--sol-radius-floating); background: var(--sol-color-surface); color: var(--sol-color-text);}
.sol-calendar-dialog::backdrop {background: var(--sol-backdrop-color);}
.sol-calendar-top > span {font-size: var(--sol-text-xs); font-weight: 600; line-height: 1.4;}
.sol-calendar-top,.sol-calendar-heading,.sol-calendar-footer {display: flex; align-items: center; justify-content: space-between; gap: var(--sol-space-2);}
.sol-calendar-top .eyebrow {min-width: 0;}
.sol-calendar-top > button {flex: 0 0 auto;}
.sol-calendar-heading {margin-block: var(--sol-space-2);}
.sol-calendar-heading h3 {font-size: var(--sol-text-lg); margin: 0;}
.sol-calendar-heading .sol-button {min-width: var(--sol-button-height); font-size: 24px; padding: 0; line-height: 1;}
.sol-calendar-grid {border-collapse: separate; border-spacing: 2px 4px; width: 100%; table-layout: fixed; font-size: var(--sol-text-sm);}
.sol-calendar-grid th {font-size: var(--sol-text-xs); font-weight: 500; color: var(--sol-color-muted); padding-block: var(--sol-space-2);}
.sol-calendar-grid td {padding: 0; text-align: center;}
.sol-calendar-day {position: relative; box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; min-width: 0; height: var(--sol-button-height); padding: 0; border: 1px solid transparent; border-radius:var(--sol-radius-button); font: inherit; color: var(--sol-color-text); background: transparent; cursor: pointer; font-variant-numeric: tabular-nums;}
.sol-calendar-day[data-outside="true"] {color: var(--sol-color-muted);}
.sol-calendar-day[data-range="true"] {background: var(--sol-color-accent-soft); color: var(--sol-color-accent);}
.sol-calendar-day[data-preview="true"] {background: var(--sol-color-accent-soft); color: var(--sol-color-accent); border-style: dashed; border-color: var(--sol-color-accent);}
.sol-calendar-day[data-endpoint="true"] {background: var(--sol-color-accent); color: var(--sol-color-on-accent); font-weight: 700;}
.sol-calendar-day:hover {border-color: var(--sol-color-accent);}
.sol-calendar-day:focus-visible {outline-offset: -3px; outline-color: currentColor;}
.sol-calendar-dot {position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 50%; background: currentColor;}
.sol-calendar-footer {flex-wrap: wrap; border-top: 1px solid var(--sol-color-border); margin-top: var(--sol-space-2); padding-top: var(--sol-space-2);}
.sol-calendar-footer > .sol-hint {flex-basis: 100%;}
.sol-calendar-keys {margin: var(--sol-space-2) 0 0;}
@media (max-width: 400px) {.sol-calendar-dialog {width: 100vw; max-width: 100vw; padding: 4px;}.sol-calendar-top,.sol-calendar-heading,.sol-calendar-footer,.sol-calendar-keys,.sol-calendar-status {margin-inline: 4px;}.sol-calendar-grid {border-spacing: 0 4px;}}
.sol-tone {--sol-tone-fg: var(--sol-color-accent); --sol-tone-bg: var(--sol-color-accent-soft);}
.sol-tone[data-tone="info"] {--sol-tone-fg: var(--sol-color-info); --sol-tone-bg: var(--sol-color-info-soft);}
.sol-tone[data-tone="success"] {--sol-tone-fg: var(--sol-color-success); --sol-tone-bg: var(--sol-color-success-soft);}
.sol-tone[data-tone="warning"] {--sol-tone-fg: var(--sol-color-warning); --sol-tone-bg: var(--sol-color-warning-soft);}
.sol-tone[data-tone="danger"] {--sol-tone-fg: var(--sol-color-danger); --sol-tone-bg: var(--sol-color-danger-soft);}
.sol-tone .sol-button.tone-fill {--sol-tone-action-bg:var(--sol-tone-fg);--sol-tone-action-ink:var(--sol-tone-bg);background:var(--sol-tone-action-bg);border-color:var(--sol-tone-fg);color:var(--sol-tone-action-ink);}
.sol-tone .sol-button.tone-soft {--sol-tone-action-bg:var(--sol-tone-bg);--sol-tone-action-ink:var(--sol-tone-fg);background:var(--sol-tone-action-bg);border-color:var(--sol-tone-fg);color:var(--sol-tone-action-ink);}
.sol-tone .sol-button.tone-outline {--sol-tone-action-bg:var(--sol-color-surface);--sol-tone-action-ink:var(--sol-tone-fg);background:var(--sol-tone-action-bg);border-color:var(--sol-tone-fg);color:var(--sol-tone-action-ink);}
/* Keep each tested ink/background pair together. This outranks generic button hover. */
.sol-tone .sol-button:is(.tone-fill,.tone-soft,.tone-outline):is(:hover,:focus-visible,:active):not(:disabled):not([aria-disabled="true"]) {background:var(--sol-tone-action-bg);color:var(--sol-tone-action-ink);border-color:var(--sol-tone-fg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
.sol-tone .sol-button:is(.tone-fill,.tone-soft,.tone-outline):is(:disabled,[aria-disabled="true"]) {background:var(--sol-color-surface-alt);color:var(--sol-color-muted);border-color:var(--sol-color-border);opacity:1;}
.sol-tone-badge {background: var(--sol-tone-bg); color: var(--sol-tone-fg);}
.sol-tone-notice {background: var(--sol-tone-bg); color: var(--sol-tone-fg); border-color: var(--sol-tone-fg); margin-top: var(--sol-space-3);}
.sol-tone.sol-toast {background: var(--sol-tone-bg); color: var(--sol-tone-fg); border-color: var(--sol-tone-fg);}
.sol-motion-stage > * {grid-area: 1 / 1;}
.sol-motion-stage .sol-card {margin: 0;}
.motion-demo-status {min-height: 3.3em;}
.sol-tooltip[hidden], .sol-popover[hidden], .sol-toast[hidden], .sol-combobox-menu[hidden] {display: none;}
@media (max-width: 680px) {.sol-filterbar.three {grid-template-columns: minmax(0,1fr);}.sol-table-wrap {display: none;}.sol-record-cards {display: grid;}.sol-mobile-select {display: flex;}}
@media (max-width: 520px) {.sol-filterbar {grid-template-columns: minmax(0,1fr);}.sol-mini-list.cards {grid-template-columns: 1fr;}.sol-side-panel {padding: var(--sol-space-4);}}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {outline: var(--sol-focus-width) solid var(--sol-color-focus); outline-offset: var(--sol-focus-offset);}
@keyframes sol-spin {to {transform: rotate(360deg);}}
[data-motion-policy="reduced"] *, [data-motion-policy="reduced"] *::before, [data-motion-policy="reduced"] *::after,
[data-motion-paused="true"] *, [data-motion-paused="true"] *::before, [data-motion-paused="true"] *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important;}
@media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important;}}
@media (forced-colors: active) {a, button, input, select, summary {forced-color-adjust: auto;} .sol-status, .sol-notice {border: 1px solid CanvasText;}}

/* Nested surfaces stay quieter than their containing card; viewport-attached sheets stay flush on narrow screens. */
.sol-card .sol-card {border-radius:var(--sol-radius-inset);}
@media(max-width:440px){.sol-side-panel{border-radius:0;}}

/* A flexible title column takes the remainder; all other data columns keep their role width. */
.sol-data-view {container-type:inline-size;}
.sol-selectable-table {table-layout:fixed;}
.sol-col-selection {width:var(--sol-table-selection-width);}.sol-col-status {width:var(--sol-table-status-width);}.sol-col-date {width:var(--sol-table-date-width);}.sol-col-action {width:var(--sol-table-action-width);}
.sol-data-table tbody th {font-weight:500;}.sol-record-title {font-weight:650;overflow-wrap:anywhere;}
.sol-date-cell {white-space:nowrap;font-variant-numeric:tabular-nums;}
.sol-sort-button {gap:4px;padding-inline:4px;max-width:100%;white-space:nowrap;font-weight:650;}
.sol-sort-symbol {display:inline-block;flex:0 0 16px;width:16px;text-align:center;}
.sol-row-action {padding-inline:8px;white-space:nowrap;}
.sol-status.neutral {color:var(--sol-color-muted);background:var(--sol-color-surface-alt);}
.sol-data-toolbar {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sol-space-3);margin-top:var(--sol-space-4);}
.sol-data-footer {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sol-space-4);padding-top:var(--sol-space-4);}
.sol-page-size {display:flex;align-items:center;gap:var(--sol-space-2);font-size:var(--sol-text-xs);color:var(--sol-color-muted);}.sol-page-size select{width:auto;min-width:76px;}
.sol-page-numbers {display:flex;align-items:center;gap:4px;}
.sol-page-button {min-width:var(--sol-button-height);padding-inline:8px;}
.sol-page-button[aria-current="page"] {background:var(--sol-color-accent-soft);color:var(--sol-color-accent);border-color:var(--sol-color-accent);}
.sol-pagination .sol-page-button[aria-current="page"]:is(:hover,:focus-visible,:active):not(:disabled):not([aria-disabled="true"]) {background:var(--sol-color-accent-soft);color:var(--sol-color-accent);border-color:var(--sol-color-accent);text-decoration:underline;text-underline-offset:3px;}
.sol-page-gap {min-width:16px;text-align:center;color:var(--sol-color-muted);}
.sol-record-card-head {display:flex;align-items:start;gap:var(--sol-space-2);}.sol-record-card-head .sol-choice{flex:none;min-height:44px;}.sol-record-card-head .sol-record-title{padding-top:10px;min-width:0;}
.sol-record-card-actions {display:flex;justify-content:flex-end;}.sol-data-demo-controls {margin-top:var(--sol-space-4);}.sol-data-state {padding:var(--sol-space-6);border:1px solid var(--sol-color-border);border-radius:var(--sol-radius-card);background:var(--sol-color-surface);}
.sol-record-list {display:grid;gap:0;border:1px solid var(--sol-color-border);border-radius:var(--sol-radius-card);background:var(--sol-color-surface);}
.sol-record-row {display:flex;align-items:center;gap:var(--sol-space-4);padding:var(--sol-list-item-padding-y) var(--sol-space-4);border:0;border-bottom:1px solid var(--sol-color-border);min-width:0;}
.sol-record-row:last-child {border-bottom:0;}.sol-record-row>div:first-child{flex:1;min-width:0;}.sol-record-row>.sol-button{flex:none;}
.sol-mini-list:not(.cards){gap:0;border:1px solid var(--sol-color-border);border-radius:var(--sol-radius-card);}.sol-mini-list:not(.cards) li{padding:var(--sol-list-item-padding-y) var(--sol-space-4);border:0;border-bottom:1px solid var(--sol-color-border);border-radius:0;}.sol-mini-list:not(.cards) li:last-child{border-bottom:0;}
@container(max-width:600px){.sol-table-wrap{display:none;}.sol-record-cards{display:grid;}.sol-mobile-select{display:flex;}.sol-data-footer{display:grid;justify-content:start;}.sol-page-edge,.sol-page-gap{display:none;}.sol-page-button{min-width:44px;min-height:44px;}.sol-record-cards .sol-row-action{min-height:44px;}}
@media(max-width:680px){.sol-page-edge,.sol-page-gap{display:none;}.sol-page-button{min-width:44px;min-height:44px;}.sol-data-footer{display:grid;justify-content:start;}.sol-record-row{gap:var(--sol-space-3);}.sol-record-row>.sol-button{min-height:44px;}}

.sol-mini-list.cards li{border-radius:var(--sol-radius-card);padding:var(--sol-space-4);background:var(--sol-color-surface);}
.sol-data-table .sol-numeric,.sol-chart-table td,.sol-chart-table thead th:last-child{text-align:end;font-variant-numeric:tabular-nums;}
.sol-chart-table{max-width:30rem;margin-inline:auto;}

.sol-record-card-head .sol-choice{min-width:44px;justify-content:center;}
.sol-record-card-head .sol-record-title{flex:1;}
.sol-record-cards dl{display:flex;flex-wrap:wrap;gap:6px 12px;margin:8px 0 0;}
.sol-record-cards dl div{display:inline-flex;align-items:baseline;gap:6px;min-width:0;}
.sol-record-cards dd{overflow-wrap:anywhere;}

/* Collection text stays one line. Full text lives in the accessible preview, not a title attribute. */
.sol-record-title,.sol-ellipsis{display:block;min-width:0;max-width:100%;min-height:24px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sol-title-preview{display:block;min-width:0;width:100%;padding:0;border:0;border-radius:var(--sol-radius-button);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;}
.sol-title-preview:hover{text-decoration:underline;text-underline-offset:3px;}
.sol-record-card-head{align-items:center;}.sol-record-card-head>.sol-title-preview{flex:1;min-width:0;min-height:44px;display:grid;align-items:center;}.sol-record-card-head .sol-record-title{padding-top:0;}
.sol-full-text-content{white-space:pre-wrap;overflow-wrap:anywhere;}.sol-full-text-dialog h2{margin-bottom:0;}.sol-full-text-dialog .row-between{margin-bottom:var(--sol-space-4);}
.sol-overflow-tooltip{max-width:min(420px,calc(100vw - 32px));max-height:min(240px,50dvh);overflow:auto;white-space:normal;overflow-wrap:anywhere;}
.sol-progress-demo{--sol-progress-fill:var(--sol-color-accent);}.sol-progress-demo[data-state="complete"]{--sol-progress-fill:var(--sol-color-success);}.sol-progress-demo[data-state="error"]{--sol-progress-fill:var(--sol-color-danger);}
.sol-progress-examples{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:var(--sol-space-6);align-items:center;margin-block:var(--sol-space-6);}.sol-progress-examples h3{font-size:var(--sol-text-sm);}
.sol-progress-demo progress::-webkit-progress-value{background:var(--sol-progress-fill);transition:width var(--sol-motion-duration-state) var(--sol-motion-easing-standard);}.sol-progress-demo progress::-moz-progress-bar{background:var(--sol-progress-fill);}
.sol-progress-pending{display:block;}.sol-progress-pending>span{display:block;width:35%;height:100%;border-radius:inherit;background:var(--sol-progress-fill);}
.sol-progress-circle{position:relative;display:grid;place-items:center;width:128px;height:128px;}.sol-progress-circle svg{width:100%;height:100%;transform:rotate(-90deg);}.sol-progress-circle circle{fill:none;stroke-width:8;}.sol-progress-track{stroke:var(--sol-color-surface-alt);}.sol-progress-arc{stroke:var(--sol-progress-fill);stroke-linecap:round;transition:stroke-dashoffset var(--sol-motion-duration-state) var(--sol-motion-easing-standard);}.sol-progress-circle-text{position:absolute;font-size:var(--sol-text-sm);font-weight:650;color:var(--sol-color-text);}
.sol-progress-status{min-height:3.3em;font-size:var(--sol-text-sm);color:var(--sol-progress-fill);}.sol-range{width:100%;min-height:44px;accent-color:var(--sol-color-accent);}
@media(max-width:680px){.sol-progress-examples{grid-template-columns:minmax(0,1fr);}.sol-title-preview{min-height:44px;display:grid;align-items:center;}}

.sol-progress-demo progress{accent-color:var(--sol-progress-fill);}
.sol-record-cards,.sol-record-list{min-width:0;grid-template-columns:minmax(0,1fr);}
.sol-record-cards>li,.sol-mini-list>li{min-width:0;}
.sol-mini-list:not(.cards){min-width:0;grid-template-columns:minmax(0,1fr);}

/* Nonmodal time panel; direct HH:mm input remains available. */
.sol-time-entry{display:flex;gap:var(--sol-space-2);min-width:0;align-items:start;}.sol-time-entry>.sol-input{min-width:0;flex:1;}.sol-time-entry>.sol-button{height:var(--sol-control-height);flex:none;white-space:nowrap;}
.sol-time-panel{position:fixed;z-index:var(--sol-layer-floating);width:min(320px,calc(100% - 16px));max-height:calc(100dvh - 16px);overflow:auto;background:var(--sol-color-surface);color:var(--sol-color-text);border:1px solid var(--sol-color-control-border);border-radius:var(--sol-radius-floating);box-shadow:var(--sol-elevation-floating);padding:var(--sol-space-4);}.sol-time-panel h3{font-size:var(--sol-text-md);margin:0;}.sol-time-panel .row-between{align-items:center;margin-bottom:var(--sol-space-3);}.sol-time-panel .sol-time-options{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
#summary-errors ul{margin-block:var(--sol-space-2);padding-left:24px;}#summary-errors a{color:var(--sol-color-danger);text-underline-offset:3px;}

/* Give focus outlines breathing room before time help and the completion action. */
.sol-time-panel .sol-time-options {padding-block:var(--sol-space-1);}
.sol-time-panel .sol-time-options+.sol-hint {margin-block:var(--sol-space-3);}
.sol-time-panel .sol-time-options+.sol-button {margin-top:var(--sol-space-3);}
.sol-tree-disclosure {display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px;width:16px;}
.sol-tree [aria-expanded="false"]>.sol-tree-row .sol-tree-disclosure svg {transform:rotate(-90deg);}
.sol-tree-state {display:none;}
.sol-tree [aria-selected="true"]>.sol-tree-row::after {content:'✓';margin-inline-start:auto;}
.sol-data-toolbar {margin-bottom:var(--sol-space-3);}
.sol-data-footer {justify-content:flex-start;}
@container(min-width:431px) and (max-width:600px){.sol-data-footer{display:flex;}}
@media(min-width:441px) and (max-width:680px){.sol-data-footer{display:flex;}}

/* Shared bilingual heading group: title and eyebrow stay together on every surface. */
.sol-surface-heading {display:grid;gap:var(--sol-space-1);min-width:0;}
.sol-surface-heading>:is(h2,h3,h4,p,span) {margin:0;}
.sol-surface-heading>.eyebrow {font-size:var(--sol-text-xs);line-height:1.5;color:var(--sol-color-muted);letter-spacing:.12em;}
.sol-side-panel-head {align-items:flex-start;margin-bottom:var(--sol-space-4);}
.sol-tree,.sol-tree [role=treeitem] {min-width:0;}
.sol-tree [role=group] {margin:4px 0 12px 20px;padding-inline-start:10px;border-inline-start:1px solid var(--sol-color-border);}
.sol-tree-row {flex-wrap:nowrap;}
.sol-tree-disclosure {order:2;margin-inline-start:auto;}
.sol-tree [aria-selected="true"]>.sol-tree-row::after {content:none;}