/* Shared primitives for the standalone website. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
a { color: var(--accent-strong); }
img, svg { max-width: 100%; }
.hidden, [hidden] { display: none !important; }
.panel { min-width: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; }
.section-head > div { min-width: 0; }
.section-head h2, .section-head h3 { margin: 0; }
.field { display: grid; min-width: 0; }
.field input, .field select, .field textarea { width: 100%; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions, .toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.full { grid-column: 1 / -1; }
.auth-toolbar { display: flex; align-items: center; }
.auth-session-badge { display: grid; gap: 2px; }
.auth-overlay { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: center; align-items: center; }
.auth-text { margin-bottom: 0; }
.auth-message.error { color: var(--danger, #b33b23); }
body.auth-locked .shell-header, body.auth-locked .alt-layout { pointer-events: none; user-select: none; }
.status-message { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); z-index: 60; max-width: min(600px, calc(100% - 32px)); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 10px; background: #234c3b; color: white; font-size: 13px; transition: opacity .15s, transform .15s; }
.status-message.visible { opacity: 1; transform: translate(-50%, 0); }
.status-message.error { background: #973b26; }
table { width: 100%; text-align: left; }
th, td { text-align: left; }
.table-wrap { overflow-x: auto; }
.code { font-family: Consolas, monospace; }
.pill-component { color: #547164; background: #edf4ef; }
.pill-semi { color: #426d88; background: #edf4f8; }
.pill-danger { color: #9d4636; background: #fceee8; }
.pill-muted { color: #657166; background: #f1f4ee; }
@media (max-width: 650px) { .form-grid { grid-template-columns: 1fr; } }