/* Shared account and native layouts use the SiteVue tokens from style.css. */
.auth-gate { position:fixed; inset:0; z-index:100; background:var(--sv-ink); overflow:auto; display:flex; flex-direction:column; align-items:center; padding:48px 24px; }
.auth-gate[hidden] { display:none; }
.signed-out .shell { display:none; }
.auth-brand { position:absolute; top:24px; left:24px; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--sv-fg-3); }
.auth-brand img { display:block; width:24px; height:25px; }
.auth-card { width:100%; max-width:380px; margin:auto; padding:64px 0; }
.auth-card h1 { font-size:28px; line-height:1.3; margin:0 0 12px; }
.auth-note { font-size:14px; line-height:1.6; color:var(--sv-fg-3); margin-bottom:28px; }
.auth-card label { display:block; font-size:12px; margin:20px 0 8px; color:var(--sv-fg-2); }
.auth-card input,.auth-card select { width:100%; min-height:48px; border:1px solid var(--sv-border-2); border-radius:6px; padding:12px; background:var(--sv-surface-1); color:var(--sv-fg-1); font:inherit; font-size:16px; }
.auth-card form>.button { width:100%; margin:24px 0 16px; min-height:48px; }
.auth-card .text-button { margin:12px 16px 0 0; }
.auth-footer { color:var(--sv-fg-4); font-size:11px; }
#signin-code { font-size:24px; letter-spacing:.22em; font-variant-numeric:tabular-nums; }
.error { color:var(--error-text); font-size:12px; line-height:1.6; }
#org-switch { width:auto; max-width:240px; border:0; border-radius:4px; background:var(--sv-surface-2); color:var(--sv-fg-1); font:inherit; font-weight:600; padding:9px 30px 9px 12px; }
#org-switch~span { display:none; }
.page-note { margin-top:-14px; margin-bottom:24px; }
.section-title { font-size:15px; margin:28px 0 16px; }
.invite-card { margin-bottom:24px; }
.inline-form { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.inline-form>div { flex:1; min-width:130px; }
.inline-form>div:first-child { flex:2; }
.inline-form .button { margin:0; min-height:42px; }
#invite-result input { width:100%; margin:8px 0; }
.member-list { overflow:hidden; }
.member-row { padding:18px 24px; display:flex; gap:20px; align-items:center; border-bottom:1px solid var(--sv-border-1); font-size:13px; }
.member-row:last-child { border-bottom:0; }
.member-row>div:first-child,.member-row>span:first-child { flex:1; min-width:0; }
.member-row strong { font-size:13px; font-weight:500; }
.member-row .hint { margin:5px 0 0; overflow-wrap:anywhere; }
.member-row[hidden] { display:none; }
.role-tag { font-size:11px; color:var(--sv-fg-3); text-transform:capitalize; border:1px solid var(--sv-border-1); border-radius:4px; padding:4px 8px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.metric { padding:20px; }
.metric p { font-size:12px; color:var(--sv-fg-3); margin:0 0 16px; }
.metric strong { font-size:32px; font-weight:500; font-variant-numeric:tabular-nums; }
.trend-panel { padding:24px; }
.trend-panel h2 { font-size:14px; }
.signup-chart { height:110px; display:flex; gap:5px; margin:24px 0 14px; align-items:flex-end; }
.signup-chart>div { flex:1; height:100%; display:flex; align-items:flex-end; }
.signup-chart span { display:block; width:100%; background:var(--sv-fg-2); border-radius:2px 2px 0 0; }
#page-admin>input { width:100%; margin:0 0 16px; padding:12px; color:var(--sv-fg-1); background:var(--sv-surface-1); border:1px solid var(--sv-border-1); border-radius:6px; font:inherit; }
.account-nav[hidden] { display:none; }
.org-admin-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:28px 0 16px; }
.org-admin-heading .section-title { margin:0; }
.merge-dialog { width:min(640px,calc(100% - 32px)); }
.merge-preview { overflow-wrap:anywhere; }
.merge-preview h3 { font-size:15px; margin:24px 0 12px; }
.merge-preview ul { padding-left:20px; font-size:13px; line-height:1.6; }
.merge-preview li { margin:8px 0; }
.merge-dialog .dialog-actions { flex-wrap:wrap; }
@media(max-width:900px) { .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
 .auth-gate { padding:calc(28px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); }
 .auth-card { padding-block:40px; }
 .auth-brand { top:calc(env(safe-area-inset-top) + 12px); left:20px; }
 .sidebar nav { overflow-x:auto; }
 .sidebar .nav-item { flex:1 0 56px; }
 #org-switch { max-width:155px; font-size:12px; }
 .topbar { padding-top:calc(6px + env(safe-area-inset-top)); }
 .topbar .breadcrumb:has(#org-switch:not([hidden])) { display:flex; }
 .member-row { padding:16px; gap:10px; flex-wrap:wrap; }
 .member-row>div:first-child { flex-basis:55%; }
 .member-row .text-button { min-height:40px; }
 .inline-form { display:block; }
 .inline-form .button { margin-top:20px; }
 .metrics { gap:10px; }
 .metric { padding:16px; }
 .metric strong { font-size:28px; }
 .metric p { font-size:11px; }
 .trend-panel { padding:16px; }
}
:root[data-theme='dark'] .auth-brand img { filter:invert(1); }

.app-downloads { display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px 24px; }
.app-download { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--sv-fg-2); font-size:12px; text-decoration:none; }
.app-download:hover { color:var(--sv-fg-1); text-decoration:underline; }
.download-label { padding:3px 6px; border:1px solid var(--sv-border-1); border-radius:4px; font-size:10px; color:var(--sv-fg-3); text-decoration:none; }

.invite-email-wrap{display:flex;align-items:center;gap:0;border:1px solid var(--sv-border-2);border-radius:4px;background:var(--sv-surface-1);min-width:0;overflow:hidden}
.invite-email-wrap:focus-within{outline:2px solid var(--sv-fg-3);outline-offset:1px}
#invite-email{border:0;outline:0;background:transparent;min-width:60px;flex:1;width:100%}
.invite-domain{color:var(--sv-fg-4);padding-right:12px;white-space:nowrap;pointer-events:none}
#invite-result>.button{margin-top:12px;margin-right:8px}

.billing-summary{display:flex;align-items:center;gap:16px;padding:24px;margin-bottom:24px;flex-wrap:wrap}
.billing-summary>div:first-child{flex:1;min-width:160px}
.billing-summary h2,.billing-plan h2,.billing-current h2{font-size:16px;margin:0 0 8px}
.billing-summary p{margin:0}
.billing-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:840px}
.billing-price{display:block;font-size:40px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:24px}
.billing-total{display:block;font-size:28px;font-weight:500;margin:20px 0}
.billing-plan{display:flex;flex-direction:column;align-items:flex-start}
.billing-plan>.hint{margin-top:4px}
.billing-saving{font-size:12px;color:var(--sv-fg-2);margin:4px 0 16px}
.billing-plan-total{font-size:14px;margin-top:auto;padding-top:20px}
.billing-plan>.button{width:100%;min-height:44px;margin-top:12px}
.billing-note{margin:20px 0;line-height:1.6}
@media(max-width:640px){.billing-plans{grid-template-columns:1fr}.billing-summary{padding:20px}.billing-price{font-size:36px}}

/* Settings sheet (profile button) */
dialog.settings-sheet { width:100%; max-width:100%; height:calc(100dvh - max(12px, env(safe-area-inset-top))); max-height:none; margin:auto 0 0; padding:0; border:0; border-radius:14px 14px 0 0; background:var(--sv-ink); overflow:hidden; }
dialog.settings-sheet[open] { animation:sheet-up .28s cubic-bezier(.2,.8,.2,1); }
@keyframes sheet-up { from { transform:translateY(100%); } }
@media (prefers-reduced-motion:reduce) { dialog.settings-sheet[open] { animation:none; } }
.settings-sheet > form { display:flex; flex-direction:column; height:100%; }
.sheet-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:56px; padding:0 8px; border-bottom:1px solid var(--sv-surface-2); }
.settings-sheet .sheet-header h2 { margin:0; font-size:16px; font-weight:600; }
.sheet-action { min-height:44px; padding:0 12px; border:0; background:none; color:var(--sv-fg-2); font-size:15px; justify-self:start; }
.sheet-save { justify-self:end; color:var(--sv-fg-1); font-weight:600; }
.sheet-body { flex:1; overflow-y:auto; padding:0 16px calc(24px + env(safe-area-inset-bottom)); }
.sheet-label { margin:44px 0 6px; font-size:13px; font-weight:500; color:var(--sv-fg-3); }
.sheet-group { border-bottom:1px solid var(--sv-surface-2); }
.sheet-group + .sheet-group { margin-top:44px; }
.sheet-body > .sheet-label:first-child { margin-top:24px; }
.sheet-group:has(.sheet-danger) { margin-top:44px; border-bottom:0; }
.sheet-fields { padding:0 0 20px; border-bottom:0; }
.settings-sheet .sheet-fields label { margin:14px 0 6px; }
.sheet-profile { display:flex; align-items:center; gap:16px; padding:24px 0 4px; }
.profile-photo { position:relative; flex:none; width:72px; height:72px; padding:0; border:0; border-radius:50%; background:var(--sv-surface-3) center/cover no-repeat; color:var(--sv-fg-1); font-size:24px; font-weight:600; cursor:pointer; }
.profile-photo.has-photo #profile-initials { visibility:hidden; }
.profile-photo-edit { position:absolute; right:-2px; bottom:-2px; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--sv-fg-1); color:var(--sv-ink); box-shadow:0 0 0 3px var(--sv-ink); }
.profile-fields { display:flex; flex:1; flex-direction:column; min-width:0; }
.settings-sheet .profile-fields input { width:100%; min-height:0; padding:3px 0; border:0; border-radius:0; background:none; font-size:16px; color:var(--sv-fg-2); }
.settings-sheet .profile-fields #account-name { font-size:20px; font-weight:600; color:var(--sv-fg-1); }
.settings-sheet .profile-fields input::placeholder { color:var(--sv-fg-4); }
.settings-sheet .sheet-inline-input { flex:1; width:auto; min-width:0; min-height:0; margin-left:auto; padding:0; border:0; border-radius:0; background:none; font-size:16px; color:var(--sv-fg-3); text-align:right; }
.settings-sheet .sheet-inline-input:focus { outline:none; color:var(--sv-fg-1); }
.settings-sheet .sheet-inline-input::placeholder { color:var(--sv-fg-4); }
.settings-sheet .profile-fields input:focus { outline:none; box-shadow:inset 0 -1px 0 var(--sv-fg-3); }
.settings-sheet .sheet-fields input { border-color:var(--sv-border-1); }
.settings-sheet .sheet-fields input:hover { border-color:var(--sv-border-2); }
.settings-sheet .sheet-fields input:focus { border-color:var(--sv-fg-3); }
.sheet-row { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; margin:0; padding:0; border:0; background:none; color:var(--sv-fg-1); font-size:15px; font-weight:400; text-align:left; text-decoration:none; cursor:pointer; }
.sheet-row:not([hidden]) ~ .sheet-row:not([hidden]) { border-top:1px solid var(--sv-surface-2); }
.sheet-row:hover { color:var(--sv-fg-2); }
:is(#sheet-links,#sheet-admin) .sheet-row:not(.sheet-switch)::after, #sheet-status::after, #sheet-view-as::after, .sheet-row:has(#account-department)::after { content:'chevron_right'; font-family:'Material Symbols Outlined'; font-size:22px; color:var(--sv-fg-3); font-feature-settings:'liga'; }
.sheet-select { justify-content:flex-start; }
.sheet-value { margin-left:auto; color:var(--sv-fg-3); }
.sheet-static { cursor:default; }
.sheet-static:hover { color:var(--sv-fg-1); }
.sheet-static .sheet-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
dialog.picker-sheet { width:100%; max-width:100%; max-height:70dvh; margin:auto 0 0; padding:8px 16px calc(16px + env(safe-area-inset-bottom)); border:0; border-radius:14px 14px 0 0; background:var(--sv-ink); overflow-y:auto; }
dialog.picker-sheet[open] { animation:sheet-up .24s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion:reduce) { dialog.picker-sheet[open] { animation:none; } }
.picker-grabber { width:36px; height:5px; margin:0 auto 12px; border-radius:3px; background:var(--sv-surface-3); }
.picker-sheet h2 { margin:0 0 8px; font-size:16px; font-weight:600; text-align:center; }
.picker-option { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; padding:0; border:0; background:none; color:var(--sv-fg-1); font-size:15px; text-align:left; cursor:pointer; }
.picker-option + .picker-option { border-top:1px solid var(--sv-surface-2); }
.picker-option[aria-selected='true'] { font-weight:600; }
.picker-option[aria-selected='true']::after { content:'check'; font-family:'Material Symbols Outlined'; font-size:22px; font-weight:400; font-feature-settings:'liga'; }
.sheet-danger { color:var(--sv-red); }
.sheet-footnote { margin:-8px 0 0; font-size:12px; color:var(--sv-fg-3); }
.settings-sheet .error:empty { display:none; }
.app-download-info { display:flex; flex-direction:column; gap:3px; min-width:0; padding:10px 0; }
.app-download-info small { font-size:12px; color:var(--sv-fg-3); }
#sheet-downloads .icon { flex:none; font-size:20px; color:var(--sv-fg-3); }
.settings-sheet > form { transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.settings-sheet.pushed > form { transform:translateX(-30%); }
.sheet-push { position:absolute; inset:0; display:flex; flex-direction:column; background:var(--sv-ink); transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1); box-shadow:-8px 0 24px rgb(0 0 0 / 25%); }
.sheet-push.in { transform:none; }
.sheet-push[hidden] { display:none; }
.sheet-back { color:var(--sv-fg-1); white-space:nowrap; }
.sheet-push-body { flex:1; overflow-y:auto; }
.sheet-push-body > .page { max-width:none; margin:0; padding:8px 16px calc(24px + env(safe-area-inset-bottom)); }
.sheet-push .admin-back, .sheet-push .page-heading:has(> h1:only-child) { display:none; }
.sheet-push .page-heading > h1 { display:none; }
@media (prefers-reduced-motion:reduce) { .settings-sheet > form, .sheet-push { transition:none; } }
@media (min-width:641px) {
  dialog.picker-sheet { width:min(400px, calc(100% - 32px)); margin:auto; border:1px solid var(--sv-border-2); border-radius:12px; }
  dialog.settings-sheet { width:min(520px, calc(100% - 32px)); height:min(760px, calc(100dvh - 64px)); margin:auto; border:1px solid var(--sv-border-2); border-radius:12px; }
}

/* Status row (kept on this device until the server supports sharing it) */
.status-swatch { flex:none; width:9px; height:9px; margin-left:-6px; border-radius:50%; background:var(--sv-green); }
[data-status='busy'] .status-swatch, [data-status='dnd'] .status-swatch { background:var(--sv-red); }
[data-status='away'] .status-swatch { background:var(--sv-yellow); }

/* Switch rows */
.settings-sheet label.sheet-switch { margin:0; font-size:15px; font-weight:400; color:var(--sv-fg-1); }
.sheet-switch input { appearance:none; -webkit-appearance:none; position:relative; flex:none; width:46px; min-height:0; height:28px; padding:0; border:0; border-radius:14px; background:var(--sv-surface-3); cursor:pointer; transition:background .2s; }
.sheet-switch input::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .2s; }
.sheet-switch input:checked { background:var(--sv-green); }
.sheet-switch input:checked::after { transform:translateX(18px); }

/* Platform is a full web workspace, with room for dense data on wide displays. */
#page-admin { max-width:none; }
.platform-views { display:flex; gap:8px; margin:0 0 24px; }
#page-admin .platform-views [aria-pressed='true'] { background:var(--sv-fg-1); color:var(--sv-ink); border-color:var(--sv-fg-1); }
.server-toolbar, .server-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.server-toolbar h2 { margin:0 0 6px; font-size:24px; }
.server-toolbar p { margin:0; }
.server-actions select { width:auto; min-width:150px; }
.server-services { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0 16px; }
.server-service, .server-chart, .server-detail { padding:22px; min-width:0; }
.server-service-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.server-service h3, .server-chart h3, .server-detail h3 { margin:0; font-size:15px; }
.server-service-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0 16px; }
.server-service p { margin:0; overflow-wrap:anywhere; }
.server-status { display:inline-flex; align-items:center; gap:8px; font-size:12px; }
.server-status::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--sv-fg-3); }
.server-status[data-state='ok']::before { background:var(--sv-green); }
.server-status[data-state='bad']::before { background:var(--sv-red); }
.server-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; padding:22px; margin:0 0 16px; border:1px solid var(--sv-border-1); border-radius:8px; }
.server-metric { display:flex; flex-direction:column; min-width:0; gap:8px; }
.server-metric strong { font-size:24px; font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.server-metric small { font-size:11px; line-height:1.5; }
.server-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.server-chart svg { display:block; width:100%; height:auto; margin:20px 0 0; overflow:visible; }
.chart-grid { stroke:var(--sv-border-1); stroke-width:1; }
.chart-line { fill:none; stroke:currentColor; stroke-width:2; vector-effect:non-scaling-stroke; }
.chart-dot { fill:currentColor; }
.series-0 { color:var(--sv-green); }
.series-1 { color:var(--sv-yellow); }
.server-legend { display:flex; gap:16px; font-size:11px; margin-top:10px; }
.server-legend span::before { content:'—'; margin-right:6px; }
.chart-scale { display:flex; justify-content:space-between; gap:8px; font-size:10px; color:var(--sv-fg-3); }
.chart-detail { min-height:30px; margin:14px 0 0; font-size:11px; }
.server-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0; }
.server-uptime { margin-top:24px; }
.server-uptime>strong, .server-uptime>span { display:block; margin:6px 0; overflow-wrap:anywhere; font-size:12px; }
.server-uptime p { font-size:11px; }
.uptime-slots { display:grid; grid-template-columns:repeat(60,minmax(0,1fr)); gap:2px; margin:14px 0; }
.uptime-slots>span { height:24px; background:var(--sv-surface-3); border-radius:2px; }
.uptime-slots [data-state='ok'] { background:var(--sv-green); }
.uptime-slots [data-state='bad'] { background:var(--sv-red); }
.server-provider { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-top:1px solid var(--sv-border-1); font-size:12px; flex-wrap:wrap; }
.server-event { display:grid; grid-template-columns:170px minmax(160px,1fr) minmax(0,2fr); gap:8px 20px; padding:18px 0; border-bottom:1px solid var(--sv-border-1); font-size:12px; overflow-wrap:anywhere; }
.server-event:first-of-type { margin-top:12px; }
.server-event:last-child { border-bottom:0; padding-bottom:0; }
.server-event time { color:var(--sv-fg-3); font-size:11px; }
.server-event code { grid-column:2/-1; color:var(--sv-fg-3); font-size:10px; }
.server-warning { padding:14px 18px; border-left:3px solid var(--sv-yellow); background:var(--sv-surface-2); font-size:13px; line-height:1.5; }
.server-footnote { margin-top:20px; font-size:11px; }
@media(min-width:1650px) { .server-charts { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1100px) { .server-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:24px; } }
@media(max-width:700px) {
 .server-services, .server-charts, .server-details { grid-template-columns:minmax(0,1fr); }
 .server-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .server-service, .server-chart, .server-detail, .server-metrics { padding:16px; }
 .server-metric strong { font-size:20px; }
 .server-event { grid-template-columns:minmax(0,1fr); }
 .server-event code { grid-column:1; }
 .server-actions { gap:8px; }
}
#page-admin .metrics { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
#page-admin .member-row { padding:14px 20px; }
@media(min-width:1200px) {
 #page-admin .platform-directory { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:24px; align-items:start; }
 #page-admin .platform-directory .section-title { margin-top:0; }
 #page-admin .platform-directory .org-admin-heading { margin-top:0; }
}