/* Canonical native primitives; consumers use .wawi and data-ui. */
.wawi { font: var(--b04-text-md)/var(--b04-line) var(--b04-font); color: var(--b04-text); background: var(--b04-bg); margin: 0; }
.wawi *, .wawi *::before, .wawi *::after { box-sizing: border-box; }
.wawi :focus-visible { outline: 3px solid var(--b04-focus); outline-offset: 3px; }
.wawi [hidden] { display: none !important; }
.wawi h1, .wawi h2, .wawi h3, .wawi p { margin: 0; }
.wawi h1 { font-size: clamp(1.45rem, 2vw, 1.9rem); line-height: 1.2; letter-spacing: -.04em; font-weight: 650; }
.wawi h2 { font-size: 1rem; line-height: 1.4; font-weight: 650; }
.wawi h3 { font-size: .875rem; font-weight: 650; }
.wawi a { color: var(--b04-accent); text-underline-offset: 3px; }
.wawi a:hover { text-decoration-thickness: 2px; }
.wawi button, .wawi input, .wawi select, .wawi textarea { font: inherit; color: inherit; }
.wawi button { cursor: pointer; }
.wawi [data-ui="button"], .b04-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: var(--b04-target); padding: 9px 14px; border: 1px solid var(--b04-border);
  border-radius: 6px; background: var(--b04-surface); color: var(--b04-text);
  font-weight: 600; text-decoration: none; line-height: 1.3;
  white-space: nowrap; word-break: normal; overflow-wrap: normal; flex-shrink: 0;
}
.wawi [data-ui="button"]:hover:not(:disabled) { background: var(--b04-subtle); border-color: var(--b04-muted); }
.wawi [data-variant="primary"][data-ui="button"] { background: var(--b04-accent); border-color: var(--b04-accent); color: white; }
.wawi [data-variant="primary"][data-ui="button"]:hover:not(:disabled) { background: var(--b04-accent-hover); }
.wawi [data-variant="quiet"][data-ui="button"] { border-color: transparent; background: transparent; }
.wawi [data-variant="danger"][data-ui="button"] { color: var(--b04-danger); border-color: var(--b04-danger); }
.wawi [data-icon-only] { min-inline-size: var(--b04-target); min-block-size: var(--b04-target); padding: 10px; }
.wawi :disabled { cursor: not-allowed; background: var(--b04-subtle); color: var(--b04-muted); border-color: var(--b04-border); }
.wawi [data-ui="button"][aria-pressed="true"] { background: var(--b04-accent-soft); color: var(--b04-accent); border-color: var(--b04-accent); }
.b04-icon { display: inline-block; inline-size: 20px; block-size: 20px; flex: 0 0 20px; vertical-align: middle; }
.b04-field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.b04-field > label, .b04-field > .field-label { font-size: var(--b04-text-sm); font-weight: 600; }
.wawi [data-ui="field"], .wawi [data-ui="select"] { min-height: var(--b04-target); width: 100%; min-width: 0; padding: 9px 11px; background: var(--b04-surface); border: 1px solid #a6b8ad; border-radius: 5px; }
.wawi textarea[data-ui="field"] { resize: vertical; min-height: 86px; }
.wawi [data-ui="field"][readonly] { background: var(--b04-subtle); border-color: var(--b04-border); }
.wawi [aria-invalid="true"][data-ui="field"] { border: 2px solid var(--b04-danger); }
.wawi input[type="checkbox"], .wawi input[type="radio"] { width: 18px; height: 18px; accent-color: var(--b04-accent); }
.b04-check { min-height: var(--b04-target); display: inline-flex; gap: 10px; align-items: center; }
.b04-help { color: var(--b04-muted); font-size: var(--b04-text-sm); }
.b04-error { color: var(--b04-danger); font-size: var(--b04-text-sm); }
.b04-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.b04-actions[data-align="end"] { justify-content: flex-end; }
.b04-panel, [data-ui="panel"] { background: var(--b04-surface); border: 1px solid var(--b04-border); border-radius: var(--b04-radius); min-width: 0; }
.b04-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--b04-border); }
.b04-panel-body { padding: 20px; }
.b04-stack { display: grid; gap: 16px; min-width: 0; }
.b04-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.b04-divider { border: 0; border-top: 1px solid var(--b04-border); margin: 16px 0; }
.b04-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 8px; border-radius: 4px; font-size: .75rem; line-height: 1.4; font-weight: 600; background: var(--b04-subtle); color: var(--b04-muted); }
.b04-badge[data-tone="success"] { color: var(--b04-accent); background: var(--b04-accent-soft); }
.b04-badge[data-tone="warning"] { color: var(--b04-warning); background: var(--b04-warning-bg); }
.b04-badge[data-tone="error"] { color: var(--b04-danger); background: var(--b04-danger-bg); }
.b04-state { border: 1px solid var(--b04-border); border-inline-start: 3px solid var(--b04-muted); padding: 14px 16px; border-radius: 4px; background: var(--b04-surface); display: grid; gap: 8px; }
.b04-state[data-state="error"] { border-inline-start-color: var(--b04-danger); }
.b04-state[data-state="offline"], .b04-state[data-state="blocked"] { border-inline-start-color: var(--b04-warning); }
.b04-state [data-ui="loading"] { color: var(--b04-muted); }
.b04-eyebrow { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--b04-muted); }
.b04-mono { font-family: var(--b04-mono); font-size: .8125rem; }
.b04-muted { color: var(--b04-muted); }
.b04-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b04-skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px; background: var(--b04-surface); transform: translateY(-200%); }
.b04-skip:focus { transform: none; }
.wawi kbd { font: .6875rem var(--b04-mono); padding: 3px 5px; background: var(--b04-subtle); border: 1px solid var(--b04-border); border-radius: 4px; white-space: nowrap; }
.wawi fieldset { min-width: 0; border: 1px solid var(--b04-border); border-radius: 6px; margin: 0; padding: 16px; }
.wawi legend { padding: 0 6px; font-weight: 650; }
.wawi summary { cursor: pointer; min-height: var(--b04-target); padding: 11px 12px; }
.wawi details.b04-menu { position: relative; }
.b04-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.b04-menu > summary::-webkit-details-marker { display: none; }
.b04-menu-items { position: absolute; right: 0; top: 100%; z-index: 8; padding: 8px; border: 1px solid var(--b04-border); border-radius: 6px; background: var(--b04-surface); box-shadow: var(--b04-shadow); min-width: 200px; display: grid; gap: 4px; }
.b04-menu-items a { display: flex; align-items: center; gap: 8px; min-height: var(--b04-target); padding: 8px; text-decoration: none; }
.b04-menu-items a:hover { background: var(--b04-subtle); }
.b04-tabs [role="tablist"] { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--b04-border); padding: 0 12px; }
.b04-tabs [role="tab"] { flex-shrink: 0; padding: 13px 12px; min-height: var(--b04-target); background: transparent; border: 0; border-bottom: 2px solid transparent; font-weight: 600; color: var(--b04-muted); }
.b04-tabs [role="tab"][aria-selected="true"] { color: var(--b04-accent); border-bottom-color: var(--b04-accent); }
@media (max-width: 599px) { .b04-grid { grid-template-columns: minmax(0, 1fr); } .b04-panel-body { padding: 16px; } .b04-panel-head { padding: 14px 16px; } }
@media (prefers-reduced-motion: reduce) { .wawi *, .wawi *::before, .wawi *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .wawi [data-ui="button"], .b04-badge, .b04-state { border: 1px solid ButtonText; } .b04-tabs [aria-selected="true"] { border-bottom: 3px solid Highlight; } }