.directory-filters{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0}.directory-filters label{display:grid;gap:6px;font-size:14px}.directory-filters input,.directory-filters select{width:100%;min-width:0;margin:0}.directory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin:20px 0}.directory-card{border:1px solid var(--line,#E3E7EC);border-radius:var(--radius-card,8px);background:var(--surface,#fff);padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.directory-card h3,.directory-card p{margin:0}.directory-card button{margin-top:auto}.directory-card .pill{display:inline-block;padding:3px 8px;border-radius:var(--radius-control,6px);background:var(--surface-subtle,#F4F6F8);color:var(--ink,#14161F);font-size:12px}.directory-card .pending{background:var(--warning-soft,#FDF4EA);color:var(--warning,#B45309)}.catalog-directory .row-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}#directory-dialog{width:min(1040px,calc(100vw - 32px));max-width:1040px}@media(max-width:700px){.directory-filters{grid-template-columns:1fr}.directory-grid{grid-template-columns:1fr}}


@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/heypass/geist-mono-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/heypass/geist-mono-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/heypass/onest-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/heypass/onest-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{--semantic-success:#0E7A48;--semantic-success-soft:#E7F5EC;--semantic-warning:#8A5A0B;--semantic-warning-soft:#FBF1DF;--semantic-danger:#B42F2F;--semantic-danger-soft:#FBEDED;--semantic-lime-ink:#526E10}
@media(prefers-color-scheme: dark){:root{--semantic-success:#3CC47F;--semantic-success-soft:#16301F;--semantic-warning:#E3A640;--semantic-warning-soft:#352914;--semantic-danger:#F07070;--semantic-danger-soft:#3A1A1A;--semantic-lime-ink:#C6EC55}}
[data-theme=light]{--semantic-success:#0E7A48;--semantic-success-soft:#E7F5EC;--semantic-warning:#8A5A0B;--semantic-warning-soft:#FBF1DF;--semantic-danger:#B42F2F;--semantic-danger-soft:#FBEDED;--semantic-lime-ink:#526E10}
[data-theme=dark]{--semantic-success:#3CC47F;--semantic-success-soft:#16301F;--semantic-warning:#E3A640;--semantic-warning-soft:#352914;--semantic-danger:#F07070;--semantic-danger-soft:#3A1A1A;--semantic-lime-ink:#C6EC55}

/* Static WOFF2 files per weight, so 500/600/700 and mono 500 render as designed. */
@font-face {
  font-family:Archivo;
  src:url('/assets/heypass/archivo-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Archivo;
  src:url('/assets/heypass/archivo-500.woff2') format('woff2');
  font-weight:500;
  font-display:swap
}
@font-face {
  font-family:Archivo;
  src:url('/assets/heypass/archivo-600.woff2') format('woff2');
  font-weight:600;
  font-display:swap
}
@font-face {
  font-family:Archivo;
  src:url('/assets/heypass/archivo-700.woff2') format('woff2');
  font-weight:700;
  font-display:swap
}
@font-face {
  font-family:'IBM Plex Mono';
  src:url('/assets/heypass/ibm-plex-mono-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:'IBM Plex Mono';
  src:url('/assets/heypass/ibm-plex-mono-500.woff2') format('woff2');
  font-weight:500;
  font-display:swap
}
:root {
  color-scheme:light;
  font-family:Onest,Archivo,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  font-synthesis:none;
  color:var(--ink);
  background:var(--canvas);
  --ink:#191B16;
  --ink-hover:#000000;
  --muted:#5F6459;
  --signal:#2F6FED;
  --signal-on-ink:#C6EC55;
  --accent:#191B16;
  --accent-hover:#000000;
  --accent-soft:#EEF7CF;
  --on-accent:#FFFFFF;
  --on-ink:#FFFFFF;
  --lime:#C6EC55;
  --lime-soft:#EEF7CF;
  --lime-line:#D9E7A8;
  --lime-ink:var(--semantic-lime-ink);
  --canvas:#FBFBFA;
  --surface:#FFFFFF;
  --surface-subtle:#F6F6F3;
  --line:#EAE9E4;
  --line-strong:#8C9087;
  --success:var(--semantic-success);
  --success-soft:var(--semantic-success-soft);
  --success-line:#B9DFC8;
  --warning:var(--semantic-warning);
  --warning-soft:var(--semantic-warning-soft);
  --warning-line:#EED6A8;
  --danger:var(--semantic-danger);
  --danger-soft:var(--semantic-danger-soft);
  --danger-line:#EBC0C0;
  --paused:#5F6459;
  --paused-soft:#F6F6F3;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --control-height:44px;
  --control-font-size:14px;
  --control-line-height:20px;
  --text-sm:13px;
  --text-md:14px;
  --text-lg:17px;
  --text-xl:23px;
  --radius-control:12px;
  --radius-card:18px;
  --radius-pill:999px;
  --shadow-card:none;
  --shadow-floating:0 1px 2px rgba(0,0,0,.04),0 24px 48px rgba(25,27,22,.16);
  --scrim:rgba(25,27,22,.34);
  --header-offset:68px;
  --navigation-bottom-inset:0px;
  --keyboard-inset:0px;
  --sidebar-width:244px;
  --sidebar-rail:72px;
  --content-width:1200px;
  --task-width:720px;
  --motion-fast:150ms;
  --font-mono:'Geist Mono','IBM Plex Mono',ui-monospace,monospace;
  --hp-border:var(--line);
  --hp-surface-subtle:var(--surface-subtle);
  --hp-accent:var(--accent);
  --hp-focus:var(--signal)
}
/* v2 dark theme: the same tokens, so every component follows the system setting. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme:dark;
    --ink:#F1F2EC;
    --ink-hover:#FFFFFF;
    --muted:#A6AA9E;
    --signal:#8FB2F7;
    --signal-on-ink:#191B16;
    --accent:#C6EC55;
    --accent-hover:#D4F36F;
    --accent-soft:#262E12;
    --on-accent:#191B16;
    --on-ink:#111210;
    --lime-soft:#262E12;
    --lime-line:#3A4519;
    --lime-ink:var(--semantic-lime-ink);
    --canvas:#111210;
    --surface:#1A1C17;
    --surface-subtle:#22251F;
    --line:#2C2F28;
    --line-strong:#71756A;
    --success:var(--semantic-success);
    --success-soft:var(--semantic-success-soft);
    --success-line:#24503A;
    --warning:var(--semantic-warning);
    --warning-soft:var(--semantic-warning-soft);
    --warning-line:#5A4520;
    --danger:var(--semantic-danger);
    --danger-soft:var(--semantic-danger-soft);
    --danger-line:#5E2A2A;
    --paused:#A6AA9E;
    --paused-soft:#22251F;
    --shadow-floating:0 1px 2px rgba(0,0,0,.4),0 24px 48px rgba(0,0,0,.45);
    --scrim:rgba(0,0,0,.55)
  }
}

* { box-sizing:border-box }
html { scroll-padding-top:calc(var(--header-offset) + 24px) }
body { margin:0; min-height:100dvh; -webkit-font-smoothing:antialiased }
button,input,select,textarea { font:inherit; -webkit-tap-highlight-color:transparent }
a { color:var(--signal); text-underline-offset:4px; text-decoration-thickness:1px }
a:hover { color:var(--signal) }
button,.button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--control-height); max-width:100%; padding:11px 16px; border:1px solid var(--accent);
  border-radius:var(--radius-control); background:var(--accent); color:var(--on-accent);
  font-size:var(--control-font-size); font-weight:600; line-height:var(--control-line-height); text-align:center; vertical-align:middle; cursor:pointer; text-decoration:none;
  transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)
}
button:hover,.button:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent) }
button:active,.button:active { box-shadow:inset 0 1px 3px #0003 }
/* Disabled controls keep readable contrast instead of fading the whole button. */
button:disabled,.button[aria-disabled=true] { background:var(--surface-subtle); border-color:var(--line); color:var(--muted); cursor:not-allowed; box-shadow:none }
.quiet { background:var(--surface); border-color:var(--line); color:var(--ink) }
.quiet:hover { background:var(--surface-subtle); border-color:var(--line); color:var(--ink) }
.quiet:disabled { background:var(--surface); color:var(--muted) }
.danger { color:var(--danger); background:var(--surface); border-color:var(--danger-line) }
.danger:hover { color:var(--danger); background:var(--danger-soft); border-color:var(--danger) }
.text-button { min-height:44px; padding:8px 0; border:0; background:transparent; color:var(--signal); font-weight:600 }
.text-button:hover { background:transparent; color:var(--signal); text-decoration:underline }
.wide { width:100% }
:focus-visible { outline:2px solid var(--signal); outline-offset:2px }
/* Focus moved by script to a heading or main region is announced, not drawn. */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,main[tabindex="-1"]:focus,[data-local-feedback][tabindex="-1"]:focus { outline:none }
input:focus,select:focus,textarea:focus { outline:2px solid var(--signal); outline-offset:1px; border-color:var(--ink) }
.skip-link { position:fixed; top:-80px; left:16px; z-index:50; padding:12px 16px; border-radius:var(--radius-control); background:var(--ink); color:var(--on-ink) }
.skip-link:focus { top:12px }
[hidden] { display:none!important }

/* The same calm header is used on public and authenticated pages. */
header {
  min-height:var(--header-offset); height:var(--header-offset); padding:0 24px; display:flex; align-items:center;
  justify-content:space-between; gap:20px; background:var(--surface); border-bottom:1px solid var(--line)
}
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; font-size:24px; font-weight:700; letter-spacing:-1px; color:var(--ink); text-decoration:none }
header .brand img { display:block; width:109px; height:26px }
.mark { display:grid; place-items:center; width:38px; height:38px; border-radius:var(--radius-card); background:var(--ink); color:var(--signal-on-ink); font-size:27px; font-weight:700 }
header nav { display:flex; align-items:center; gap:16px; min-width:0; font-size:14px }
header nav>a { display:inline-flex; align-items:center; justify-content:center; min-height:var(--control-height); min-width:44px; color:var(--muted); text-decoration:none }
header nav>a:hover { color:var(--ink) }
header #identity { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px; font-size:13px; color:var(--muted) }
.notice { padding:8px 24px; background:var(--warning-soft); border-bottom:1px solid var(--warning-line); color:var(--warning); font-size:13px; text-align:center }
.notice a { color:inherit }
.notice strong { font-weight:600 }
.notice details { display:inline; margin:0 }
.notice summary { display:inline; padding:0 8px; font-size:13px; text-decoration:underline; font-weight:400 }
main { width:100%; max-width:var(--content-width); margin:0 auto; padding:40px 32px 56px; min-height:calc(100dvh - 160px) }
h1,h2,h3,p { margin-top:0 }
h1 { margin-bottom:8px; font-size:var(--text-xl); line-height:1.25; letter-spacing:-.025em; font-weight:700 }
h2 { margin-bottom:12px; font-size:var(--text-lg); line-height:1.35; letter-spacing:-.01em; font-weight:700 }
h3 { margin-bottom:8px; font-size:15px; line-height:1.4; font-weight:600 }
p { margin-bottom:16px; overflow-wrap:anywhere }
.muted { color:var(--muted); font-size:var(--text-md); line-height:1.6 }
.eyebrow { margin-bottom:6px; color:var(--muted); font-size:var(--text-sm); font-weight:600 }
.hero { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px }
.hero p { max-width:660px; margin-bottom:0 }
.card { min-width:0; padding:20px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); box-shadow:var(--shadow-card) }
.card>p:last-child { margin-bottom:0 }
#content>.card+.card,#content>.card+.grid,#content>.action-row+.source-grid,#content>.action-row+.card,#content>.card+.stats,#content>.grid+.card,#content>.help-grid+.card,#content>.card+.source-grid,#content>.stats+.card,#content>.request-home+.card { margin-top:16px }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr)); gap:12px }
.split { display:grid; grid-template-columns:1fr 1fr; gap:24px }
.stack { display:grid; gap:20px }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.spread { justify-content:space-between }
.action-row,.card-footer,.record-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px }
.action-row>button,.action-row>.button,.card-footer>button,.card-footer>.button,.record-actions>button,.record-actions>.button { margin:0 }
.card-footer { margin-top:16px; padding-top:16px; border-top:1px solid var(--line) }
.record-list { display:grid; min-width:0 }
.record-row { display:flex; align-items:center; gap:16px; min-width:0; padding:14px 0; border-top:1px solid var(--line); overflow-wrap:anywhere }
.record-row:last-child { padding-bottom:0 }
.record-title,.record-main { flex:1; min-width:0 }
.record-title { display:block }
.record-title p { margin:4px 0 0; color:var(--muted); font-size:var(--text-sm); font-weight:400 }
.record-main p { margin:4px 0 0 }
.record-row>.record-meta { flex:0 1 200px; min-width:0 }
.record-meta { color:var(--muted); font-size:var(--text-sm) }
.record-meta .badge { max-width:100% }
.record-actions { flex:none; justify-content:flex-end; max-width:100% }
.record-actions>button,.record-actions>.button { flex:none }
.attention-list .record-actions { width:160px }
.activity-list .record-actions { width:150px; text-align:right }
.record-list+.muted { margin-top:16px }

.list { display:grid; gap:12px }
.item { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; overflow-wrap:anywhere }
.item p { margin-bottom:6px }
/* One status pattern everywhere: a coloured dot plus a text label. */
.badge,.pill { display:inline-flex; align-items:center; gap:7px; padding:3px 8px; border:0; border-radius:var(--radius-control); background:var(--surface-subtle); color:var(--ink); font-size:var(--text-sm); font-weight:600; line-height:1.5; white-space:nowrap }
.badge:before { content:''; flex:none; width:7px; height:7px; border-radius:var(--radius-pill); background:var(--muted) }
.pill:before { content:none }
.badge.ready,.badge.good { color:var(--success) }
.badge.ready:before,.badge.good:before { background:var(--success) }
.badge.pending,.badge.warning,.badge.setup,.badge.progress { color:var(--warning) }
.badge.pending:before,.badge.warning:before,.badge.setup:before,.badge.progress:before { background:var(--warning) }
.badge.bad { color:var(--danger) }
.badge.bad:before { background:var(--danger) }
.badge.paused,.badge.neutral { color:var(--muted) }
.badge.paused:before { background:transparent; box-shadow:inset 0 0 0 1.5px var(--muted) }
.badge.plain:before { content:none }
.badge.role { color:var(--signal) }
.badge.role:before { content:none }
.ready:not(.badge) { background:var(--success-soft); color:var(--success); border-color:var(--success-line) }
.pending:not(.badge) { background:var(--warning-soft); color:var(--warning); border-color:var(--warning-line) }
.wide-grid { grid-column:1/-1 }
small { font-size:12px; line-height:1.5; color:var(--muted) }
hr { margin:24px 0; border:0; border-top:1px solid var(--line) }
.mono,.verification-address,.code,pre,code,time,.timestamp { font-family:var(--font-mono); font-variant-numeric:tabular-nums }
.timestamp { font-size:var(--text-sm); color:var(--muted); white-space:nowrap }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px }
.empty { padding:28px 24px; border:1px dashed var(--line); border-radius:var(--radius-card); color:var(--muted); font-size:var(--text-md); text-align:center; background:var(--surface) }
details { margin-top:20px }
summary { min-height:44px; padding:10px 0; font-size:14px; font-weight:600; cursor:pointer }
footer { padding:24px 28px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:2; text-align:center }
footer a { margin-left:12px; color:var(--muted) }
label { display:block; margin-bottom:8px; font-size:14px; font-weight:600 }
input,select,textarea { display:block; width:100%; min-width:0; min-height:var(--control-height); margin:0 0 20px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-control); background:var(--surface); color:var(--ink); font-size:16px; line-height:22px; transition:border-color var(--motion-fast) }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1 }
input[type=checkbox],input[type=radio] { display:inline-block; flex:none; width:18px; min-height:18px; margin:0; accent-color:var(--ink) }
input[readonly],textarea[readonly] { background:var(--surface-subtle) }
textarea { min-height:112px; resize:vertical }
form .muted { margin-bottom:20px }
.code { font-size:28px; letter-spacing:6px; font-variant-numeric:tabular-nums; text-align:center }
.mailbox-verification { display:grid; gap:16px }
.mailbox-verification>h2,.mailbox-verification>p,.mailbox-verification form { margin:0 }
.mailbox-verification>.source-feedback:empty { display:none }
.mailbox-verification>.source-send { justify-self:start }
.verification-code { max-width:300px; height:52px; font:24px/1.2 var(--font-mono); letter-spacing:6px; text-align:center }
.mailbox-verification form button { width:auto; min-width:160px }
.mailbox-conflict { margin:16px 0; padding:20px; border:1px solid var(--warning-line); border-radius:var(--radius-card); background:var(--warning-soft) }
.mailbox-conflict h3 { margin:0 0 8px }
.mailbox-conflict .action-row { margin-top:16px }
.app-account-options { margin:4px 0 20px; border-top:1px solid var(--line) }
.app-account-options>summary { color:var(--muted) }
.app-account-options[open]>summary { margin-bottom:12px }
.template-panel>summary { font-weight:600 }
details.template-panel:not([open]) { padding:0 16px }
.template-panel>summary+* { margin-top:16px }
.wizard>button:not(.wizard-back) { margin-bottom:16px }
.fw-filter-query { min-height:88px; resize:vertical; font-family:var(--font-mono); overflow-wrap:anywhere }
.field-help { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.6 }
input+.field-help,select+.field-help,textarea+.field-help { margin-top:-10px }
.action-row+.field-help,button+.field-help { margin-top:12px }
.banner { margin-bottom:24px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-subtle); color:var(--ink); font-size:14px }
.banner p:last-child { margin:0 }
/* Local feedback carries its own tone wherever it is placed (cards, forms, dialogs). */
[data-local-feedback] { position:relative; margin:12px 0; padding:12px 14px; border:1px solid var(--success-line); border-radius:var(--radius-card); background:var(--success-soft); color:var(--success); font-size:14px }
[data-local-feedback].error { border-color:var(--danger-line); background:var(--danger-soft); color:var(--danger) }
#message { position:sticky; top:calc(var(--header-offset) + 12px); z-index:8; margin-bottom:24px; padding:14px 16px; border:1px solid var(--success-line); border-radius:var(--radius-card); background:var(--success-soft); color:var(--success); white-space:pre-line; font-size:14px }
#message.error { background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger) }
[data-local-feedback],h1,.fw-hint { scroll-margin-top:calc(var(--header-offset) + 20px) }
[data-local-feedback] { overflow-wrap:anywhere }
/* Transient confirmations; errors stay inline where the person is working. */
.toast-region { position:fixed; left:50%; bottom:calc(var(--keyboard-inset) + var(--navigation-bottom-inset) + max(16px,env(safe-area-inset-bottom))); z-index:40; display:grid; gap:8px; width:min(440px,calc(100vw - 32px)); transform:translateX(-50%); pointer-events:none }
body:has(.workspace-support-launcher) .toast-region { bottom:calc(var(--keyboard-inset) + var(--navigation-bottom-inset) + max(76px,env(safe-area-inset-bottom))) }
.toast { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:var(--radius-card); background:var(--ink); color:var(--on-ink); font-size:14px; line-height:1.5; box-shadow:var(--shadow-floating); pointer-events:auto; animation:hp-rise .22s ease-out }
.toast:before { content:''; flex:none; width:7px; height:7px; margin-top:7px; border-radius:var(--radius-pill); background:var(--signal-on-ink) }
@keyframes hp-rise { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }

/* Authentication stays focused even when older pages include a story panel. */
body[data-page=auth] main { max-width:560px; padding-top:56px }
body[data-page=auth] header nav>a:not(.auth-nav) { display:none }
body[data-page=auth] footer { border:0 }
body[data-page=auth] { background:var(--surface) }
.auth-layout { display:block; min-height:0 }
.auth-story { display:none }
.auth-form { width:100%; max-width:440px; margin:0 auto }
.auth-form h1 { font-size:28px }
.auth-form .card { padding:0; border:0; background:transparent; box-shadow:none }
.auth-form h2 { font-size:var(--text-lg) }
.auth-switch { margin-top:24px; font-size:14px; text-align:center; color:var(--muted) }
.auth-switch a { font-weight:600 }
.auth-trust { margin-top:18px; font-size:13px; line-height:1.6; text-align:center; color:var(--muted) }
.auth-trust strong { color:var(--ink); font-weight:500 }
.auth-trust-choice { margin:16px 0 24px }
.auth-trust-choice label { display:flex; align-items:center; gap:10px; min-height:44px; margin:0 }
.auth-trust-choice .muted { margin:0 0 0 28px; font-size:13px }
.auth-return { margin-top:18px }
.auth-code-actions { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin:16px 0 }
.auth-code-actions button { padding:10px 12px; font-size:13px }
.verification-address { color:var(--ink); overflow-wrap:anywhere; font-weight:600 }
.auth-loading { padding:32px 0; color:var(--muted); font-size:14px }

/* Explicit grid areas keep the footer after content with or without a notice. */
body[data-page=workspace] {
  display:grid; grid-template-columns:calc(var(--sidebar-width) + 24px) minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;
  grid-template-areas:'sidebar header' 'sidebar notice' 'sidebar main' 'sidebar footer';
  background:var(--surface-subtle)
}
body[data-page=workspace]>header { grid-area:header; position:sticky; top:0; z-index:12; padding:12px 24px; background:var(--surface-subtle); border:0; justify-content:flex-end }
body[data-page=workspace]>header>.brand { display:none }
body[data-page=workspace]>.notice { grid-area:notice }
body[data-page=workspace]>.workspace-sidebar { grid-area:sidebar; min-width:0 }
body[data-page=workspace]>main { grid-area:main; min-width:0; width:calc(100% - 24px); max-width:var(--content-width); min-height:calc(100dvh - 160px); margin:0 auto 0 0; padding:28px 32px 40px; border:1px solid var(--line); border-radius:24px; background:var(--canvas); font-size:var(--text-md) }
body[data-page=workspace]>footer { grid-area:footer; margin:0 24px 0 0; min-width:0; border:0 }
.workspace-sidebar { position:sticky; top:12px; align-self:start; display:flex; flex-direction:column; height:calc(100dvh - 24px); min-height:0; overflow:hidden; scrollbar-width:thin; padding:12px 10px; margin:12px; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:0 1px 2px #00000005 }
.sidebar-top { display:flex; align-items:center; justify-content:space-between; gap:4px; flex:none; margin-bottom:12px; padding-left:10px }
.sidebar-brand img { display:block; width:102px; height:auto }
.sidebar-brand { min-height:44px; min-width:0 }
.sidebar-sections { flex:1 1 auto; min-height:88px; overflow-y:auto; scrollbar-width:thin }
.sidebar-toggle { flex:none; width:44px; min-width:44px; height:44px; padding:10px }
.sidebar-toggle svg { display:block; width:20px; height:20px }
.workspace-sidebar nav { display:grid; gap:2px }
.workspace-sidebar nav a,.workspace-sidebar nav button { display:flex; align-items:center; justify-content:flex-start; gap:10px; width:100%; min-height:var(--control-height); padding:8px 12px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--muted); box-shadow:none; font-size:14px; font-weight:500; line-height:20px; text-align:left; text-decoration:none }
.workspace-sidebar nav a:hover,.workspace-sidebar nav button:hover { background:var(--surface-subtle); color:var(--ink) }
.workspace-sidebar nav a[aria-current=page],.workspace-sidebar nav button[aria-current=page] { background:var(--ink); color:var(--on-ink); font-weight:600 }
.workspace-sidebar nav a[aria-current=page] .nav-symbol,.workspace-sidebar nav button[aria-current=page] .nav-symbol { background:transparent; color:var(--on-ink) }
.workspace-sidebar .nav-symbol { width:20px; height:20px; background:transparent; color:inherit }
.nav-symbol { display:inline-grid; place-items:center; flex-shrink:0; width:20px; font-size:16px; text-align:center }
.nav-symbol svg { display:block; width:18px; height:18px }
.nav-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sidebar-heading { display:flex; align-items:center; gap:10px; flex:none; min-width:0; min-height:60px; padding:10px; margin-bottom:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-subtle); color:var(--ink); text-decoration:none }
.sidebar-heading>div { min-width:0 }
a.sidebar-heading:hover { background:var(--surface-subtle); color:var(--ink) }
.workspace-initial { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border-radius:var(--radius-control); background:var(--lime); color:#191B16; font-size:13px; font-weight:700 }
.sidebar-heading strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:1.3 }
.sidebar-heading small { display:block; margin-top:2px; font-size:12px }
.sidebar-group { display:block; padding:16px 8px 6px; color:var(--muted); font-size:var(--text-sm); font-weight:600 }
.sidebar-divider { margin:12px 8px; border-top:1px solid var(--line) }
.sidebar-foot { display:grid; flex:none; gap:8px; margin-top:auto; padding:8px 8px 0 }
.sidebar-foot a { font-size:13px; text-decoration:none }
.sidebar-foot button { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; justify-content:start; gap:2px 8px; min-width:44px; padding:8px; border:0; text-align:left; font-size:13px }
.sidebar-foot button small { grid-column:2; font-weight:400 }
.sidebar-help { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px; color:var(--muted) }
.sidebar-profile { display:flex; align-items:center; gap:10px; min-height:56px; padding:12px 0 0; border-top:1px solid var(--line); color:var(--ink) }
.sidebar-profile>div { min-width:0 }
.sidebar-profile strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px }
.sidebar-profile small { display:block }
.report-tool { border-radius:var(--radius-pill); color:var(--warning); background:var(--warning-soft); border-color:var(--warning-line) }
.help-tool { border-radius:50% }
.sidebar-foot .muted { margin:0; font-size:12px }
.workspace-switch { display:inline-flex; align-items:center; min-height:var(--control-height); padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; line-height:var(--control-line-height); text-decoration:none }
.workspace-heading { margin-bottom:20px }
.workspace-heading .eyebrow { margin-bottom:6px }
.workspace-heading h1 { font-size:var(--text-xl) }
.search-label { display:inline-flex; align-items:center; gap:8px; min-width:0; overflow:hidden; white-space:nowrap }
.search-label>span { min-width:0; overflow:hidden; text-overflow:ellipsis }
.search-glyph { flex:none; width:16px; height:16px }
kbd { padding:2px 6px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); color:var(--muted); font:500 12px/16px var(--font-mono) }
.icon-button { min-width:44px; min-height:44px; padding:10px }
.workspace-header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; min-width:0 }
.account-menu { position:relative; margin:0 }
.account-menu>summary { display:flex; align-items:center; justify-content:center; gap:8px; min-width:var(--control-height); min-height:var(--control-height); padding:4px 10px 4px 4px; border:1px solid var(--line); border-radius:var(--radius-pill); font-size:14px; line-height:var(--control-line-height); list-style:none }
.account-menu>summary:not(:has(.avatar)) { padding:9px 14px }
.account-menu>summary::-webkit-details-marker { display:none }
.account-menu[open]>summary { background:var(--surface-subtle) }
.account-name { min-width:0; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.avatar { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:var(--radius-pill); background:var(--ink); color:var(--on-ink); font-size:12px; font-weight:700 }
.account-menu>div,.account-menu>nav { position:absolute; right:0; top:calc(100% + 8px); z-index:20; display:grid; gap:4px; min-width:220px; max-width:calc(100vw - 32px); padding:8px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); box-shadow:var(--shadow-floating) }
.account-menu a,.account-menu button { display:flex; align-items:center; justify-content:flex-start; min-height:44px; padding:10px 12px; border:0; border-radius:var(--radius-control); color:var(--ink); background:transparent; font-size:14px; text-decoration:none }
.account-menu a:hover,.account-menu button:hover { background:var(--surface-subtle) }
.account-menu #identity { display:block; max-width:100%; padding:8px 12px; white-space:normal; overflow-wrap:anywhere; font-family:var(--font-mono); font-size:13px }
.stats { display:flex; flex-wrap:wrap; gap:8px 28px; margin:-4px 0 20px; padding:0 }
.stat { display:flex; align-items:baseline; gap:8px; padding:0; border:0; background:transparent }
.stat strong { color:var(--ink); font:500 var(--text-xl)/1.2 var(--font-mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.stat span { color:var(--muted); font-size:13px }
.setup-card { overflow:hidden; border-color:var(--line) }
.setup-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; border-bottom:1px solid var(--line) }
.setup-heading h2 { margin:0 0 4px }
.setup-heading p { margin:0 }
.setup-count { padding:4px 8px; border-radius:var(--radius-control); background:var(--surface-subtle); color:var(--muted); font-size:13px; white-space:nowrap }
.setup-count.complete { background:var(--success-soft); color:var(--success) }
.setup-progress-bar { height:4px; margin:0 20px; overflow:hidden; border-radius:var(--radius-pill); background:var(--line) }
.setup-progress-fill { height:100%; border-radius:var(--radius-pill); background:var(--ink); transition:width var(--motion-fast) ease }
.setup-list { margin:0; padding:0; list-style:none }
.setup-list li { display:flex; align-items:center; gap:16px; padding:16px 20px; border-bottom:1px solid var(--line) }
.setup-list li:last-child { border-bottom:0 }
.setup-list li>div { flex:1; min-width:0 }
.setup-list h3 { margin:0 0 4px }
.setup-list p { margin:0 }
.setup-list .setup-next { background:var(--surface-subtle) }
.step-number { display:grid; place-items:center; flex-shrink:0; width:28px; height:28px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface); color:var(--muted); font:500 13px/1 var(--font-mono) }
.step-number.complete { background:var(--success-soft); border-color:var(--success-line); color:var(--success) }
.setup-secondary { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:24px; padding:20px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-subtle) }
.setup-secondary h3,.setup-secondary p { margin:0 0 6px }
.setup-other-steps { margin-top:16px }
.setup-summary { display:grid; gap:8px; margin:12px 0 0; padding:0; color:var(--muted); font-size:14px; list-style:none }
.setup-summary li { margin:0 }
.toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:20px }
.toolbar label { flex:1; max-width:450px; margin:0; color:var(--muted); font-size:13px; font-weight:500 }
.toolbar input,.toolbar select { margin:8px 0 0 }
.toolbar>input,.toolbar>select,.toolbar>button { margin:0 }
.toolbar-field { flex:1 1 150px; min-width:0 }
.toolbar-field-search { flex:2 1 220px }
.toolbar-field label { max-width:none }
.toolbar-field input,.toolbar-field select { max-width:none; margin:8px 0 0 }
.toolbar>select { max-width:195px }
.toolbar-label { display:block; color:var(--muted); font-size:13px }
.application-card { display:flex; flex-direction:column; gap:12px; padding:16px; transition:border-color var(--motion-fast) }
.application-card:hover { border-color:var(--line-strong) }
.app-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.app-card-head { display:flex; align-items:center; gap:12px; min-width:0 }
.app-card-head>div { min-width:0 }
.app-initial { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface-subtle); color:var(--ink); font-size:13px; font-weight:700 }
.application-card h2 { margin:0 0 2px; font-size:15px; line-height:1.35 }
.application-card p { margin:0; overflow-wrap:anywhere }
.application-card .muted { font-size:var(--text-sm) }
.application-card .account-email,.application-card p.mono { color:var(--muted); font:400 var(--text-sm)/1.5 var(--font-mono) }
.app-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:4px }
.app-actions button { min-height:var(--control-height); padding:8px 14px }
.application-card details { margin:0; padding-top:8px; border-top:1px solid var(--line) }
.application-card details button { margin:8px 4px 0 0; font-size:13px }
.application-card summary { color:var(--muted); font-size:13px }
.add-card { justify-content:center; align-items:flex-start; min-height:200px; border-style:dashed; background:transparent; box-shadow:none }
.add-card .app-initial { color:var(--ink); font-size:22px }
.help-note { margin-top:24px; color:var(--muted); font-size:13px }
.application-empty { max-width:var(--task-width) }
.application-empty li { margin:12px 0 }
.team-progress { margin-bottom:24px }
.member-search { max-width:520px }
.member-app-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr)); gap:12px }
.app-method { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:var(--text-sm); line-height:1.5 }
.status-summary { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:13px }
.status-summary p { margin:0 }
.member-list { display:grid; gap:0 }
.team-member { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:16px 0; border-bottom:1px solid var(--line) }
.team-member:first-child { padding-top:0 }
.team-member:last-child { padding-bottom:0; border-bottom:0 }
.team-member.item { margin:0; border-top:0 }
.team-member>div { display:grid; gap:6px; flex:1; min-width:0; overflow-wrap:anywhere }
.team-member>button { flex:none }
.team-member h3,.team-member p { margin:0; overflow-wrap:anywhere }
.team-member p.muted { font-family:var(--font-mono); font-size:var(--text-sm) }
.person-access { display:grid; gap:0; margin-top:16px; color:var(--ink); font-size:14px }
.person-access h3 { margin-bottom:0 }
.account-detail-body { min-width:0 }
.account-detail-body>.card+.card { margin-top:20px }
.workspace-home-card { display:flex; flex-direction:column; align-items:flex-start; gap:12px }
.workspace-home-card h2,.workspace-home-card p { margin:0 }
.workspace-home-card .button { margin-top:auto }
.home-create { max-width:560px; margin-top:24px }
.tabs,.workspace-subnav,.app-detail-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px }
.tabs button,.workspace-subnav button,.app-detail-tabs button { min-height:var(--control-height); padding:8px 14px; border-color:transparent; border-radius:var(--radius-pill); background:transparent; color:var(--muted) }
.tabs button:hover,.workspace-subnav button:hover,.app-detail-tabs button:hover { background:var(--surface-subtle); color:var(--ink) }
.tabs button[aria-pressed=true],.workspace-subnav button[aria-pressed=true],.workspace-subnav button[aria-current=page],.app-detail-tabs button[aria-selected=true],.app-detail-tabs button[aria-pressed=true],.app-detail-tabs button[aria-current=page] { border-color:var(--ink); background:var(--surface); color:var(--ink); font-weight:600 }
.directory-card { border-radius:var(--radius-card) }
.directory-card .pill { font-size:12px }
.directory-card button { font-size:14px }
.section-heading { margin:28px 0 16px }
.form-section { padding:24px 0; border-bottom:1px solid var(--line) }
.form-section:first-child { padding-top:0 }
.form-section:last-child { border-bottom:0; padding-bottom:0 }
.skeleton { min-height:16px; border-radius:var(--radius-control); background:var(--surface-subtle); animation:hp-pulse 1.6s ease-in-out infinite }
.skeleton-rows { display:grid; gap:12px; padding:16px }
.skeleton-rows .skeleton { height:18px }
@keyframes hp-pulse { 50% { opacity:.5 } }

/* The default follows viewport width; an explicit choice survives navigation and refresh. */
@media(min-width:821px) {
  body[data-page=workspace][data-sidebar=collapsed] { grid-template-columns:calc(var(--sidebar-rail) + 24px) minmax(0,1fr) }
  body[data-sidebar=collapsed] .workspace-sidebar { padding:12px 8px }
  body[data-sidebar=collapsed] .sidebar-brand { display:none }
  body[data-sidebar=collapsed] .sidebar-top { padding-left:0 }
  body[data-sidebar=collapsed] .sidebar-foot button small,body[data-sidebar=collapsed] .sidebar-profile>div { display:none }
  body[data-sidebar=collapsed] .sidebar-profile,body[data-sidebar=collapsed] .sidebar-help { justify-content:center }
  body[data-sidebar=collapsed] .sidebar-top { flex-direction:column; gap:8px }
  body[data-sidebar=collapsed] .sidebar-toggle svg { transform:scaleX(-1) }
  body[data-sidebar=collapsed] .workspace-sidebar .nav-label,body[data-sidebar=collapsed] .sidebar-heading>div,body[data-sidebar=collapsed] .sidebar-group { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  body[data-sidebar=collapsed] .sidebar-group+nav { margin-top:8px; padding-top:8px; border-top:1px solid var(--line) }
  body[data-sidebar=collapsed] .workspace-sidebar nav a,body[data-sidebar=collapsed] .sidebar-heading { justify-content:center; padding:6px }
  body[data-sidebar=collapsed] .sidebar-foot { padding:16px 0 8px }
  body[data-sidebar=collapsed] .sidebar-foot button { gap:0; padding:6px }
}
/* Responsive rules are deliberately grouped; there is one breakpoint per size. */
@media(max-width:1100px) {
  header { gap:16px }
  header #identity { max-width:140px }
  body[data-page=workspace]>main { padding:24px 24px 40px }
  .split { grid-template-columns:1fr }
  .grid,.member-app-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)) }
  .setup-list li { flex-wrap:wrap }
  .setup-list li>button { margin-left:44px }
}
@media(max-width:820px) {
  body[data-page=workspace] { --navigation-bottom-inset:calc(65px + env(safe-area-inset-bottom)) }
  header { height:auto; padding:12px 24px; gap:12px; flex-wrap:wrap }
  header nav { gap:10px; font-size:13px }
  header #identity { display:none }
  body[data-page=workspace] { display:block }
  body[data-page=workspace]>header { height:var(--header-offset); flex-wrap:nowrap; padding:10px 16px; justify-content:space-between; background:var(--surface); border-bottom:1px solid var(--line) }
  body[data-page=workspace]>header>.brand { display:flex }
  body[data-page=workspace]>.workspace-sidebar { display:none }
  body[data-page=workspace]>main { width:calc(100% - 20px); margin:10px 10px 0; padding:20px 16px 28px; border-radius:18px; min-height:calc(100dvh - 180px) }
  body[data-page=workspace]>footer { padding:20px 16px calc(88px + env(safe-area-inset-bottom)); margin:0 }
  body[data-page=workspace]>header>nav:not(.workspace-header-actions) { display:none }
  body[data-page=workspace]>header .brand { max-width:calc(100% - 112px) }
  .workspace-header-actions { flex:none; margin-left:0 }
  .workspace-header-actions>.workspace-switch { display:none }
  .workspace-header-actions>.product-tool { display:none }
  .workspace-header-actions .account-menu #identity { display:block }
  .account-menu .account-name,.account-menu .badge { display:none }
  .notice { padding:8px 16px; text-align:left }
  main { padding:28px 20px 40px }
  body[data-page=auth] main { padding:32px 24px 40px }
  .auth-form { max-width:440px }
  .hero { align-items:flex-start; flex-wrap:wrap; gap:16px; margin-bottom:20px }
  .hero h1,.workspace-heading h1 { font-size:var(--text-xl) }
  .workspace-heading { margin-bottom:16px }
  .stats { gap:6px 20px }
  .stat strong { font-size:19px }
  .setup-heading { flex-wrap:wrap; align-items:flex-start; padding:16px }
  .setup-heading h1 { font-size:var(--text-xl) }
  .setup-list li { padding:16px; gap:12px }
  .setup-list li>div { flex-basis:calc(100% - 44px) }
  .setup-list li>button { max-width:calc(100% - 44px); margin-left:40px }
  .setup-secondary { display:block; padding:16px }
  .setup-secondary button { margin-top:12px }
  .toolbar { flex-wrap:wrap; align-items:stretch; gap:10px; margin-bottom:16px }
  .toolbar label { flex:1 1 100%; max-width:none }
  .toolbar input { margin:6px 0 0 }
  .toolbar>select { flex:1; width:auto; min-width:125px; max-width:none; margin:0 }
  .toolbar>button { margin:0 }
  .card { padding:16px }
  .application-card { padding:14px }
  .grid,.member-app-grid,.directory-grid,.directory-filters { grid-template-columns:1fr }
  .tabs,.workspace-subnav,.app-detail-tabs { gap:4px; margin-bottom:16px }
  .tabs button,.workspace-subnav button,.app-detail-tabs button { padding:8px 12px; font-size:13px }
}
@media(max-width:640px) {
  .record-row { align-items:center; flex-wrap:wrap; gap:10px 12px }
  .record-title,.record-main { flex-basis:100% }
  .record-row>.record-meta { flex:1 1 auto }
  .record-actions { justify-content:flex-start }
  .attention-list .record-actions { width:auto }
  .activity-list .record-actions { width:auto; text-align:left }
  .toolbar-field,.toolbar-field-search { flex-basis:100% }
}
@media(max-width:380px) {
  body[data-page=workspace]>main { padding-left:12px; padding-right:12px }
  .card,.application-card { padding:14px }
  .code { font-size:24px; letter-spacing:4px }
  .account-menu>summary { padding:4px }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important }
}

.billing-capacity{padding:var(--space-5,20px);border:1px solid var(--line);border-radius:16px;margin:20px 0}.billing-addon-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}.billing-addon-inputs label:nth-of-type(2){grid-column:2;grid-row:1}.billing-addon-inputs input{min-width:0;width:100%;box-sizing:border-box}.billing-fit{color:var(--green,#2e9666)}.billing-total{font-size:1.15rem;font-weight:650;margin-top:20px}@media(max-width:600px){.billing-addon-inputs{display:block}.billing-addon-inputs input{margin-bottom:16px}}

.group-selection-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.group-selection{min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px}.group-selection .check-list{max-height:300px;overflow:auto;margin-top:12px}.group-selection .check-row[hidden]{display:none}.group-selection .check-row{overflow-wrap:anywhere}.group-change-summary{padding:12px;border-radius:12px;background:var(--surface)}.group-selection .action-row button,.note-presets button{min-height:44px}.group-selection input[type=search]{width:100%}@media(max-width:600px){.group-selection-columns{grid-template-columns:1fr}}

.billing-usage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}.billing-usage-meter meter{display:block;width:100%;height:12px;accent-color:var(--signal)}.request-timeline{padding-left:24px}.request-timeline li{padding:6px 0}.request-timeline time{display:block;font-size:12px;color:var(--muted)}@media(max-width:600px){.billing-usage-grid{grid-template-columns:1fr}}

.support-dialog { width:min(620px,calc(100vw - 32px)); max-width:620px; padding:24px }
.support-dialog .dialog-heading { margin-bottom:12px }
.support-intro { margin:0 0 20px; line-height:1.6 }
.support-conversation { display:flex; flex-direction:column; gap:14px; min-width:0 }
.support-conversation h3,.support-conversation h4,.support-conversation p { margin:0 }
.support-conversation h3 { font-size:20px; line-height:1.35; scroll-margin-top:20px }
.support-conversation h3:focus { outline:none }
.support-bubble { padding:14px 16px; background:var(--surface-subtle,var(--surface)); border:1px solid var(--line); border-radius:var(--radius,14px); line-height:1.6 }
.support-context { padding:0; border:0; background:none; font-size:13px; color:var(--muted); overflow-wrap:anywhere }
.support-choices { display:grid; gap:9px }
.support-choices button { width:100%; text-align:left; min-height:46px; padding:12px 14px; white-space:normal; line-height:1.4 }
.support-conversation>button { align-self:flex-start; max-width:100%; white-space:normal }
.support-conversation select { max-width:100%; width:100%; min-width:0 }
.support-steps { margin:0; padding:0 0 0 24px; line-height:1.65 }
.support-steps li { padding-left:4px; margin:0 0 10px }
.support-steps li:last-child { margin-bottom:0 }
.support-follow-up { display:flex; flex-wrap:wrap; gap:10px; padding-top:18px; margin-top:4px; border-top:1px solid var(--line) }
.support-follow-up h4 { width:100%; margin-bottom:3px }
.support-follow-up button { white-space:normal; text-align:left }
.support-conversation textarea { width:100%; min-width:0; resize:vertical; min-height:112px }
.support-reference { font-size:12px; line-height:1.5; overflow-wrap:anywhere; word-break:break-word }
.support-update { margin-top:8px; padding:12px; border-left:3px solid var(--accent); white-space:pre-wrap; overflow-wrap:anywhere }
.support-thread { width:100%; margin-top:10px }
.support-thread .support-update { margin:10px 0 }
.support-update time { display:block; font-size:12px; color:var(--muted); margin:3px 0 8px }
.support-update p { margin:0 }
.support-entry>button { margin:10px 8px 0 0 }
@media(max-width:520px) {
  .support-dialog { width:calc(100vw - 20px); padding:18px; max-height:calc(100dvh - 24px) }
  .support-conversation h3 { font-size:18px }
  .support-follow-up { flex-direction:column }
  .support-follow-up button,.support-conversation>button { width:100%; align-self:stretch; min-height:44px }
}

.hp-dialog.support-chat-dialog{box-sizing:border-box;position:fixed;inset:auto 20px 20px auto;margin:0;width:min(400px,calc(100vw - 40px));max-width:400px;height:min(680px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);overflow:hidden;padding:0;border:1px solid #e2e6dc;border-radius:20px;background:#fff;color:#191d15;box-shadow:0 16px 64px #14200929,0 2px 8px #1420090d}
.hp-dialog.support-chat-dialog[open]{display:flex;flex-direction:column;gap:0}
.hp-dialog.support-chat-dialog::backdrop{background:rgba(16,24,10,.1)}
.hp-dialog.support-chat-dialog .dialog-heading{position:static;display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fff;color:#191d15;margin:0;border:0;border-bottom:1px solid #eef0e9}
.hp-dialog.support-chat-dialog[data-chat-connected=true] .dialog-heading{position:absolute;inset:16px 12px auto auto;z-index:2;width:44px;height:44px;padding:0;border:0;background:transparent}
.hp-dialog.support-chat-dialog[data-chat-connected=true] .support-chat-identity{display:none}
.support-chat-identity{display:flex;align-items:center;gap:10px;min-width:0}
.support-chat-avatar{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px}
.hp-dialog.support-chat-dialog h2{min-width:0;margin:0;font-size:16px;letter-spacing:-.2px;overflow-wrap:anywhere;color:inherit}
.hp-dialog.support-chat-dialog p{font-size:12px;line-height:1.5;margin:0}
.hp-dialog.support-chat-dialog button{cursor:pointer;min-height:44px;padding:10px 16px;border-radius:12px;border:1px solid #deded8;background:#fff;color:#191d15;font:inherit}
.hp-dialog.support-chat-dialog button[hidden]{display:none}
.hp-dialog.support-chat-dialog>button{margin:12px 18px;align-self:flex-start}
.hp-dialog.support-chat-dialog .icon-button{width:44px;flex:none;padding:0;font-size:24px;background:transparent;color:#62695c;border-color:transparent}
.hp-dialog.support-chat-dialog .icon-button:hover{background:#f3f5ef;color:#191d15}
.hp-dialog.support-chat-dialog .support-chat-status{flex:none;padding:10px 18px;color:#5d6558;border-bottom:1px solid #e9ebe5;background:#f8faf4}
.hp-dialog.support-chat-dialog .support-chat-status.is-connected{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}
.hp-dialog.support-chat-dialog .support-chat-caution{padding:10px 16px 0;color:#686f60;flex:none;border-top:1px solid #eef0e9;background:#fafbf8}
.support-chat-footer{display:flex;flex:none;align-items:flex-start;justify-content:space-between;gap:16px;padding:0 16px 6px;background:#fafbf8}
.hp-dialog.support-chat-dialog a{color:inherit;font-size:12px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.support-chat-notice{min-width:0;font-size:12px;border:0;padding:0;margin:0;max-height:160px;overflow:auto}
.support-chat-notice summary{cursor:pointer;min-height:44px;align-content:center;text-decoration:underline;text-underline-offset:3px}
.support-chat-notice p{padding:0 0 8px}
.support-chat-frame{flex:1;min-height:0;width:100%;margin:0;background:#fff}
.support-chat-frame[hidden]{display:none}
.hp-dialog.support-chat-dialog:has(.support-chat-frame[hidden]) .support-chat-status{flex:1;align-content:center;text-align:center;font-size:14px}
.support-chat-frame[aria-busy=true] iframe{visibility:hidden}
.support-chat-frame iframe{display:block;border:0;width:100%;height:100%;border-radius:0}
@media(max-width:540px){.hp-dialog.support-chat-dialog{inset:8px;width:calc(100vw - 16px);max-width:none;height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);border-radius:18px}.hp-dialog.support-chat-dialog .dialog-heading{padding:10px 14px}.hp-dialog.support-chat-dialog .support-chat-status{padding:8px 14px}.support-chat-footer{padding-bottom:max(4px,env(safe-area-inset-bottom))}}
@media(max-height:520px){.hp-dialog.support-chat-dialog .support-chat-caution{padding-top:4px}.support-chat-footer{padding-bottom:0}.hp-dialog.support-chat-dialog .support-chat-status{padding-top:4px;padding-bottom:4px}.support-chat-notice{max-height:90px}}
.heypass-support-launcher{position:fixed;bottom:20px;right:20px;z-index:40;min-height:44px;padding:12px 18px;border-radius:24px;border:1px solid #191d15;background:#191d15;color:#fff;font:600 14px system-ui;cursor:pointer;box-shadow:0 4px 20px #0002}
.workspace-support-launcher{background:var(--ink,#191d15);color:var(--surface,#fff);bottom:calc(var(--keyboard-inset,0px) + var(--navigation-bottom-inset,0px) + max(12px,env(safe-area-inset-bottom)))}
body:has(.workspace-support-launcher)>footer{padding-bottom:84px}
@media(max-width:820px){.workspace-support-launcher{right:12px;padding:10px 14px}.workspace-support-launcher:focus-visible{outline:3px solid var(--accent,#c6ed54);outline-offset:3px}}
@media(max-width:420px){.heypass-support-launcher{bottom:14px;right:14px}}
@media(max-width:420px){.workspace-support-launcher{bottom:calc(var(--keyboard-inset,0px) + var(--navigation-bottom-inset,0px) + max(12px,env(safe-area-inset-bottom)));right:12px}}


/* A single compact, resumable setup journey. */
.wizard { max-width:760px; margin:0 }
.wizard .hero { margin-bottom:20px }
.wizard .hero h1 { font-size:23px }
.wizard .card { padding:22px }
.wizard .card[tabindex] { scroll-margin-top:calc(var(--header-offset) + 24px) }
.wizard>div>details { margin:20px 0 }
.wizard [role=status] h3 { margin-top:12px }
.wizard ol:not(.setup-roadmap):not(.fw-stepper):not(.fw-stage-guide):not(.progress) li { margin-bottom:12px; line-height:1.65 }
.wizard-top { display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; margin-bottom:16px }
.wizard-save-note { color:var(--muted); font-size:12px }
.wizard-back { min-height:44px; padding:8px 0; margin-bottom:0; border:0; background:transparent; color:var(--muted) }
.wizard-back:hover { background:transparent; color:var(--ink); box-shadow:none }
.wizard-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:24px }
.permission-actions { margin-top:16px }
.progress,.setup-roadmap { display:flex; align-items:flex-start; gap:8px; margin:0 0 24px; padding:0; list-style:none }
.progress li,.setup-roadmap li { flex:1; display:flex; align-items:center; gap:8px; min-width:0; color:var(--muted); font-size:12px; line-height:1.5 }
.progress li span,.setup-roadmap li>span:first-child { display:grid; place-items:center; flex-shrink:0; width:26px; height:26px; border:1px solid var(--line); border-radius:50%; background:var(--surface); font-size:12px }
.progress li[aria-current=step],.setup-roadmap li[aria-current=step] { color:var(--ink); font-weight:600 }
.progress li[aria-current=step] span,.setup-roadmap li[aria-current=step]>span:first-child { border-color:var(--accent); background:var(--accent); color:var(--on-accent) }
.setup-roadmap li.done>span:first-child,.setup-roadmap li.complete>span:first-child { border-color:var(--success-line); background:var(--success-soft); color:var(--success) }
.setup-roadmap button { min-height:44px; width:100%; padding:8px 4px; border:0; border-radius:8px; background:transparent; color:inherit; font-size:inherit; text-align:left }
.setup-roadmap button:hover { background:var(--surface-subtle) }
.setup-completion { padding:20px; border:1px solid var(--success-line); border-radius:var(--radius-card); background:var(--success-soft) }
.setup-completion h2 { color:var(--success) }
.setup-completion p:last-child { margin:0 }
.suggestions { display:grid; gap:8px; margin:-6px 0 20px }
.suggestions button { justify-content:flex-start; text-align:left; background:var(--surface); border-color:var(--line); color:var(--ink) }
.suggestions button:hover { background:var(--surface-subtle); border-color:var(--line-strong) }
.selected-app { margin-bottom:24px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-subtle); overflow-wrap:anywhere }
.selected-app strong { display:block }
.selected-app .muted { margin:4px 0 0 }
.app-picker-search .app-choice-list { margin:12px 0; gap:0; max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:var(--radius-control); padding:4px }
.app-choice-list .app-choice { display:flex; gap:12px; min-height:60px; padding:10px 12px; border:0; width:100%; border-radius:8px }
.app-choice-list .app-choice[aria-selected=true] { background:var(--accent-soft); outline:2px solid var(--signal); outline-offset:-2px }
.app-choice>span:last-child { display:grid; min-width:0; gap:2px; overflow-wrap:anywhere }
.app-choice small { color:var(--muted); font-size:12px; font-weight:400 }
.app-choice .app-initial,.app-choice-selected .app-initial { width:34px; height:34px; font-size:12px; flex-shrink:0 }
.app-picker-search .field-help { margin:0 0 12px }
.app-choice-other { margin:4px 0 0 }
.app-choice-selected { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px; margin-bottom:24px }
.app-choice-selected small { display:block; overflow-wrap:anywhere }
.app-choice-selected button { margin:0 }
.app-picker-form>.wide { margin-top:24px }
.app-account-fields .field-help { margin-top:-10px; margin-bottom:20px }
.app-account-fields .app-picker-next { margin:0; padding-top:4px }
.app-existing-logins { margin:20px 0 0; padding:16px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface-subtle) }
.app-existing-logins>.field-help { margin:0 0 8px }
.app-existing-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:10px 0; border-top:1px solid var(--line) }
.app-existing-row>div { flex:1; min-width:min(220px,100%); overflow-wrap:anywhere }
.app-existing-row strong,.app-existing-row .account-email { display:block; font-size:13px }
.app-existing-row button { flex-shrink:0 }
.activity-day { margin:24px 0 }
.activity-day-heading { margin:0 0 8px; font-size:13px; font-weight:600; color:var(--muted) }
.activity-day-list { list-style:none; margin:0; padding:0 }
.activity-request { border-top:1px solid var(--line) }
.activity-request>summary { display:grid; grid-template-columns:72px minmax(0,1fr) auto 16px; align-items:center; gap:16px; min-height:72px; padding:14px 4px; cursor:pointer; list-style:none }
.activity-request>summary::-webkit-details-marker { display:none }
.activity-request>summary::after { content:'›'; color:var(--muted); font-size:22px; text-align:center }
.activity-request[open]>summary::after { content:'⌄' }
.activity-request>summary:hover { background:var(--surface-subtle) }
.activity-request time { font-family:var(--font-mono); font-size:12px; color:var(--muted) }
.activity-request-copy { min-width:0; overflow-wrap:anywhere; font-weight:500; font-size:14px }
.activity-request-body { padding:0 20px 20px 92px; overflow-wrap:anywhere }
.activity-request-body p { margin:8px 0; font-size:13px }
@media(max-width:600px) {
  .app-choice-selected { gap:8px }
  .app-choice-selected button { padding-inline:10px }
  .activity-request>summary { grid-template-columns:1fr auto 16px; gap:8px; padding:14px 0 }
  .activity-request>summary time { grid-column:1; grid-row:1 }
  .activity-request-copy { grid-column:1 / span 2; grid-row:2 }
  .activity-request>summary .badge { grid-column:2; grid-row:1; max-width:110px; white-space:normal; text-align:center }
  .activity-request>summary::after { grid-column:3; grid-row:1 / span 2 }
  .activity-request-body { padding:0 0 16px }
}
.provider-note { margin-top:24px; color:var(--muted); font-size:14px }
.fw-history>summary { font-weight:600 }
.fw-history>.fw-complete { padding:16px 0; border-bottom:1px solid var(--line) }
.fw-history>.fw-complete:last-child { border-bottom:0 }
.fw-history>.fw-complete>button { margin-top:10px }
.fw-current { color:var(--ink); font-weight:600 }
.fw-complete>summary { list-style-position:inside; font-weight:600 }
.fw-complete>summary::marker { color:var(--success) }
.fw-complete[open]>summary { margin-bottom:16px }
.fw-address { margin-bottom:20px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-subtle) }
.fw-address input { font-family:var(--font-mono); font-size:16px; overflow-wrap:anywhere }
.fw-stepper { display:flex; gap:8px; list-style:none; padding:0; margin:20px 0 }
.fw-stepper li { flex:1; display:grid; grid-template-columns:24px 1fr; gap:4px 8px; align-items:center; padding-top:10px; border-top:3px solid var(--line); color:var(--muted); font-size:12px; overflow-wrap:anywhere }
.fw-stepper li small { grid-column:2; font-size:11px }
.fw-stepper li[aria-current=step] { border-color:var(--ink); color:var(--ink); font-weight:600 }
.fw-stepper li.done { border-color:var(--success); color:var(--success) }
.fw-step-icon { display:grid; place-items:center; width:24px; height:24px; border:1px solid currentColor; border-radius:50% }
.fw-stage-guide { display:flex; gap:4px; margin:16px 0 8px; padding:8px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--canvas); list-style:none }
.fw-stage-guide li { flex:1; padding:8px 4px; border-radius:6px; color:var(--muted); font-size:12px; line-height:1.4; text-align:center; overflow-wrap:anywhere }
.fw-stage-guide li.done { background:var(--success-soft); color:var(--success); font-weight:600 }
.fw-stage-guide li.active,.fw-stage-guide li[aria-current=step] { background:var(--accent); color:var(--on-accent); font-weight:600 }
.fw-hint { margin:16px 0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-subtle); color:var(--ink); font-size:14px }
.fw-hint strong { color:var(--ink) }
.fw-hint p { margin:4px 0 0 }
.fw-actions { margin-top:20px; padding-top:20px; border-top:1px solid var(--line) }
.fw-section-title { margin:24px 0 12px; color:var(--muted); font-size:12px; font-weight:600 }
.fw-instructions { margin:16px 0 }
.fw-instructions summary { cursor:pointer }
.fw-waiting { display:flex; align-items:flex-start; gap:12px; margin:12px 0; padding:16px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-subtle); color:var(--ink) }
.fw-waiting>div { min-width:0 }
.fw-waiting strong { display:block; font-size:16px }
.fw-waiting p { margin:6px 0; line-height:1.5; font-size:14px }
.fw-waiting small { display:block; color:var(--muted) }
.fw-waiting-indicator { flex:0 0 auto; width:20px; height:20px; margin-top:3px; border:2px solid var(--line); border-top-color:var(--ink); border-radius:50%; animation:fw-listening 1.4s linear infinite }
@keyframes fw-listening { to { transform:rotate(360deg) } }
.setup-updates { margin-bottom:20px; padding:20px; border:1px solid var(--warning-line); border-radius:var(--radius-card); background:var(--warning-soft) }
.setup-updates h2 { margin:0 0 8px; font-size:16px }
.setup-update { padding:10px 0 }
.setup-update p { margin:6px 0 }
.setup-update small { display:block; margin-bottom:8px }

/* v20 login identities, card actions and workspace panels. */
.login-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin:0 0 20px }
.login-toolbar .filter-chips { margin:0 }
.login-toolbar>input { width:min(100%,260px); margin:0 }
.login-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:14px }
.login-card { gap:14px; padding:16px; border-radius:16px }
.login-card .app-card-top { gap:8px; align-items:center; min-height:68px }
.login-card>.app-request-note:not([open]) .note-preview { display:none }
.login-identity { flex:1; min-width:0; padding:0; border:0; background:transparent; color:var(--ink); text-align:left; justify-content:flex-start; gap:12px; box-shadow:none }
.login-identity:hover { background:transparent; color:var(--ink); box-shadow:none }
.login-identity>div { min-width:0; flex:1 }
.login-identity h2 { font-size:14px; margin:0 0 3px; overflow-wrap:anywhere }
.login-identity .account-email { font:400 12px/1.5 Onest,Archivo,sans-serif; overflow-wrap:anywhere }
.method-label { flex:none; font-size:12px; color:var(--muted) }
.login-availability { display:flex; padding:10px 12px; min-height:40px; align-items:center; border-radius:10px; background:var(--surface-subtle) }
.login-availability .badge { padding:0; background:transparent }
.login-card .login-health { font-size:13px; color:var(--muted); line-height:1.5 }
.login-card-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:12px; margin-top:auto; border-top:1px solid var(--line) }
.login-card-meta { display:grid; gap:3px; font-size:12px; color:var(--muted) }
.login-card-footer button { font-size:12px; padding:8px 12px }
.results-count { margin:16px 0 0; color:var(--muted); font-size:13px }
.section-title { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-bottom:12px }
.section-title h2,.section-title h3 { margin:0 }
.section-title .text-button { font-size:13px; font-weight:500 }
.home-logins,.home-secondary { margin:24px 0 }
.home-secondary { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.home-secondary>.card { min-width:0 }
.home-metrics .stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:20px 0 }
.home-metrics .stat { display:grid; gap:4px }
.home-metrics .stat strong { font-size:28px }
.attention-group-title { color:var(--muted); margin:16px 0 8px; font-size:12px }
.attention-card .record-row { align-items:center; font-size:13px }
.attention-card .record-row>.badge { font-size:12px }
.quick-look .detail-list { margin:16px 0 }
.quick-look .detail-list>div { padding:12px; border:0; background:var(--surface-subtle); border-radius:12px; margin-bottom:8px }
.quick-note { margin-top:24px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-subtle) }
.quick-note .note-content { white-space:pre-wrap }
.login-detail-page { max-width:900px }
.login-detail-page .account-detail-body { max-width:760px }
.login-detail-page .app-detail-tabs { padding-bottom:12px; border-bottom:1px solid var(--line) }
.people-tools { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:20px }
.people-tools input { width:min(100%,320px); margin:0 }
.people-table .person-identity { display:flex; align-items:center; gap:12px }
.person-identity>div { min-width:0 }
.person-identity p { margin:4px 0 0; font-size:13px; color:var(--muted); overflow-wrap:anywhere }
.people-table th { white-space:normal }
.people-table td { padding:16px }
.people-table .row-actions { text-align:right }
.people-table .badge { font-size:12px }
.person-job-role { color:var(--muted); font-size:13px; overflow-wrap:anywhere }
.people-table .row-actions button { margin:2px }
.note-schedule { min-width:0; margin:20px 0; padding:16px; border:1px solid var(--line); border-radius:var(--radius-control) }
.note-schedule legend { padding:0 6px; font-weight:600 }
.note-schedule input { max-width:100%; min-width:0 }
.activity-categories { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px }
.activity-categories [aria-selected=true] { background:var(--ink); color:var(--surface); border-color:var(--ink) }
.mailbox-summary { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-bottom:20px }
.mailbox-summary>div { min-width:0; flex:1 1 280px }
.mailbox-summary p { margin:6px 0 0 }
.settings-layout { display:grid; grid-template-columns:minmax(160px,190px) minmax(0,1fr); gap:28px; align-items:start }
.settings-links { display:grid; gap:4px; align-self:start }
.settings-mobile-nav { display:none }
.settings-mobile-nav select { margin-bottom:0 }
.settings-link { display:flex; align-items:center; min-height:44px; padding:10px 12px; border:1px solid transparent; border-radius:var(--radius-control); color:var(--muted); text-decoration:none; font-weight:500 }
.settings-link:hover { color:var(--ink); background:var(--surface-subtle); text-decoration:none }
.settings-link[aria-current=page] { color:var(--ink); background:var(--surface); border-color:var(--line); font-weight:650 }
.settings-danger-link { margin-top:16px; border-top-color:var(--line); border-radius:0 0 var(--radius-control) var(--radius-control) }
.settings-content { min-width:0 }
.settings-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px }
.settings-section-heading>div { min-width:0 }
.settings-section-heading h2 { margin:0; font-size:var(--text-lg) }
.settings-section-heading p { margin:6px 0 0 }
.settings-section-heading>button { flex-shrink:0 }
.settings-content>.card+.card,.settings-content>.card+.grid,.settings-content>.grid+.card,.settings-content>.table-wrap+.card { margin-top:16px }
@media(max-width:1100px) {
  .login-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)) }
}
@media(max-width:820px) {
  .home-secondary,.settings-layout { grid-template-columns:1fr }
  .settings-links { display:none }
  .settings-mobile-nav { display:block }
  .settings-layout { gap:20px }
  .settings-section-heading { flex-wrap:wrap; gap:12px; margin-bottom:16px }
  .login-toolbar { gap:12px }
  .login-toolbar>input { width:100% }
  .login-toolbar .filter-chips { flex-wrap:wrap; width:100%; padding:2px 0 6px }
  .login-toolbar .filter-chips button { flex:none }
  .login-grid { grid-template-columns:1fr }
  .login-card .app-card-top { min-height:0 }
  .home-logins { margin:20px 0 }
  .people-table thead { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden }
  .people-table,.people-table tbody { display:block }
  .people-table tr { display:grid; grid-template-columns:1fr auto; padding:16px; border-bottom:1px solid var(--line); gap:8px }
  .people-table td { padding:0; border:0 }
  .people-table .person-identity { grid-column:1/-1 }
  .people-table .row-actions { grid-column:1/-1; text-align:left; padding-top:8px }
  .people-table td[data-label]::before { content:attr(data-label) ' · '; color:var(--muted); font-size:12px }
  .mailbox-table thead { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden }
  .mailbox-table,.mailbox-table tbody { display:block }
  .mailbox-table tbody tr { display:grid; gap:10px; padding:16px; border-bottom:1px solid var(--line) }
  .mailbox-table tbody tr:last-child { border-bottom:0 }
  .mailbox-table tbody td { padding:0; border:0; min-width:0; text-align:left }
  .mailbox-table tbody .mailbox-identity { max-width:none }
  .mailbox-table td[data-label]::before { content:attr(data-label) ' · '; color:var(--muted); font-size:12px }
  .mailbox-table .mailbox-actions button { width:100%; margin-top:4px }
}

/* Request status leads; optional instructions remain below the active task. */
.delivery-status { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; padding:16px 20px; border:1px solid var(--warning-line); border-radius:var(--radius-card); background:var(--warning-soft); color:var(--warning); font-size:14px }
.delivery-status p { margin:0 }
.delivery-status strong { display:block; margin-bottom:4px }
.delivery-status button { flex-shrink:0; min-height:44px; padding:10px 12px; font-size:13px }
.request-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; margin-bottom:16px }
.request-start h2 { font-size:18px; margin-bottom:8px }
.request-start>.account-email { margin-bottom:12px }
.request-start>.muted { margin:12px 0 0; font-size:14px }
.request-actions { gap:8px }
.request-actions>* { flex:1 }
.account-email { display:block; margin-bottom:12px; color:var(--ink); font:500 15px/1.5 var(--font-mono); overflow-wrap:anywhere }
.authenticator-code { margin:20px 0 8px; font:400 clamp(32px,8vw,44px)/1.3 var(--font-mono); letter-spacing:.16em; color:var(--ink); overflow-wrap:normal; white-space:nowrap }
.authenticator-code.code-cleared { font-size:16px; letter-spacing:normal; white-space:normal }
.draft-notice { margin-top:16px; padding-top:12px; border-top:1px solid var(--line) }
.draft-notice p { margin-bottom:8px }
.forwarding-destination { padding:12px 0 }
.forwarding-destination>.mono { margin:4px 0 12px; font-size:13px; overflow-wrap:anywhere }
.request-status { align-self:start; border-color:var(--line); background:var(--surface) }
.request-status .request-state { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:var(--text-lg); font-weight:700 }
.request-state:before { content:''; flex:none; width:9px; height:9px; border-radius:var(--radius-pill); background:var(--muted) }
.request-status[data-tone=waiting] .request-state:before { background:var(--success); animation:hp-live 1.8s ease-in-out infinite }
.request-status[data-tone=done] .request-state:before { background:var(--success) }
.request-status[data-tone=attention] .request-state:before { background:var(--warning) }
.request-status[data-tone=ended] .request-state:before { background:transparent; box-shadow:inset 0 0 0 1.5px var(--muted) }
@keyframes hp-live { 50% { opacity:.2 } }
.request-window { margin:12px 0; padding:12px 14px; border-radius:var(--radius-card); background:var(--surface-subtle); color:var(--muted); font-size:var(--text-sm); line-height:1.6 }
.request-window time { color:var(--ink) }
.request-status .banner { padding:0; background:transparent }
.request-status details { font-size:14px }
.request-expiry { font-size:14px; font-variant-numeric:tabular-nums }
.request-timing { margin:8px 0 12px; font:500 var(--text-md)/1.5 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--muted) }
.request-status>.muted { font-size:14px; margin-bottom:8px }
.status-recovery { margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-subtle) }
.status-recovery p { margin:0 0 10px }

/* Dialogs, drawers and feedback share the same interaction surface. */
.hp-dialog { width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); padding:24px; overflow:auto; overscroll-behavior:contain; scroll-padding-top:80px; scroll-padding-bottom:64px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-floating) }
.hp-dialog::backdrop { background:var(--scrim); backdrop-filter:blur(2px) }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px }
.dialog-heading h2 { flex:1; min-width:0; margin:0; font-size:20px; overflow-wrap:anywhere }
.dialog-heading>.icon-button { flex-shrink:0 }
.dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:24px }
.hp-dialog .dialog-heading { position:sticky; top:-24px; z-index:2; padding:12px 0; background:var(--surface) }
.hp-dialog .row { margin-top:20px }
.hp-dialog p { line-height:1.6 }
.command-dialog { width:min(560px,calc(100vw - 32px)); margin-top:96px; padding:0 }
.command-dialog .dialog-heading { position:static; margin:0; padding:12px 16px; border-bottom:1px solid var(--line) }
.command-dialog .dialog-heading h2 { font-size:var(--text-md); color:var(--muted); font-weight:600 }
.command-dialog label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.command-dialog input[type=search] { margin:0; padding:16px; border:0; border-bottom:1px solid var(--line); border-radius:0; font-size:16px }
.command-dialog input[type=search]:focus { outline:none }
.command-results { display:grid; gap:2px; max-height:min(420px,60dvh); padding:8px; overflow:auto }
.command-group { padding:10px 10px 4px; color:var(--muted); font-size:var(--text-sm); font-weight:600 }
.command-option { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:8px 10px; border-radius:var(--radius-control); color:var(--ink); font-size:14px; cursor:pointer }
.command-option small { font-family:var(--font-mono); font-size:12px }
.command-option[aria-selected=true],.command-option:hover { background:var(--surface-subtle) }
.command-results .empty { margin:8px }
.command-hint { display:flex; gap:16px; padding:10px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px }
.drawer { width:min(420px,100vw); max-width:100vw; height:100dvh; max-height:100dvh; margin:0 0 0 auto; padding:24px; border-width:0 0 0 1px; border-radius:0 }
.drawer>.badge { margin:0 0 16px }
.drawer>.account-email { margin-bottom:8px }
.check-row { display:flex; align-items:flex-start; gap:12px; min-height:48px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:400; line-height:1.6; cursor:pointer }
.check-row input { flex:none; margin-top:3px }
.check-row small { display:block; margin-top:4px }
.check-list { max-height:310px; overflow:auto }
.detail-list { display:grid; gap:0; margin:20px 0 }
.detail-list>div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px }
.detail-list strong { text-align:right; overflow-wrap:anywhere; font-weight:600 }
.identity-challenge p { line-height:1.6 }
.identity-challenge>.action-row { margin-top:12px }
.workspace-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:16px 0 }
.workspace-menu button { justify-content:flex-start; min-height:48px; text-align:left; white-space:normal }
.workspace-menu [aria-current=page] { background:var(--ink); border-color:var(--ink); color:var(--on-ink) }
.tour-count { color:var(--muted); font-size:12px }
.tour-progress { display:flex; gap:6px; margin:16px 0 24px }
.tour-progress span { display:block; width:7px; height:7px; border-radius:var(--radius-pill); background:var(--line) }
.tour-progress span.done { background:var(--ink) }

/* Quiet management views, with details available on demand. */
.attention-card { border-color:var(--line) }
.attention-card>section+section { margin-top:20px; padding-top:20px; border-top:1px solid var(--line) }
.source-grid { display:grid; gap:20px }
.source-grid .card { padding:24px }
.source-app { padding:16px 0; border-top:1px solid var(--line) }
.source-app>.record-row { padding:0; border:0 }
.source-app>details { margin-bottom:0 }
.source-app .row { justify-content:space-between }
.activity-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; margin-bottom:20px; align-items:end }
.activity-toolbar>button { grid-column:2; grid-row:1 }
.activity-toolbar label { margin-top:0 }
.activity-filters { grid-column:1/-1; margin:0 }
.activity-filters>summary { font-size:14px; color:var(--muted) }
.activity-filters .toolbar { margin:12px 0 0 }
.activity-app { font-weight:600 }
.table-wrap { max-width:100%; overflow:auto; overscroll-behavior-x:contain; border:1px solid var(--line); border-radius:var(--radius-card) }
table { width:100%; border-collapse:collapse; font-size:14px }
th,td { padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
td { vertical-align:middle }
td>details { margin:0 }
th { background:var(--surface-subtle); color:var(--muted); font-size:12px; font-weight:600; white-space:nowrap }
tr:last-child td { border-bottom:0 }
td small { display:block; margin-top:4px }
.billing-plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:16px; border:0; padding:0; margin:20px 0 }
.billing-plan-grid legend { font-size:16px; font-weight:600; margin-bottom:12px }
.billing-plan-card { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; margin:0; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); font-weight:400; cursor:pointer }
.billing-plan-card:has(input:checked) { outline:2px solid var(--ink); outline-offset:-2px; background:var(--surface-subtle) }
.billing-plan-card input { margin:0 0 4px; width:18px }
.billing-plan-card strong { font-size:16px }
.billing-plan-card p { margin:0 }
.plan-price { font:500 32px/1.3 var(--font-mono); color:var(--ink) }
.plan-allowance { font-size:14px; color:var(--muted); margin-top:8px }
.mailbox-table .mailbox-identity { max-width:260px; overflow-wrap:anywhere }
.mailbox-table td { min-width:100px }
.mailbox-table td:last-child { text-align:right }
.billing-form { max-width:var(--task-width); margin-bottom:20px }
.table-wrap+.action-row { margin-top:16px }
.filter-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px }
.filter-chips button { gap:8px; min-height:var(--control-height); padding:7px 14px; border-radius:var(--radius-pill); background:var(--surface); border-color:var(--line); color:var(--ink); font-size:13px; font-weight:500 }
.filter-chips button:hover { background:var(--surface-subtle); color:var(--ink) }
.filter-chips button[aria-pressed=true] { border-color:var(--ink); background:var(--surface); color:var(--ink); font-weight:600 }
.filter-chips .chip-count { color:var(--muted); font:500 12px/1 var(--font-mono) }
.filter-chips .chip-dot { width:7px; height:7px; border-radius:var(--radius-pill); background:var(--muted) }
.chip-dot.ready { background:var(--success) }
.chip-dot.warning { background:var(--warning) }
.chip-dot.paused { background:transparent; box-shadow:inset 0 0 0 1.5px var(--muted) }
.feedback-line { margin:16px 0; padding:20px; border:1px solid var(--line); border-radius:var(--radius-card) }
.feedback-line p { white-space:pre-wrap }
.hp-section-links { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 }
.hp-section-links button { font-size:13px }
.help-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:16px; margin-top:24px }
.help-grid details { margin:0; border-bottom:1px solid var(--line); padding:8px 0 }
.help-grid details:last-child { border-bottom:0 }
.help-grid summary { font-size:15px }

/* Security and policies use readable single-column task layouts. */
.security-head,.security-section,.security-protection { max-width:var(--task-width) }
.security-grid { grid-template-columns:1fr; max-width:var(--task-width) }
.security-grid>.card { padding:24px }
.security-grid .muted { margin-top:12px }
.security-footer { margin-top:24px }
.security-nav { display:flex; flex-wrap:wrap; gap:8px; max-width:var(--task-width); margin:20px 0 28px }
.security-nav a { display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface); color:var(--ink); font-size:14px; text-decoration:none }
.security-nav a:hover { background:var(--surface-subtle); color:var(--ink) }
.security-section { margin-bottom:24px; scroll-margin-top:24px }
.security-section h2 { font-size:20px }
.security-protection { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; padding:20px 24px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface) }
.security-protection p { margin:0 }
.action-disclosure { margin-top:16px; padding-top:8px; border-top:1px solid var(--line) }
.action-disclosure>summary { color:var(--signal); font-size:14px }
.action-disclosure[open]>summary { margin-bottom:16px }
body[data-page=security] main { max-width:calc(var(--task-width) + 64px) }
body[data-page=security] main>section { margin-bottom:24px }
.policy-page { max-width:860px; margin:0 auto }
.policy-page h1 { margin-bottom:16px }
.policy-page h2 { margin-top:32px; scroll-margin-top:24px }
.policy-page p,.policy-page li { max-width:75ch; line-height:1.75 }
.policy-page li { margin-bottom:12px }
.policy-contents { margin:24px 0 32px; padding:12px 20px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface) }
.policy-contents nav { display:flex; flex-wrap:wrap; gap:4px 16px; padding:8px 0 }
.policy-contents a { display:inline-flex; align-items:center; min-height:44px; font-size:14px }
.policy-contents strong,.policy-contents h2 { flex-basis:100%; margin:0; font-size:14px }
.policy-body { max-width:75ch }
.policy-links { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:24px; font-size:13px }
.policy-links a { min-height:44px; display:inline-flex; align-items:center }
.mobile-tabs { display:none }

/* Method-specific progress after choosing an account. Discovery stays compact. */
.request-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 16px; padding:0; list-style:none }
.request-steps li { min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface) }
.request-steps li[aria-current=step] { border-color:var(--ink) }
.request-step-head { display:flex; align-items:center; gap:10px; margin-bottom:6px }
.request-step-head strong { flex:1; min-width:0; font-size:14px }
.request-step-num { display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:var(--radius-pill); background:var(--surface-subtle); color:var(--muted); font:500 12px/1 var(--font-mono) }
.request-steps li[aria-current=step] .request-step-num { background:var(--ink); color:var(--on-ink) }
.request-steps li.done .request-step-num { background:var(--success); color:var(--on-ink) }
.request-step-state { color:var(--muted); font-size:12px; font-weight:600 }
.request-steps li[aria-current=step] .request-step-state { color:var(--signal) }
.request-steps p { margin:0; color:var(--muted); font-size:var(--text-sm); line-height:1.55 }
.request-home { display:grid; grid-template-columns:1fr; gap:24px; align-items:start }
.request-home>section { min-width:0 }
.request-home .request-list { padding:0; border:0; background:transparent }
.request-home .member-app-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:14px }
.request-list-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px }
.request-list-head h2 { margin:0 }
.request-list-head small { font-family:var(--font-mono) }
.request-home .member-search { max-width:400px; margin:12px 0 20px }
.member-app-row { display:grid; grid-template-columns:36px minmax(0,1fr); align-content:start; align-items:center; gap:8px 12px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface) }
.member-app-row .app-initial { grid-column:1; grid-row:1/span 2 }
.member-app-row h3 { grid-column:2; grid-row:1; margin:0; font-size:14px; overflow-wrap:anywhere }
.member-app-row .account-email { grid-column:2; grid-row:2; margin:0; color:var(--muted); font:400 12px/1.5 Onest,Archivo,sans-serif }
.member-app-row .login-availability { grid-column:1/-1; grid-row:3; margin-top:6px }
.member-app-row .app-row-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; grid-column:1/-1; grid-row:5; border-top:1px solid var(--line); padding-top:12px }
.member-app-row .app-row-actions button { min-height:var(--control-height); padding:8px 12px; font-size:13px }
.member-app-row .app-row-note { grid-column:1/-1; grid-row:4; margin:4px 0 0; color:var(--muted); font-size:var(--text-sm) }
.member-app-row .app-row-note a { font-weight:600 }

.app-request-note { min-width:0; margin-top:12px; border-top:1px solid var(--line); font-size:var(--text-sm) }
.app-request-note summary { min-height:44px; padding:10px 0; cursor:pointer; overflow-wrap:anywhere }
.app-request-note summary strong { margin-right:8px }
.app-request-note .note-preview { color:var(--muted) }
.app-request-note[open] .note-preview { display:none }
.app-request-note .note-content { white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 12px }
.member-app-row .app-request-note { grid-column:1/-1; grid-row:6; margin-top:0 }
.app-note-editor { display:grid; gap:8px }
.app-note-editor .field-help { margin:0 }
.app-note-editor .action-row button { width:auto; flex:1 }
.app-note-editor small { color:var(--muted); text-align:right }
.app-detail-tabs { max-width:100% }
.app-detail-tabs button { flex-shrink:0 }
#app-request-note-editor { min-height:140px; width:100%; resize:vertical }
.request-side h2 { margin-bottom:8px }
.request-side .record-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:10px 0 }
.request-side .record-row time { grid-column:1; grid-row:1; width:auto; white-space:normal }
.request-side .record-title { grid-column:1; grid-row:2; align-self:start }
.request-side .badge { grid-column:2; grid-row:1; justify-self:end }
.request-side .record-actions { grid-column:2; grid-row:2; align-self:start; justify-self:end; min-width:0 }
.request-side .visibility-note { margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:var(--text-sm); line-height:1.6 }
.request-intro { margin:-12px 0 20px; color:var(--muted); font-size:var(--text-md) }
/* Source health on Mail sources. */
.source-health { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:12px 0 4px }
.source-health>div { padding:10px 12px; border-radius:var(--radius-card); background:var(--surface-subtle) }
.source-health>div>span:first-child { display:block; margin-bottom:4px; color:var(--muted); font-size:12px }
.source-health strong { display:block; margin-top:2px; font-size:13px }
.source-health time,.source-health .mono { font-size:13px }
.shot-stage { margin:8px 0 12px }
.shot-canvas { display:block; width:100%; height:auto; margin-bottom:12px; border:1px solid var(--line); border-radius:var(--radius-card); cursor:crosshair; touch-action:none }
.fw-readback .detail-list { margin:8px 0 }
.fw-field-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:0 8px }
.fw-field-row label { grid-column:1/-1 }
.fw-field-row input { margin:0 0 12px; font-family:var(--font-mono); font-size:14px }
.fw-field-row button { margin-bottom:12px }
.stats-note { flex-basis:100%; margin:0; color:var(--muted); font-size:var(--text-sm) }
.attention-reason { display:block; margin-top:2px; color:var(--muted); font-size:var(--text-sm); font-weight:400 }
.attention-dot { display:inline-block; flex:none; width:7px; height:7px; margin-right:8px; border-radius:var(--radius-pill); background:var(--warning); vertical-align:middle }
.attention-dot.bad { background:var(--danger) }
.finish-setup { margin-bottom:16px }
.finish-setup summary { font-size:14px }
.finish-setup .record-row:first-child { border-top:0 }
@media(max-width:1100px) {
  .request-home { grid-template-columns:1fr }
  .request-home .member-app-grid { grid-template-columns:1fr }
}
@media(max-width:820px) {
  .request-steps { gap:6px }
  .request-steps li { padding:10px }
  .request-step-head { flex-wrap:wrap; gap:6px; margin-bottom:0 }
  .request-step-head strong { flex-basis:100%; order:2; font-size:12px }
  .request-step-state { margin-left:auto }
  .request-steps p { display:none }
  .member-app-row { grid-template-columns:auto minmax(0,1fr) }
  .member-app-row .app-row-actions { grid-column:1/-1; grid-row:5; justify-content:flex-end; margin-top:0 }
  .member-app-row .app-row-actions button { flex:1 1 auto }
  .member-app-row .app-row-note { grid-column:1/-1; grid-row:4 }
  .member-app-row .app-request-note { grid-column:1/-1; grid-row:6 }
  .command-dialog { margin-top:16px }
}

@media(max-width:1100px) {
  .request-layout { grid-template-columns:1fr }
}
@media(max-width:820px) {
  .permission-actions { position:sticky; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:3; padding:12px 0; border-top:1px solid var(--line); background:var(--surface); box-shadow:0 -8px 12px var(--surface) }
  .permission-actions button { width:100% }
  .permission-card input,.permission-card .policy-links a { scroll-margin-bottom:calc(160px + env(safe-area-inset-bottom)) }
  .wizard-top { gap:4px 12px; margin-bottom:12px }
  .wizard-back { margin-bottom:0 }
  .wizard-save-note { font-size:11px }
  .setup-roadmap { display:block; margin-bottom:12px }
  .setup-roadmap::before { content:attr(data-step-label); display:block; color:var(--ink); font-size:14px; font-weight:600; line-height:1.5 }
  .setup-roadmap>li { display:none }
  .wizard .hero { margin-bottom:16px }
  .wizard .card { padding:24px }
  .wizard .hero h1 { font-size:23px }
  .delivery-status { align-items:flex-start; flex-wrap:wrap; padding:16px }
  .detail-list>div { flex-wrap:wrap; gap:6px 16px }
  .detail-list strong { text-align:left }
  .mobile-tabs { position:fixed; left:0; right:0; bottom:0; z-index:15; display:flex; justify-content:space-around; gap:4px; padding:6px 8px max(6px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface); box-shadow:none }
  .mobile-tabs button,.mobile-tabs a { display:flex; align-items:center; justify-content:center; flex:1; flex-direction:column; min-height:52px; min-width:0; gap:3px; padding:6px 2px; border:0; border-radius:var(--radius-card); background:transparent; color:var(--muted); font-size:12px; font-weight:500; box-shadow:none; text-decoration:none }
  .mobile-tabs button[aria-current=page],.mobile-tabs a[aria-current=page] { background:var(--surface-subtle); color:var(--ink); font-weight:700 }
  .mobile-tabs button:hover,.mobile-tabs a:hover { background:var(--surface-subtle); color:var(--ink) }
  .mobile-tabs .nav-symbol { width:20px; height:20px }
  .table-wrap { font-size:13px }
  th,td { padding:12px }
  body[data-page=security] main { padding:24px 16px 40px }
  .security-protection { padding:20px }
  .security-nav { gap:6px; margin-bottom:24px }
  .security-nav a { font-size:13px; padding:8px 10px }
}
@media(max-width:640px) {
  .activity-records { border:0; overflow:visible }
  .activity-records table,.activity-records tbody { display:block }
  .activity-records thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
  .activity-records tbody>tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:16px 0; border-top:1px solid var(--line) }
  .activity-records td { display:block; padding:0; border:0; overflow-wrap:anywhere }
  .activity-app { grid-column:1/-1; grid-row:1; font-size:16px }
  .activity-outcome { grid-column:1/-1; grid-row:2 }
  .activity-time { grid-column:1/-1; grid-row:3; color:var(--muted); font-size:12px }
  .activity-requester { grid-column:1/-1; color:var(--muted); font-size:12px }
  .activity-requester:before { content:attr(data-label) ': '; }
  .activity-details { grid-column:1/-1 }
  .activity-details summary { font-size:14px }
  .request-layout .card { padding:16px }
  .hp-dialog { max-height:calc(100dvh - 24px); padding:20px; border-radius:var(--radius-card) }
  .hp-dialog .dialog-heading { top:-20px }
  .drawer { width:100vw; max-height:100dvh; border-radius:0 }
  .setup-updates { padding:16px }
  .progress:not(.setup-roadmap) { gap:4px; margin-bottom:20px }
  .progress:not(.setup-roadmap) li { flex-direction:column; align-items:flex-start; gap:6px; font-size:11px }
}
@media(max-width:520px) {
  .wizard .card { padding:20px }
  .fw-stepper { gap:6px }
  .fw-stepper li { display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:11px }
  .fw-stepper li small { font-size:10px }
  .fw-stage-guide { padding:6px; gap:2px }
  .fw-stage-guide li { font-size:11px; padding:8px 3px }
  .fw-waiting { padding:16px; gap:10px }
  .fw-address { padding:12px }
  .workspace-menu { gap:6px }
  .workspace-menu button { padding:10px; font-size:13px }
  .policy-contents { padding:16px }
}
@media(prefers-reduced-motion:reduce) {
  .fw-waiting-indicator,.request-status[data-tone=waiting] .request-state:before { animation:none }
}

.failed-sample-preview{max-height:24rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.template-panel{margin:24px 0;padding:24px;border:1px solid var(--hp-border,#E3E7EC);border-radius:var(--radius-card,8px);background:var(--hp-surface-subtle,#F4F6F8)}
.custom-app-fields{border:0;padding:0;margin:24px 0;min-width:0}
.template-panel h3{margin:0}.template-panel details{margin-top:20px}.template-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:18px 0}
.template-example{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--hp-surface-subtle,#F4F6F8);padding:20px;border-radius:var(--radius-card,8px);font-family:var(--font-mono);font-size:14px;line-height:1.7}
.learning-steps{margin:20px 0 24px;padding-left:24px;max-width:64ch}
.learning-steps li{padding-left:6px;overflow-wrap:anywhere}
.learning-steps li::marker{color:var(--accent);font-weight:600}
.learning-destination{margin:20px 0;padding:16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface-subtle)}
.learning-destination input{margin-bottom:12px;background:var(--surface)}
.learning-destination button{margin:0}
.learning-panel>details{margin-top:24px;padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:640px){.template-panel{padding:18px}}

input.totp-feature-switch{appearance:none;position:relative;display:block;width:46px;height:28px;padding:0;margin:8px 0 12px;border:1px solid var(--line-strong,#8C93A1);border-radius:999px;background:var(--surface-subtle,#F4F6F8);cursor:pointer}
input.totp-feature-switch::before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:var(--surface,#fff);box-shadow:0 1px 3px #0003}
input.totp-feature-switch:checked{background:var(--hp-accent,#14161F);border-color:var(--hp-accent,#14161F)}
input.totp-feature-switch:checked::before{transform:translateX(18px)}
input.totp-feature-switch:focus-visible{outline:2px solid var(--hp-focus,#2F4FE0);outline-offset:2px}
input.totp-feature-switch:disabled{opacity:.5;cursor:not-allowed}

.access-selection{width:min(640px,calc(100vw - 32px))}
.access-member-list{display:grid;max-height:36dvh;overflow-y:auto;border-block:1px solid var(--line);margin:8px 0;overscroll-behavior:contain}
.access-member{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 4px;margin:0;cursor:pointer}
.access-member+.access-member{border-top:1px solid var(--line)}
.access-member input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--accent)}
.access-member>span{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere}
.access-member>span>*{margin:0}
.access-selection form>input,.access-selection form>select{margin-bottom:12px}
.access-selection .check-row{min-height:44px;padding:10px 0;margin:0}
.access-selection form>p{margin:8px 0}
.access-selection form>button[type=submit]{position:sticky;bottom:0;min-height:44px;margin-top:12px}
@media(max-height:700px){.access-member-list{max-height:25dvh}}

body[data-page=auth] main:has(.onb-layout),main:has(.onb-team) { max-width:1120px; padding-top:32px }
.onb-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:32px; align-items:start; max-width:1080px; margin:0 auto; padding:8px 0 48px }
.onb-layout.onb-single { grid-template-columns:minmax(0,560px); justify-content:center }
@media (max-width:960px) { .onb-layout { grid-template-columns:minmax(0,1fr) } .onb-teach { position:static } }
.onb-main h1 { font-size:clamp(26px,3.4vw,34px); line-height:1.1; font-weight:700; letter-spacing:-.025em; margin:18px 0 8px }
.onb-main > .muted { font-size:16px; line-height:1.6; margin:0 0 22px }
.onb-card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:24px }
.onb-card form { display:grid; gap:10px }
.onb-card label { font-weight:600; font-size:14px; margin:0 }
.onb-card input[type=text],.onb-card input[type=email],.onb-card select { height:48px; border-radius:12px; font-size:16px; margin:0 }
.onb-card button.wide { height:50px; border-radius:14px; font-size:15px; margin-top:6px }
.onb-progress { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0 }
.onb-progress li { display:flex; align-items:center; gap:7px; height:32px; padding:0 12px 0 8px; border-radius:var(--radius-pill); font-size:12.5px; font-weight:600; color:var(--muted) }
.onb-progress li.current { background:var(--lime-soft); color:var(--ink) }
.onb-progress li.done { color:var(--ink) }
.onb-progress-dot { width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; background:var(--surface-subtle); color:var(--muted) }
.onb-progress li.current .onb-progress-dot { background:var(--ink); color:var(--canvas) }
.onb-progress li.done .onb-progress-dot { background:var(--success); color:var(--on-ink) }
.onb-consent { display:flex; gap:10px; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); font-weight:400!important; line-height:1.5 }
.onb-consent:has(input:checked) { background:var(--surface-subtle) }
.onb-consent input { margin-top:3px; flex:none }
.onb-hint { color:var(--danger); font-size:14px; font-weight:600; margin:4px 0 0 }
.onb-switch { margin:16px 0 0; font-size:14px; color:var(--muted) }
.onb-teach { background:#191B16; color:#FFFFFF; border-radius:24px; padding:28px; display:grid; gap:16px; position:sticky; top:calc(var(--header-offset) + 16px) }
@media (prefers-color-scheme: dark) { .onb-teach { background:var(--surface-subtle); color:var(--ink); border:1px solid var(--line) } }
.onb-teach h2 { font-size:clamp(28px,3.4vw,40px); line-height:1.05; font-weight:700; letter-spacing:-.03em; margin:0 }
.onb-kicker { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; margin:0 }
.onb-teach-steps { margin:0; padding-left:20px; display:grid; gap:10px; line-height:1.55 }
.onb-path { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.onb-path li { font-size:12.5px; font-weight:600; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.08) }
.onb-path li:not(:last-child)::after { content:"→"; margin-left:8px; opacity:.6 }
.onb-path li.onb-path-hp { background:var(--lime); color:#191B16 }
@media (prefers-color-scheme: dark) { .onb-path li { background:var(--surface) } }
.onb-kinds,.onb-chips { border:0; padding:0; margin:6px 0 0; display:grid; gap:8px }
.onb-kinds legend,.onb-chips legend { font-weight:600; font-size:14px; margin-bottom:8px; padding:0 }
.onb-kinds { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.onb-kind { display:grid; gap:4px; text-align:left; height:auto; min-height:76px; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:400 }
.onb-kind strong { font-size:15px }
.onb-kind span { font-size:13px; color:var(--muted); line-height:1.45 }
.onb-kind:hover { background:var(--surface-subtle); color:var(--ink) }
.onb-kind[aria-pressed=true] { background:var(--lime-soft); border:2px solid var(--ink); padding:13px 15px }
.onb-note { background:var(--warning-soft); border:1px solid var(--warning-line); color:var(--ink); border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.5; margin:4px 0 0 }
.onb-chips { display:flex; flex-wrap:wrap }
.onb-chips legend { width:100% }
.onb-chip { min-height:44px; padding:8px 14px; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:500 }
.onb-chip:hover { background:var(--surface-subtle); color:var(--ink) }
.onb-chip[aria-pressed=true] { background:var(--lime-soft); border-color:var(--ink) }
.onb-welcome h2 { font-size:clamp(24px,3vw,32px); letter-spacing:-.02em }
.onb-bar-label { font-size:13px; font-weight:600; margin:14px 0 6px }
.onb-bar { height:8px; border-radius:999px; background:var(--surface-subtle); overflow:hidden }
.onb-bar span { display:block; height:100%; background:var(--lime); border-radius:inherit; transition:width var(--motion-fast) }
.onb-done { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:6px }
.onb-done li { display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center; font-size:14px }
.onb-done-mark { width:20px; height:20px; border-radius:999px; background:var(--success); color:var(--on-ink); font-size:11px; display:inline-flex; align-items:center; justify-content:center; font-weight:700 }
.onb-done-result { color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px }
.onb-step { margin-top:18px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface-subtle); display:grid; gap:8px; justify-items:start }
.onb-step h3 { font-size:20px; letter-spacing:-.015em; margin:0 }
.onb-step-meta { font-family:var(--font-mono); font-size:12px; color:var(--muted); margin:0 }
.onb-next { margin-top:16px }
.onb-next ol { margin:6px 0 0; padding-left:20px; color:var(--muted); font-size:14px; display:grid; gap:4px }
.onb-facts { margin-top:16px }
.onb-facts dl { display:grid; grid-template-columns:minmax(120px,160px) 1fr; gap:8px 16px; margin:12px 0 0; font-size:14px }
.onb-facts dt { font-weight:700 }
.onb-facts dd { margin:0; color:var(--muted); line-height:1.5 }
@media (max-width:600px) {
 body[data-page=auth] main:has(.onb-layout),main:has(.onb-team) { padding-top:16px }
 .onb-main h1 { margin:12px 0 8px }
 .onb-main > .muted { margin-bottom:12px }
 .onb-card { padding:16px }
 .onb-consent { padding:10px; font-size:13px }
 .onb-step { padding:16px }
 .onb-done-result { max-width:110px }
 .onb-facts dl { grid-template-columns:1fr; gap:4px }
 .onb-facts dd { margin-bottom:8px }
}

.setup-next { margin:0 0 20px; padding:16px 18px; background:var(--surface-subtle); border:1px solid var(--line); border-radius:16px }
.setup-next h2 { margin:0 0 6px; font-size:16px; line-height:1.45; letter-spacing:0 }
.setup-next p { margin:0; color:var(--muted); font-size:14px; line-height:1.5 }
.setup-next .setup-saved { display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:12px 0 0; gap:6px 14px }
.setup-saved li { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; line-height:1.5 }
.setup-saved li>span:first-child { color:var(--success) }
.wizard ol.setup-mail-progress { display:flex; flex-wrap:wrap; list-style:none; gap:8px 16px; padding:0; margin:12px 0 16px }
.wizard ol.setup-mail-progress li { display:flex; gap:6px; font-size:12px; line-height:1.5; margin:0; color:var(--muted) }
.setup-mail-progress li[data-observed=true]>span:first-child { color:var(--success) }
[data-local-feedback]>button { display:flex; margin-top:12px; min-height:44px }
.permission-card { max-width:760px }
.permission-card fieldset { min-width:0; border:0; padding:0; margin:0 }
.permission-card legend { font-weight:600; margin-bottom:10px; font-size:14px }
.permission-card .check-row { min-height:44px; padding:10px 0; gap:12px; border-bottom:1px solid var(--line); font-size:14px; line-height:1.5 }
.permission-card .check-row input { flex:none; margin-top:3px }
.permission-review-count { font-size:12px; color:var(--muted); margin:12px 0 0 }
.learning-status-recovery:empty { display:none }
@media(max-width:640px) {
 .setup-next { padding:14px; margin-bottom:16px }
 .setup-next .setup-saved { gap:6px 12px }
 .wizard summary { min-height:44px; align-content:center }
 .wizard .text-button,.wizard .quiet { min-height:44px }
 .wizard [data-local-feedback] { scroll-margin-bottom:calc(100px + env(safe-area-inset-bottom)) }
}
@media(prefers-reduced-motion:reduce) { .setup-next,.setup-mail-progress,.wizard .fw-waiting-indicator { animation:none!important; transition:none!important } }

.direct-connection-choice { margin: 12px 0 20px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; }
.direct-connection-choice summary { cursor:pointer; font-weight:600; min-height:32px; }
.direct-waiting-status { display:flex; align-items:center; gap:10px; font-weight:600; }
.direct-waiting-status .fw-waiting-indicator { margin-top:0; }
.direct-samples { display:grid; gap:12px; margin:16px 0; }
.direct-sample { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px; border:1px solid var(--line); border-radius:12px; }
.direct-sample>div { min-width:0; }
.direct-sample p { margin:6px 0 0; overflow-wrap:anywhere; }
.direct-sample button { flex:none; }
@media(max-width:640px) { .direct-sample { align-items:stretch; flex-direction:column; gap:12px; }.direct-sample button { width:100%; min-height:44px; }.direct-connection-choice summary { min-height:44px; align-content:center; } }
.referral-overview,.referrals-card{max-width:none}.referral-reward{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,1fr);gap:2rem;align-items:center;margin:1.25rem 0}.referral-start{margin-top:1.25rem}.referral-reward-value{font-size:clamp(2rem,4vw,3.25rem);font-weight:750;letter-spacing:-.04em;line-height:1.1;color:var(--ink);margin:0 0 .5rem}.referral-reward-duration{font-weight:600;margin:0 0 .75rem}.referral-reward .muted{margin:0;max-width:38rem}.referral-example{border:1px solid var(--line);border-radius:16px;padding:1.25rem;background:var(--surface)}.referral-example .eyebrow{margin:0 0 .65rem}.referral-example-value{font-size:1.2rem;font-weight:650;line-height:1.4;margin:0 0 .5rem}.referral-example .field-help{margin:0}.referral-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;padding:1.5rem 0;margin:0;list-style:none;counter-reset:referral-step;border-top:1px solid var(--line)}.referral-steps li{counter-increment:referral-step;min-width:0}.referral-steps li::before{content:counter(referral-step);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font-size:.85rem;font-weight:650;margin-bottom:.75rem}.referral-steps h3{font-size:1rem;margin:0 0 .5rem}.referral-steps p{font-size:.9rem;line-height:1.6;margin:0}.referral-guide{border-top:1px solid var(--line);padding-top:1rem}.referral-guide summary{min-height:44px;cursor:pointer;font-weight:600;align-content:center}.referral-guide p{max-width:74ch}.referral-guide>.text-button{display:inline-flex;padding-left:0}.referral-overview+.referrals-card{margin-top:1.5rem}.referral-preferences>.text-button{display:inline-block;margin:0 1rem 1rem 0}.referrals-card form{max-width:48rem}.referrals-card label.check{display:flex;align-items:flex-start;gap:.65rem}.referrals-card label.check input{flex:0 0 18px;width:18px;height:18px;margin:.1rem 0 0}.referrals-card .card-footer{gap:.75rem;flex-wrap:wrap}.referrals-card .card-footer button{white-space:normal}.referrals-frame-wrap:empty{display:none}.referrals-frame-wrap{margin-top:1rem;width:100%;min-width:0}.referrals-frame-wrap iframe{display:block;width:100%;height:820px;min-height:60vh;border:1px solid var(--line,#dedfd9);border-radius:16px;background:transparent}@media(max-width:820px){.referral-reward{grid-template-columns:1fr;gap:1rem}.referral-steps{grid-template-columns:1fr;gap:1.25rem}.referral-steps li{position:relative;padding-left:40px}.referral-steps li::before{position:absolute;left:0;top:0}.referral-example{padding:1rem}}@media(max-width:600px){.referral-overview{padding:16px}.referrals-frame-wrap iframe{height:950px;border-radius:10px}.referrals-card{padding:16px}}
.mailbox-provider-guide{margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);text-align:left;color:var(--ink)}
.mailbox-provider-guide h3{margin:0 0 12px;font-size:17px}.mailbox-provider-guide p{line-height:1.6}.mailbox-provider-guide ol{padding-left:22px}.mailbox-provider-guide li{padding-left:4px;margin:10px 0;line-height:1.55}
.mailbox-provider-guide>div:first-of-type{margin-top:24px}.mailbox-guide-result{margin:20px 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.mailbox-guide-result p{margin:8px 0 0}
.mailbox-provider-guide details{margin-top:20px}.mailbox-provider-guide .check-row[hidden]{display:none}
@media(max-width:600px){.mailbox-provider-guide{padding:16px}.mailbox-provider-guide select{font-size:14px}}

.wizard-top{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px;position:sticky;top:var(--header-offset,68px);z-index:3;padding:10px 0;background:var(--surface);border-bottom:1px solid var(--line)}
.wizard-top .wizard-exit{margin-left:auto}
.wizard-top .wizard-previous[hidden]{display:none}
.setup-roadmap .setup-step-link{border:0;padding:6px 0;background:transparent;color:inherit;min-height:44px;min-width:0;text-align:left;box-shadow:none;font-size:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.setup-roadmap .setup-step-link:hover{text-decoration-color:currentColor}
.setup-roadmap .setup-step-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:640px){.wizard-top{gap:8px}.wizard-top .wizard-save-note{flex-basis:100%;order:3}.wizard-top .wizard-exit{margin-left:auto}}