/* Shared monochrome tokens. Native Liquid Glass is not a web API:
   these materials follow Apple's control/content separation in CSS. */
:root {
  --paper:#fff; --ink:#171717; --muted:#68686b; --line:#e7e7e9; --wash:#f4f4f5;
  --surface:#f6f6f7; --surface-raised:#fff; --accent:#b84427; --accent-soft:#fbefeb;
  --text-primary:var(--ink); --text-secondary:var(--muted);
  --radius-sm:12px; --radius-md:22px; --radius-lg:32px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px;
  --type-caption:.8125rem; --type-small:.9375rem; --type-body:1rem; --type-title:1.625rem;
  --nav-height:76px; --nav-gap:12px;
  --glass-fill:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.88);
  --glass-shadow:0 8px 32px #0000000d,0 1px 5px #00000008,inset 0 1px 0 #ffffffed,inset 0 -1px 0 #0000000b;
  color:var(--ink); background:var(--paper); color-scheme:light;
}
body { background:var(--paper); color:var(--ink); letter-spacing:-.015em; }
h1,h2,h3 { letter-spacing:-.04em; }
h1 { font-weight:750; }
p { line-height:1.7; }
:where(button,a,input,select,textarea):focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
/* The route/skip-link focus target is a landmark, not an interactive control.
   Safari otherwise outlines the entire page in blue, including behind the bars. */
main[tabindex="-1"]:focus { outline:none; }
/* Solid fallback first; effects progressively enhance supported browsers. */
.liquid-glass { position:relative; isolation:isolate; background:#fafafa; border:1px solid #e4e4e7; box-shadow:var(--glass-shadow); }
.liquid-glass::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; background:radial-gradient(ellipse at var(--glass-x,25%) var(--glass-y,0%),#ffffffb0,transparent 64%); }
.liquid-glass::after { content:''; position:absolute; inset:0; border-radius:inherit; border:1px solid #ffffffb3; pointer-events:none; z-index:-1; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .liquid-glass { background:linear-gradient(135deg,#ffffff70,#ffffff10 45%,#ffffff40),var(--glass-fill); border-color:var(--glass-line); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3); }
}
/* A floating control layer, shared by every route. */
.topbar { height:76px; padding:0 24px; border-radius:0 0 24px 24px; position:sticky; top:0; z-index:15; border-top:0; border-left:0; border-right:0; }
.topbar:not(.detailbar) { max-width:1120px; border-bottom:1px solid #ffffff99; }
.detailbar { max-width:680px; }
.topbar .brand,.club-header .brand { display:flex; align-items:center; gap:7px; flex-shrink:0; white-space:nowrap; font-family:Arial,Helvetica,sans-serif; font-weight:850; font-size:1.3rem; letter-spacing:-.06em; }
.topbar .brand img,.club-header .brand img { width:31px; height:38px; object-fit:contain; }
.icon-button { border-radius:50%; }
.detailbar .bar-title { font-size:var(--type-small); font-weight:600; }
.page { padding-top:36px; padding-bottom:calc(var(--nav-height) + var(--nav-gap) + 56px + env(safe-area-inset-bottom)); }
.page.has-composer { padding-bottom:calc(var(--nav-height) + var(--nav-gap) + 156px + env(safe-area-inset-bottom)); }
.bottom-nav { position:fixed; z-index:20; bottom:calc(var(--nav-gap) + env(safe-area-inset-bottom)); left:12px; right:12px; max-width:510px; margin:auto; padding:7px; border-radius:30px; gap:2px; grid-template-columns:repeat(5,minmax(0,1fr)); --glass-fill:rgba(255,255,255,.72); }
.bottom-nav a { position:relative; min-height:60px; gap:4px; color:#434347; font-size:.6875rem; border-radius:23px; z-index:1; }
.bottom-nav a>svg { width:21px; height:21px; }
.bottom-nav a[aria-current=page] { color:var(--ink); font-weight:700; background:linear-gradient(145deg,#ffffffdc,#ebebed80); box-shadow:0 2px 7px #0000000b,inset 0 1px 1px #fff; }
.bottom-nav a[aria-current=page]::after { content:''; width:4px; height:4px; background:var(--accent); border-radius:50%; position:absolute; bottom:3px; left:calc(50% - 2px); }
.home-nav-icon { background:none; width:24px; height:24px; margin:0; border-radius:0; }
.home-nav-icon svg { width:22px; height:22px; }
.bottom-nav a[aria-current=page] .home-nav-icon { background:none; color:var(--accent); }
.bottom-nav a[aria-current=page]>svg { stroke-width:2; }
.composer { position:fixed; bottom:calc(var(--nav-height) + var(--nav-gap) + 12px + env(safe-area-inset-bottom)); left:12px; right:12px; max-width:620px; padding:10px 12px; border-radius:26px; z-index:19; }
.composer form { border:0; border-radius:18px; padding:2px 2px 2px 10px; background:#ffffff65; }
.composer .icon-button { background:var(--ink); color:#fff; min-width:42px; min-height:42px; }
.composer input { font-size:1rem; }
.composer input::placeholder { color:#55555a; }
.primary,.secondary { min-height:52px; padding:14px 20px; border-radius:16px; font-size:var(--type-small); font-weight:600; }
.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
.secondary { background:var(--surface); border-color:transparent; }
.input { border-radius:14px; border-color:var(--line); background:var(--surface); }
.title-input,.body-input { background:none; border-radius:0; }
.choices { padding:5px; border-radius:17px; background:var(--wash); }
.choices button { border:0; border-radius:12px; }
.choices button[aria-pressed=true] { background:#fff; color:var(--ink); box-shadow:0 2px 7px #0000000e; }
.soft { background:var(--surface); border-radius:18px; }
.cover { border-radius:24px; background:var(--surface); }
.mode { border:0; background:var(--wash); border-radius:8px; padding:5px 8px; }
.topic-tabs { gap:8px; border:0; padding:5px; background:var(--wash); border-radius:18px; }
.topic-tabs button { flex:1; min-height:44px; border:0; padding:10px 7px; border-radius:13px; }
.topic-tabs button[aria-pressed=true] { background:#fff; box-shadow:0 2px 5px #0000000a; }
.toast { background:#252525ed; color:#fff; border:1px solid #ffffff30; border-radius:18px; box-shadow:0 8px 28px #0002; bottom:calc(var(--nav-height) + 105px + env(safe-area-inset-bottom)); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
dialog.liquid-glass { position:fixed; margin:auto; border-radius:26px; padding:24px; --glass-fill:rgba(255,255,255,.86); }
dialog::backdrop { background:#00000040; }
dialog button { border-color:#0000000c; border-radius:10px; padding:10px 8px; }
.progress .done { background:var(--ink); }
@media(hover:hover) {
  .icon-button:hover { background:#00000007; }
  .composer .icon-button:hover,.primary:hover { background:#333; }
  .bottom-nav a:hover { background:#ffffff65; }
  dialog button:hover { background:#00000005; }
}
@media(min-width:800px) {
  :root { --nav-gap:20px; }
  .bottom-nav { padding:7px; max-width:510px; border-radius:30px; }
  .composer { border-radius:26px; }
}
@media(max-width:600px) {
  .topbar { height:68px; padding:0 20px; }
  .page { padding-top:28px; }
  .bottom-nav { padding:6px; border-radius:27px; }
  .bottom-nav a { border-radius:21px; min-height:58px; }
}
@media(prefers-reduced-motion:no-preference) {
  .bottom-nav a,.icon-button,.primary,.secondary { transition:background .18s ease,box-shadow .18s ease,transform .22s cubic-bezier(.2,.8,.2,1); }
  .bottom-nav a:active,.icon-button:active,.primary:active,.secondary:active { transform:scale(.95); }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .liquid-glass { background:#fff!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; border-color:#777!important; }
  .liquid-glass::before,.liquid-glass::after { display:none; }
  .toast { background:#171717; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .bottom-nav a[aria-current=page] { background:#ededed; outline:1px solid currentColor; outline-offset:-2px; }
}
@media(forced-colors:active) {
  .liquid-glass { background:Canvas!important; color:CanvasText; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; border:1px solid CanvasText; }
  .liquid-glass::before,.liquid-glass::after { display:none; }
  .bottom-nav a[aria-current=page] { outline:2px solid Highlight; }
}