:root {
  color-scheme: light; --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink:#20373b; --muted:#5c7074; --canvas:#f4f7f6; --surface:#fff; --subtle:#edf3f1;
  --primary:#156b60; --primary-hover:#10564d; --border:#ccd9d5; --focus:#b26005;
  --success:#236343; --success-bg:#e7f3eb; --warning:#785413; --warning-bg:#fff3d8;
  --danger:#a43232; --danger-bg:#fff0ee; --urgent:#8e2525; --urgent-bg:#fde4df;
  --radius:.85rem; --radius-small:.45rem; --shadow:0 6px 24px #20373b0d;
  --space-1:.35rem; --space-2:.65rem; --space-3:1rem; --space-4:1.5rem; --space-5:2rem;
  font-family:var(--font); color:var(--ink); background:var(--canvas); line-height:1.6;
}
* { box-sizing:border-box; } body { margin:0; } [hidden] { display:none !important; }
a { color:var(--primary); text-underline-offset:.2em; } a:hover { color:var(--primary-hover); }
button,input,select,textarea { font:inherit; color:inherit; }
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; border:1px solid transparent; border-radius:var(--radius-small); padding:.6rem 1.1rem; font-weight:650; background:var(--primary); color:white; cursor:pointer; text-decoration:none; margin:.3rem 0; }
button:hover,.button:hover { background:var(--primary-hover); color:white; } button:disabled { opacity:.65; cursor:wait; }
button.secondary,.button.secondary { background:var(--surface); color:var(--primary); border-color:var(--border); }
.icon-button { min-width:44px; padding:.35rem .65rem; font-size:1.3rem; background:transparent; color:var(--ink); }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
h1,h2,h3 { line-height:1.25; letter-spacing:-.025em; } h1 { font-size:clamp(1.65rem,3vw,2.15rem); margin:0 0 1rem; } h2 { font-size:1.25rem; margin-top:0; } h3 { font-size:1.05rem; }
p { margin:.55rem 0 1rem; } p:last-child { margin-bottom:0; }
main { max-width:76rem; padding:2rem clamp(1rem,3vw,2.5rem) 4rem; margin:auto; }
.authenticated main { margin-left:15.5rem; max-width:90rem; }
.js .authenticated:not(.drawer-open) main { margin-inline:auto; max-width:76rem; }
.app-header { height:5rem; padding:.8rem clamp(.75rem,2vw,1.5rem); display:flex; align-items:center; gap:1rem; background:var(--surface); border-bottom:1px solid var(--border); position:relative; z-index:30; }
.brand { color:var(--ink); font-size:1.1rem; font-weight:800; text-decoration:none; line-height:1.15; margin-right:auto; } .brand span { color:var(--primary); } .brand .brand-env { color:var(--danger); font-weight:inherit; }
.header-alerts { font-size:.9rem; white-space:nowrap; text-decoration:none; }
.avatar { display:inline-flex; width:2.75rem; height:2.75rem; align-items:center; justify-content:center; border-radius:50%; background:#dcece7; color:var(--primary-hover); font-weight:750; flex-shrink:0; overflow:hidden; object-fit:cover; } .avatar img { width:100%; height:100%; object-fit:cover; }
.account-menu { position:relative; } .account-menu summary { display:flex; align-items:center; gap:.6rem; list-style:none; cursor:pointer; min-height:44px; border-radius:var(--radius-small); }
.account-menu summary::-webkit-details-marker { display:none; } .account-name { max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; }
.account-panel { position:absolute; right:0; top:calc(100% + .8rem); width:min(19rem,calc(100vw - 2rem)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; background:var(--surface); display:grid; gap:.3rem; }
.account-panel a { padding:.6rem; border-radius:var(--radius-small); text-decoration:none; } .account-panel a:hover { background:var(--subtle); }
.sidebar { width:15.5rem; padding:1.25rem .9rem; position:absolute; top:5rem; left:0; display:flex; flex-direction:column; gap:.3rem; }
.sidebar a,.sidebar summary { padding:.6rem .75rem; min-height:44px; border-radius:var(--radius-small); text-decoration:none; color:var(--ink); font-size:.93rem; cursor:pointer; }
.sidebar a:hover,.sidebar summary:hover { background:#e4eeea; } .sidebar a[aria-current=page] { color:var(--primary-hover); background:#dcece6; font-weight:700; }
.nav-group { display:grid; border-left:2px solid var(--border); margin:.2rem 0 .5rem .8rem; padding-left:.3rem; } .nav-section { border-top:1px solid var(--border); padding-top:.5rem; margin-top:.5rem; }
.drawer-heading { display:flex; align-items:center; justify-content:space-between; color:var(--muted); text-transform:uppercase; font-size:.72rem; letter-spacing:.1em; padding:0 .75rem .7rem; }
.drawer-backdrop { position:fixed; inset:0; border:0; border-radius:0; margin:0; width:100%; background:#102c2aa6; z-index:40; }
.card { background:var(--surface); border:1px solid var(--border); padding:clamp(1.1rem,2.5vw,1.8rem); border-radius:var(--radius); margin:1rem 0; box-shadow:var(--shadow); }
.narrow { max-width:38rem; } .form-layout { max-width:54rem; } .dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; max-width:76rem; } .dashboard-grid .card { margin:0; } .dashboard-grid article+article { border-top:1px solid var(--border); padding-top:1rem; margin-top:1rem; }
.users { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap:1rem; } .users .card { margin:0; }
label { display:block; font-weight:600; margin-bottom:.35rem; } input,select,textarea { display:block; width:100%; min-height:44px; padding:.65rem .8rem; border:1px solid #94aaa3; border-radius:var(--radius-small); background:var(--surface); }
textarea { resize:vertical; } input[type=file] { padding:.45rem; } input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true],.picker-trigger[aria-invalid=true] { border-color:var(--danger); }
.field { margin-bottom:1.25rem; } .field p,.help { font-size:.87rem; color:var(--muted); margin:.35rem 0 0; }
.checkbox { display:flex; align-items:flex-start; gap:.65rem; padding:.5rem 0; margin:0; } .checkbox input { width:1.25rem; min-height:1.25rem; margin:.25rem 0 0; flex-shrink:0; accent-color:var(--primary); }
fieldset { min-width:0; border:1px solid var(--border); padding:1.1rem; border-radius:var(--radius-small); margin:1.5rem 0; } legend { font-weight:700; padding:0 .4rem; }
.field-error,.field .field-error { color:var(--danger); font-size:.9rem; } .error-summary { background:var(--danger-bg); color:var(--danger); border:1px solid #d89d95; border-radius:var(--radius-small); padding:1rem; margin-bottom:1rem; }
.notice { color:var(--success); background:var(--success-bg); border:1px solid #9dc5ae; border-radius:var(--radius-small); padding:1rem; margin-bottom:1rem; } .required-mark { color:var(--primary); }
.badge { display:inline-block; border-radius:.35rem; background:var(--subtle); color:var(--muted); padding:.16rem .5rem; font-size:.75rem; font-weight:750; line-height:1.5; vertical-align:middle; } .badge.urgent { color:var(--urgent); background:var(--urgent-bg); border:1px solid #db9c90; } .badge.important { color:var(--warning); background:var(--warning-bg); }
.urgent-card { border-left:4px solid var(--urgent); } .dashboard-grid article.urgent-card { padding-left:1rem; } .muted { color:var(--muted); } .plain { white-space:pre-wrap; overflow-wrap:anywhere; } dt { font-weight:650; } dd { margin:0 0 1rem; }
nav:not(.sidebar) { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; align-items:center; } nav:not(.sidebar) a { padding:.5rem .75rem; min-height:44px; }
.tabs { border-bottom:1px solid var(--border); padding-bottom:.5rem; } .tabs a { text-decoration:none; border-radius:var(--radius-small); } .tabs a[aria-current=page] { color:var(--primary-hover); background:#dcece6; font-weight:700; }
.filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); gap:.8rem; }
.rsvp-options { display:flex; flex-wrap:wrap; gap:.5rem; border:0; padding:0; } .rsvp-options label { flex:1; min-width:6rem; cursor:pointer; border:1px solid var(--border); padding:.75rem; border-radius:var(--radius-small); display:flex; gap:.4rem; align-items:center; font-size:.9rem; } .rsvp-options label:has(input:checked) { background:#dcece6; border-color:var(--primary); } .rsvp-options input { width:1rem; min-height:1rem; accent-color:var(--primary); }
.calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.4rem; } .calendar-day { background:var(--surface); border:1px solid var(--border); border-radius:.3rem; padding:.6rem; } .calendar-day h2 { font-size:.85rem; }
dialog { width:min(31rem,calc(100vw - 1.5rem)); max-height:calc(100dvh - 2rem); overflow:auto; border:1px solid var(--border); border-radius:1rem; padding:1.25rem; color:var(--ink); box-shadow:0 18px 60px #122b2a33; } dialog::backdrop { background:#102c2a99; } .dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; } .small-dialog { max-width:26rem; }
.picker-trigger { background:var(--surface); border:1px solid #94aaa3; color:var(--ink); width:100%; font-weight:400; text-align:left; justify-content:space-between; margin:0; } .picker-trigger:hover { background:var(--subtle); color:var(--ink); } .picker-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .picker-toolbar h3 { margin:0; } .picker-calendar { width:100%; table-layout:fixed; border-collapse:collapse; } .picker-calendar th { font-size:.75rem; color:var(--muted); font-weight:600; } .picker-calendar td { padding:1px; text-align:center; } .picker-calendar button { padding:0; width:100%; min-height:40px; font-weight:450; border:0; margin:0; color:var(--ink); background:transparent; } .picker-calendar button:hover { background:var(--subtle); } .picker-calendar button[aria-pressed=true] { background:var(--primary); color:white; } .picker-calendar .outside-month { color:var(--muted); opacity:.65; }
.picker-time { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem; margin:1rem 0; } .picker-time label { font-size:.8rem; }
.toast { position:fixed; bottom:1rem; right:1rem; max-width:calc(100vw - 2rem); background:var(--ink); color:white; padding:.85rem 1.2rem; border-radius:var(--radius-small); box-shadow:var(--shadow); z-index:100; }
.photo-preview { display:block; width:7rem; height:7rem; border-radius:50%; object-fit:cover; margin:.8rem 0; }
.skip-link { position:fixed; top:.5rem; left:-10000px; z-index:200; padding:.6rem; background:var(--surface); } .skip-link:focus { left:.5rem; }
article,form,p,h1,h2,h3,dd { overflow-wrap:anywhere; } .email,.invitation-link { overflow-wrap:anywhere; }
.js .no-js-only { display:none !important; }
@media(max-width:760px) {
 .app-header { height:4.5rem; gap:.6rem; padding:.65rem .75rem; } .brand { font-size:.95rem; } .brand span { display:block; } .account-name { display:none; } .header-alerts { font-size:.78rem; }
 .authenticated main,.js .authenticated:not(.drawer-open) main { margin:0; padding:1.25rem 1rem 3rem; }
 .sidebar { position:static; width:100%; background:var(--surface); }
 .js .sidebar { position:fixed; inset:0 auto 0 0; width:min(19rem,85vw); z-index:50; overflow-y:auto; padding:1rem .8rem; }
 .drawer-overlay { overflow:hidden; } .dashboard-grid { grid-template-columns:1fr; gap:1rem; }
 .calendar { grid-template-columns:1fr; } .calendar-day { min-height:3rem; } .card { padding:1.1rem; } fieldset { padding:.9rem; }
 .picker-calendar button { min-height:42px; } .rsvp-options label { padding:.65rem .5rem; }
}
@media(prefers-reduced-motion:no-preference) { button,a { transition:background-color .12s,color .12s; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }