/* WRSM 2026 — Classical design system (light + derived dark theme).
   Tokens first; component classes reference only the tokens. */

@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20C0;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20C0;
}

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

:root {
  /* base roles — light value, dark value */
  --bg:      light-dark(#f3f2f2, #1d1c1a);
  --surface: light-dark(#eae9e9, #262523);
  --text:    light-dark(#201f1d, #ece9e4);
  --accent:  light-dark(#b68235, #d9a856);
  --divider: light-dark(color-mix(in srgb, #201f1d 16%, transparent),
                        color-mix(in srgb, #ece9e4 18%, transparent));

  /* neutral ramp (dark = inverted lightness) */
  --n-100: light-dark(#f8f4f4, #2d2b2b);
  --n-200: light-dark(#eae7e7, #444141);
  --n-300: light-dark(#d7d3d3, #605d5d);
  --n-800: light-dark(#444141, #eae7e7);
  --n-900: light-dark(#2d2b2b, #f8f4f4);

  /* accent ramp endpoints used by tags */
  --a-100: light-dark(#fff3e4, #3a270d);
  --a-800: light-dark(#5a3b0a, #facb8d);

  --ok:   light-dark(#3d8a63, #59b586);
  --warn: light-dark(#c98a1e, #e0a020);

  --font-heading: "Cormorant Garamond", Georgia, 'Times New Roman', serif;
  --font-heading-weight: 600;
  --font-body: "Lora", Georgia, serif;

  --space-1: 4.6px; --space-2: 9.2px; --space-3: 13.8px;
  --space-4: 18.4px; --space-6: 27.6px; --space-8: 36.8px;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px;

  --shadow-sm: light-dark(0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent), 0 0 0 1px #38352f);
  --shadow-md: light-dark(0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent), 0 0 0 1px #403c35);
  --shadow-lg: light-dark(0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent), 0 0 0 1px #4a463e);

  --tabbar-h: 58px;
  --topbar-h: 52px;

  /* Container widths per Bulma breakpoints: mobile <769, tablet ≥769 (fluid),
     desktop ≥1024 → 960px, widescreen ≥1216 → 1152px, fullhd ≥1408 → 1344px. */
  --container: 480px;
}
@media (min-width: 769px)  { :root { --container: calc(100vw - 64px); } }
@media (min-width: 1024px) { :root { --container: 960px; } }
@media (min-width: 1216px) { :root { --container: 1152px; } }
@media (min-width: 1408px) { :root { --container: 1344px; } }

/* ── base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* component display rules must not defeat the hidden attribute */
/* Typographic scale: rem-based, html font-size grows with the viewport so
   every component scales together on larger screens. */
html { height: 100%; font-size: 15px; }
@media (min-width: 1024px) { html { font-size: 16px; } }
@media (min-width: 1216px) { html { font-size: 17px; } }
@media (min-width: 1408px) { html { font-size: 18px; } }
body {
  margin: 0; min-height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.55;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1{font-size:2.8rem} h2{font-size:2.13rem} h3{font-size:1.67rem} h4{font-size:1.33rem} h5{font-size:1.07rem}
h6, .k { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  font-family: var(--font-body); font-weight: 600; margin: 0; }
p { margin: 0 0 var(--space-2); }
a { color: var(--accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.text-muted { color: color-mix(in srgb, var(--text) 55%, transparent); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: var(--space-2); }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.hr { height: 1px; border: 0; margin: var(--space-3) 0; background: var(--divider); }

/* ── app shell ────────────────────────────────────────────────────── */
#page {
  max-width: var(--container); margin-inline: auto; width: 100%;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-4));
}
.page-pad { padding: var(--space-3); }
.page-head { margin-bottom: var(--space-2); }
.page-title { margin: 0; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-2);
  padding: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-3) var(--space-2);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--divider);
  max-width: var(--container); margin-inline: auto;
  min-height: var(--topbar-h);
}
.topbar-brand {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.33rem;
  color: var(--text); text-decoration: none;
}
.app-version {
  font-size: .67rem; letter-spacing: .04em; align-self: flex-end; padding-bottom: 3px;
  color: color-mix(in srgb, var(--text) 45%, transparent);
}
.update-badge { cursor: pointer; font-weight: 600; }
.update-badge:hover { box-shadow: 0 0 0 1px var(--accent); }

.conn-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--warn); transition: background .3s;
}
[data-conn="online"] .conn-dot { background: var(--ok); }

.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
  display: flex; max-width: var(--container); margin-inline: auto;
  background: var(--surface); border-top: 1px solid var(--divider);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 0 6px; font-size: .73rem; text-decoration: none;
  color: color-mix(in srgb, var(--text) 60%, transparent);
  position: relative;
}
.tabbar a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.tab-icon { font-size: 1.13rem; line-height: 1; }
.tab-badge {
  position: absolute; top: 3px; right: calc(50% - 22px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: light-dark(#fff, #1d1c1a);
  font-size: .7rem; line-height: 16px; text-align: center; font-weight: 600;
}
.tab-badge.is-empty { display: none; }

.offline-banner {
  max-width: var(--container); margin-inline: auto;
  background: light-dark(#f4e8d4, #3a2f1a);
  border-bottom: 1px solid var(--accent);
  color: light-dark(#7a5a1e, #e0c188);
  padding: 6px var(--space-3); font-size: .83rem;
}
[data-conn="offline"] .needs-net { opacity: .45; pointer-events: none; }
.is-stale #page { opacity: .75; }

.sync-queue {
  max-width: var(--container); margin-inline: auto;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px dashed var(--divider);
}
.sync-queue ul { margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: .87rem; }
.sync-queue li::before { content: '⏳ '; }

/* ── buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: .93rem; line-height: 1.2; color: var(--text);
  background: transparent; border: 1px solid transparent;
  padding: calc(var(--space-2) * .95) var(--space-3);
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { color: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.btn-secondary { border-color: var(--divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.btn-ghost { color: var(--accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn-icon { width: 34px; height: 34px; padding: 0; font-size: 18px; }
.btn-block { width: 100%; }

/* ── forms ────────────────────────────────────────────────────────── */
.field > label {
  display: block; font-size: .8rem; margin-bottom: 5px;
  color: color-mix(in srgb, var(--text) 70%, transparent);
}
.input {
  width: 100%; min-height: 38px; padding: 6px 10px; font: inherit;
  font-size: .93rem; color: var(--text); caret-color: var(--accent);
  background: transparent;
  border: 1px solid var(--divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
.input:focus-visible { border-color: var(--accent); outline-offset: 0; }
textarea.input { min-height: 60px; resize: vertical; }
select.input { background: var(--bg); }
.select-narrow { width: auto; max-width: 40%; }
.form-error {
  background: light-dark(#f6e4e0, #3c2320); border: 1px solid light-dark(#c0604e, #d98673);
  color: light-dark(#8a3a2b, #e8a898);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: .9rem;
}
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .93rem; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--divider);
}
.radio:hover .dot { border-color: var(--accent); }
.radio input:checked + .dot {
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--accent); outline-offset: 2px; }

.seg {
  display: inline-flex; overflow: hidden; border: 1px solid var(--divider);
  border-radius: var(--radius-md); padding: 0; margin: 0;
}
.seg-opt, .seg > a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 12px; font-size: .87rem; cursor: pointer;
  color: var(--text); text-decoration: none; flex: 1;
}
.seg-opt + .seg-opt, .seg > a + a { border-left: 1px solid var(--divider); }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt:has(input:checked), .seg > a[aria-current="true"] {
  color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.group-tabs { display: flex; width: 100%; }

.switch {
  width: 40px; height: 22px; border-radius: 999px; border: 1.5px solid var(--divider);
  background: transparent; cursor: pointer; padding: 1px; display: inline-flex;
}
.switch .knob {
  width: 16px; height: 16px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 45%, transparent); transition: all .15s;
}
.switch[aria-checked="true"] { border-color: var(--accent); }
.switch[aria-checked="true"] .knob { background: var(--accent); margin-left: 18px; }

.file-input { font-size: .8rem; max-width: 45%; color: var(--text); }

/* ── cards & tags ─────────────────────────────────────────────────── */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md);
  background: transparent; border: 1px solid var(--divider);
}
.card.row { flex-direction: row; align-items: center; }
.card-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.13rem; line-height: 1.2; }
.card-body { margin: 0; font-size: .93rem; opacity: .85; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: .77rem;
  color: color-mix(in srgb, var(--text) 50%, transparent);
}
.card-photo { border-radius: var(--radius-sm); }
.elev-sm { box-shadow: var(--shadow-sm); }

.tag {
  display: inline-flex; align-items: center; font-size: .73rem; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 3px; border: 0; cursor: default;
  font-family: var(--font-body); white-space: nowrap;
}
button.tag { cursor: pointer; }
.tag-accent { background: var(--a-100); color: var(--a-800); }
.tag-neutral { background: var(--n-100); color: var(--n-800); }
.tag-outline { border: 1px solid var(--accent); color: var(--accent); background: transparent; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--n-200); color: var(--n-800);
  font-size: .8rem; font-weight: 600; text-decoration: none;
}
.avatar-sm { width: 28px; height: 28px; font-size: .73rem; }
.avatar-xs { width: 22px; height: 22px; font-size: .63rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.33rem; }

/* ── dashboard ────────────────────────────────────────────────────── */
.next-up, .event-card {
  flex-direction: row; align-items: center; text-decoration: none; color: inherit;
}
.date-block {
  text-align: center; line-height: 1.05; flex: none; min-width: 40px;
  font-family: var(--font-heading);
}
.date-day { font-size: 1.47rem; font-weight: 600; }
.date-month { font-size: .73rem; text-transform: uppercase; letter-spacing: .06em;
  color: color-mix(in srgb, var(--text) 55%, transparent); }
.announcement .author { font-weight: 600; font-size: .9rem; }
.feed-more { height: 1px; }

/* ── groups / members ─────────────────────────────────────────────── */
.group-row, .member-row { text-decoration: none; color: inherit; }
.member-link { text-decoration: none; color: inherit; }
.create-group summary { cursor: pointer; color: var(--accent); font-size: .93rem; }
.create-group[open] summary { margin-bottom: var(--space-2); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; padding: 2px 8px; font-size: 1.07rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu-items {
  position: absolute; right: 0; top: 100%; z-index: 10; min-width: 170px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden;
}
.menu-items button, .menu-items a {
  display: block; width: 100%;
  text-align: left; padding: 9px 12px; font: inherit; font-size: .9rem;
  background: none; border: 0; color: var(--text); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.menu-items button:hover, .menu-items a:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.menu-sep { height: 1px; border: 0; margin: 2px 0; background: var(--divider); }

.theme-toggle { width: 30px; height: 30px; font-size: 1rem; color: color-mix(in srgb, var(--text) 70%, transparent); }
.theme-toggle:hover { color: var(--accent); }

/* header user menu */
.topbar-menu summary { display: flex; align-items: center; gap: 3px; padding: 0; }
.menu-caret { font-size: .6rem; color: color-mix(in srgb, var(--text) 55%, transparent); }
.topbar-menu[open] .menu-caret { transform: rotate(180deg); }
.topbar-menu .menu-items { min-width: 200px; }

/* ── tasks & dues ─────────────────────────────────────────────────── */
.task-row {
  display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--divider); border-radius: var(--radius-md);
}
.task-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); }
.task-row .task-title { flex: 1; }
.task-row.is-done .task-title, .task-row:has(input:checked) .task-title {
  text-decoration: line-through; opacity: .55;
}
.is-queued { border-style: dashed; }
.is-queued::after { content: '⏳'; font-size: 12px; }

/* ── chat ─────────────────────────────────────────────────────────── */
.chat-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.chat-log {
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: 180px; max-height: 55vh; overflow-y: auto;
  padding: var(--space-2); border: 1px solid var(--divider); border-radius: var(--radius-md);
}
.chat-msg { display: flex; gap: 8px; align-items: flex-end; }
.chat-msg.is-mine { flex-direction: row-reverse; }
.chat-bubble {
  max-width: 78%; padding: 7px 11px; border-radius: var(--radius-lg);
  background: var(--n-100); font-size: .93rem;
}
.is-mine .chat-bubble { background: var(--a-100); color: var(--a-800); }
.chat-sender { font-size: .73rem; font-weight: 600; color: var(--accent); }
.chat-time { font-size: .67rem; opacity: .55; text-align: right; }
.chat-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.chat-form { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

/* ── profile / login ──────────────────────────────────────────────── */
.profile-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding-top: var(--space-3); }
.chips-row { justify-content: center; }
.family-link { text-decoration: none; }
.auth-body { display: flex; min-height: 100dvh; }
.auth-body #page { margin: auto; padding: var(--space-4); }
.login-page { display: flex; flex-direction: column; gap: var(--space-4); }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.login-logo {
  width: 64px; height: 64px; border: 2px solid var(--text); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.login-title { margin: 0; }
.login-form { min-width: min(320px, 84vw); }
.login-divider { gap: 8px; }
.login-divider .line { flex: 1; height: 1px; background: var(--divider); }
.login-footer { text-align: center; }
.webauthn-login { border-color: var(--accent); color: var(--accent); }

/* ── dialog ───────────────────────────────────────────────────────── */
.dialog {
  width: min(440px, calc(100% - 2 * var(--space-4)));
  padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--divider);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: color-mix(in srgb, #000 50%, transparent); }
.dialog-inner { display: flex; flex-direction: column; gap: var(--space-2); }
.dialog-title { margin: 0; }
.dialog-body { font-size: .93rem; opacity: .85; }
.dialog-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.temp-password { font-size: 1.33rem; text-align: center; }
.temp-password code { background: var(--n-100); padding: 4px 12px; border-radius: var(--radius-sm); }

/* ── tables & event log ───────────────────────────────────────────── */
.table-scroll { overflow-x: auto; border: 1px solid var(--divider); border-radius: var(--radius-md); }
.table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.table th {
  text-align: left; font-size: .73rem; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--divider);
  font-family: var(--font-body); white-space: nowrap;
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--divider); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.nowrap { white-space: nowrap; }

.tag-ok  { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.tag-err { background: light-dark(#f6e4e0, #3c2320); color: light-dark(#a04430, #e8a898); }

.events-table .th-details { width: 99%; }
.json-cell {
  max-width: 0; width: 99%;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem;
}
.json-cell .json-short {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.json-cell .json-full { display: none; margin: 0; font: inherit; white-space: pre-wrap; word-break: break-word; }
.json-cell.is-expandable { cursor: pointer; }
.json-cell.is-expandable:hover .json-short { color: var(--accent); }
.json-cell.is-expanded .json-short { display: none; }
.json-cell.is-expanded .json-full { display: block; }

.pagination { padding: var(--space-1) 0; }
.pagination-info { text-align: center; font-size: .87rem; color: color-mix(in srgb, var(--text) 60%, transparent); }
.page-wide { width: 100%; }

/* ── misc ─────────────────────────────────────────────────────────── */
.audit-row { gap: 4px; padding: var(--space-2) var(--space-3); }
.audit-filters { flex-wrap: wrap; }
.audit-filters .input { width: auto; flex: 1; min-width: 120px; }
.calendar-title { margin: 0; text-align: center; font-size: 1.2rem; }
.dues-row { gap: var(--space-2); }
.invite-link { word-break: break-all; }
.post-form textarea { font-size: .93rem; }

/* ── responsive: tablet & desktop (Bulma breakpoints) ─────────────── */
.pulpit-grid { display: flex; flex-direction: column; gap: var(--space-2); }

@media (min-width: 769px) {
  /* Nav moves from a bottom tab bar to a horizontal bar under the topbar. */
  .tabbar {
    position: sticky; top: 0; inset-inline: auto; bottom: auto; z-index: 19;
    justify-content: center; gap: var(--space-2);
    border-top: 0; border-bottom: 1px solid var(--divider);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(6px);
    padding-bottom: 0; width: 100%;
  }
  .tabbar a {
    flex: 0 0 auto; flex-direction: row; gap: 8px;
    padding: 10px 18px; font-size: .93rem;
  }
  .tabbar a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .tab-icon { font-size: 1rem; }
  .tab-badge { position: static; margin-left: 2px; }

  #page { padding-bottom: var(--space-8); }
  .page-pad { padding: var(--space-4) var(--space-3); }
  .chat-form { position: static; }
  .chat-log { max-height: 62vh; min-height: 260px; }
  .auth-body #page { max-width: 420px; }
  .login-form { min-width: 340px; }
}

@media (min-width: 1024px) {
  /* Pulpit: next-up sidebar + wide announcements column. */
  .pulpit-grid {
    display: grid; grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--space-6); align-items: start;
  }
  .pulpit-side { position: sticky; top: calc(var(--topbar-h) + 56px); }
  .pulpit-main #feed { max-width: none; }

  /* Two-column card lists. */
  #group-list, #admin-user-list, #audit-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2); align-content: start;
  }
  #group-list > p, #admin-user-list > p, #audit-list > p { grid-column: 1 / -1; }
  #audit-list .feed-more { grid-column: 1 / -1; }

  .group-tabs { max-width: 760px; }
  .chat-panel { max-width: 900px; }
  .dialog { width: min(520px, calc(100% - 2 * var(--space-4))); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}