/* Shared components. Data and native form semantics stay in server HTML. */
* { box-sizing:border-box; }
body { margin:0; background:var(--color-bg); color:var(--color-text); font:var(--type-base)/var(--line-body) var(--font-sans); }
main { width:100%; max-width:var(--content-width); padding:var(--space-8) clamp(1rem,3vw,2rem) var(--space-12); margin-inline:auto; }
main, section, article, form, fieldset, .card { min-width:0; }
h1,h2,h3 { color:var(--color-text); line-height:var(--line-heading); overflow-wrap:anywhere; }
h1 { font-size:var(--type-h1); letter-spacing:-.035em; margin:var(--space-6) 0 var(--space-4); }
h2 { font-size:var(--type-h2); letter-spacing:-.02em; }
h3 { font-size:var(--type-h3); }
p,li,dd { overflow-wrap:anywhere; }
a { color:var(--color-accent); text-underline-offset:.2em; }
a:hover { text-decoration-thickness:2px; }
img,video,svg { max-width:100%; }
.lead,.field-hint,.muted { color:var(--color-muted); }
.lead { font-size:var(--type-lg); line-height:var(--line-body); max-width:65ch; }
.eyebrow,.kicker { color:var(--color-accent); font-size:var(--type-xs); font-weight:700; letter-spacing:.12em; }
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:var(--control-height); min-width:2.75rem; max-width:100%; border:1px solid var(--color-border); border-radius:var(--control-radius); padding:.65rem 1.1rem; background:var(--color-surface-raised); color:var(--color-text); font:600 var(--type-sm)/1.45 var(--font-sans); text-align:center; text-decoration:none; white-space:normal; overflow-wrap:anywhere; cursor:pointer; transition:background var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease); }
button:hover,.button:hover { background:var(--color-surface); border-color:var(--color-accent); }
button:active,.button:active { background:var(--color-surface-raised); }
.button--primary,button.primary,.profile-save { color:var(--color-on-accent); background:var(--color-accent); border-color:var(--color-accent); font-weight:700; }
.button--primary:hover,button.primary:hover,.profile-save:hover { color:var(--color-on-accent); background:var(--color-accent-hover); border-color:var(--color-accent-hover); }
.button--primary:active,button.primary:active,.profile-save:active { background:var(--color-accent-pressed); }
.button--quiet { background:transparent; border-color:transparent; }
.button--danger { background:var(--color-danger-bg); color:var(--color-danger); border-color:var(--color-danger); }
button[aria-pressed=true] { background:var(--color-accent); color:var(--color-on-accent); border-color:var(--color-accent); }
:root #theme-toggle,:root[data-theme=light] #theme-toggle { background:var(--color-surface-raised); color:var(--color-text); border-color:var(--color-border); }
button:disabled,.button[aria-disabled=true] { color:var(--color-muted); background:var(--color-surface); border-color:var(--color-divider); cursor:not-allowed; text-decoration:none; }
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) { width:100%; min-width:0; max-width:100%; min-height:var(--control-height); padding:.7rem .85rem; border:1px solid var(--color-border); border-radius:var(--control-radius); background:var(--color-input); color:var(--color-text); font:inherit; }
:where(input,select,textarea):hover:not(:disabled) { border-color:var(--color-accent); }
:where(input,select,textarea):disabled { color:var(--color-muted); background:var(--color-surface-raised); cursor:not-allowed; }
input::placeholder,textarea::placeholder { color:var(--color-muted); opacity:1; }
input[type=checkbox],input[type=radio] { accent-color:var(--color-accent); width:1.25rem; height:1.25rem; flex-shrink:0; }
label:has(>input[type=checkbox]),label:has(>input[type=radio]) { min-height:2.75rem; align-items:center; }
label { color:var(--color-text); }
.field { display:grid; gap:var(--space-2); }
.field-hint { font-size:var(--type-sm); margin:0; }
.field-error { color:var(--color-danger); font-size:var(--type-sm); }
[aria-invalid=true] { border-color:var(--color-danger)!important; border-width:2px!important; }
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid var(--color-focus); outline-offset:3px; }
.card,article,.profile-section,.profile-summary { background:var(--color-surface); color:var(--color-text); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:var(--card-padding); box-shadow:var(--shadow-card); backdrop-filter:none; }
article:hover { transform:none; border-color:var(--color-divider); }
article p,article li { color:var(--color-muted); }
.card--interactive:hover { border-color:var(--color-accent); }
.card--accent { border-color:var(--color-accent); }
.card--glass { background:var(--color-surface); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .card--glass { background:var(--color-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } }
.alert,.form-error { padding:var(--space-4); border:1px solid var(--color-border); border-left:4px solid var(--color-accent); border-radius:var(--radius-md); background:var(--color-surface-raised); color:var(--color-text); line-height:1.6; }
.alert--error,.form-error { background:var(--color-danger-bg); color:var(--color-danger); border-color:var(--color-danger); }
.alert--success { background:var(--color-success-bg); color:var(--color-success); border-color:var(--color-success); }
.alert--warning { background:var(--color-warning-bg); color:var(--color-warning); border-color:var(--color-warning); }
.alert a,.form-error a { color:inherit; }
.badge { display:inline-flex; gap:var(--space-2); align-items:center; padding:.3rem .65rem; margin:0; border:1px solid var(--color-border); border-radius:var(--radius-pill); font-size:var(--type-xs); color:var(--color-text); }
.nav { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.nav a { display:inline-flex; align-items:center; min-height:2.75rem; padding:.6rem .85rem; border-radius:var(--radius-sm); color:var(--color-muted); text-decoration:none; }
.nav a:hover { background:var(--color-surface-raised); color:var(--color-text); }
.nav a[aria-current=page] { background:var(--color-surface-raised); color:var(--color-accent); box-shadow:inset 0 -3px var(--color-accent); font-weight:700; }
.nav a:active { background:var(--color-surface); }
.nav a[aria-disabled=true] { color:var(--color-muted); cursor:not-allowed; text-decoration:line-through; }
.stack { display:grid; gap:var(--space-6); }
.cluster { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5); }
.table-scroll { width:100%; max-width:100%; overflow-x:auto; }
summary { min-height:2.75rem; padding-block:var(--space-3); color:var(--color-text); }
.empty-state { padding:var(--space-8); border:1px dashed var(--color-border); border-radius:var(--radius-lg); color:var(--color-muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:.5rem; left:.5rem; z-index:100; transform:translateY(-200%); padding:var(--space-3); background:var(--color-surface); }
.skip-link:focus { transform:none; }
[hidden] { display:none!important; }
@media(max-width:63.99rem) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:47.99rem) { .cards { grid-template-columns:1fr; } main { padding-top:var(--space-5); } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
@media(forced-colors:active) { button,.button,input,select,textarea,.card,.alert { border:1px solid CanvasText; } .nav a[aria-current=page] { outline:2px solid Highlight; } }