/* Bohío components. Import tokens.css first. All classes are scoped with bh-. */
.bh-system { margin: 0; background: var(--bh-surface-canvas); color: var(--bh-text-primary); font: 400 var(--bh-type-body)/var(--bh-leading-body) var(--bh-font-sans); -webkit-font-smoothing: antialiased; }
.bh-system *, .bh-system *::before, .bh-system *::after { box-sizing: border-box; }
.bh-system [hidden] { display: none !important; }
.bh-system img { display: block; max-width: 100%; height: auto; }
.bh-theme-warm { --bh-surface-inverse: var(--bh-color-olive); }
.bh-system :where(button, input, select) { font: inherit; }
.bh-system button { cursor: pointer; }
.bh-system a { color: inherit; }
.bh-system :focus-visible { outline: 3px solid var(--bh-action-primary); outline-offset: 4px; box-shadow: 0 0 0 4px var(--bh-color-cream); }
.bh-system h1, .bh-system h2, .bh-system h3, .bh-system p, .bh-system figure { margin: 0; }
.bh-display, .bh-heading, .bh-title { font-family: var(--bh-font-sans); font-weight: 700; text-wrap: balance; }
.bh-display { font-size: var(--bh-type-display); line-height: var(--bh-leading-display); letter-spacing: var(--bh-tracking-display); }
.bh-heading { font-size: var(--bh-type-heading); line-height: var(--bh-leading-heading); letter-spacing: var(--bh-tracking-heading); }
.bh-title { font-size: var(--bh-type-title); line-height: var(--bh-leading-heading); letter-spacing: var(--bh-tracking-heading); }
.bh-emphasis { font-family: var(--bh-font-serif); font-weight: 400; font-style: italic; color: var(--bh-text-accent); }
.bh-label { font-size: var(--bh-type-label); font-weight: 700; line-height: 1.5; letter-spacing: var(--bh-tracking-label); text-transform: uppercase; }
.bh-small { font-size: var(--bh-type-small); }
.bh-muted { color: var(--bh-text-secondary); }
.bh-stack { display: flex; flex-direction: column; gap: var(--bh-space-4); }
.bh-row { display: flex; flex-wrap: wrap; gap: var(--bh-space-3); align-items: center; }
.bh-button { display: inline-flex; min-height: var(--bh-size-control); align-items: center; justify-content: center; gap: var(--bh-space-2); padding: var(--bh-space-3) var(--bh-space-6); border: var(--bh-border-strong-width) solid transparent; border-radius: var(--bh-radius-pill); background: var(--bh-action-primary); color: var(--bh-action-on-primary) !important; font-family: var(--bh-font-sans); font-size: var(--bh-type-small); line-height: 1.4; font-weight: 700; text-decoration: none; text-align: center; transition: background var(--bh-motion-fast), color var(--bh-motion-fast), transform var(--bh-motion-fast); }
.bh-button:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { background: var(--bh-action-hover); color: var(--bh-action-on-hover) !important; transform: translateY(-2px); }
.bh-button:active:not(:disabled) { transform: translateY(0); }
.bh-button--secondary { background: transparent; color: var(--bh-action-primary) !important; border-color: var(--bh-action-primary); }
.bh-button--sun { background: var(--bh-action-highlight); color: var(--bh-action-on-highlight) !important; }
.bh-button--small { min-height: var(--bh-size-control-small); padding: var(--bh-space-2) var(--bh-space-5); }
.bh-button:disabled, .bh-button[aria-disabled="true"] { background: var(--bh-color-line); color: var(--bh-color-muted) !important; cursor: not-allowed; border-color: transparent; }
.bh-button[aria-busy="true"] { cursor: progress; }
.bh-button[aria-busy="true"]::before { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bh-spin 800ms linear infinite; }
.bh-link { display: inline-flex; min-height: var(--bh-size-control-small); align-items: center; font-weight: 700; text-underline-offset: 5px; }
.bh-link:hover { text-decoration-thickness: 2px; }
.bh-icon { width: var(--bh-size-icon); height: var(--bh-size-icon); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.bh-mark { display: inline-block; width: var(--bh-mark-size, 48px); height: var(--bh-mark-size, 48px); flex-shrink: 0; background-color: currentColor; -webkit-mask: url('../assets/bohio-mark-mono-v1.svg') center / contain no-repeat; mask: url('../assets/bohio-mark-mono-v1.svg') center / contain no-repeat; mask-mode: alpha; }
.bh-badge { display: inline-flex; align-items: center; gap: var(--bh-space-2); width: fit-content; padding: var(--bh-space-2) var(--bh-space-3); border-radius: var(--bh-radius-pill); background: var(--bh-color-sun); color: var(--bh-color-night); font-size: var(--bh-type-label); line-height: 1.4; font-weight: 700; }
.bh-badge--quiet { background: var(--bh-color-sky); }
.bh-card { min-width: 0; background: var(--bh-surface-raised); border-radius: var(--bh-radius-card); padding: var(--bh-space-8); }
.bh-card--quiet { background: var(--bh-surface-quiet); }
.bh-card--night { background: var(--bh-surface-inverse); color: var(--bh-text-inverse); }
.bh-card--night .bh-emphasis { color: var(--bh-color-sun); }
.bh-field { display: grid; gap: var(--bh-space-2); }
.bh-field label { font-size: var(--bh-type-small); font-weight: 700; }
.bh-field input, .bh-field select { width: 100%; min-height: var(--bh-size-control); padding: var(--bh-space-3) var(--bh-space-4); border: var(--bh-border-strong-width) solid var(--bh-border-control); border-radius: var(--bh-radius-field); background: var(--bh-surface-raised); color: var(--bh-text-primary); font-size: max(16px, 1rem); }
.bh-field input::placeholder { color: var(--bh-text-secondary); opacity: 1; }
.bh-field input:disabled { background: var(--bh-color-paper); cursor: not-allowed; }
.bh-field [aria-invalid="true"] { border: 2px solid var(--bh-status-error); }
.bh-field .bh-error { color: var(--bh-status-error); font-size: var(--bh-type-small); }
.bh-alert { display: flex; gap: var(--bh-space-3); padding: var(--bh-space-4); border-radius: var(--bh-radius-field); background: var(--bh-status-info-surface); color: var(--bh-status-info); font-size: var(--bh-type-small); }
.bh-alert--success { background: var(--bh-status-success-surface); color: var(--bh-status-success); }
.bh-alert--error { background: var(--bh-status-error-surface); color: var(--bh-status-error); border: 1px solid currentColor; }
.bh-tabs { display: flex; gap: var(--bh-space-1); padding: var(--bh-space-2); border-radius: var(--bh-radius-pill); background: var(--bh-color-paper); overflow-x: auto; }
.bh-tabs [role="tab"] { flex: 1 0 auto; min-width: max-content; min-height: var(--bh-size-control-small); padding: var(--bh-space-2) var(--bh-space-3); border: 0; border-radius: var(--bh-radius-pill); background: transparent; color: var(--bh-color-night); font-size: var(--bh-type-small); }
.bh-tabs [aria-selected="true"] { background: var(--bh-action-primary); color: var(--bh-action-on-primary); font-weight: 700; }
.bh-accordion { border-bottom: 1px solid var(--bh-border-subtle); }
.bh-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-4); padding-block: var(--bh-space-5); min-height: var(--bh-size-control); cursor: pointer; list-style: none; font-weight: 600; }
.bh-accordion summary::-webkit-details-marker { display: none; }
.bh-accordion summary::after { content: '+'; display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--bh-color-sun); color: var(--bh-color-night); font-size: 22px; }
.bh-accordion[open] summary::after { content: '−'; }
.bh-accordion > p { padding-bottom: var(--bh-space-5); max-width: var(--bh-layout-measure); color: var(--bh-text-secondary); }
.bh-dialog { width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 0; padding: var(--bh-space-10); border-radius: var(--bh-radius-panel); background: var(--bh-surface-raised); color: var(--bh-text-primary); box-shadow: var(--bh-shadow-dialog); }
.bh-dialog::backdrop { background: rgba(32, 35, 47, .72); backdrop-filter: blur(7px); }
.bh-system:has(dialog[open]) { overflow: hidden; }
.bh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bh-skip { position: fixed; top: 12px; left: 12px; z-index: 100; transform: translateY(-180%); }
.bh-skip:focus { transform: translateY(0); }
@keyframes bh-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .bh-card { padding: var(--bh-space-6); } .bh-dialog { padding: var(--bh-space-6); } }
@media (prefers-reduced-motion: reduce) { .bh-system *, .bh-system *::before, .bh-system *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .bh-button:hover { transform: none !important; } }