/* Discovery links only; the review library loads its own small stylesheet on use. */
body .app .nav :is(.reviews-nav-link,.hub-nav-link){display:flex;align-items:center;min-height:44px;padding:6px 10px;border:1px solid transparent;border-radius:12px;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none}
body .app .nav :is(.reviews-nav-link,.hub-nav-link) .ico{background:transparent;border-color:transparent;color:var(--muted)}
body .app .nav :is(.reviews-nav-link,.hub-nav-link):hover{background:var(--ui-hover);color:var(--text)}
/* A gentle canvas separates the white surfaces without tinting the feed content. */
body[data-theme=light]:has(#page-home.active){--canvas:#f6f7fa;--bg:var(--canvas);background:var(--canvas)}
body[data-theme=light] #page-home :is(#growthHub,#growthHero){background-color:#edf2f8!important}
/* Compact discovery beside the brand, available on every app page. */
body .app .topbar .header-explore{display:flex;align-items:center;gap:10px;min-width:0;grid-column:1;grid-row:1;order:0;margin-right:auto}
body .app .topbar .header-explore .brand{width:auto;min-width:0;flex:none;margin:0}
.hub-header-links{display:flex;align-items:center;gap:2px;flex:none}
.hub-header-links a{display:grid;place-items:center;width:36px;height:40px;border:0;border-radius:9px;background:transparent;color:var(--muted);text-decoration:none}
.hub-header-links .hub-link-icon{display:grid;place-items:center}
.hub-header-links svg{display:block;width:20px;height:20px}
.hub-header-links a:hover{background:var(--ui-hover);color:var(--text)}
.hub-header-links a:focus-visible{outline:2px solid var(--purple);outline-offset:1px}
@media(min-width:761px) and (max-width:1099px){body .app .topbar .header-explore{gap:6px}.hub-header-links a{width:30px}}
@media(max-width:600px){
 body .app .topbar .header-explore{gap:4px}
 .hub-header-links a{width:28px}
 body .app .topbar .header-actions{flex-wrap:nowrap;gap:6px}
 body .app .topbar .account-pill{width:auto;min-width:0;padding:6px 8px;justify-content:center;gap:5px}
 body .app .topbar .account-pill #accountLabel{position:static;inline-size:auto!important;max-inline-size:none!important;block-size:auto;clip-path:none;font-size:12px;line-height:20px;white-space:nowrap}
 body .app .topbar .account-pill.signed-out-header{width:auto;min-width:0;padding:8px 10px}
 body .app .topbar .account-pill.signed-out-header #accountLabel{position:static;inline-size:auto!important;max-inline-size:none!important;block-size:auto;clip-path:none;font-size:12px;line-height:20px;white-space:nowrap}
}
/* Up to 389px the header also holds the Games button, so the compact spacing starts here. */
@media(max-width:389px){
 body .app .topbar{column-gap:4px}
 body .app .topbar .header-explore{gap:4px}
 body .app .topbar .header-explore .brand b{font-size:15px;letter-spacing:.5px}
 .hub-header-links{gap:0}.hub-header-links a{width:24px;height:38px}.hub-header-links svg{width:18px;height:18px}
 body .app .topbar .header-actions{gap:4px}
 body .app .topbar .header-utilities{gap:4px}
 body .app .topbar :is(.notification-button,.theme-toggle){width:32px;min-width:32px;height:36px;padding:0}
}
@media(max-width:359px){body .app .topbar .account-pill #accountLabel{display:none}body .app .topbar .account-pill{padding:4px!important}}
/* Long usernames shorten with an ellipsis so the header stays on one line beside the Games and Inbox buttons. */
@media(max-width:600px){body .app .topbar .account-pill #accountLabel{max-inline-size:max(44px,calc(100vw - 338px))!important;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:389px){body .app .topbar .account-pill #accountLabel{max-inline-size:max(44px,calc(100vw - 304px))!important}}