/* Anti-Spam v2 app shell and signature components. Ported from docs/design/system-v2/components/app.css. */
/* Anti-Spam v2 — app shell + signature components */

/* App frame: sidebar shell (handoff v2 AppSidebar, partials/appSidebar.ejs). Replaces the floating dock and the top bar. */
.as-shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh;align-items:start}
.as-shell>.as-app__main{max-width:1040px;width:100%;margin:0 auto;padding:40px 40px 72px;box-sizing:border-box}
.as-side{position:sticky;top:0;height:100vh;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;padding:18px 14px 14px;border-right:1px solid var(--border-subtle);background:radial-gradient(120% 40% at 0% 0%,rgba(90,215,255,.06),transparent 60%),var(--void-50)}
.as-side__brand{display:flex;align-items:center;gap:8px;padding:2px 8px 14px}
.as-side__search{display:flex;align-items:center;gap:8px;width:100%;height:36px;margin-bottom:10px;padding:0 8px 0 10px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.025);color:var(--text-muted);font:var(--weight-regular) 14px/1 var(--font-sans);cursor:pointer;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.as-side__search span{flex:1 1 auto;text-align:left}
.as-side__search:hover{border-color:var(--border-strong);background:rgba(255,255,255,.04)}
.as-side__search:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.as-side__search kbd,.as-side__key{font:var(--weight-medium) 10px/1 var(--font-mono);color:var(--text-muted);padding:3px 5px;border-radius:5px;border:1px solid var(--border);background:transparent}
.as-side__group{display:flex;flex-direction:column;gap:2px}
.as-side__group--more{margin-top:14px}
.as-side__heading{padding:0 10px 6px;font:var(--weight-medium) 12px/1 var(--font-sans);color:var(--text-muted)}
.as-side__item{position:relative;display:flex;align-items:center;gap:11px;min-height:38px;padding:0 10px;border-radius:10px;color:var(--text-muted);text-decoration:none;font:var(--weight-medium) 14px/1.2 var(--font-sans);transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast)}
.as-side__item>svg{flex:none;transition:color var(--dur-fast),transform var(--dur-base) var(--ease-spring)}
.as-side__label{flex:1 1 auto;min-width:0}
.as-side__item:hover{background:rgba(255,255,255,.045);color:var(--text-strong)}
.as-side__item:hover>svg{transform:translateX(1px)}
.as-side__item:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.as-side__item[aria-current="page"]{background:rgba(255,255,255,.07);color:var(--text-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.as-side__item[aria-current="page"]>svg{color:var(--primary)}
.as-side__item[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:50%;width:3px;height:18px;margin-top:-9px;border-radius:0 3px 3px 0;background:var(--primary);box-shadow:0 0 12px var(--primary)}
.as-side__key{opacity:0;transition:opacity var(--dur-fast)}
.as-side__item:hover .as-side__key,.as-side__item:focus-visible .as-side__key{opacity:1}
.as-side__count{min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;display:inline-grid;place-items:center;border-radius:var(--radius-pill);background:var(--primary-soft);border:1px solid var(--primary-soft-border);color:var(--text-strong);font:var(--weight-semibold) 11px/1 var(--font-sans)}
.as-side__item:has(.as-side__count) .as-side__key{display:none}
.as-side__spacer{flex:1 1 auto}
.as-side__usage{display:flex;flex-direction:column;gap:9px;margin:0 2px 8px;padding:12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.02);text-decoration:none;transition:border-color var(--dur-fast)}
.as-side__usage:hover{border-color:var(--border-strong)}
.as-side__usage:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.as-side__usage-row{display:flex;justify-content:space-between;gap:8px;font:var(--weight-medium) 12px/1.2 var(--font-sans);color:var(--text-muted)}
.as-side__usage-row .as-num{color:var(--text-strong)}
.as-side__of{color:var(--text-muted)}
.as-side__bar{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.as-side__bar>span{display:block;height:100%;min-width:3px;border-radius:4px;background:var(--primary)}
.as-side__me{min-height:52px;gap:10px;border-top:1px solid var(--border-subtle);border-radius:0 0 10px 10px;padding-top:10px;margin-top:2px}
.as-side__me:hover,.as-side__me[aria-current="page"]{border-radius:10px}
.as-side__me[aria-current="page"]::before{display:none}
.as-side__who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.as-side__name{color:var(--text-strong);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-side__mail{color:var(--text-muted);font:var(--weight-regular) 12px/1.2 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Phone "More" tab (a no-JS details element): only under 860px, where the More group, usage card and search are hidden */
.as-side__moretab{display:none}
.as-side__moretab>summary{list-style:none}
.as-side__moretab>summary::-webkit-details-marker{display:none}
@media (max-width:860px){
  .as-shell{grid-template-columns:minmax(0,1fr)}
  .as-shell>.as-app__main{padding:24px 16px 104px}
  .as-side{position:fixed;z-index:60;left:12px;right:12px;bottom:12px;top:auto;height:auto;flex-direction:row;gap:0;padding:6px;border:1px solid var(--border-strong);border-radius:18px;background:rgba(11,14,20,.88);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);box-shadow:var(--shadow-lg)}
  .as-side__brand,.as-side__search,.as-side__group--more,.as-side__spacer,.as-side__usage,.as-side__who,.as-side__me>svg,.as-side__key{display:none}
  .as-side__group{display:contents}
  .as-side .as-side__group--more{display:none}
  .as-side__item{flex:1 1 0;flex-direction:column;justify-content:center;gap:4px;min-height:52px;padding:4px 2px;font-size:11px}
  .as-side__item[aria-current="page"]::before{left:50%;top:auto;bottom:-6px;width:16px;height:3px;margin:0 0 0 -8px;border-radius:3px 3px 0 0}
  .as-side__count{position:absolute;top:2px;left:50%;margin-left:6px;min-width:18px;height:18px;padding:0 5px}
  .as-side__me{border-top:0;margin:0;padding:4px 2px;min-height:52px}
  .as-side__me .as-avatar{width:24px;height:24px;font-size:10px}
  .as-side__moretab{display:flex;flex:1 1 0;min-width:0}
  .as-side__moretab>summary{width:100%;cursor:pointer}
  .as-side__moretab[open]>summary{background:rgba(255,255,255,.045);color:var(--text-strong)}
  .as-side__moretab:has([aria-current="page"])>summary{background:rgba(255,255,255,.07);color:var(--text-strong)}
  .as-side__moretab:has([aria-current="page"])>summary>svg{color:var(--primary)}
  .as-side__morepanel{position:absolute;right:6px;bottom:calc(100% + 8px);min-width:200px;max-width:calc(100% - 12px);box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid var(--border-strong);border-radius:14px;background:var(--surface-raised);box-shadow:var(--shadow-lg)}
  .as-side__morepanel .as-side__item{flex:none;flex-direction:row;justify-content:flex-start;gap:11px;min-height:44px;padding:0 12px;font-size:14px}
  .as-side__morepanel .as-side__item::before{display:none}
}
@media (prefers-reduced-motion:reduce){.as-side__item>svg{transition:none}}
/* EJS additions: admin tag, the Leave portal form, the staff strip above the shell, the usage bar width from .as-w-N */
.as-side__tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-pill);background:var(--warn-soft);color:var(--amber-300);box-shadow:inset 0 0 0 1px var(--warn-border);font:var(--weight-medium) var(--text-2xs)/1 var(--font-sans)}
.as-side__form{margin:0;display:flex;flex-direction:column}
button.as-side__item{width:100%;border:0;background:none;cursor:pointer;text-align:left}
.as-side__bar>span.as-w-0{width:0}
.as-side .as-wordmark{font-size:1.0625rem}
.as-shell--staff{grid-template-rows:auto 1fr}
.as-shell--staff>.as-staffbar{grid-column:1/-1;position:sticky;top:0;z-index:61}
.as-shell--staff>.as-side{top:32px;height:calc(100vh - 32px)}
html{scroll-padding-bottom:24px}
@media (max-width:860px){
  .as-shell--staff>.as-side{top:auto;height:auto}
  html{scroll-padding-bottom:104px}
}
.as-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--void-400);border:1px solid var(--border-strong);color:var(--text-strong);font:var(--weight-semibold) var(--text-xs)/1 var(--font-sans);flex:none}

/* Command palette */
.as-cmdk-backdrop{position:fixed;inset:0;z-index:120;background:var(--backdrop);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;animation:as-fade-in var(--dur-base) var(--ease-out)}
.as-cmdk{width:min(580px,100%);background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:14px;box-shadow:var(--shadow-xl);overflow:hidden;animation:as-scale-in var(--dur-slow) var(--ease-out)}
.as-cmdk__input{display:flex;align-items:center;gap:12px;padding:0 18px;height:56px;border-bottom:1px solid var(--border)}
.as-cmdk__input .as-icon{color:var(--text-subtle)}
.as-cmdk__input input{flex:1;background:none;border:0;outline:none;color:var(--text-strong);font:var(--weight-regular) var(--text-base)/1 var(--font-sans)}
.as-cmdk__input input::placeholder{color:var(--text-subtle)}
.as-cmdk__list{max-height:340px;overflow-y:auto;overflow-x:hidden;padding:6px}
.as-cmdk__group{font-size:var(--text-2xs);color:var(--text-subtle);padding:10px 12px 6px}
.as-cmdk__item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:10px;border:0;background:none;color:var(--text);font:var(--weight-regular) var(--text-sm)/1.2 var(--font-sans);text-align:left;cursor:pointer}
.as-cmdk__item .as-icon{color:var(--text-subtle)}
.as-cmdk__item[data-active]{background:rgba(255,255,255,.06);color:var(--text-strong)}
.as-cmdk__item[data-active] .as-icon{color:var(--text-strong)}
.as-cmdk__item .as-icon{flex:none}.as-cmdk__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-cmdk__hint{flex:none;white-space:nowrap;margin-left:auto;color:var(--text-subtle);font:11px var(--font-mono)}
.as-cmdk__empty{padding:28px;text-align:center;color:var(--text-muted);font-size:var(--text-sm)}
.as-cmdk__foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--text-subtle)}
.as-cmdk__foot span{display:inline-flex;align-items:center;gap:6px}

/* Protection-rate ring */
.as-ring{position:relative;display:grid;place-items:center;flex:none}
.as-ring svg{transform:rotate(-90deg);display:block;overflow:visible}
.as-ring__track{fill:none;stroke:rgba(255,255,255,.06)}
.as-ring__ticks{fill:none;stroke:rgba(255,255,255,.12)}
.as-ring__fill{fill:none;stroke:var(--primary);stroke-linecap:round;transition:stroke-dashoffset 1.4s var(--ease-out)}
.as-ring__center{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;gap:4px}
.as-ring__value{font:var(--type-figure-sm);letter-spacing:-.03em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.as-ring__value small{font-size:.5em;color:var(--text-muted);margin-left:1px}
.as-ring__label{font-size:var(--text-2xs);color:var(--text-subtle);white-space:nowrap}

/* Activity heat strip */
.as-heat{display:grid;grid-template-columns:36px repeat(24,minmax(0,1fr));gap:3px;align-items:center}
.as-heat__day{font:11px/1 var(--font-mono);color:var(--text-subtle)}
.as-heat__cell{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.035);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast);animation:as-fade-in .6s var(--ease-out) both;position:relative}
.as-heat__cell:hover{box-shadow:0 0 0 1.5px var(--text-strong);z-index:2}
.as-heat__cell[data-l="1"]{background:rgba(90,216,255,.16)}
.as-heat__cell[data-l="2"]{background:rgba(90,216,255,.34)}
.as-heat__cell[data-l="3"]{background:rgba(90,216,255,.58)}
.as-heat__cell[data-l="4"]{background:var(--primary)}
.as-heat__hours{display:grid;grid-template-columns:36px repeat(24,minmax(0,1fr));gap:3px;margin-top:6px;font:10px/1 var(--font-mono);color:var(--text-subtle)}
.as-heat__scale{display:flex;align-items:center;gap:4px;font:11px var(--font-mono);color:var(--text-subtle)}
.as-heat__scale i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* Site header / footer (public) */
.as-site-header{position:sticky;top:0;z-index:50;transition:background-color var(--dur-slow),border-color var(--dur-slow);border-bottom:1px solid transparent}
.as-site-header[data-scrolled]{background:rgba(4,5,8,.72);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-bottom-color:var(--border)}
.as-site-header__in{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);height:var(--header-h);display:flex;align-items:center;gap:28px}
.as-site-header nav{display:flex;gap:4px}
.as-site-header nav a{color:var(--text-muted);text-decoration:none;font-size:var(--text-sm);font-weight:var(--weight-medium);padding:6px 12px;border-radius:8px;transition:color var(--dur-fast),background-color var(--dur-fast)}
.as-site-header nav a:hover{color:var(--text-strong);background:rgba(255,255,255,.05)}
.as-site-header nav a[aria-current="page"]{color:var(--text-strong)}
.as-site-header__cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.as-site-footer{border-top:1px solid var(--border);background:var(--void-0)}
.as-site-footer__in{max-width:var(--container);margin:0 auto;padding:56px var(--gutter) 40px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.as-site-footer h2{font:var(--weight-medium) var(--text-sm)/1.3 var(--font-sans);color:var(--text-strong);margin-bottom:14px;letter-spacing:0}
.as-site-footer nav{display:grid;gap:10px}
.as-site-footer nav a{color:var(--text-muted);text-decoration:none;font-size:var(--text-sm);display:block;padding:3px 0}
.as-site-footer nav a:hover{color:var(--text-strong)}
.as-site-footer__tag{margin-top:14px;color:var(--text-muted);font-size:var(--text-sm);max-width:22rem}
.as-site-footer__base{max-width:var(--container);margin:0 auto;padding:16px var(--gutter) 32px;font-size:var(--text-xs);color:var(--text-subtle);display:flex;gap:12px;align-items:center}
@media (max-width:640px){.as-site-header__in{flex-wrap:wrap;height:auto;gap:4px 12px;padding-top:10px;padding-bottom:6px}.as-site-header__cta{gap:4px}.as-site-header nav{order:3;width:100%;justify-content:space-between;margin:0 -12px;width:calc(100% + 24px)}.as-site-footer__in{grid-template-columns:1fr}}


/* ==========================================================================
   Additions for the EJS shell
   ========================================================================== */

/* App frame */
.as-app__content{min-width:0;animation:as-fade-up .45s var(--ease-out) both}
.as-app__content:focus{outline:none}
.as-flashes{display:grid;gap:12px;margin-bottom:24px}
.as-flashes:empty{display:none}

/* Staff strip (admin portal only) */
.as-staffbar{background:linear-gradient(180deg,rgba(255,181,71,.12),rgba(255,181,71,.05));border-bottom:1px solid var(--warn-border);color:var(--amber-300);font-size:var(--text-xs)}
.as-staffbar__in{max-width:1120px;margin:0 auto;padding:0 var(--gutter);min-height:32px;display:flex;align-items:center;gap:8px}
.as-staffbar__mail{margin-left:auto;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Palette: server-rendered, hidden until palette.js opens it */
.as-cmdk__list a.as-cmdk__item,.as-cmdk__list button.as-cmdk__item{text-decoration:none}
.as-cmdk__item:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.as-cmdk__group[hidden],.as-cmdk__item[hidden]{display:none}
.as-cmdk__item .as-icon{width:16px;height:16px}
.as-cmdk form{margin:0}

/* Auth layout (layout.ejs, shell 'auth'): page frame over the mesh background. The A1/A2 panel itself is .as-auth (screen: auth) */
.as-authpage{min-height:100vh;display:flex;flex-direction:column;background:var(--mesh-hero),var(--bg-marketing)}
.as-authpage__top{width:100%;max-width:1104px;height:72px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:12px}
.as-authpage__fill{flex:1 1 auto}
.as-authpage__main{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:16px 32px 72px}
.as-authpage__main:focus{outline:none}
.as-auth-card{width:min(400px,100%);padding:32px;border-radius:20px}
.as-auth-card h1{font:var(--weight-regular) 1.75rem/1.2 var(--font-display);letter-spacing:-.03em;color:var(--text-strong);margin-bottom:8px}
.as-auth-card>p{color:var(--text-muted);font-size:var(--text-sm)}
.as-auth-card form{display:grid;gap:16px;margin-top:20px}
.as-auth-card>form:first-of-type{margin-top:20px}
.as-auth-card .as-flash{margin-top:16px}
.as-auth__links{display:grid;gap:8px;margin-top:20px;font-size:var(--text-sm);color:var(--text-muted)}
.as-auth__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);border:1px solid var(--primary-soft-border);color:var(--primary);margin-bottom:16px}
.as-or{display:flex;align-items:center;gap:12px;color:var(--text-subtle);font-size:var(--text-xs);margin:20px 0 0}
.as-or::before,.as-or::after{content:"";flex:1;height:1px;background:var(--border)}

/* Error page */
.as-error-page{display:grid;justify-items:center;text-align:center;gap:12px;padding:72px 16px}
.as-error-page__code{font:var(--weight-regular) 4.5rem/1 var(--font-display);letter-spacing:-.05em;color:var(--text-subtle)}
.as-error-page h1{font:var(--weight-regular) 1.875rem/1.2 var(--font-display);letter-spacing:-.03em}
.as-error-page p{color:var(--text-muted);max-width:34rem}
.as-error-page__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}

/* Site header on narrow screens: keep the sign-in buttons, collapse the links to a row below */
@media (max-width:640px){
  .as-site-header__in{gap:12px;height:auto;min-height:var(--header-h);flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .as-site-header nav{display:flex;order:3;flex:1 1 100%;margin:0 -8px;overflow-x:auto}
  .as-site-header__cta{margin-left:auto}
  .as-site-footer__in{grid-template-columns:1fr}
}
.as-site-footer .as-wordmark{margin-bottom:0}

/* == screen: dashboard == */
/* /dashboard (handoff v2 D1 and D2; views dashboard/index.ejs, _waiting.ejs). Title and Add a site, then one column. */
.dw{display:flex;flex-direction:column;gap:20px;min-width:0}
:where(.dw)>*{margin-top:0;min-width:0}
.as-page-head:has(+.dw){margin-bottom:20px}
/* Header actions stay side by side on a phone (dashboard, sites, site page) */
@media (max-width:640px){.as-page-head--inline .as-page-head__actions{width:auto}.as-page-head--inline .as-page-head__actions>:not(dialog){flex:0 0 auto}.as-page-head--inline .as-page-head__actions .as-btn{width:auto}}
/* Stats card: three even columns split by hairlines, stacked on a phone */
.dw-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.dw-stats>*+*{border-left:1px solid var(--border-subtle)}
@media (max-width:640px){.dw-stats{grid-template-columns:1fr}.dw-stats>*+*{border-left:0}}
/* Latest checks */
.dw-latest{display:flex;flex-direction:column;gap:12px}
:where(.dw-latest)>*{margin-top:0}
.dw-latest__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.dw-latest__head--start{justify-content:flex-start;gap:10px}
.dw-h2{margin:0;font:var(--weight-medium) 18px/1.3 var(--font-sans);letter-spacing:0;color:var(--text-strong)}
.dw-col-time{width:96px}.dw-col-sender{width:190px}.dw-col-result{width:120px}
.dw-time{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.dw-sender{color:var(--text-strong);text-decoration:none}
a.dw-sender:hover{text-decoration:underline}
.dw-msg{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--text-muted);overflow-wrap:anywhere;min-width:200px}
.dw-result{display:inline-flex;align-items:center;gap:8px}
.dw-score{font:var(--weight-regular) 12px/1 var(--font-mono);color:var(--text-muted);font-variant-numeric:tabular-nums}
.as-checks__msg{max-width:380px;overflow-wrap:anywhere;color:var(--text-muted)}
.as-checks__score{font:var(--weight-regular) 12px/1 var(--font-mono);color:var(--text-muted);font-variant-numeric:tabular-nums}
/* D1 note bar: amber dot (not connected) or a cyan dot that pulses twice, then stays (connected, no checks yet) */
.dw-note{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 18px;border:1px solid var(--primary-soft-border);border-radius:14px;background:var(--primary-soft)}
.dw-note__dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--amber-400)}
.dw-note[data-state="waiting"] .dw-note__dot{background:var(--primary);animation:as-pulse 1.8s var(--ease-out) 2}
.dw-note__text{flex:1 1 320px;min-width:0;margin:0;font-size:14px;line-height:1.5;color:var(--text-strong)}
.dw-note__hint{color:var(--text-muted)}
.dw-note__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;max-width:100%}
/* "Connect {site}" carries the site name (up to 120 characters): it wraps inside the note instead of running off a 390 screen */
.dw-note__actions .as-btn{max-width:100%;height:auto;min-height:var(--control-h-sm);padding-block:6px;white-space:normal;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.dw-note form{margin:0}
.dw-note [aria-busy="true"]{opacity:.7}
@media (prefers-reduced-motion:reduce){.dw-note__dot{animation:none!important}}
/* D1 sample data: faded, desaturated, not interactive (aria-hidden and inert in the markup), a "Sample data" badge per block */
.dw-sample{position:relative}
.dw-sample__body{opacity:.45;filter:saturate(.6);pointer-events:none;user-select:none}
.dw-sample__tag{position:absolute;top:12px;right:12px;z-index:1}

/* == screen: sites == */
/* Handoff v2: S1 sites grid and add-site dialog, /sites/new, S2 site page not connected (the connect card itself is .ob-* in
   the onboarding section), S3 site page connected (views dashboard/sites.ejs, newSite.ejs, site.ejs, partials/siteCard.ejs,
   addSiteDialog.ejs, siteFields.ejs) */
.as-sites,.as-sitepage,.as-newsite{margin-top:0}
.as-page-head:has(+.as-sites),.as-page-head:has(+.as-sitepage){margin-bottom:20px}
/* S1: site card v2 (design-system SiteCard): no key, no created date */
.as-sitecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;align-items:start}
.as-sitecard{position:relative;display:flex;flex-direction:column;gap:20px;padding:20px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 50%),var(--surface);color:inherit;text-decoration:none;min-width:0;transition:border-color var(--dur-base),transform var(--dur-base) var(--ease-out),background-color var(--dur-base)}
.as-sitecard:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.as-sitecard:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.as-sitecard>span{display:flex}
.as-sitecard__head{align-items:center;gap:12px}
.as-sitecard__ico{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--text-strong);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--border-strong)}
.as-sitecard__id{flex:1 1 auto;min-width:0;display:block}
.as-sitecard__name{display:block;font:500 16px/1.3 var(--font-sans);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-sitecard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:3px;font-size:13px;color:var(--text-muted);min-width:0}
.as-sitecard__state,.as-sitecard__plat{white-space:nowrap}
.as-sitecard__dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(79,227,165,.12)}
.as-sitecard--pending .as-sitecard__dot{background:var(--amber-400);box-shadow:0 0 0 3px rgba(255,190,90,.12)}
.as-sitecard__go{position:absolute;top:16px;right:16px;color:var(--text-muted);opacity:0;transition:opacity var(--dur-fast),transform var(--dur-base) var(--ease-out)}
.as-sitecard:hover .as-sitecard__go,.as-sitecard:focus-visible .as-sitecard__go{opacity:1;transform:translate(1px,-1px)}
.as-sitecard__body{align-items:flex-end;justify-content:space-between;gap:16px}
.as-sitecard__total{display:block;min-width:0}
.as-sitecard__fig{display:block;font:var(--type-figure);letter-spacing:-.03em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.as-sitecard__lab{display:block;white-space:nowrap;margin-top:6px;font-size:13px;color:var(--text-muted)}
.as-sitecard__lab b{font-weight:500;color:var(--text-strong);font-variant-numeric:tabular-nums}
.as-sitecard__mix{display:block;flex:0 1 140px;min-width:72px;text-align:right}
.as-sitecard__bar{display:block;height:4px;margin-top:8px;border-radius:4px;background:rgba(79,227,165,.35);overflow:hidden}
.as-sitecard__bar>span{display:block;height:100%;margin-left:auto;background:var(--spam)}
.as-sitecard__body--pending{align-items:center;flex-wrap:wrap;padding:14px 16px;border:1px dashed var(--border-strong);border-radius:12px;font-size:14px;color:var(--text-muted)}
.as-sitecard__cta{display:inline-flex;align-items:center;gap:6px;color:var(--text-link);font-weight:500}
.as-sitecard__foot{padding-top:14px;border-top:1px solid var(--border-subtle);font-size:12px;color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){.as-sitecard,.as-sitecard__go{transition:none}.as-sitecard:hover{transform:none}}
/* S1: the add-site dialog ("Add a site" / "Takes about two minutes.", Site name, Built with, Cancel, Continue) */
dialog.as-addsite{padding:24px}
.as-addsite__form{gap:20px}
.as-addsite__head h2{margin:0}
.as-addsite__head p{margin:6px 0 0}
.as-addsite .as-fieldset>legend{margin-bottom:8px}
.as-addsite .as-platform__cards{gap:8px}
.as-addsite__actions{margin-top:0}
.as-dialog__form .as-addsite__actions{margin-top:0}
/* /sites/new: the dialog's form on its own page */
.as-newsite{max-width:32rem}
.as-newsite__form{display:flex;flex-direction:column;gap:20px}
.as-newsite__form>*{margin-top:0}
.as-newsite__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
/* Site page head: name with the badge, the meta line, "This site's logs" */
.as-sitepage__title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.as-sitepage__title h1{margin:0}
.as-page-head:has(.as-sitepage__title) .as-page-head__eyebrow{margin-bottom:6px;font-size:13px}
.as-page-head:has(.as-sitepage__title) .as-page-head__meta{margin-top:8px;font-size:14px}
/* S2: connect card column, platform switch and the quiet delete row */
.as-sitepage--setup{max-width:720px;gap:24px}
.as-sitepage__switch{margin:0}
.as-sitepage__switchbtn{all:unset;box-sizing:border-box;cursor:pointer;font-size:14px;color:var(--text-link);text-decoration:underline;text-underline-offset:3px;border-radius:4px}
.as-sitepage__switchbtn:hover{color:var(--text-link-hover)}
.as-sitepage__switchbtn:focus-visible{box-shadow:var(--focus-ring)}
.as-sitepage__delete{padding-top:20px;border-top:1px solid var(--border-subtle)}
.as-sitepage__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.as-sitepage__rowtext{flex:1 1 240px;min-width:0;font-size:14px;color:var(--text-muted)}
.as-sitepage__row .as-confirm-fallback{flex:1 1 100%;margin:0}
/* S3: stats, API key card, Advanced (Delete site only) */
.as-sitepage .as-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.as-sitepage .as-stats{grid-template-columns:1fr}.as-sitepage .as-stats>*+*{border-left:0}}
.as-sitepage__keycard{max-width:620px}
.as-sitepage__key{display:flex;flex-direction:column;gap:16px}
.as-sitepage__key>*{margin:0}
.as-sitepage__key .as-dl dd{color:var(--text-strong)}
.as-sitepage__keyform{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.as-sitepage__keyform .as-confirm-fallback{flex:1 1 100%;margin:0}
.as-sitepage__nokey{font-size:14px;color:var(--text-muted)}
.as-sitepage__advanced .as-sitepage__rowtext{color:var(--text)}
.as-sitepage__rowhint{color:var(--text-muted)}

/* == screen: logs == */
.as-page-head:has(+.as-logs){margin-bottom:16px}
.as-logs{display:flex;flex-direction:column;gap:16px;min-width:0}
.as-logs>*{margin-top:0}
/* Filter bar: one card that wraps; search, site, dates, the segmented result filter */
.as-logs__filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;margin:0}
.as-logs__filters>input[type="hidden"]{display:none}
.as-logs__q{flex:3 1 240px;min-width:0}
.as-logs__q .as-input{padding-left:34px}
.as-logs__site,.as-logs__range{flex:1 1 150px;min-width:0}
.as-logs__dates{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex:1 1 100%;min-width:0}
.as-logs__date{display:flex;align-items:center;gap:8px;flex:1 1 180px;min-width:0}
.as-logs__date .as-label{margin:0;flex:none;font-size:var(--text-xs);color:var(--text-muted)}
.as-logs__apply{flex:none}
.as-logs__filters .as-seg{flex:none}
/* The result filter stays one row; on a narrow screen it scrolls sideways inside the bar instead of wrapping */
.as-logs__filters .as-seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
.as-logs__filters .as-seg::-webkit-scrollbar{display:none}
/* The date fields only for "Custom range"; browsers without :has always show them */
@supports selector(:has(*)){
  .as-logs__filters:not(:has(#f-range option[value="custom"]:checked)) .as-logs__dates{display:none}
}
.as-logs__summary{margin:0;font-size:var(--text-xs);color:var(--text-muted)}
.as-logs__summary strong{font-weight:var(--weight-regular);color:var(--text-strong);font-variant-numeric:tabular-nums}
.as-logs__summary a{color:var(--text-muted)}
.as-logs__summary a:hover{color:var(--text-strong)}
/* List and detail panel: side by side on desktop, the panel below the list on a phone */
.as-logs__body{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;min-width:0}
.as-logs__main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:16px}
.as-logs__main>*{margin:0}
.as-logs__panel{flex:1 1 360px;min-width:0;scroll-margin-top:24px}
.as-logs__panel:focus{outline:none}
.as-logs__panel:focus-visible{box-shadow:var(--focus-ring)}
.as-logs__panel-body{padding-top:12px}
.as-logs__panel .as-card__actions{margin-right:-8px}
/* One check per row: a wrapping flex row that stacks on a phone */
.as-loglist{list-style:none;margin:0;padding:0;overflow:hidden}
.as-loglist:focus{outline:none}
.as-loglist:focus-visible{box-shadow:var(--focus-ring)}
.as-logrow{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start;padding:14px 18px;margin:0;transition:background-color var(--dur-fast)}
.as-logrow+.as-logrow{border-top:1px solid var(--border-subtle)}
.as-logrow[aria-current="true"]{background:rgba(255,255,255,.045)}
.as-logrow:hover{background:rgba(255,255,255,.025)}
.as-logrow[aria-current="true"]:hover{background:rgba(255,255,255,.045)}
.as-logrow__verdict{flex:0 0 124px;display:flex;flex-direction:column;gap:6px}
.as-logrow__badge{display:flex;align-items:center;gap:6px}
.as-logrow__score,.as-logrow__time{font:var(--weight-regular) 12px/1.3 var(--font-sans);color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.as-logrow__main{flex:1 1 260px;min-width:0}
.as-logrow__who{font-size:var(--text-xs);color:var(--text-muted);overflow-wrap:anywhere}
.as-logrow__name{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-strong);text-decoration:none}
.as-logrow__name:hover{text-decoration:underline}
.as-logrow__msg{margin:4px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--text);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.as-logrow__msg--none{color:var(--text-muted)}
/* Check details (panel and /logs/:id) */
.as-check-detail{display:flex;flex-direction:column;gap:18px}
.as-check-detail>*{margin:0}
.as-check-detail__verdict{display:flex;flex-direction:column;gap:10px}
.as-check-detail__score{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--text-strong)}
.as-check-detail__caption{margin:0;font-size:var(--text-xs);line-height:1.5;color:var(--text-muted)}
.as-check-detail__h{margin:0 0 6px;font:var(--weight-medium) var(--text-xs)/1.3 var(--font-sans);letter-spacing:0;color:var(--text-strong)}
.as-check-detail__message{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;font-size:var(--text-sm);line-height:1.55;color:var(--text)}
.as-check-detail__message--none{color:var(--text-muted)}
.as-check-detail .as-dl{grid-template-columns:92px minmax(0,1fr);gap:14px 16px}
.as-check-detail .as-dl dt{color:var(--text-muted)}
.as-check-detail .as-dl code{font-size:var(--text-xs)}
@media (max-width:640px){.as-check-detail .as-dl{grid-template-columns:1fr;gap:2px}}
.as-logdetail{max-width:640px;display:flex;flex-direction:column;gap:16px}
.as-logdetail>*{margin:0}
.as-logdetail__back{font-size:var(--text-sm)}
@media (max-width:640px){
  .as-logs__filters{gap:8px}
  .as-logrow{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){.as-logrow{transition:none}}

/* == screen: review == */
.review-bulk{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;padding:10px 14px;font-size:var(--text-sm)}
.review-bulk__count strong{color:var(--text-strong);font-variant-numeric:tabular-nums}
.review-bulk__label{margin-left:auto;color:var(--text-muted)}
.review-bulk__buttons{display:inline-flex;gap:6px}
.review-time{font-size:var(--text-xs);color:var(--text-subtle);font-variant-numeric:tabular-nums}
.review-site{color:var(--text-muted);white-space:nowrap}
.review-sender{min-width:160px}
.review-sender__name{color:var(--text-strong)}
.review-message{min-width:240px;max-width:380px;color:var(--text-muted);overflow-wrap:anywhere}
.review-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
@media (max-width:640px){.review-bulk__label{margin-left:0;flex:1 1 100%}}

/* == screen: billing == */
/* Handoff v2 E3 (.bl-*): plan card (name, price line, Change plan, meter, reset date), three plan cards with "Your plan",
   payment method and invoices only when payments are on. No-JS downgrade confirm page: .bl-confirm. */
.bl{display:flex;flex-direction:column;gap:20px;min-width:0}
.bl>*{margin:0}
.bl-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.bl-row__text{flex:1 1 260px;min-width:0}
.bl-row__text>.as-card__title{margin:0}
.bl-row__fill{flex:1 1 auto;min-width:0;font-size:var(--text-sm)}
.bl-current__body{display:flex;flex-direction:column;gap:20px}
:where(.bl-current__body)>*+*{margin-top:0}
.bl-current__price{margin:4px 0 0;font-size:var(--text-sm);color:var(--text-muted)}
.bl-usage{display:flex;flex-direction:column;gap:10px}
.bl-usage__reset{font-size:var(--text-xs);color:var(--text-muted)}
.bl-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--warn-border);border-radius:10px;background:var(--warn-soft)}
.bl-alert>.as-icon{flex:none;margin-top:3px;color:var(--warn)}
.bl-alert p{margin:0;font-size:var(--text-sm);line-height:1.55;color:var(--text)}
.bl-alert strong{color:var(--text-strong);font-weight:var(--weight-medium)}
.bl-pace{margin:0;font-size:var(--text-xs);color:var(--text-muted)}
.bl-plans-wrap{display:flex;flex-direction:column;gap:12px;scroll-margin-top:24px}
.bl-plans-wrap>*{margin:0}
.bl-plans-wrap__title{margin:8px 0 0;font:var(--weight-medium) var(--text-lg)/1.3 var(--font-sans);letter-spacing:0;color:var(--text-strong)}
.bl-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.bl-plan{min-width:0}
.bl-plan>*{margin:0}
.bl-plan__head>*{margin:0}
.bl-plan__head .as-plan__blurb{margin-top:4px}
.bl-plan .as-plan__cta{display:flex;flex-direction:column;gap:10px}
.bl-plan .as-plan__cta form{margin:0}
.bl-plan__note{margin:0;font-size:var(--text-xs);line-height:1.5;color:var(--text-muted)}
.bl-plan__note strong{color:var(--text-strong);font-weight:var(--weight-medium)}
.bl-plan .as-btn[disabled]{opacity:1;color:var(--text-subtle);background:transparent;border-color:var(--border);cursor:default}
.bl-note{font-size:var(--text-xs);line-height:1.5;color:var(--text-muted)}
.bl-pay{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.bl-pay__method{flex:1 1 300px;min-width:0}
.bl-pay__invoices{flex:2 1 420px;min-width:0}
.bl-pay .as-card__body>.as-icon{flex:none;color:var(--text-muted)}
.bl-empty{margin:0;font-size:var(--text-sm);color:var(--text-muted)}
.bl-confirm{max-width:560px}
.bl-confirm__body{display:flex;flex-direction:column;gap:10px}
.bl-confirm__body>p{margin:0}
.bl-confirm__foot{justify-content:flex-end;margin-top:16px}
.confirm-dialog p+p{margin-top:8px}
@media (max-width:860px){.bl-plans{grid-template-columns:minmax(0,1fr);gap:16px}}

/* == screen: account == */
/* Handoff v2 E4 (was Profile): one card of settings rows (title alone on the left), then the delete card */
.account{display:flex;flex-direction:column;gap:20px;min-width:0}
.account>*{margin:0}
.account-settings>.as-settings-row{padding:24px;margin:0}
.account-settings>.as-settings-row:first-child{border-top:0}
.account-settings .as-settings-row__aside h2{font:var(--weight-medium) var(--text-sm)/1.35 var(--font-sans)}
.account-settings .as-settings-row__aside p{margin:4px 0 0;font-size:var(--text-xs);line-height:1.5;color:var(--text-muted)}
.account-settings .as-settings-row__main{gap:14px}
.account-settings .as-field{margin:0}
.account-name{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0}
.account-name__field{flex:1 1 260px;min-width:0}
.account-fact{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.account-fact__value{margin-top:4px;font-size:var(--text-sm);color:var(--text-strong);overflow-wrap:anywhere}
.account-note{margin:0}
.account-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.account-actions__link{font-size:var(--text-xs)}
.account-sessions{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:10px}
.account-session{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 14px;margin:0}
.account-session+.account-session{border-top:1px solid var(--border-subtle)}
.account-session__text{flex:1 1 220px;min-width:0}
.account-session__device{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--text-strong)}
.account-session__meta{display:block;margin-top:2px;font-size:var(--text-2xs);color:var(--text-muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.account-session form,.account-others{margin:0}
.account-delete{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
:where(.account-delete)>*+*{margin-top:0}
.account-delete__text{flex:1 1 420px;min-width:0}
.account-delete__text p{margin:4px 0 0;font-size:var(--text-xs);line-height:1.5;color:var(--text-muted)}
.account-delete__more{flex:none;min-width:0}
.account-delete__more[open]{flex:1 1 100%}
.account-delete__more>summary{list-style:none;width:max-content}
.account-delete__more>summary::-webkit-details-marker{display:none}
.account-delete__panel{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.account-delete__panel>*{margin:0}
.account-delete__panel>p{font-size:var(--text-sm);color:var(--text-muted)}

/* == screen: auth == (A1 log in, A2 sign up, forgot and reset password; docs/design/handoff-v2 A1/A2)
   One joined panel: the form on the left, the sorting scene on the right (auth/_scene.ejs). Under 860px the scene is
   hidden and a 48px scanning logo (auth/_mini.ejs) sits above the heading. The scene's still frame is in the SVG
   attributes; the keyframes below move it (8s loop, four pills). Pause is a CSS-only checkbox, so it works without JS. */
.as-authpage__col.as-authpage__col--panel{width:min(1040px,100%);display:flex;flex-direction:column;align-items:center;gap:16px}
.as-authpage__col.as-authpage__col--panel>.as-flashes{width:min(480px,100%);margin:0}
.as-auth-hint{font-size:14px;color:var(--text-muted)}
.as-auth{width:100%;max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--border-strong);border-radius:24px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-xl);animation:as-fade-up var(--dur-slower) var(--ease-out) both}
.as-auth__form{padding:48px 56px;display:flex;flex-direction:column;justify-content:center;gap:20px;min-width:0}
:where(.as-auth__form)>*{margin:0}
.as-auth__title{margin:0;font:400 2rem/1.15 var(--font-display);letter-spacing:-.035em;color:var(--text-strong);overflow-wrap:anywhere}
.as-auth__lead{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--text-muted)}
.as-auth__form .as-flash{margin:0}
.as-auth__fields{display:flex;flex-direction:column;gap:14px;margin:0}
.as-auth__fields>.as-btn{margin-top:4px}
.as-auth__label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.as-auth__forgot{font-size:13px}
.as-auth__or{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-muted)}
.as-auth__or::before,.as-auth__or::after{content:"";flex:1 1 auto;height:1px;background:var(--border)}
.as-auth__terms{font-size:12px;line-height:1.5;color:var(--text-muted)}
.as-auth__alt{font-size:var(--text-sm);color:var(--text-muted)}
.as-auth__scene{position:relative;padding:24px 28px 28px;display:flex;flex-direction:column;gap:12px;min-width:0;border-left:1px solid var(--border-subtle);background:radial-gradient(90% 60% at 50% 35%,rgba(90,215,255,.08),transparent 70%),var(--void-50)}
.as-auth__scene-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;font-size:13px;color:var(--text-muted)}
.as-auth__scene-title{margin:0;font:400 13px/1.4 var(--font-sans);letter-spacing:0;color:var(--text-muted)}
.as-auth__caption{margin:0;text-align:center;font:400 1.25rem/1.3 var(--font-display);letter-spacing:-.02em;color:var(--text-strong)}
/* Pause: a real checkbox (keyboard and screen readers) under a button-styled label; "Play" shows while paused */
.as-auth__pause{position:relative;display:inline-flex}
.as-auth__pause-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.as-auth__pause-input:focus-visible+.as-auth__pause-btn{box-shadow:var(--focus-ring)}
.as-auth__pause-input:hover+.as-auth__pause-btn{background:var(--surface-hover);color:var(--text-strong)}
.as-auth__pause-on,.as-auth__pause-input:checked+.as-auth__pause-btn .as-auth__pause-off{display:none}
.as-auth__pause-input:checked+.as-auth__pause-btn .as-auth__pause-on{display:inline}
/* Scene drawing (colours need tokens, so they live here instead of SVG attributes) */
.as-auth-scene{display:block;width:100%;height:auto;font-family:var(--font-sans)}
.as-auth-scene__label{font-size:12px;fill:var(--text-muted)}
.as-auth-scene__wire{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.5;stroke-dasharray:3 5}
.as-auth-scene__wire--soft{stroke:rgba(255,255,255,.1)}
.as-auth-scene__bin{fill:var(--surface);stroke:var(--border-strong)}
.as-auth-scene__bin-title{font-size:13px;font-weight:500;fill:var(--text-strong)}
.as-auth-scene__dot--clean{fill:var(--clean)}
.as-auth-scene__dot--spam{fill:var(--spam)}
.as-auth-scene__pill{fill:var(--surface-raised);stroke:rgba(255,255,255,.12)}
.as-auth-scene__pill--clean{stroke:rgba(79,227,165,.3)}
.as-auth-scene__pill--spam{stroke:rgba(255,107,120,.3)}
.as-auth-scene__edge{fill:none}
.as-auth-scene__edge--clean{stroke:rgba(79,227,165,.45)}
.as-auth-scene__edge--spam{stroke:rgba(255,107,120,.45)}
.as-auth-scene__ico{fill:none;stroke:var(--text-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.as-auth-scene__msg{font-size:13px;fill:var(--text)}
.as-auth-scene__msg--muted{fill:var(--text-muted)}
.as-auth-scene__msg--struck{fill:var(--text-muted);text-decoration:line-through}
.as-auth-scene__score{font-size:11px;font-family:var(--font-mono);fill:var(--text-muted)}
.as-auth-scene__ring{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1.5}
.as-auth-scene__ring--mini{stroke:rgba(255,255,255,.08);stroke-width:4}
.as-auth-scene__sweep{fill:none;stroke:var(--primary);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:465;stroke-dashoffset:465}
.as-auth-scene__sweep--mini{stroke-width:4}
.as-auth-scene__tile{fill:var(--surface);stroke:rgba(255,255,255,.14)}
.as-auth-scene__tile--mini{fill:var(--surface-raised);stroke-width:2}
.as-auth-scene__o{fill:none;stroke:var(--text-strong);stroke-width:8.4}
.as-auth-scene__bar{stroke:var(--primary);stroke-width:8.4;stroke-linecap:round}
/* Motion (from the A1/A2 <helmet>) */
.as-auth-pill{transform-box:fill-box;transform-origin:center;animation:as-auth-clean 8s cubic-bezier(.2,.8,.2,1) infinite both}
.as-auth-pill--spam{animation-name:as-auth-spam}
.as-auth-pill--d2{animation-delay:2s}
.as-auth-pill--d4{animation-delay:4s}
.as-auth-pill--d6{animation-delay:6s}
.as-auth-pill .as-av-on{animation:as-av-on 8s linear infinite both;animation-delay:inherit}
.as-auth-pill .as-av-off{animation:as-av-off 8s linear infinite both;animation-delay:inherit}
.as-auth-pill--spam .as-av-struck{animation:as-av-struck 8s linear infinite both;animation-delay:inherit}
.as-auth-pill--spam .as-av-plain{animation:as-av-plain 8s linear infinite both;animation-delay:inherit}
.as-auth-sweep{animation:as-auth-sweep 2s linear 1.4s infinite both}
.as-auth__scene:has(.as-auth__pause-input:checked) :is(.as-auth-pill,.as-auth-pill *,.as-auth-sweep){animation-play-state:paused}
@keyframes as-auth-clean{0%{opacity:0;transform:translate(0px,-8px) scale(1)}5%{opacity:1;transform:translate(0px,0px) scale(1)}15%{opacity:1;transform:translate(0px,62px) scale(1)}20%{opacity:0;transform:translate(0px,128px) scale(.5)}24%{opacity:0;transform:translate(0px,228px) scale(.5)}28%{opacity:1;transform:translate(0px,228px) scale(1)}36%{opacity:1;transform:translate(0px,228px) scale(1)}40%{opacity:0;transform:translate(-60px,262px) scale(1)}42%{opacity:0;transform:translate(-120px,334px) scale(1)}46%{opacity:1;transform:translate(-120px,342px) scale(1)}58%{opacity:1;transform:translate(-120px,342px) scale(1)}64%,100%{opacity:0;transform:translate(-120px,342px) scale(1)}}
@keyframes as-auth-spam{0%{opacity:0;transform:translate(0px,-8px) scale(1)}5%{opacity:1;transform:translate(0px,0px) scale(1)}15%{opacity:1;transform:translate(0px,62px) scale(1)}20%{opacity:0;transform:translate(0px,128px) scale(.5)}24%{opacity:0;transform:translate(0px,228px) scale(.5)}28%{opacity:1;transform:translate(0px,228px) scale(1)}36%{opacity:1;transform:translate(0px,228px) scale(1)}40%{opacity:0;transform:translate(60px,262px) scale(1)}42%{opacity:0;transform:translate(120px,334px) scale(1)}46%{opacity:1;transform:translate(120px,342px) scale(1)}58%{opacity:1;transform:translate(120px,342px) scale(1)}64%,100%{opacity:0;transform:translate(120px,342px) scale(1)}}
@keyframes as-av-on{0%,22%{opacity:0}24%,100%{opacity:1}}
@keyframes as-av-off{0%,22%{opacity:1}24%,100%{opacity:0}}
@keyframes as-av-struck{0%,44%{opacity:0}48%,100%{opacity:1}}
@keyframes as-av-plain{0%,44%{opacity:1}48%,100%{opacity:0}}
@keyframes as-auth-sweep{0%{opacity:0;stroke-dashoffset:465}6%{opacity:.85}40%{opacity:.85;stroke-dashoffset:0}52%,100%{opacity:0;stroke-dashoffset:0}}
.as-auth-mini{display:none;flex:none}
.as-auth-mini .as-auth-sweep{animation-delay:.3s;animation-iteration-count:2}
@media (prefers-reduced-motion:reduce){
  .as-auth-pill,.as-auth-pill *,.as-auth-sweep{animation:none!important}
  .as-auth{animation:none}
  .as-auth__pause{display:none}
}
@media (max-width:860px){
  .as-auth{grid-template-columns:minmax(0,1fr);max-width:480px}
  .as-auth__scene{display:none}
  .as-auth__form{padding:32px 24px}
  .as-auth-mini{display:block}
  .as-auth-hint{display:none}
}

/* == screen: onboarding == (handoff v2 O1, O2a, O2b and the connect card the site page shares) */

/* Password "Show" / "Hide" (partials/field.ejs reveal: true, public/js/show-password.js). Shared with Account. */
.as-input-wrap--reveal>.as-input{padding-left:12px;padding-right:72px}
.as-pw-reveal{position:absolute;top:50%;right:4px;transform:translateY(-50%)}
.as-pw-reveal:active:not(:disabled){transform:translateY(-50%)}

/* O1, O2a, O2b (handoff v2; views dashboard/welcome.ejs, connect.ejs, _connectCard.ejs): a centred column in the sidebar shell */
.ob{width:100%;max-width:560px;margin:56px auto 0;display:flex;flex-direction:column;gap:28px;animation:as-fade-up var(--dur-slower) var(--ease-out) both}
:where(.ob)>*{margin-top:0}
.ob--wide{max-width:600px}
.ob .as-flash{margin:0}
.ob-steps{margin:0;font-size:13px;color:var(--text-muted)}
.ob-steps__row{display:flex;align-items:center;gap:10px}
.ob-steps b{font-weight:var(--weight-medium);color:var(--text-strong)}
.ob-steps i{width:28px;height:1px;background:var(--border-strong)}
.ob-steps--done i{background:var(--success-border)}
.ob-title{margin:0;font:var(--weight-regular) 2.5rem/1.1 var(--font-display);letter-spacing:-.04em;color:var(--text-strong);overflow-wrap:anywhere}
.ob-lead{margin:10px 0 0;font-size:16px;color:var(--text-muted)}
/* O1 form: Site name, the two "Built with" choices (real radios styled as the design's pressed buttons), Continue */
.ob-form{display:flex;flex-direction:column;gap:28px}
:where(.ob-form)>*{margin-top:0}
.ob-pickset{margin:0;padding:0;border:0;min-width:0}
.ob-pickset>legend{padding:0;margin-bottom:10px}
.ob-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ob-opt{position:relative;display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.ob-opt:hover{border-color:var(--border-strong)}
.ob-opt__input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ob-opt:has(.ob-opt__input:checked){border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 3px rgba(90,215,255,.12)}
.ob-opt:has(.ob-opt__input:focus-visible){box-shadow:var(--focus-ring)}
.ob-opt__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--text-strong)}
.ob-opt:has(.ob-opt__input:checked) .ob-opt__icon{color:var(--primary)}
.ob-opt__t{display:block;font-size:15px;font-weight:var(--weight-medium);color:var(--text-strong)}
.ob-opt__d{display:block;margin-top:3px;font-size:13px}
@media (forced-colors:active){.ob-opt:has(.ob-opt__input:checked){outline:2px solid Highlight}.ob-opt:has(.ob-opt__input:focus-visible){outline:2px solid Highlight;outline-offset:2px}}
/* Connect card (O2a, O2b, S2): two numbered rows, then the status bar */
.ob-card{overflow:hidden}
.ob-list{list-style:none;margin:0;padding:0}
.ob-list>li{display:flex;gap:16px;padding:22px 24px}
.ob-list>li+li{border-top:1px solid var(--border-subtle)}
.ob-num{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-strong);font:var(--weight-medium) 12px/1 var(--font-sans);color:var(--text-muted)}
.ob-row{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px}
:where(.ob-row)>*{margin-top:0}
.ob-row--inline{flex-direction:row;flex-wrap:wrap;align-items:center}
.ob-row--inline>.ob-row__title,.ob-row__grow{flex:1 1 220px;min-width:0}
.ob-row form{margin:0}
.ob-row__title{margin:0;font:var(--weight-medium) 15px/1.4 var(--font-sans);letter-spacing:0;color:var(--text-strong)}
.ob-row__key{margin:4px 0 0;font:13px/1.4 var(--font-mono);color:var(--text-muted);overflow-wrap:anywhere}
.ob-row__note{margin:0;font-size:13px;color:var(--text-muted)}
.ob-row__link{align-self:flex-start;font-size:13px}
.ob-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 24px;border-top:1px solid var(--border-subtle);background:rgba(255,255,255,.02)}
.ob-status__dot{width:8px;height:8px;border-radius:50%;background:var(--text-subtle);flex:none}
.ob-status[data-state="missing"] .ob-status__dot{background:var(--warn)}
.ob-status[data-state="connected"]{background:var(--success-soft)}
.ob-status[data-state="connected"] .ob-status__dot{background:var(--success);box-shadow:0 0 0 4px rgba(79,227,165,.15)}
.ob-status__text{flex:1 1 200px;min-width:0;margin:0;font-size:14px;color:var(--text-strong)}
.ob-status__title,.ob-status__hint{display:block}
.ob-status__hint{margin-top:2px;font-size:13px;color:var(--text-muted)}
.ob-status__form{margin:0}
.ob-status [aria-busy="true"]{opacity:.7}
.ob-foot{display:flex;justify-content:space-between;gap:12px}
@media (max-width:520px){
  .ob{margin-top:8px}
  .ob-pick{grid-template-columns:1fr}
  .ob-list>li{padding:20px 16px;gap:12px}
  .ob-status{padding:16px}
}
@media (prefers-reduced-motion:reduce){.ob{animation:none}.ob-opt{transition:none}}

/* == screen: admin == */
.as-adm-search{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:14px}
.as-adm-search>.as-grow{flex:1 1 240px;min-width:0}
.as-adm-search__filter{flex:0 1 200px;min-width:160px}
.as-adm-user{color:var(--text-strong);font-weight:var(--weight-medium);text-decoration:none}
.as-adm-user:hover{text-decoration:underline}
.as-adm-grant{margin:10px 0 0}
.as-adm-sites{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--text-sm)}
.as-adm-when{font-size:var(--text-xs);color:var(--text-muted)}
.as-adm-action{color:var(--text-strong);white-space:nowrap}
.as-card--danger .as-card__body form,.as-adm-sessions .as-card__body form{margin:0}

/* Small patches */
a.as-cmdk__item:hover{color:var(--text-strong)}
.as-authpage__col{width:min(400px,100%);display:grid;gap:16px}
.as-authpage__col .as-auth-card{width:100%}
.as-authpage__col .as-flashes{margin-bottom:0}
.as-flashes{margin-bottom:24px}
.as-authpage__top form{margin:0}

.as-app__main{overflow-x:clip}


/* UX pass data views (screen pass refines) */
.as-example{opacity:.4}