/* The header and account menu of a brand account (js/brand-chrome.js adds this
   sheet when it draws them; lib/account-kind.js is the model). Everything is
   scoped to <html data-account-view="brand">, which only a brand account in
   Brand view ever carries, or to the brand entries themselves, so a creator's
   page is untouched. Colours and sizes are the masthead's own. */

/* A page that is always a brand page (<html data-brand-page>: lib/account-kind.js BRAND_PAGES) ships the brand
   links in its own HTML and loads this sheet in its <head>, so they are styled on the first paint. Nothing that is
   only for creators shows in its header, whoever is looking. */
html[data-brand-page] .mast-discord{display:none!important}
html[data-brand-page] .mast nav a.nav-discord{display:none!important}

/* The brand navigation: the same links row, with its own five icons. */
.mast nav a[data-brand-nav]{--ni-tone:var(--accent)}
.mast nav a[data-brand-nav="home"]{--ni:url("/icons/phosphor/squares-four.svg")}
.mast nav a[data-brand-nav="page"]{--ni:url("/icons/phosphor/storefront.svg");--ni-tone:var(--tone-posts)}
.mast nav a[data-brand-nav="reviews"]{--ni:url("/icons/phosphor/star.svg");--ni-tone:var(--tone-warn)}
.mast nav a[data-brand-nav="market"]{--ni:url("/icons/phosphor/chart-bar.svg");--ni-tone:var(--tone-creators)}
.mast nav a[data-brand-nav="messages"]{--ni:url("/icons/phosphor/chat-circle.svg");--ni-tone:var(--tone-money)}
/* A representative of several brands: which one the header is about. */
.mast nav .brand-nav-switch{display:flex;align-items:center;flex:none;margin-left:10px}
.mast nav .brand-nav-switch select{max-width:190px;min-height:36px;padding:6px 28px 6px 10px;border:1px solid color-mix(in srgb,var(--mast-ink) 24%,transparent);border-radius:var(--r-sm);background-color:transparent;color:var(--mast-ink);font:inherit;font-size:13.5px;font-weight:600;text-overflow:ellipsis}
.mast nav .brand-nav-switch select:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.mast nav .brand-nav-switch select option{color:var(--ink);background:var(--pane)}
@media(max-width:700px){.mast nav .brand-nav-switch{margin-left:4px}.mast nav .brand-nav-switch select{max-width:150px;min-height:44px}}

/* The menu: whose account it is, then the brand entries. A button entry
   (Switch view, Sign out) is drawn exactly like the link entries around it. */
.account-menu .menu-brand-line{margin:-6px 8px 10px;padding:0 0 10px;border-bottom:1px solid var(--rule);color:var(--ink);font-size:14px;font-weight:650;line-height:1.4}
.account-menu>.menu-action{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;font-size:15px;line-height:1.4;text-align:left;cursor:pointer}
.account-menu>.menu-action:hover{background:var(--violet-soft)}
.account-menu>.menu-action:hover .menu-icon{color:var(--violet)}
.account-menu>.menu-action:focus-visible,.account-menu>a[data-brand-menu]:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.account-menu>.menu-action:disabled,.account-menu>a[aria-disabled="true"]{opacity:.55;cursor:default}
.account-menu>.menu-action:disabled:hover,.account-menu>a[aria-disabled="true"]:hover{background:transparent}
.account-menu>[data-brand-menu="signout"]{margin-top:6px;border-top:1px solid var(--rule);border-radius:0 0 var(--r-sm) var(--r-sm)}
.account-menu [data-brand-menu="emails"] .menu-icon{background:#e8efff;color:#3464ce}
.account-menu [data-brand-menu="view"] .menu-icon{background:#fbefda;color:#9f6a12}
.account-menu [data-brand-menu="signout"] .menu-icon{background:color-mix(in srgb,var(--ink-2) 10%,var(--pane));color:var(--ink-2)}

/* In Brand view: nothing that is only for creators. The Trybe badge in the
   menu, the setup checklist and the older "Get started" strip, the results
   and "Your week" prompts, the beta and plan prompts, Scout, the creator
   Discord, the "find your TikTok matches" strip and the beta introduction on
   the Top 100, the "here for your brand?" rows (they already are), and the
   affiliate link in the footer (it stays, quietly, on Account). */
html[data-account-view="brand"] :is(.menu-trybe-slot,#setup-tour,#get-started,#results-nudge,#your-week,#brand-beta,.pl-banner,.scout-shell,.mast-discord,.nav-discord,.alert-strip,.home-intro,[data-upgrade],[data-setup-link],[data-watchlist-link],[data-brand-exit],.brand-exit-row){display:none!important}
html[data-account-view="brand"] footer.site-footer a:is([href="/affiliates"],.foot-discord){display:none!important}

/* Account, for a brand account (js/account.js renderBrand): how you sign in,
   the "I also make videos" switch with its confirm step, one quiet line for
   the referral link, and delete. */
.acct-brand-card{margin-top:16px}
.acct-brand-card .mp-head p{margin:4px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.acct-brand-email{font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.acct-brand-list{margin:12px 0 0;padding:0 0 0 20px;display:grid;gap:6px;font-size:14.5px;line-height:1.5}
.acct-brand-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.acct-brand-actions .btn{min-height:44px}
.acct-brand-confirm{margin-top:14px;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--pane-2)}
.acct-brand-confirm p{margin:0;font-size:14.5px;line-height:1.5}
.acct-brand-status{margin:10px 0 0;color:var(--ink-2);font-size:14px;line-height:1.5}
.acct-brand-status:empty,.cp-status:empty{margin:0}
.acct-brand-card .note{margin-top:12px}
.acct-brand-refer{margin:18px 2px;color:var(--ink-2);font-size:14px;line-height:1.5}
#acct.is-brand-account #account-links .mp-rows{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){#acct.is-brand-account #account-links .mp-rows{grid-template-columns:1fr}.acct-brand-actions .btn{width:100%}}

/* /creator-page: what a brand account sees in place of a creator-only page. */
.cp-page{max-width:760px}
.cp-card{padding:24px}
.cp-card h2{margin:0 0 8px;font-size:21px;line-height:1.3}
.cp-card p{margin:0 0 12px;color:var(--ink-2);line-height:1.55}
.cp-card .cp-what{color:var(--ink);font-size:16px}
.cp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.cp-actions .btn{min-height:44px}
#cp-root{display:grid;gap:var(--s-4);margin-top:var(--s-4)}
.cp-too h3{margin:0 0 6px;font-size:17px}
.cp-confirm{margin-top:12px;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--pane-2)}
.cp-status{margin:10px 0 0;color:var(--ink-2);font-size:14px}
@media(max-width:700px){.cp-card{padding:18px}.cp-actions .btn{width:100%}}