.directory-filters{display:grid;grid-template-columns:2fr 1fr 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}}

/* 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:Archivo,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  font-synthesis:none;
  color:#14161F;
  background:#F4F6F8;
  --ink:#14161F;
  --ink-hover:#000000;
  --muted:#5D6472;
  --signal:#2F4FE0;
  --signal-on-ink:#7B92F0;
  --accent:#14161F;
  --accent-hover:#000000;
  --accent-soft:#F4F6F8;
  --canvas:#F4F6F8;
  --surface:#FFFFFF;
  --surface-subtle:#F4F6F8;
  --line:#E3E7EC;
  --line-strong:#8C93A1;
  --success:#0E7C66;
  --success-soft:#EAF5F2;
  --success-line:#B7DDD3;
  --warning:#B45309;
  --warning-soft:#FDF4EA;
  --warning-line:#F0D2B0;
  --danger:#B02525;
  --danger-soft:#FBEDED;
  --danger-line:#EBC0C0;
  --paused:#5D6472;
  --paused-soft:#F4F6F8;
  --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:6px;
  --radius-card:8px;
  --radius-pill:999px;
  --shadow-card:none;
  --shadow-floating:0 24px 48px #14161F3D;
  --scrim:#14161F57;
  --header-offset:64px;
  --sidebar-width:244px;
  --sidebar-rail:72px;
  --content-width:1200px;
  --task-width:720px;
  --motion-fast:150ms;
  --font-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)
}

* { 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:white;
  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:white }
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:white }
.skip-link:focus { top:12px }
[hidden] { display:none!important }

/* The same calm header is used on public and authenticated pages. */
header {
  min-height:64px; height:64px; 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 }
.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:24px; z-index:40; display:grid; gap:8px; width:min(440px,calc(100vw - 32px)); transform:translateX(-50%); pointer-events:none }
.toast { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:var(--radius-card); background:var(--ink); color:white; font-size:14px; line-height:1.5; box-shadow:0 18px 40px #14161F57; 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-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:var(--sidebar-width) minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;
  grid-template-areas:'header header' 'notice notice' 'sidebar main' 'sidebar footer'
}
body[data-page=workspace]>header { grid-area:header; position:sticky; top:0; z-index:12 }
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:100%; max-width:var(--content-width); min-height:0; margin:0 auto; padding:28px 32px 48px; font-size:var(--text-md) }
body[data-page=workspace]>footer { grid-area:footer; margin:0; min-width:0 }
.workspace-sidebar { position:sticky; top:var(--header-offset); align-self:start; display:flex; flex-direction:column; height:calc(100dvh - var(--header-offset)); min-height:0; overflow-y:auto; scrollbar-width:thin; padding:16px 12px; border-right:1px solid var(--line); background:var(--surface) }
.sidebar-top { display:flex; align-items:center; gap:4px; flex:none; margin-bottom:12px }
.sidebar-sections { flex:none }
.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:6px 8px; border:1px solid transparent; border-radius:var(--radius-card); 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:white; font-weight:600 }
.workspace-sidebar nav a[aria-current=page] .nav-symbol,.workspace-sidebar nav button[aria-current=page] .nav-symbol { border-color:#FFFFFF33; background:#FFFFFF1A; color:white }
.workspace-sidebar .nav-symbol { width:28px; height:28px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface) }
.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:16px; height:16px }
.nav-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sidebar-heading { display:flex; align-items:center; gap:10px; flex:1; min-width:0; min-height:44px; padding:8px; border-radius:var(--radius-card); 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(--ink); color:white; 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:16px 8px 8px }
.sidebar-foot a { font-size:13px; text-decoration:none }
.sidebar-foot button { display:flex; align-items:center; justify-content:center; gap:8px; min-width:44px; padding:10px; font-size:13px }
.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) }
.workspace-top-search { flex:1; justify-content:space-between; min-width:44px; max-width:440px; min-height:var(--control-height); margin:0 auto; padding:8px 12px 8px 14px; border-color:var(--line); border-radius:var(--radius-pill); background:var(--surface-subtle); color:var(--muted); font-size:13px; font-weight:500 }
.workspace-top-search:hover { background:var(--surface-subtle); color:var(--ink); border-color:var(--line-strong) }
.workspace-top-search kbd { flex:none; white-space:nowrap }
.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; gap:8px; 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:white; 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:var(--sidebar-rail) minmax(0,1fr) }
  body[data-sidebar=collapsed] .workspace-sidebar { padding:16px 8px }
  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; padding:0 20px }
  header #identity { max-width:140px }
  .workspace-top-search { max-width:320px }
  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) {
  header { height:auto; min-height:64px; padding:10px 16px; 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:64px; flex-wrap:nowrap }
  body[data-page=workspace]>.workspace-sidebar { display:none }
  body[data-page=workspace]>main { margin:0; padding:20px 16px 28px }
  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) }
  body[data-page=workspace]>header .workspace-top-search { flex:none; width:44px; min-width:44px; height:44px; margin:0 0 0 auto; padding:0; border-radius:var(--radius-pill); font-size:0 }
  .workspace-top-search .search-glyph { width:18px; height:18px; margin:auto }
  .workspace-top-search .search-label { justify-content:center; width:100% }
  .workspace-top-search .search-label>span,.workspace-top-search kbd { display:none }
  .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) {
  header .brand img { width:100px; height:auto }
  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 }
}

/* A single compact, resumable setup journey. */
.wizard { max-width:var(--task-width); margin:0 auto }
.wizard .hero { margin-bottom:20px }
.wizard .hero h1 { font-size:28px }
.wizard .card { padding:28px }
.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-back { min-height:44px; padding:8px 0; margin-bottom:16px; 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:white }
.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 }
.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:white; 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 }

/* 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 { margin:0; font-size:20px }
.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:white }
.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-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:white }
.request-steps li.done .request-step-num { background:var(--success); color:white }
.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:minmax(0,1.6fr) minmax(260px,1fr); gap:16px; align-items:start }
.request-home>section { min-width:0 }
.request-home .member-app-grid { grid-template-columns:1fr; gap:0 }
.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:none; margin:12px 0 4px }
.member-app-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4px 12px; padding:14px 0; border-top:1px solid var(--line) }
.member-app-row:first-child { border-top:0 }
.member-app-row .app-initial { grid-column:1; grid-row:1/span 2 }
.member-app-row h3 { grid-column:2; grid-row:1 }
.member-app-row .account-email { grid-column:2; grid-row:2 }
.member-app-row h3 { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:0; font-size:14px }
.member-app-row .account-email { margin:0; font-size:var(--text-sm); color:var(--muted) }
.member-app-row .app-row-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; max-width:340px; grid-column:3; grid-row:1/span 2 }
.member-app-row .app-row-actions button { min-height:var(--control-height); padding:8px 14px }
.member-app-row .app-row-note { grid-column:2/-1; grid-row:3; margin:4px 0 0; color:var(--muted); font-size:var(--text-sm) }
.member-app-row .app-row-note a { font-weight:600 }
.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 }
}
@media(max-width:820px) {
  .request-steps { grid-template-columns:1fr; gap:6px }
  .request-steps li { padding:10px 12px }
  .request-steps li:not([aria-current=step]) 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:3; justify-content:flex-start; max-width:none; margin-top:8px }
  .member-app-row .app-row-actions button { flex:1 1 auto }
  .member-app-row .app-row-note { grid-column:1/-1; grid-row:4 }
  .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-back { margin-bottom:4px }
  .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:26px }
  .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:#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}