* { box-sizing: border-box; }
body { margin:0; color:hsl(var(--foreground)); background:hsl(var(--background)); font:var(--text-body, 400 1rem/1.6 system-ui,sans-serif); }
.community-header, footer { display:flex; align-items:center; gap:1.25rem; padding:1rem max(1.25rem,calc((100vw - 76rem)/2)); background:hsl(var(--card)); border-bottom:1px solid hsl(var(--border)); }
.brand { color:hsl(var(--foreground)); font-size:1.35rem; font-weight:850; text-decoration:none; }
nav { display:flex; flex:1; flex-wrap:wrap; gap:.9rem; }
a { color:hsl(var(--primary)); text-underline-offset:.2em; }
main { width:min(76rem,calc(100% - 2.5rem)); margin:0 auto 5rem; }
.community-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(18rem,.7fr); gap:2rem; align-items:end; padding:5rem 0 3rem; }
h1 { max-width:13ch; margin:0; font:800 clamp(3rem,8vw,6.5rem)/.94 var(--font-serif); }
.community-hero>div>p { max-width:42rem; color:hsl(var(--muted-foreground)); font-size:1.2rem; }
.status-card { display:grid; gap:.4rem; padding:1.4rem; border:1px solid hsl(var(--border)); border-top:5px solid hsl(var(--chart-3)); border-radius:var(--avds4-radius-card); background:hsl(var(--card)); }
.status-card.is-open { border-top-color:hsl(var(--chart-2)); }
.capability-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
article,.rules,.clubs,.reader-workspace { padding:1.4rem; border:1px solid hsl(var(--border)); border-radius:var(--avds4-radius-card); background:hsl(var(--card)); }
article h3,article p { margin-top:0; }
.clubs,.rules,.reader-workspace { margin-top:1rem; }
.club-list { display:grid; gap:.75rem; }
.club-card { padding:1rem; border-top:1px solid hsl(var(--border)); }
.policy-links,.data-actions,.workspace-heading { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.workspace-heading { justify-content:space-between; }
.workspace-heading h2 { margin-bottom:.2rem; }
.workspace-heading p { margin-top:0; color:hsl(var(--muted-foreground)); }
.workspace-login,button { display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem; padding:.65rem 1rem; border:1px solid hsl(var(--primary)); border-radius:var(--avds4-radius-control); color:hsl(var(--primary-foreground)); background:hsl(var(--primary)); font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
button:disabled { cursor:wait; opacity:.65; }
.community-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.community-form-grid form { display:grid; align-content:start; gap:.8rem; padding:1rem; border-top:3px solid hsl(var(--primary)); background:hsl(var(--muted)); }
.community-form-grid h3 { margin:0; }
.community-form-grid label { display:grid; gap:.3rem; font-weight:650; }
.community-form-grid .check-row { grid-template-columns:auto 1fr; align-items:center; }
input,select,textarea { width:100%; min-height:2.75rem; padding:.65rem .75rem; border:1px solid hsl(var(--input)); border-radius:var(--avds4-radius-control); color:hsl(var(--foreground)); background:hsl(var(--background)); font:inherit; }
textarea { min-height:7rem; resize:vertical; }
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid hsl(var(--ring)); outline-offset:2px; }
.data-actions { margin-top:1rem; }
.danger-action { color:hsl(var(--destructive-foreground)); background:hsl(var(--destructive)); border-color:hsl(var(--destructive)); }
.action-status { min-height:1.6em; font-weight:700; color:hsl(var(--status-success-text)); }
.action-status.is-error { color:hsl(var(--destructive)); }
[hidden] { display:none !important; }
footer { justify-content:space-between; border-top:1px solid hsl(var(--border)); border-bottom:0; }
@media (max-width:60rem) { .community-hero { grid-template-columns:1fr; } .capability-grid,.community-form-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:38rem) { .community-header { align-items:flex-start; flex-wrap:wrap; } .community-header nav { display:grid; flex:1 0 100%; grid-template-columns:repeat(2,minmax(0,1fr)); order:3; width:100%; overflow:visible; gap:.4rem; } .community-header nav a { display:flex; align-items:center; justify-content:center; min-height:2.75rem; padding:.35rem; text-align:center; white-space:normal; overflow-wrap:anywhere; } .capability-grid,.community-form-grid { grid-template-columns:1fr; } .workspace-heading { align-items:flex-start; } footer { align-items:flex-start; flex-direction:column; } }