/* Shared app controls. Public website blocks retain their author-defined styles. */
@layer components {
  /* Keep community content stationary when navigating between short and long pages. */
  html:has(.shell) { scrollbar-gutter:stable; }
  .ui-pill { display:inline-flex; align-items:center; gap:6px; max-width:100%; border:0; border-radius:9999px; padding:6px 12px; font-size:12px; font-weight:600; line-height:1.5; color:var(--text); overflow-wrap:anywhere; }
  .ui-pill-neutral { background:var(--surface); }
  .ui-pill-yellow { background:var(--yellow-soft); }
  .heading { margin:0; color:inherit; font-weight:700; }
  .heading--page { font-size:29px; line-height:1.55; letter-spacing:var(--type-heading-tracking); }
  .heading--section { font-size:24px; line-height:1.3; letter-spacing:var(--type-heading-tracking); }
  .heading--subsection { font-size:18px; line-height:1.4; letter-spacing:var(--type-heading-tracking); }
  .brand-logo { display:inline-flex; flex-shrink:0; align-items:center; gap:10px; color:var(--text); font-size:30px; font-weight:800; letter-spacing:var(--type-brand-tracking); text-decoration:none; }
  .brand-logo img { flex-shrink:0; }
  .auth-page { max-width:528px; margin:6vh auto; padding:24px; }
  .auth-card { margin-top:0; overflow:hidden; background:var(--canvas); border:1px solid var(--line); border-radius:24px; box-shadow:0 12px 40px rgb(36 36 46 / 6%); }
  .auth-card-body { padding:clamp(24px, 6vw, 40px); }
  .auth-brand { display:flex; justify-content:center; margin-bottom:24px; }
  .auth-card .brand-logo { margin:0; font-size:30px; text-decoration:none; }
  .auth-card h2 { text-align:center; font-size:24px; line-height:1.3; margin-bottom:24px; }
  .auth-heading { text-align:center; margin-bottom:32px; }
  .auth-card .heading--page { text-align:center; margin-bottom:24px; }
  .auth-heading .heading--page { margin-bottom:8px; }
  .auth-heading p { color:var(--secondary); }
  .auth-password-hint { margin-top:8px; font-size:12px; line-height:1.5; color:var(--secondary); }
  .auth-password-hint:empty { display:none; }
  .auth-password-hint[data-state=valid] { color:var(--success); }
  .auth-password-hint[data-state=invalid] { color:var(--danger); }
  .auth-card input[aria-invalid=true] { border-color:var(--danger); }
  .auth-card .field { margin:20px 0; }
  .auth-card label { font-size:14px; font-weight:500; }
  .auth-card a:not(.brand-logo) { color:var(--action-primary); font-weight:500; text-decoration:none; }
  .auth-card a:not(.brand-logo):hover { text-decoration:underline; }
  .auth-form-options { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin:20px 0 24px; }
  .auth-card .auth-remember { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; font-weight:400; }
  .auth-remember input { margin:0; accent-color:var(--action-primary); }
  .auth-form-options a { margin:0; }
  .auth-card .actions .btn { width:100%; min-height:44px; font-size:14px; }
  .auth-card input[type=submit] { background:linear-gradient(to bottom,rgb(255 255 255 / 10%),rgb(0 0 0 / 4%)) var(--action-primary); color:var(--on-action-primary); transition:filter 100ms ease-in-out; }
  .auth-card input[type=submit]:hover { filter:brightness(.94); }
  .auth-card-footer { padding:22px 24px; border-top:1px solid var(--line); background:var(--canvas); text-align:center; color:var(--secondary); }
  .auth-card-footer p + p { margin-top:12px; }
  .auth-card-footer a { margin:0; font-size:inherit; }
  .auth-layout { display:flow-root; position:relative; min-height:100svh; background:var(--canvas); isolation:isolate; }
  .auth-sky { position:absolute; inset:0 0 auto; height:max(100svh,700px); z-index:-1; overflow:hidden; pointer-events:none; background:var(--orange-soft); }
  #auth-sky-clouds, #auth-sky-clouds canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  #auth-sky-clouds canvas { opacity:0; }
  .auth-sky::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom,color-mix(in srgb,var(--canvas) 15%,transparent),color-mix(in srgb,var(--canvas) 35%,transparent) 40%,color-mix(in srgb,var(--canvas) 90%,transparent) 75%,var(--canvas)); }
  :root { --danger:#b72e42; --danger-soft:#fff0f2; --success:#22704b; --focus:rgb(0 0 0 / 5%); --control-radius:10px; --control-motion:140ms; }
  :root { --ghost-hover:rgb(0 0 0 / 10%); --surface-inverse:#24242e; --on-surface-inverse:#ffffff; }
  :root { --action-secondary:#24242e; --on-action-secondary:#ffffff; }
  /* Soft tints derive from the saturated palette; use semantic tokens for actions and status. */
  :root {
    --orange:#d73d0e; --on-orange:#ffffff;
    --green:#3d935c; --on-green:#ffffff;
    --yellow:#e8be37; --on-yellow:#ffffff;
    --purple:#6a449a; --on-purple:#ffffff;
    --blue:#3d65e2; --on-blue:#ffffff;
    --on-soft:#24242e;
  }
  :root, [data-member-theme] {
    --orange-soft:color-mix(in srgb,var(--orange) 18%,var(--canvas));
    --green-soft:color-mix(in srgb,var(--green) 18%,var(--canvas));
    --yellow-soft:color-mix(in srgb,var(--yellow) 18%,var(--canvas));
    --purple-soft:color-mix(in srgb,var(--purple) 18%,var(--canvas));
    --blue-soft:color-mix(in srgb,var(--blue) 18%,var(--canvas));

    --control-border:color-mix(in srgb,var(--text) 24%,var(--canvas));
    --control-hover:color-mix(in srgb,var(--text) 7%,var(--canvas));
    --control-selected:color-mix(in srgb,var(--brand-primary) 14%,var(--canvas));
    --action-hover:color-mix(in srgb,var(--action-primary) 88%,var(--on-action-primary));
    --action-secondary-hover:color-mix(in srgb,var(--action-secondary) 88%,var(--on-action-secondary));
  }
  .btn.btn {
    --button-highlight:rgb(255 255 255 / 18%);
    min-height:40px; padding:8px 14px; border:1px solid rgb(0 0 0 / 12%); border-radius:var(--control-radius);
    background:linear-gradient(to bottom,rgb(255 255 255 / 10%),rgb(0 0 0 / 4%)) var(--action-secondary);
    box-shadow:inset 0 1px 0 var(--button-highlight),0 1px 2px rgb(0 0 0 / 8%);
    color:var(--on-action-secondary); font-size:14px; line-height:1.4; gap:8px; text-decoration:none;
    transition:background-color 100ms ease-in-out,color 100ms ease-in-out,border-color 100ms ease-in-out,box-shadow 100ms ease-in-out,scale var(--control-motion) var(--ease);
  }
  .btn.btn:not(:disabled):hover { background-color:var(--action-secondary-hover); }
  .btn.btn.primary { --button-highlight:rgb(255 255 255 / 18%); background-color:var(--action-primary); color:var(--on-action-primary); border-color:rgb(0 0 0 / 12%); }
  .btn.btn.primary:not(:disabled):hover { background-color:var(--action-hover); }
  .btn.btn.orange { background-color:#ff5731; color:#fff; border-color:rgb(0 0 0 / 12%); }
  .btn.btn.orange:not(:disabled):hover { background-color:#e94b27; }
  .btn.btn.ghost { color:var(--text); background:transparent; border-color:transparent; box-shadow:none; }
  .btn.btn.ghost:not(:disabled):hover { background-color:var(--ghost-hover); }
  .btn.btn.danger { background-color:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 18%,var(--danger-soft)); }
  .btn.btn.danger:not(:disabled):hover { background-color:color-mix(in srgb,var(--danger) 15%,var(--danger-soft)); }
  .btn.btn.sm { min-height:32px; padding:5px 11px; font-size:12px; border-radius:8px; }
  .btn.btn.lg { min-height:48px; padding:12px 20px; font-size:16px; }
  .btn.btn.xl { min-height:56px; padding:16px 26px; font-size:18px; gap:12px; }
  .btn.btn:active:not(:disabled) { scale:.97; }
  .btn.btn:active:not(:disabled):not(.ghost) { box-shadow:inset 0 1px 2px rgb(0 0 0 / 12%); }
  .btn.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
  .btn.btn[aria-busy=true] { cursor:wait; }
  .btn.btn.icon-btn { width:32px; height:32px; min-height:32px; padding:0; border-radius:8px; color:var(--secondary); }
  .btn.btn.icon-btn:not(:disabled):hover { color:var(--text); }
  .auth-card input:not([type=checkbox]):not([type=submit]), .auth-card textarea {
    min-height:40px; padding:10px 12px; background:var(--canvas); color:var(--text); border:1px solid var(--control-border); border-radius:var(--control-radius); font-size:14px; line-height:1.5;
  }
  .auth-handle { position:relative; }
  .auth-handle > span { position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:14px; line-height:1.5; color:var(--secondary); pointer-events:none; }
  .auth-card .auth-handle input:not([type=checkbox]):not([type=submit]) { padding-left:calc(13px + 1em); }
  .ui-checkbox, input[type=checkbox], input[type=radio] { accent-color:var(--action-primary); }
  /* Slate's checkbox proportions and text-color fill, with native input behavior. */
  .ui-checkbox-control { position:relative; display:inline-flex; flex-shrink:0; width:16px; height:16px; vertical-align:middle; }
  .ui-checkbox-control .ui-checkbox { position:absolute; inset:0; z-index:1; width:100%; height:100%; min-height:0; margin:0; padding:0; opacity:0; cursor:pointer; }
  .ui-checkbox-box { display:grid; place-items:center; box-sizing:border-box; width:100%; height:100%; border:1px solid var(--line); border-radius:4px; background:var(--canvas); color:transparent; pointer-events:none; }
  .ui-checkbox:checked + .ui-checkbox-box { border-color:var(--text); background:var(--text); color:var(--canvas); }
  .ui-checkbox:focus-visible + .ui-checkbox-box { outline:3px solid var(--focus); outline-offset:0; }
  .ui-checkbox:disabled { cursor:not-allowed; }
  .ui-checkbox:disabled + .ui-checkbox-box { opacity:0.55; }
  [data-member-theme] .avatar:not(:has(img)) { background:var(--brand-soft); color:var(--text); }
  :is(button,input,textarea,select,.btn,.icon-btn,.space-trigger,.ui-checkbox):focus-visible { outline:3px solid var(--focus); outline-offset:0; }
  :focus-visible { outline-color:var(--focus); }
  .space-trigger.space-trigger { color:var(--text); border-radius:var(--control-radius); }
  .space-trigger.space-trigger[aria-expanded=true] { background:var(--control-selected); }
  .space-trigger.space-trigger.ui-select-field { border:1px solid var(--control-border); background:var(--canvas); }
  .space-menu.space-menu { background:var(--canvas); color:var(--text); border:var(--menu-border,0); box-shadow:0 5px 24px #24242e18; max-height:min(320px,60vh); overflow-y:auto; }
  .space-menu.space-menu { scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
  .space-menu::-webkit-scrollbar { width:5px; height:5px; }
  .space-menu::-webkit-scrollbar-track { background:transparent; }
  .space-menu::-webkit-scrollbar-thumb { background:var(--line); border-radius:999px; }
  .space-menu::-webkit-scrollbar-thumb:hover { background:var(--muted); }
  .ui-select-search { position:sticky; top:-5px; z-index:1; display:flex; align-items:center; gap:8px; margin:-5px -5px 5px; padding:10px 12px; background:var(--canvas); border-bottom:1px solid var(--line); color:var(--secondary); }
  .ui-select-search svg { flex-shrink:0; }
  .ui-select-search input { width:100%; min-width:0; min-height:24px; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--text); font-size:14px; font-weight:400; box-shadow:none; }
  .ui-select-search input:focus-visible { outline:none; }
  .ui-select-search:focus-within { border-bottom-color:var(--focus); }
  .ui-calendar-day { appearance:none; display:grid; place-items:center; aspect-ratio:1; min-width:0; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text); font-size:12px; font-weight:400; box-shadow:none; }
  .ui-calendar-day[data-outside-month] { color:var(--muted); }
  .ui-calendar-day:hover { background:var(--control-selected); }
  .ui-calendar-day[aria-pressed=true] { background:var(--action-primary); color:var(--on-action-primary); font-weight:600; }
  .ui-calendar-day:focus-visible { outline:2px solid var(--focus); outline-offset:0; }
  .space-menu.space-menu button { color:var(--text); font-size:14px; }
  .space-menu.space-menu > button + button { margin-top:2px; }
  .space-menu.space-menu button span { color:inherit; }
  .space-menu.space-menu button:is(:hover,:focus-visible,[aria-checked=true],[aria-selected=true]) { background:var(--surface); color:var(--text); }
  .space-menu.space-menu button:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
  .space-menu.space-menu button:disabled { opacity:.45; }
  .ui-dialog { background:var(--canvas); color:var(--text); border:1px solid var(--line); border-radius:18px; max-height:calc(100dvh - 32px); overflow:auto; }
  .ui-dialog.rsvp-dialog { width:520px; border:0; }
  .ui-dialog .close { margin-left:12px; }
  .ui-dialog label:has(input[type=checkbox]), .ui-dialog label:has(input[type=radio]) { display:flex; align-items:center; gap:8px; }
  .ui-dialog input[type=checkbox], .ui-dialog input[type=radio] { width:16px; min-height:16px; margin:0; padding:0; }
  .ui-dialog[open] { animation:ui-dialog-in 160ms var(--ease); }
  .ui-dropdown { position:relative; display:inline-block; }
  .ui-dropdown .space-menu { min-width:200px; right:0; left:auto; }
  .ui-dropdown .space-menu button[data-danger] { color:var(--danger); }
  @keyframes ui-dialog-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
  @media(prefers-reduced-motion:reduce) { .btn.btn,.icon-btn.icon-btn,.space-menu.space-menu,.ui-dialog[open] { animation:none; transition:none; } .btn.btn:active:not(:disabled) { scale:1; } }
}

@layer components {
  /* Slate toggle spring: stiffness 520, damping 32, mass .75. Press: 600 / 34 / .65. */
  .ui-toggle { --toggle-spring:linear(0.0, 0.03005, 0.10409, 0.20269, 0.31179, 0.42161, 0.52575, 0.62033, 0.70336, 0.77421, 0.83311, 0.88093, 0.91881, 0.9481, 0.97012, 0.98618, 0.99743, 1.00492, 1.00953, 1.01201, 1.01295, 1.01284, 1.01204, 1.01085, 1.00946, 1.00802, 1.00664, 1.00536, 1.00422, 1.00325, 1.00243, 1.00175, 1.00122, 1.0008, 1.00048, 1.00025, 1.00008, 0.99997, 0.99989, 0.99985, 1); --toggle-press-spring:linear(0.0, 0.03034, 0.1042, 0.20144, 0.30798, 0.41441, 0.51477, 0.60563, 0.68535, 0.75353, 0.81057, 0.85734, 0.89497, 0.92471, 0.94777, 0.9653, 0.97835, 0.98783, 0.99452, 0.99905, 1.00198, 1.00372, 1.00461, 1.00491, 1.00483, 1.0045, 1.00404, 1.00352, 1.003, 1.00249, 1.00204, 1.00163, 1.00128, 1.00099, 1.00075, 1.00055, 1.0004, 1.00028, 1.00019, 1.00012, 1); position:relative; display:inline-flex; width:46px; height:28px; flex-shrink:0; vertical-align:middle; }
  .ui-toggle input[type=checkbox] { position:absolute; inset:0; z-index:1; width:100%; height:100%; min-height:0; margin:0; padding:0; opacity:0; cursor:pointer; }
  .ui-toggle-track { position:relative; display:block; width:100%; height:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:999px; background:var(--surface); transition:background-color 200ms ease,border-color 200ms ease,scale 350ms var(--toggle-press-spring); }
  .ui-toggle-track::after { content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:var(--text); box-shadow:0 1px 2px rgb(0 0 0 / 15%); transition:transform 400ms var(--toggle-spring),background-color 200ms ease; }
  .ui-toggle input:active:not(:disabled) + .ui-toggle-track { scale:.94; }
  .ui-toggle input:checked + .ui-toggle-track { background:var(--action-primary); border-color:var(--action-primary); }
  .ui-toggle input:checked + .ui-toggle-track::after { transform:translateX(18px); background:var(--on-action-primary); }
  .ui-toggle input:focus-visible + .ui-toggle-track { outline:3px solid var(--focus); outline-offset:0; }
  .ui-toggle input:disabled { cursor:not-allowed; }
  .ui-toggle input:disabled + .ui-toggle-track { opacity:.55; }
  @media(prefers-reduced-motion:reduce) { .ui-toggle-track,.ui-toggle-track::after { transition:none; } .ui-toggle input:active:not(:disabled) + .ui-toggle-track { scale:1; } }
}

@layer components {
  .event-image-upload.btn.btn { min-height:112px; border:1px dashed var(--control-border); background:transparent; color:var(--text); box-shadow:none; }
  .event-image-upload.btn.btn:not(:disabled):hover, .event-image-drop[data-dragging] .event-image-upload.btn.btn { background:transparent; border-color:var(--brand-primary); color:var(--brand-primary); }
  .event-image-drop[data-dragging] .event-image-upload { outline:2px solid var(--focus); outline-offset:3px; }
  .event-image-action.btn.btn { border:0; background:var(--canvas); color:var(--text); box-shadow:none; }
  .event-image-action.btn.btn:not(:disabled):hover { background:var(--surface); }
  .event-image-cover.btn.btn { padding:5px; font-size:11px; }
  .event-image-cover.is-cover { font-weight:600; }
  @media (hover:hover) and (pointer:fine) {
    .image-viewer-navigation { opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity 180ms var(--ease), transform 180ms var(--ease); }
    .image-viewer:hover .image-viewer-navigation, .image-viewer-navigation:focus-within { opacity:1; transform:translateY(0); pointer-events:auto; }
    @media (prefers-reduced-motion:reduce) {
      .image-viewer-navigation { transition:none; transform:none; }
    }
    .event-image-action:not(.is-cover) { opacity:0; }
    .event-image-tile:hover .event-image-action, .event-image-tile:focus-within .event-image-action { opacity:1; }
  }
}

.ui-segmented-control{display:flex;gap:3px;padding:3px;border:1px solid var(--control-border);border-radius:var(--control-radius);background:var(--surface)}
.ui-segmented-control>.btn{flex:1;min-width:0;min-height:34px;height:auto;padding:6px 8px;font-size:12px;border-radius:calc(var(--control-radius) - 3px)}
.ui-segmented-control>.btn[aria-checked=true]{background:var(--canvas);color:var(--ink);box-shadow:0 1px 3px #00000014}
.ui-focal-preview{display:block;position:relative;width:100%;padding:0;overflow:hidden;border:1px solid var(--control-border);border-radius:var(--control-radius);background:var(--surface);cursor:crosshair;touch-action:none}
.ui-focal-preview>img{display:block;width:100%;height:auto;pointer-events:none}
.ui-focal-marker{position:absolute;width:20px;height:20px;border:2px solid #fff;border-radius:50%;background:#0004;box-shadow:0 0 0 1px #0006;transform:translate(-50%,-50%);pointer-events:none}
.ui-focal-preview:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.ui-collapsible{border-top:1px solid var(--line);margin-top:16px}
.ui-collapsible-heading{margin:0;font:inherit}
.ui-collapsible-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:16px 0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ui-collapsible-trigger:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.ui-collapsible-caret{width:16px;height:16px;flex-shrink:0;transition:transform 180ms ease}
.ui-collapsible-trigger[aria-expanded=true] .ui-collapsible-caret{transform:rotate(180deg)}
.ui-collapsible-panel{overflow:clip;transition:height 180ms ease}
.ui-collapsible-panel[data-settled=true]{overflow:visible}
.ui-collapsible-panel[aria-hidden=true]{visibility:hidden;transition:height 180ms ease,visibility 0s 180ms}
.ui-collapsible-content{display:flow-root;padding-bottom:16px}
.ui-collapsible-copy{margin:0;font-size:16px;line-height:28px;color:var(--secondary);overflow-wrap:break-word}
.ui-collapsible-faq{margin:0;border-top:0;border-bottom:1px solid var(--line)}
.ui-collapsible-faq .ui-collapsible-trigger{padding:20px 0;font-size:16px;font-weight:500;gap:20px}
.ui-collapsible-faq .ui-collapsible-content{padding-bottom:20px}
@media(prefers-reduced-motion:reduce){.ui-collapsible-panel,.ui-collapsible-panel[aria-hidden=true],.ui-collapsible-caret{transition:none}}