/* Cross-route audit pass: shared sizing, focus, overflow, and responsive containment. */
:root{--audit-border:rgba(255,255,255,.14);--audit-muted:#a4a4ad;--audit-control:48px}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #9b86ff;outline-offset:3px}
input,select,textarea{max-width:100%}
select{background-image:linear-gradient(45deg,transparent 50%,#aaa 50%),linear-gradient(135deg,#aaa 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:36px}
main,.screen,.workspace>main{min-width:0}
.screen,.directory,.settings-screen,.money-screen,.messages-screen,.admin-screen{width:100%;max-width:1380px;margin-inline:auto}
.thread-tabs,.messages-tabs,.store-ops-tabs,.admin-tabs,.profile-tabs,.directory-tabs{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.thread-tabs::-webkit-scrollbar,.messages-tabs::-webkit-scrollbar,.store-ops-tabs::-webkit-scrollbar,.admin-tabs::-webkit-scrollbar,.profile-tabs::-webkit-scrollbar,.directory-tabs::-webkit-scrollbar{display:none}
.app-bag-drawer,.notification-drawer,.app-drawer,.more-sheet{max-width:420px;max-height:100dvh;overflow:auto;overscroll-behavior:contain}
.app-bag-drawer-shell,.notification-drawer-shell,.more-sheet{max-height:100dvh}
.drawer-backdrop,.modal-backdrop{overscroll-behavior:contain}
.message-stream,.ticket-message-stream{min-width:0;overflow-x:hidden}
.message-composer,.ticket-composer{min-width:0}
.message-composer input,.message-composer textarea,.ticket-composer input,.ticket-composer textarea{min-width:0;flex:1}
.admin-action-row,.admin-moderation-grid,.store-settings-grid,.store-domain-list{min-width:0}
.store-ticket-row,.ticket-summary,.admin-health-row{min-width:0}
.store-ticket-row>*{min-width:0}
.store-ticket-row small,.ticket-summary small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metric-card,.summary-card,.admin-app-metric{min-width:0}
.muted,.eyebrow,.field-help{color:var(--audit-muted)}
.screen[data-screen="storefronts"] .directory-search input{min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.screen[data-screen="storefronts"] .storefront-foot{width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center!important;gap:10px!important}
.screen[data-screen="storefronts"] .storefront-foot>*{min-width:0}
.screen[data-screen="storefronts"] .storefront-foot>b,.screen[data-screen="storefronts"] .storefront-report-hit{margin-left:0!important;white-space:nowrap!important;display:inline-flex!important;align-items:center!important;gap:4px!important}
/* Keep the current surface visually stable while the next route hydrates. A
   dimmed main pane reads as a flash on slower Safari/API responses. */
body.route-changing .workspace>main,body.route-settled .workspace>main{opacity:1;transition:none}
body.app-is-pending .workspace>main{cursor:progress}
body.app-booting .screen{visibility:hidden!important}
@media(max-width:900px){
  .workspace>main{padding-inline:16px!important}
  .screen,.directory,.settings-screen,.money-screen,.messages-screen,.admin-screen{max-width:none}
  .mobile-dock{left:12px;right:12px;width:auto}
  .app-bag-drawer,.notification-drawer,.app-drawer,.more-sheet{width:100%;max-width:none;border-radius:18px 18px 0 0}
  .store-ops-header,.screen-heading{gap:12px}
  .store-ops-header-actions,.screen-heading-actions,.admin-action-row{width:100%;flex-wrap:wrap}
  .store-ops-header-actions>* ,.screen-heading-actions>*{flex:1 1 140px}
  .message-composer,.ticket-composer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* Keep route changes and first-paint cards stable; legacy entrance cascades
   were still producing a visible flash after hydration. */
.screen.active,
.screen.active>* ,
.screen.active .storefront-card,
.screen.active .listing-card,
.screen.active .store-ops-card,
.screen.active .thread-list>.thread,
body.route-changing .workspace>main,
body.route-changing .topbar h1{animation:none!important;transform:none!important;opacity:1!important}

/* Scam storefronts keep the exact same geometry as their neighbours. The
   warning is an outline only, so it does not change card size or corners. */
.screen[data-screen="storefronts"] .storefront-grid .storefront-card.storefront-card-scam,
.screen[data-screen="storefronts"] .storefront-grid .storefront-card.storefront-card-scam:hover{
  position:relative!important;border:0!important;border-radius:0!important;outline:none!important;
  outline-offset:0!important;box-shadow:none!important;padding:14px 0!important;
}
.screen[data-screen="storefronts"] .storefront-grid .storefront-card.storefront-card-scam::before{
  content:"";position:absolute;inset:14px 0 0;border:1px solid #ff4557;
  border-radius:19px 19px 0 0;pointer-events:none;z-index:4;
}
.screen[data-screen="storefronts"] .storefront-report-hit{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:5px!important;min-height:28px!important;padding:0 9px!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:8px!important;
  background:rgba(255,255,255,.035)!important;color:#aaa3c8!important;
  font-weight:600!important;text-decoration:none!important;
}
.screen[data-screen="storefronts"] .storefront-card-scam .storefront-report-hit{
  border-color:rgba(255,69,87,.7)!important;background:rgba(255,69,87,.08)!important;color:#ff7380!important;
}
.screen[data-screen="storefronts"] .storefront-report-hit:hover,
.screen[data-screen="storefronts"] .storefront-report-hit:focus-visible{border-color:rgba(169,156,255,.65)!important;color:#fff!important}
.screen[data-screen="storefronts"] .storefront-report-hit .ui-icon{width:13px!important;height:13px!important;flex:none!important}

/* Match the list-surface selector's specificity so the scam card cannot pick
   up the older rounded/padded variant from a later theme layer. */
html[data-surface-style="list"] .workspace .screen[data-screen="storefronts"] .storefront-grid .storefront-card.storefront-card-scam,
html[data-surface-style="list"] .workspace .screen[data-screen="storefronts"] .storefront-grid .storefront-card.storefront-card-scam:hover{
  position:relative!important;border:0!important;border-radius:0!important;outline:none!important;
  outline-offset:0!important;box-shadow:none!important;padding:14px 0!important;
}
html[data-surface-style="list"] .workspace .screen[data-screen="storefronts"] .storefront-grid .storefront-card.storefront-card-scam::before{
  content:"";position:absolute;inset:14px 0 0;border:1px solid #ff4557;
  border-radius:19px 19px 0 0;pointer-events:none;z-index:4;
}
@media(max-width:620px){
  .workspace>main{padding:18px 16px calc(86px + env(safe-area-inset-bottom))!important}
  .screen-heading{margin-bottom:18px!important}
  .screen-heading h2{font-size:30px!important}
  .section-heading h2,.settings-card h3{font-size:20px!important}
  .message-unit,.ticket-message{max-width:88%}
  .message-money-request,.composer-money-request{max-width:100%}
  .admin-moderation-grid,.admin-ban-grid{grid-template-columns:1fr!important}
  .store-ticket-row{grid-template-columns:minmax(0,1fr) auto!important}
  .store-ticket-row .ticket-status{grid-column:2;grid-row:1}
  .screen[data-screen="storefronts"] .storefront-foot{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}
  .screen[data-screen="storefronts"] .storefront-foot .storefront-report-hit{grid-column:1/-1;justify-self:end}
}