/* Brohode 2.0 — framework-independent, opt-in bh-* components. Load tokens.css first. */
.bh-ui { font:400 16px/1.625 var(--bh-font-sans); color:var(--bh-text); background:var(--bh-bg); }
.bh-ui *, .bh-ui *::before, .bh-ui *::after { box-sizing:border-box; }
.bh-ui [hidden] { display:none!important; }
.bh-ui :is(button,input,select,textarea) { font:inherit; }
.bh-ui :focus-visible { outline:3px solid var(--bh-focus); outline-offset:3px; }
.bh-ui a:not(.bh-btn) { color:var(--bh-accent); text-underline-offset:3px; }
.bh-ui ::selection { color:var(--bh-on-accent-soft); background:var(--bh-accent-soft); }
.bh-ui .bh-muted { color:var(--bh-text-muted); }
.bh-ui .bh-small { font-size:13px; line-height:1.6; }
.bh-ui .bh-mono { font-family:var(--bh-font-mono); font-size:13px; }
.bh-icon { width:20px; height:20px; flex:none; vertical-align:middle; }
.bh-mark { width:40px; height:40px; flex:none; }
.bh-wordmark { display:block; width:190px; max-width:100%; height:auto; }
.bh-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--bh-control-height); border:1px solid transparent; border-radius:var(--bh-radius-control); padding:9px 16px; color:var(--bh-on-action); background:var(--bh-action); font-size:14px!important; font-weight:600!important; line-height:1.3!important; text-align:center; text-decoration:none!important; cursor:pointer; transition:background var(--bh-duration-fast) var(--bh-ease),border-color var(--bh-duration-fast) var(--bh-ease); }
.bh-btn:hover { background:var(--bh-action-hover); }
.bh-btn:active { background:var(--bh-action-pressed); }
.bh-btn--secondary { background:transparent; color:var(--bh-text); border-color:var(--bh-border-strong); }
.bh-btn--secondary:hover,.bh-btn--ghost:hover { background:var(--bh-surface-hover); }
.bh-btn--secondary:active,.bh-btn--ghost:active { background:var(--bh-surface-subtle); }
.bh-btn--ghost { color:var(--bh-text); background:transparent; }
.bh-btn--accent { background:var(--bh-accent); color:var(--bh-on-accent); }
.bh-btn--accent:hover { background:var(--bh-accent-hover); }
.bh-btn--accent:active { background:var(--bh-accent-pressed); }
.bh-btn--danger { background:var(--bh-danger-bg); color:var(--bh-danger); border-color:var(--bh-danger); }
.bh-btn--danger:hover { background:var(--bh-surface-hover); }
.bh-btn--compact { min-height:36px; padding:6px 12px; }
.bh-btn--touch { min-height:48px; }
.bh-btn--icon { width:44px; padding:0; }
.bh-btn:disabled { cursor:not-allowed; color:var(--bh-disabled); background:var(--bh-disabled-bg); border-color:var(--bh-border); }
.bh-btn[aria-busy="true"] { cursor:progress; }
.bh-btn[data-demo-focus] { outline:3px solid var(--bh-focus); outline-offset:3px; }
.bh-spinner { width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:bh-spin .8s linear infinite; }
@keyframes bh-spin { to { transform:rotate(360deg); } }
.bh-card { padding:24px; border:1px solid var(--bh-border); border-radius:var(--bh-radius-card); background:var(--bh-surface); color:var(--bh-text); }
.bh-card h3 { margin:0 0 8px; font-size:18px; line-height:1.4; }
.bh-card p { margin:0; color:var(--bh-text-secondary); }
.bh-field { display:grid; gap:7px; margin-bottom:18px; }
.bh-field label { font-size:14px; font-weight:500; }
.bh-input { width:100%; min-height:44px; padding:10px 12px; font-size:16px!important; line-height:1.4; border:1px solid var(--bh-border-strong); border-radius:var(--bh-radius-control); color:var(--bh-text); background:var(--bh-surface); }
.bh-input::placeholder { color:var(--bh-text-muted); opacity:1; }
.bh-input[aria-invalid="true"] { border-color:var(--bh-danger); }
.bh-error { font-size:13px; color:var(--bh-danger); }
.bh-help { font-size:13px; color:var(--bh-text-muted); }
.bh-check { display:flex; align-items:flex-start; gap:10px; min-height:44px; font-size:14px; cursor:pointer; }
.bh-check input { width:20px; height:20px; margin:2px 0 0; accent-color:var(--bh-accent); flex:none; }
.bh-badge { display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:3px 8px; border-radius:var(--bh-radius-badge); font-size:12px; font-weight:500; line-height:1.45; white-space:nowrap; color:var(--bh-neutral); background:var(--bh-neutral-bg); }
.bh-badge .bh-icon { width:14px; height:14px; }
.bh-badge[data-tone="success"],.bh-alert[data-tone="success"] { color:var(--bh-success); background:var(--bh-success-bg); }
.bh-badge[data-tone="warning"],.bh-alert[data-tone="warning"] { color:var(--bh-warning); background:var(--bh-warning-bg); }
.bh-badge[data-tone="danger"],.bh-alert[data-tone="danger"] { color:var(--bh-danger); background:var(--bh-danger-bg); }
.bh-badge[data-tone="info"],.bh-alert[data-tone="info"] { color:var(--bh-info); background:var(--bh-info-bg); }
.bh-alert { display:flex; align-items:flex-start; gap:12px; border-radius:var(--bh-radius-control); padding:14px 16px; font-size:14px; line-height:1.5; color:var(--bh-neutral); background:var(--bh-neutral-bg); }
.bh-alert .bh-icon { margin-top:1px; }
.bh-alert strong { display:block; font-weight:600; }
.bh-table-wrap { max-width:100%; overflow-x:auto; border:1px solid var(--bh-border); border-radius:var(--bh-radius-card); background:var(--bh-surface); }
.bh-table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; }
.bh-table caption { padding:16px; text-align:left; color:var(--bh-text-secondary); }
.bh-table th { padding:11px 16px; font-size:12px; font-weight:500; color:var(--bh-text-secondary); background:var(--bh-surface-subtle); }
.bh-table td { padding:14px 16px; border-top:1px solid var(--bh-border); vertical-align:middle; }
.bh-table tbody tr:hover { background:var(--bh-surface-hover); }
.bh-service { display:flex; flex-direction:column; gap:20px; text-decoration:none!important; color:var(--bh-text)!important; min-width:0; }
.bh-service:hover { border-color:var(--bh-border-strong); background:var(--bh-surface-hover); }
.bh-service-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bh-service-name { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:18px; font-weight:600; }
.bh-service p { font-size:14px; }
.bh-dialog { width:min(480px,calc(100% - 32px)); padding:28px; border:1px solid var(--bh-border); border-radius:var(--bh-radius-dialog); color:var(--bh-text); background:var(--bh-surface); }
.bh-dialog::backdrop { background:rgb(5 22 18 / .66); }
.bh-dialog h2 { font-size:24px; margin:0 0 12px; }
.bh-dialog p { color:var(--bh-text-secondary); }
.bh-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.bh-stack { display:grid; gap:16px; }
.bh-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.bh-photo { display:block; width:100%; height:auto; }
@media(max-width:600px) { .bh-grid { grid-template-columns:1fr; } .bh-card { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .bh-spinner { animation:none; } .bh-ui *, .bh-ui *::before, .bh-ui *::after { scroll-behavior:auto!important; transition-duration:0ms!important; } }
@media(forced-colors:active) { .bh-btn,.bh-input,.bh-badge { border:1px solid ButtonText; } .bh-ui :focus-visible { outline-color:Highlight; } .bh-spinner { border-color:CanvasText; border-right-color:transparent; } }