/* Mirror of molda-local app/styles/base.css. Update both together; site-specific rules live in app.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: var(--text-md); line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: inherit; font-weight: 600; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-decoration: none; }
kbd { font-family: var(--font-ui); }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon { flex: none; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow { margin: 0 0 2px; color: var(--text-subtle); font-size: var(--text-xs); font-weight: 600; }

/* Buttons */
.btn, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast); }
.primary-button, .btn--primary { border-color: var(--accent-solid); background: var(--accent-solid); color: var(--on-accent); }
.primary-button:not(:disabled):not([aria-disabled="true"]):hover, .btn--primary:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--accent-solid-hover); background: var(--accent-solid-hover); }
.btn--secondary { border-color: var(--border-strong); background: var(--surface); box-shadow: var(--shadow-sm); }
.btn--secondary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--surface-hover); }
.btn--ghost { color: var(--text-muted); }
.btn--ghost:not(:disabled):not([aria-disabled="true"]):hover, .btn--ghost[aria-pressed="true"], .btn--ghost[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); }
.btn--danger { border-color: var(--danger); background: var(--danger); color: var(--text-inverse); }
.btn--danger:not(:disabled):hover { filter: brightness(.94); }
.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-2); font-size: var(--text-xs); }
.btn--icon { width: var(--control-h); padding: 0; }
.btn--sm.btn--icon { width: var(--control-h-sm); }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--surface-active); color: var(--text-muted); font-size: 11px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.btn--primary .count, .primary-button .count { background: rgba(255,255,255,.2); color: inherit; }
.btn-split { display: inline-flex; }
.btn-split > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-split > .btn:last-child { width: 30px; padding: 0; border-left-color: var(--border); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.kbd, .shortcut-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--text-subtle); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Status chips (header group) */
.status-group { display: inline-flex; align-items: center; gap: 2px; min-width: 0; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: var(--text-xs); font-weight: 550; white-space: nowrap; }
button.chip:hover, summary.chip:hover { background: var(--surface-hover); color: var(--text); }
.status-dot, .license-dot { flex: none; width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--text-subtle); box-shadow: 0 0 0 3px var(--surface-active); }
.status-dot--ok, .license-dot.active, [data-ready="true"] > .license-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.status-dot--warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.status-dot--accent { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--surface-active); color: var(--text-muted); font-size: 11px; font-weight: 650; white-space: nowrap; }
.badge--accent { background: var(--accent-soft); color: var(--accent); }

/* Menus */
.menu-surface, .prompt-menu { padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-lg); font-size: var(--text-sm); }
.menu-item, .context-actions button, .context-actions a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 0 var(--space-2) 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font-size: var(--text-sm); text-align: left; white-space: nowrap; }
.menu-item .icon, .context-actions .icon { color: var(--text-subtle); }
.menu-item:not(:disabled):hover, .menu-item:focus-visible, .context-actions button:not(:disabled):not([aria-disabled="true"]):hover, .context-actions a:hover, .context-actions button:focus-visible { outline: none; background: var(--surface-hover); }
.menu-item--danger, .menu-item--danger .icon, .context-actions .danger, .context-actions .danger .icon, .danger-link { color: var(--danger); }
.menu-item--danger:not(:disabled):hover, .context-actions .danger:not(:disabled):hover, .danger-link:hover { background: var(--danger-soft); }
.menu-hint, .context-actions kbd { flex: none; margin-left: auto; padding-left: var(--space-3); color: var(--text-subtle); font-size: var(--text-xs); font-weight: 500; }

/* Spinner */
.spinner, .rq-spinner, .render-spinner { flex: none; display: inline-block; width: 14px; height: 14px; border: 2px solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Dialog shell shared by native <dialog> modals */
dialog { color: var(--text); }
dialog::backdrop { background: var(--scrim); }
.dialog-close { flex: none; display: grid; place-items: center; width: var(--control-h); height: var(--control-h); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); }
.dialog-close:hover { background: var(--surface-hover); color: var(--text); }
.dialog-title { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; letter-spacing: -.01em; line-height: 1.25; }

/* Fields */
.field-input { width: 100%; min-height: var(--control-h); padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--text-sm); }
.field-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
select.field-input { appearance: none; padding-right: 30px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237f8998' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") no-repeat right 10px center; cursor: pointer; }

@media (pointer: coarse) {
  .btn, .primary-button, .chip { min-height: 44px; }
  .btn--icon { width: 44px; }
  .menu-item, .context-actions button, .context-actions a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}