/* Longwell components v1.0. Import tokens.css first. Native semantics and behavior are required. */
.lw-root { background: var(--lw-canvas); color: var(--lw-text); font-family: var(--lw-font-ui); font-size: var(--lw-text-base); font-weight: var(--lw-weight-regular); line-height: var(--lw-leading-body); -webkit-font-smoothing: antialiased; }
.lw-root *, .lw-root *::before, .lw-root *::after { box-sizing: border-box; }
.lw-root [hidden] { display: none !important; }
:where(.lw-root) :is(button, input, select, textarea) { font: inherit; }
.lw-root :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--lw-focus); outline-offset: 3px; }
.lw-root :is(a, button, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
.lw-root a { color: var(--lw-link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.lw-root a:hover { color: var(--lw-link-hover); }
.lw-root a:not([class]) { text-decoration-line: underline; }
.lw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.lw-skip-link { position: fixed; top: 1rem; left: 1rem; z-index: var(--lw-z-toast); padding: var(--lw-space-3) var(--lw-space-4); border-radius: var(--lw-radius-control); color: var(--lw-on-primary) !important; background: var(--lw-primary); transform: translateY(-200%); }
.lw-skip-link:focus { transform: translateY(0); }
.lw-container { width: min(calc(100% - 3rem), var(--lw-marketing-max)); margin-inline: auto; }
.lw-reading { max-width: var(--lw-reading-max); }
.lw-stack { display: flex; flex-direction: column; gap: var(--lw-stack-gap, 1.5rem); }
.lw-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lw-cluster-gap, 0.75rem); }
.lw-eyebrow { margin: 0 0 var(--lw-space-4); font-size: var(--lw-text-sm); font-weight: var(--lw-weight-semibold); line-height: 1.35; letter-spacing: 0.01em; }
.lw-display { margin: 0; max-width: 16ch; font-family: var(--lw-font-editorial); font-size: clamp(2.75rem, 5.6vw, 5rem); font-weight: var(--lw-weight-regular); line-height: 1.05; letter-spacing: -0.012em; text-wrap: balance; }
.lw-heading { margin: 0; font-family: var(--lw-font-ui); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: var(--lw-weight-semibold); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.lw-lead { max-width: 56ch; margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.25rem); line-height: 1.55; }
.lw-muted { color: var(--lw-text-muted); }
.lw-section { padding-block: clamp(3rem, 8vw, 6rem); }
.lw-divider { margin: 0; border: 0; border-block-start: 1px solid var(--lw-border-subtle); }
.lw-card { padding: var(--lw-space-6); background: var(--lw-surface); border: 1px solid var(--lw-border-subtle); border-radius: var(--lw-radius-card); }
.lw-card[data-elevated="true"] { box-shadow: var(--lw-shadow-card); }
.lw-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--lw-space-6); }
.lw-grid > * { grid-column: span var(--lw-span, 12); min-width: 0; }

/* Use <button> for actions and <a> for navigation. Avoid icon-only primary actions. */
.lw-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--lw-space-2); min-height: var(--lw-target); max-width: 100%; padding: 0.6875rem 1rem; border: 1px solid transparent; border-radius: var(--lw-radius-control); color: var(--lw-on-primary); background: var(--lw-primary); font-size: var(--lw-text-sm); font-weight: var(--lw-weight-semibold); line-height: 1.35; text-align: center; text-decoration: none; cursor: pointer; transition: background var(--lw-duration-fast) var(--lw-ease-standard), border-color var(--lw-duration-fast) var(--lw-ease-standard), box-shadow var(--lw-duration-fast) var(--lw-ease-standard); }
a.lw-button { color: var(--lw-on-primary); }
.lw-button:hover { background: var(--lw-primary-hover); color: var(--lw-on-primary); }
.lw-button[data-variant="secondary"] { color: var(--lw-text); background: var(--lw-surface); border-color: var(--lw-border); }
.lw-button[data-variant="secondary"]:hover { color: var(--lw-text); background: var(--lw-surface-subtle); }
.lw-button[data-variant="quiet"] { color: var(--lw-link); background: transparent; }
.lw-button[data-variant="quiet"]:hover { color: var(--lw-link); background: var(--lw-accent-wash); }
.lw-button[data-variant="destructive"] { color: var(--lw-danger-text); border-color: var(--lw-danger-text); background: var(--lw-danger-surface); }
.lw-button[data-variant="destructive"]:hover { box-shadow: inset 0 0 0 1px var(--lw-danger-text); }
.lw-button[data-size="large"] { min-height: 3rem; padding-inline: var(--lw-space-6); font-size: var(--lw-text-base); }
.lw-button[data-icon-only="true"] { width: 2.75rem; padding: var(--lw-space-2); flex-shrink: 0; }
.lw-button[aria-busy="true"] { cursor: progress; }
.lw-button:disabled, .lw-button[aria-disabled="true"] { color: var(--lw-text-muted); background: var(--lw-surface-subtle); border-color: var(--lw-border-subtle); cursor: not-allowed; box-shadow: none; }
.lw-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lw-icon[data-size="small"] { width: 1rem; height: 1rem; flex-basis: 1rem; }

/* Labels remain visible; placeholders provide examples only. */
.lw-field { display: grid; gap: var(--lw-space-1-5); min-width: 0; }
.lw-label { color: var(--lw-text); font-size: var(--lw-text-sm); font-weight: var(--lw-weight-semibold); line-height: 1.35; }
.lw-input, .lw-select, .lw-textarea { width: 100%; min-width: 0; min-height: var(--lw-target); padding: 0.6875rem 0.875rem; border: 1px solid var(--lw-border); border-radius: var(--lw-radius-control); background: var(--lw-surface); color: var(--lw-text); font-size: var(--lw-text-base); line-height: 1.4; }
.lw-textarea { min-height: 8rem; resize: vertical; }
.lw-select { padding-inline-end: var(--lw-space-8); }
.lw-input::placeholder, .lw-textarea::placeholder { color: var(--lw-text-muted); opacity: 1; }
.lw-input[aria-invalid="true"], .lw-select[aria-invalid="true"], .lw-textarea[aria-invalid="true"] { border-color: var(--lw-danger-text); box-shadow: inset 0 0 0 1px var(--lw-danger-text); }
.lw-input:disabled, .lw-select:disabled, .lw-textarea:disabled { background: var(--lw-surface-subtle); color: var(--lw-text-muted); cursor: not-allowed; }
.lw-input[readonly], .lw-textarea[readonly] { background: var(--lw-surface-subtle); }
.lw-help, .lw-error { margin: 0; font-size: var(--lw-text-sm); line-height: 1.45; }
.lw-help { color: var(--lw-text-muted); }
.lw-error { color: var(--lw-danger-text); }
.lw-check { display: flex; align-items: flex-start; gap: 0.625rem; min-height: var(--lw-target); padding-block: 0.625rem; font-size: var(--lw-text-sm); cursor: pointer; }
.lw-check input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; flex-shrink: 0; accent-color: var(--lw-primary); }
.lw-form-actions { display: flex; flex-wrap: wrap; gap: var(--lw-space-3); padding-block-start: var(--lw-space-3); }

/* Longwell status grammar: named work states, fixed marks, explicit visible labels.
   Actor identity and factual urgency are independent from work state. */
.lw-status, .lw-actor { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; max-width: 100%; padding: .3rem .6rem; border: 1px solid transparent; border-radius: var(--lw-radius-small); background: var(--lw-state-queued-surface); color: var(--lw-state-queued-text); font-size: var(--lw-text-xs); font-weight: var(--lw-weight-semibold); line-height: 1.5; white-space: normal; }
.lw-status::before { content: ""; display: inline-block; flex: 0 0 1rem; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: var(--lw-state-mark) center / contain no-repeat; mask: var(--lw-state-mark) center / contain no-repeat; }
.lw-status { --lw-state-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%225.5%22%2F%3E%3C%2Fsvg%3E"); }
.lw-status[data-state="queued"] { color: var(--lw-state-queued-text); background: var(--lw-state-queued-surface); --lw-state-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%225.5%22%2F%3E%3C%2Fsvg%3E"); }
.lw-status[data-state="running"], .lw-status[data-tone="info"] { color: var(--lw-state-progress-text); background: var(--lw-state-progress-surface); --lw-state-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202.5a5.5%205.5%200%201%201-5.5%205.5%22%2F%3E%3Cpath%20d%3D%22M2.5%208V4.5H6%22%2F%3E%3C%2Fsvg%3E"); }
.lw-status[data-state="waiting-partner"] { color: var(--lw-state-waiting-text); background: var(--lw-state-waiting-surface); --lw-state-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.5%203v10M10.5%203v10%22%2F%3E%3C%2Fsvg%3E"); }
.lw-status[data-state="human-review"] { color: var(--lw-state-review-text); background: var(--lw-state-review-surface); --lw-state-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%2210%22%20height%3D%2212%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M6%206h4M6%209h4%22%2F%3E%3C%2Fsvg%3E"); }
.lw-status[data-state="owner-decision"], .lw-status[data-tone="warning"] { color: var(--lw-state-decision-text); background: var(--lw-state-decision-surface); --lw-state-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2014V2h8l-2%203%202%203H4%22%2F%3E%3C%2Fsvg%3E"); }
.lw-status[data-state="completed"], .lw-status[data-tone="success"] { color: var(--lw-state-done-text); background: var(--lw-state-done-surface); --lw-state-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22m5%208%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }
.lw-status[data-state="blocked"] { color: var(--lw-state-blocked-text); background: var(--lw-state-blocked-surface); --lw-state-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M5%208h6%22%2F%3E%3C%2Fsvg%3E"); }
.lw-status[data-state="error"], .lw-status[data-tone="danger"] { color: var(--lw-state-error-text); background: var(--lw-state-error-surface); --lw-state-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22m6%206%204%204m0-4-4%204%22%2F%3E%3C%2Fsvg%3E"); }
.lw-status[data-state="completed"], .lw-status[data-tone="success"], .lw-status[data-state="blocked"] { border-color: currentColor; }
.lw-status[data-severity="error"] { color: var(--lw-state-error-text); background: var(--lw-state-error-surface); border-color: currentColor; }
.lw-actor, .lw-actor[data-kind] { color: var(--lw-neutral-text); background: var(--lw-neutral-surface); border-radius: var(--lw-radius-pill); }
.lw-actor .lw-icon { width: .875rem; height: .875rem; flex-basis: .875rem; }
.lw-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; padding: var(--lw-space-4); border: 1px solid currentColor; border-radius: var(--lw-radius-control); background: var(--lw-state-waiting-surface); color: var(--lw-state-waiting-text); font-size: var(--lw-text-sm); }
.lw-alert[data-tone="success"] { color: var(--lw-state-done-text); background: var(--lw-state-done-surface); }
.lw-alert[data-tone="info"] { color: var(--lw-state-progress-text); background: var(--lw-state-progress-surface); }
.lw-alert[data-tone="warning"] { color: var(--lw-state-decision-text); background: var(--lw-state-decision-surface); }
.lw-alert[data-tone="danger"], .lw-alert[data-severity="error"] { color: var(--lw-state-error-text); background: var(--lw-state-error-surface); }
.lw-alert strong, .lw-alert p { margin: 0; }
.lw-alert a { color: inherit; text-decoration: underline; }

/* Tabs require roving tabindex, selection semantics, and the corresponding panel behavior. */
.lw-tabs { display: flex; gap: var(--lw-space-1); overflow-x: auto; border-block-end: 1px solid var(--lw-border-subtle); scrollbar-width: thin; }
.lw-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--lw-space-2); flex: 0 0 auto; min-height: var(--lw-target); padding: var(--lw-space-3) var(--lw-space-4); border: 0; color: var(--lw-text-muted); background: transparent; font: inherit; font-size: var(--lw-text-sm); font-weight: var(--lw-weight-medium); cursor: pointer; }
.lw-tab:hover { color: var(--lw-text); background: var(--lw-surface-subtle); }
.lw-tab[aria-selected="true"] { color: var(--lw-link); font-weight: var(--lw-weight-bold); }
.lw-tab[aria-selected="true"]::after { content: ""; position: absolute; bottom: 0; inset-inline: 1rem; height: 3px; border-radius: 3px 3px 0 0; background: var(--lw-link); }
.lw-tabpanel { padding-block: var(--lw-space-6); }

/* Operational surfaces: actor, state, next action, and provenance are separate fields. */
.lw-task-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--lw-border-subtle); border-radius: var(--lw-radius-card); overflow: clip; background: var(--lw-surface); }
.lw-task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--lw-space-4) var(--lw-space-6); padding: var(--lw-space-4) var(--lw-space-5); }
.lw-task-row + .lw-task-row { border-block-start: 1px solid var(--lw-border-subtle); }
.lw-task-title { margin: 0 0 var(--lw-space-1-5); font-size: var(--lw-text-base); font-weight: var(--lw-weight-semibold); line-height: 1.4; }
.lw-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lw-space-2) var(--lw-space-3); color: var(--lw-text-muted); font-size: var(--lw-text-sm); }
.lw-task-next { margin: var(--lw-space-2) 0 0; font-size: var(--lw-text-sm); }
.lw-task-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lw-space-2); }
.lw-provenance { margin: 0; color: var(--lw-text-muted); font-size: var(--lw-text-sm); line-height: 1.5; }
.lw-timeline { display: grid; gap: var(--lw-space-5); margin: 0; padding-inline-start: var(--lw-space-6); }
.lw-timeline li { padding-inline-start: var(--lw-space-1-5); }
.lw-timeline time { display: block; margin-block-end: var(--lw-space-1); color: var(--lw-text-muted); font-size: var(--lw-text-sm); }
.lw-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--lw-border-subtle); border-radius: var(--lw-radius-card); background: var(--lw-surface); overscroll-behavior-inline: contain; }
.lw-table { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: var(--lw-text-sm); text-align: start; }
.lw-table caption { padding: var(--lw-space-4); text-align: start; font-size: var(--lw-text-base); font-weight: var(--lw-weight-semibold); }
.lw-table :is(th, td) { padding: 0.875rem 1rem; border-block-end: 1px solid var(--lw-border-subtle); vertical-align: middle; text-align: start; }
.lw-table thead th { background: var(--lw-surface-subtle); color: var(--lw-text-muted); font-size: var(--lw-text-xs); font-weight: var(--lw-weight-semibold); line-height: 1.5; }
.lw-table tbody tr:last-child > * { border-block-end: 0; }
.lw-table tbody tr:hover { background: var(--lw-surface-subtle); }
.lw-table [data-numeric="true"] { text-align: end; font-variant-numeric: tabular-nums; }
.lw-table th button { display: inline-flex; align-items: center; gap: var(--lw-space-1-5); min-height: var(--lw-target); padding: 0; border: 0; color: inherit; background: none; font: inherit; cursor: pointer; }
.lw-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lw-space-4); margin-block-start: var(--lw-space-4); font-size: var(--lw-text-sm); }
.lw-empty { display: grid; justify-items: start; gap: var(--lw-space-3); padding: clamp(1.5rem, 4vw, 3rem); border: 1px dashed var(--lw-border); border-radius: var(--lw-radius-card); background: var(--lw-surface); }
.lw-empty h3, .lw-empty p { margin: 0; }
.lw-empty p { max-width: 52ch; color: var(--lw-text-muted); font-size: var(--lw-text-sm); }

/* Prefer native <dialog>. Application code manages open, close, focus return, and scroll lock. */
.lw-dialog { width: min(calc(100vw - 2rem), 36rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--lw-border); border-radius: var(--lw-radius-card); color: var(--lw-text); background: var(--lw-surface); box-shadow: var(--lw-shadow-overlay); }
.lw-dialog::backdrop { background: rgb(10 17 29 / 0.56); }
.lw-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lw-space-4); padding: var(--lw-space-6) var(--lw-space-6) 0; }
.lw-dialog-title { margin: 0; font-size: var(--lw-text-2xl); font-weight: var(--lw-weight-semibold); line-height: 1.25; letter-spacing: -0.02em; }
.lw-dialog-body { padding: var(--lw-space-6); }
.lw-dialog-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--lw-space-3); padding: 0 var(--lw-space-6) var(--lw-space-6); }
.lw-toast-region { position: fixed; z-index: var(--lw-z-toast); inset-inline-end: 1.5rem; inset-block-end: 1.5rem; display: grid; gap: var(--lw-space-3); width: min(25rem, calc(100vw - 3rem)); }
.lw-toast { display: flex; align-items: flex-start; gap: var(--lw-space-3); padding: var(--lw-space-4); border: 1px solid var(--lw-border); border-radius: var(--lw-radius-control); background: var(--lw-surface); color: var(--lw-text); box-shadow: var(--lw-shadow-overlay); font-size: var(--lw-text-sm); }
.lw-toast-content { flex: 1; min-width: 0; }
.lw-toast-content p { margin: 0; }
.lw-toast-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lw-space-2); margin-block-start: var(--lw-space-2); }
.lw-skeleton { min-height: 1rem; border-radius: var(--lw-radius-small); background: var(--lw-surface-subtle); }
.lw-progress { width: 100%; height: 0.5rem; border: 0; border-radius: var(--lw-radius-pill); accent-color: var(--lw-primary); }

/* 12-column website grid / 8-column tablet / 4-column phone. No separate phone design language. */
@media (min-width: 60rem) { .lw-grid > [data-span="4"] { --lw-span: 4; } .lw-grid > [data-span="6"] { --lw-span: 6; } .lw-grid > [data-span="8"] { --lw-span: 8; } }
@media (min-width: 40rem) and (max-width: 59.999rem) { .lw-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .lw-grid > * { grid-column: span 8; } .lw-grid > [data-span="4"] { grid-column: span 4; } }
@media (max-width: 39.999rem) {
  .lw-container { width: calc(100% - 2rem); }
  .lw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lw-space-4); }
  .lw-grid > * { grid-column: span 4; }
  .lw-card { padding: var(--lw-space-5); }
  .lw-task-row { grid-template-columns: minmax(0, 1fr); padding: var(--lw-space-4); }
  .lw-task-actions { justify-content: flex-start; }
  .lw-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .lw-dialog-header { padding: var(--lw-space-5) var(--lw-space-5) 0; }
  .lw-dialog-body { padding: var(--lw-space-5); }
  .lw-dialog-footer { padding: 0 var(--lw-space-5) var(--lw-space-5); }
  .lw-toast-region { inset: auto 1rem 1rem; width: auto; }
}
@media (pointer: coarse) { .lw-root :is(button, [role="button"], input, select), .lw-tab { min-height: var(--lw-target); } }
@media (prefers-reduced-motion: reduce) { .lw-root *, .lw-root *::before, .lw-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  .lw-button, .lw-status, .lw-actor, .lw-card, .lw-toast, .lw-dialog { border: 1px solid CanvasText; }
  .lw-status::before { background: CanvasText; forced-color-adjust: none; }
  .lw-tab[aria-selected="true"]::after { background: Highlight; }
  .lw-root :focus-visible { outline: 3px solid Highlight; }
}

/* From Longwell tokens.css: theme-independent reduced-motion override. */
@media (prefers-reduced-motion: reduce) {
  :root { --lw-duration-fast: 0ms; --lw-duration-standard: 0ms; --lw-duration-deliberate: 0ms; }
  html { scroll-behavior: auto; }
}

/* Review fixes, 2026-10-21 */
/* Badges whose surface matches the ground get a hairline so they keep their shape (queued, in progress). */
.lw-status[data-state="queued"], .lw-status[data-state="running"], .lw-status[data-tone="info"] { border-color: var(--lw-border-subtle); }
/* Operator review gets its own outline token, used on the dark review field. */
.lw-status[data-state="human-review"] { border-color: var(--lw-state-review-border); }
/* Progress bar painted explicitly; accent-color alone falls back to the browser default in some engines. */
.lw-progress { -webkit-appearance: none; appearance: none; background: var(--lw-surface-subtle); overflow: hidden; }
.lw-progress::-webkit-progress-bar { background: var(--lw-surface-subtle); border-radius: var(--lw-radius-pill); }
.lw-progress::-webkit-progress-value { background: var(--lw-primary); border-radius: var(--lw-radius-pill); }
.lw-progress::-moz-progress-bar { background: var(--lw-primary); border-radius: var(--lw-radius-pill); }
/* Tabs: reserve the bold width so selecting a tab doesn't shift the row. Add data-label="<same text>" to each tab. */
.lw-tab[data-label] { flex-direction: column; row-gap: 0; }
.lw-tab[data-label]::before { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: var(--lw-weight-bold); }
.lw-status[data-state="owner-decision"], .lw-status[data-tone="warning"] { border-color: var(--lw-palette-amber-edge); }