/* Shared semantic tokens and canonical parent identity. */
:root { --sf-orange:#e78a52;--sf-grey:#26292e; }
:root[data-community-palette] { --page:var(--sf-page);--paper:var(--sf-page);--deep:var(--sf-page);--blue:var(--sf-link);--panel:var(--sf-panel);--cream:var(--sf-panel);--panel-soft:var(--sf-surface);--surface:var(--sf-surface);--ink:var(--sf-text);--text:var(--sf-text);--muted:var(--sf-muted);--line:var(--sf-border);--border:var(--sf-border);--accent:var(--sf-link);--cyan:var(--sf-link);--coral:var(--sf-link);--orange:var(--sf-link);--site-hover:var(--sf-hover);--site-selected:var(--sf-selected); }
html[data-community-palette] body { background:var(--sf-page);color:var(--sf-text); }
.sf-wordmark { display:inline-flex;align-items:baseline;gap:4px;background:var(--sf-grey);color:#f5f5f5;padding:6px 10px;border-radius:8px;text-decoration:none;white-space:nowrap;font-weight:800; }
.sf-dot,.sf-wordmark .sf-dot { display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--sf-orange); }
:focus-visible { outline:3px solid var(--sf-focus);outline-offset:4px; }
.sf-picker { position:relative;max-width:100%;font-size:13px; }
.sf-picker summary { cursor:pointer;padding:10px;border:1px solid var(--sf-border);border-radius:12px;background:var(--sf-panel);color:var(--sf-text); }
.sf-palette-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;background:var(--sf-panel);border:1px solid var(--sf-border);border-radius:12px;position:absolute;right:0;top:100%;width:min(340px,calc(100vw - 36px));z-index:50;box-shadow:0 12px 30px #0005; }
.sf-palette { min-width:0;min-height:72px;text-align:left;padding:10px;border:2px solid transparent;border-radius:10px;cursor:pointer;font:inherit; }
.sf-palette[aria-pressed=true] { border-color:var(--sf-focus); }
.sf-palette[aria-pressed=true] strong::after { content:' ✓'; }
.sf-preview { display:flex;gap:5px;align-items:center;margin-bottom:8px; }
.sf-preview>span:not(.sf-dot) { width:24px;height:12px;border-radius:3px; }
html[data-community-palette] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea) { background:var(--sf-page);color:var(--sf-text);border-color:var(--sf-border); }
html[data-community-palette] :is(.notice,.empty-state) { background:var(--sf-surface);color:var(--sf-text); }
html[data-community-palette] .notice[data-error=true] { color:var(--sf-error); }
html[data-community-palette] .button:not(:disabled):hover { background:var(--sf-hover);color:var(--sf-text); }
html[data-community-palette] :is(.button,.auth-tabs .button)[aria-pressed=true] { background:var(--sf-selected);border-color:var(--sf-focus); }
html[data-community-palette] .button.accent { background:var(--sf-action);border-color:var(--sf-action);color:var(--sf-action-text); }
@media(max-width:640px) { .site-header,.masthead { flex-wrap:wrap; }.sf-picker { margin-left:auto; } }

.sf-wordmark::after { content:none!important; }
html[data-community-palette] :is(dialog,.dialog,.modal-panel) { background:var(--sf-panel);color:var(--sf-text);border-color:var(--sf-border); }
html[data-community-palette] :is(.success,[data-state=success]) { color:var(--sf-success); }
html[data-community-palette] :is(.warning,[data-state=warning]) { color:var(--sf-warning); }
html[data-community-palette] :is(.error,[data-state=error]) { color:var(--sf-error); }

html[data-sf-app=customer] { --blue:var(--sf-page); }
:root[data-community-palette] { --bg:var(--sf-page);--paper:var(--sf-page);--navy:var(--sf-sidebar);--card:var(--sf-panel);--sand:var(--sf-panel); }

:root[data-community-palette] { --blue-deep:var(--sf-sidebar);--blue-soft:var(--sf-link);--on-deep:var(--sf-text); }
html[data-community-palette] .button-primary { background:var(--sf-action);color:var(--sf-action-text); }
html[data-community-palette] .status-dot.connected { background:var(--sf-success); }
html[data-community-palette] .sf-wordmark { color:#f5f5f5;background:var(--sf-grey); }
html[data-community-palette] .wave-blurb h2 { color:var(--sf-text); }

/* App icons always retain the family orange dot, independent of palettes. */
html[data-community-palette] .sf-wordmark { align-items:center;gap:8px;max-width:100%; }
.sf-wordmark .sf-app-icon { display:block;flex:none;width:48px;height:48px;border-radius:11px;object-fit:contain; }
.site-footer .sf-wordmark .sf-app-icon,footer .sf-wordmark .sf-app-icon { width:36px;height:36px;border-radius:8px; }
@media(max-width:420px) { .sf-wordmark .sf-app-icon { width:40px;height:40px; } }

.sf-card-icon { display:block;width:64px;height:64px;margin-bottom:16px;border-radius:14px; }

/* Native darkmode palette collection popup. */
.sf-palette-panel { position:absolute;right:0;top:calc(100% + 8px);width:min(380px,calc(100vw - 40px));max-height:min(620px,70dvh);overflow:auto;padding:14px;background:var(--sf-panel);color:var(--sf-text);border:1px solid var(--sf-border);border-radius:14px;z-index:50;box-shadow:0 12px 30px #0005;box-sizing:border-box; }
.sf-picker-header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px; }
.sf-picker-header p { margin:0;font-size:13px;line-height:1.4;font-weight:600; }
.sf-picker-close { min-height:36px;padding:6px 10px;border:1px solid var(--sf-border);border-radius:8px;background:var(--sf-surface);color:var(--sf-text);font:inherit;cursor:pointer; }
.sf-palette-section + .sf-palette-section { margin-top:16px; }
.sf-palette-section h3 { margin:0 0 8px;font-size:13px;font-weight:700;line-height:1.4; }
.sf-palette-panel .sf-palette-grid { position:static;width:auto;padding:0;box-shadow:none;background:transparent;border:0; }
.sf-explore-palettes { display:block;margin-top:16px;padding:12px;border:1px solid var(--sf-border);border-radius:10px;color:var(--sf-link);text-align:center;font-weight:600;text-decoration:none; }
.sf-picker summary { min-height:44px;box-sizing:border-box; }

.sf-explore-palettes { margin:0 0 14px; }