/* Site header, menus and footer for every public page of the new design.
   Markup: landing/includes/site_header.html and site_footer.html.
   Behaviour: landing/js/new-ui/site-chrome.js. */

/* desk.css sets body to 100% height for the app shell; public pages grow with content so the sticky header stays pinned */
body.new-ui { height: auto; min-height: 100%; display: flex; flex-direction: column; }
body.new-ui .sc-footer { margin-top: auto; padding-top: 56px; }
body.new-ui .sc-footer__top { padding-top: 0; }
/* Campaign strips render inside the header on the old layout; here they sit under it */
body.new-ui .pc-cmp--header .pc-cmp__inner { max-width: 1200px; margin: 0 auto; }
.sc-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); }
.sc-header__inner { max-width: 1200px; margin: 0 auto; height: 62px; padding: 0 20px; display: flex; align-items: center; gap: 35px; }
.sc-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); flex-shrink: 0; }
.sc-logo img { width: 115px; height: 35px; border-radius: 8px; }
.sc-logo span { font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: -.01em; }
.sc-nav { display: flex; gap: 2px; }
.sc-nav__item { position: relative; }
.sc-nav__link { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 18px; font: inherit; font-weight: var(--fw-medium); color: var(--text-muted); text-decoration: none; background: none; border: none; cursor: pointer; white-space: nowrap; }
.sc-nav__link:hover, .sc-nav__item.open > .sc-nav__link { background: var(--surface-alt); color: var(--text); }
.sc-nav__link.active { color: var(--primary-text); background: var(--primary-soft); }
.sc-nav__link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.sc-nav__item.open > .sc-nav__link svg { transform: rotate(180deg); }
.sc-grow { flex: 1; }
.sc-actions { display: flex; gap: 8px; align-items: center; }

/* Mega menus */
.sc-mega { position: absolute; top: calc(100% + 10px); left: -12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 24px 50px -22px rgba(10,29,41,.35); padding: 18px; display: none; z-index: 40; }
.sc-nav__item.open > .sc-mega { display: block; }
.sc-mega::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
/* The same PDF Tools menu in the signed-in app shell's top bar (croppers/new_ui/_app_topbar.html): the item
   sits at the right of the bar, so the menu hangs from its right edge; it hides under 1080px with the rest of
   .sc-nav, where the sidebar's "All PDF tools" link takes over */
.topbar .sc-nav__item > .sc-mega { left: auto; right: 0; top: calc(100% + 8px); }
.sc-mega a.sc-tool { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); font-weight: var(--fw-medium); white-space: nowrap; }
.sc-mega a.sc-tool:hover { background: var(--surface-alt); color: var(--primary-text); }
.sc-tool__icon { width: 28px; height: 28px; border-radius: 8px; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; flex-shrink: 0; }
.sc-tool__icon img { width: 20px; height: 20px; border-radius: 5px; }
.sc-tool__icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-tool small { display: block; font-size: var(--fs-small); color: var(--text-muted); font-weight: var(--fw-body); }
.sc-promo { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-md); background: var(--sidebar-bg); color: var(--sidebar-strong); text-decoration: none; margin-top: 4px; }
.sc-promo strong { display: block; font-size: var(--fs-body); }
.sc-promo small { color: var(--sidebar-text); font-size: var(--fs-small); }
.sc-promo .sc-tool__icon { background: rgba(255,255,255,.12); color: #fff; }

/* Signed-in bits */
/* The plan chip is the only thing in the bar that reports on the account rather than offering an
   action, so it wears the accent instead of the neutral surface the buttons use. */
.sc-credits { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 17px; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); background: var(--accent-soft); color: var(--warning-text); text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--fs-label); }
.sc-credits:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--warning-text); }
.sc-credits svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sc-user { position: relative; }
.sc-avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--primary-soft-border); background: var(--primary-soft); color: var(--primary-text); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); cursor: pointer; }
.sc-bell { position: relative; }
.sc-bell i { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }
.sc-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 20px 40px -20px rgba(10,29,41,.35); padding: 8px; display: none; z-index: 40; }
.sc-user.open .sc-menu { display: block; }
.sc-menu__who { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; display: flex; flex-direction: column; gap: 10px; }
.sc-menu__who strong { display: block; }
.sc-menu__who small { color: var(--text-muted); font-size: var(--fs-small); }
.sc-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); font-weight: var(--fw-medium); }
.sc-menu a:hover { background: var(--surface-alt); }
.sc-menu a svg { width: 16px; height: 16px; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-menu hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }

/* ── The app's account menu (croppers/new_ui/_app_topbar.html) ──────────────
   A modifier, not a restyle of .sc-menu: the public header's own menus (favourites, help,
   notifications, account) keep the plain treatment above. */
.sc-menu--account { width: 274px; padding: 6px; }
.sc-menu--account .sc-menu__who { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 8px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.sc-menu--account .sc-menu__face { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--grad); color: var(--on-primary); font-size: var(--fs-body); font-weight: var(--fw-bold); display: grid; place-items: center; }
.sc-menu--account .sc-menu__face img { width: 100%; height: 100%; object-fit: cover; }
.sc-menu--account .sc-menu__id { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
/* Emails run long and the menu is 274px wide: let it cut rather than push the menu out */
.sc-menu--account .sc-menu__id strong,
.sc-menu--account .sc-menu__id small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-menu--account .sc-menu__id strong { font-size: var(--fs-body-lg); }
.sc-menu--account .sc-menu__cap { padding: 6px 10px 3px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
/* Log out is the only thing in here that undoes something, so it reads as itself */
/* Log out is the one destructive item in the menu, so it reads red at rest and not only under
   the pointer - the hover state just deepens it. */
.sc-menu .sc-menu__out { color: var(--danger-text); font-weight: var(--fw-semibold); }
.sc-menu .sc-menu__out svg { stroke: var(--danger-text); }
.sc-menu .sc-menu__out:hover { background: var(--danger-soft); color: var(--danger-text); }
.sc-menu .sc-menu__out:hover svg { stroke: var(--danger-text); }

/* Bell menu. Built on the same .sc-menu panel as help and account and given the same treatment:
   one width, a head that reads as a status line, and rows that are inset cards with a radius and
   a hover tint rather than a full-bleed list. The rows themselves are written by
   displayNotifications() in landing/base.html; in this design they come as plain classes and take
   their colours from the theme, so the panel works in dark mode. The one thing it does not share
   is the width: its rows carry a title, a message and a timestamp, so it runs wider than the two
   menus of one-line links. */
.sc-notif { width: 330px; }
.sc-notif__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); letter-spacing: -.01em; }
.sc-notif__head button { background: none; border: none; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--primary-text); cursor: pointer; padding: 3px 7px; border-radius: var(--r-sm); }
.sc-notif__head button:hover { background: var(--primary-soft); }
.sc-notif__list { max-height: 360px; overflow: auto; overscroll-behavior: contain; }

/* One row, shaped like a menu link: unread marker, then title, message and time. */
.sc-notif__list .notification-item { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: start; column-gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; background: transparent; }
.sc-notif__list .notification-item + .notification-item { margin-top: 1px; }
.sc-notif__list .notification-item:hover { background: var(--surface-alt); }
.sc-notif__list .notification-item.is-unread { background: var(--primary-soft); }
.sc-notif__list .notification-item.is-unread:hover { background: var(--primary-soft-border); }
.notification-item__mark { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: transparent; }
.is-unread .notification-item__mark { background: var(--primary); }
.notification-item__body { display: grid; gap: 3px; min-width: 0; }
.notification-item__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text); line-height: 1.3; }
.notification-item__text { font-size: var(--fs-label); color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; }
.notification-item__time { font-size: var(--fs-caption); color: var(--text-faint); }
.sc-bell i { display: none; }
.sc-bell i.on { display: block; }
.sc-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: var(--fw-bold); line-height: 16px; text-align: center; display: none; }

/* Mobile */
.sc-burger { display: none; }
.sc-drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.sc-drawer.open { display: block; }
.sc-drawer__scrim { position: absolute; inset: 0; background: rgba(10,29,41,.45); }
.sc-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--surface); overflow-y: auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 6px; }
.sc-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sc-drawer details { border-bottom: 1px solid var(--border); }
.sc-drawer summary { list-style: none; cursor: pointer; padding: 12px 2px; font-weight: var(--fw-semibold); display: flex; justify-content: space-between; }
.sc-drawer summary::-webkit-details-marker { display: none; }
.sc-drawer summary::after { content: "+"; color: var(--primary-text); font-weight: var(--fw-bold); }
.sc-drawer details[open] summary::after { content: "–"; }
.sc-drawer details a, .sc-drawer .sc-drawer__link { display: block; padding: 9px 4px; text-decoration: none; color: var(--text); }
.sc-drawer details a { padding-left: 12px; color: var(--text-muted); }
.sc-drawer h6 { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--text-faint); margin: 8px 12px 2px; }
.sc-drawer .sc-drawer__link { padding: 12px 2px; border-bottom: 1px solid var(--border); font-weight: var(--fw-semibold); }
.sc-drawer__actions { display: grid; gap: 8px; margin-top: 12px; }
.sc-drawer__actions .btn { width: 100%; }

/* Footer */
.sc-footer { background: var(--surface); border-top: 1px solid var(--border); }
.sc-footer__top { max-width: 1200px; margin: 0 auto; padding: 34px 20px 24px; display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 26px; }
.sc-footer__brand p { color: var(--text-muted); line-height: 1.55; margin: 10px 0 14px; max-width: 300px; }
.sc-footer__contact { display: grid; gap: 6px; font-size: var(--fs-label); color: var(--text-muted); }
.sc-footer__contact a { color: var(--text-muted); text-decoration: none; display: inline-flex; gap: 7px; align-items: center; }
.sc-footer__contact a:hover { color: var(--primary-text); }
.sc-footer__contact svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sc-footer h4 { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--text-faint); margin-bottom: 10px; }
.sc-footer ul { list-style: none; display: grid; gap: 7px; }
.sc-footer li a { color: var(--text-muted); text-decoration: none; }
.sc-footer li a:hover { color: var(--primary-text); }
.sc-footer__guides { max-width: 1200px; margin: 0 auto; padding: 18px 20px; border-top: 1px solid var(--border); }
.sc-footer__guides h4 { margin-bottom: 8px; }
.sc-footer__guides div { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-footer__guides a { font-size: var(--fs-small); color: var(--text-muted); text-decoration: none; border: 1px solid var(--border); border-radius: 12px; padding: 3px 10px; background: var(--bg); }
.sc-footer__guides a:hover { color: var(--primary-text); border-color: var(--primary-soft-border); }
.sc-footer__bar { border-top: 1px solid var(--border); }
.sc-footer__bar div { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--text-faint); }
.sc-footer__bar a { color: var(--text-faint); text-decoration: none; margin-left: 14px; }
.sc-footer__bar a:hover { color: var(--primary-text); }
.sc-social { display: flex; gap: 6px; margin-top: 14px; }
.sc-social a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); }
.sc-social a:hover { color: var(--primary-text); border-color: var(--primary); }
.sc-social svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1080px) {
  .sc-nav, .sc-actions .sc-hide-md { display: none; }
  .sc-burger { display: inline-flex; }
  .sc-footer__top { grid-template-columns: 1fr 1fr; }
  .sc-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sc-header__inner { padding: 0 14px; gap: 10px; }
  .sc-actions .sc-hide-sm { display: none; }
  .sc-footer__top { grid-template-columns: 1fr 1fr; gap: 20px; }
  .sc-footer__bar a { margin: 0 12px 0 0; }
}

/* Layout hooks used by the Django includes (inline styles in the concept moved here) */
/* Sized to its four columns (tool names do not wrap, and each carries a favourite star) */
.sc-mega--pdf { width: max-content; min-width: 760px; max-width: calc(100vw - 32px); }
.sc-mega--sellers { width: 820px; left: -120px; }

/* ── The two mega menus' own layout (.mx-*) ───────────────────────────────────
   pdf_tools_mega.html and the For Sellers block in site_header.html. The tools,
   then a foot strip; the panel itself carries no padding so the strip can run to
   its edges. The group colour is only a marker and an icon tint - every link is
   still an ordinary .sc-tool, so stars.js and site-chrome.js see what they saw
   before. */
.mx { padding: 0; width: 900px; max-width: calc(100vw - 24px); overflow: hidden; }
/* The sellers menu carries three columns and the marketplace tiles, so it runs wider. */
.sc-mega--sellers.mx, .mx--sellers { width: 1020px; }

/* Four columns; Security rides under Organize in the first one (.mx-col) */
.mx__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 8px; padding: 14px 14px 6px; }
.mx-col { display: grid; align-content: start; gap: 2px; min-width: 0; }
.mx__sell { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 4px 14px; padding: 14px 18px 6px; }
.mx-group { min-width: 0; }
.mx-h6 { display: flex; align-items: center; gap: 7px; font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--text-faint); margin: 6px 8px 8px; }
.mx-h6::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--primary); }
.mx-h6--amber::before { background: var(--accent); }
.mx-h6--green::before { background: var(--success); }
.mx-h6--teal::before { background: #2aa3c7; }
.mx-h6--red::before { background: var(--danger); }

.sc-mega a.mx-row { align-items: center; gap: 10px; padding: 6px 8px; }
.mx-row > span:last-child { min-width: 0; }
.mx-row b { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: var(--fw-medium); }
.mx-row b .badge-new { flex-shrink: 0; }
.mx-row small { display: block; color: var(--text-faint); font-size: var(--fs-small); font-weight: var(--fw-body); }

/* The icon chip, tinted by its group */
.mx-ic { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); }
.mx-ic svg { width: 15px; height: 15px; fill: none; stroke: var(--primary-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx-ic img { width: 18px; height: 18px; }
.mx-ic--amber { background: var(--accent-soft); }
.mx-ic--amber svg { stroke: var(--warning-text); }
.mx-ic--green { background: var(--success-soft); }
.mx-ic--green svg { stroke: var(--success-text); }
.mx-ic--teal { background: rgba(42, 163, 199, .14); }
.mx-ic--teal svg { stroke: #1b7f9e; }
.mx-ic--red { background: var(--danger-soft); }
.mx-ic--red svg { stroke: var(--danger-text); }

/* Marketplaces as tiles */
.mx__brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sc-mega a.mx-tile { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--border); border-radius: var(--r-md); text-align: center; font-size: var(--fs-label); background: var(--surface); }
.sc-mega a.mx-tile:hover { border-color: var(--primary-soft-border); background: var(--surface-alt); }
.mx-tile .mx-ic { width: 32px; height: 32px; }
/* stars.js pads a row to clear its star; on a tile the star sits in the corner */
.mx__brands .fav-row > a { padding-right: 6px !important; }
.mx__brands .fav-toggle { top: 0; right: -1px; transform: none; }

/* The Desktop App card closing Grow sales (.sc-promo keeps its dark card) */
.mx-promo { margin: 8px 8px 0; padding: 11px 12px; gap: 10px; }
.mx-promo strong { font-size: var(--fs-label); }
.mx-promo small { line-height: 1.35; }
.mx-promo__go { margin-left: auto; font-weight: var(--fw-bold); }

/* The foot strip: the promise on the left, the one thing worth a look on the right */
.mx__foot { display: flex; align-items: center; gap: 16px; padding: 12px 18px; margin-top: 8px; border-top: 1px solid var(--border); background: var(--surface-alt); }
.mx__note { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: var(--fs-label); }
.mx__note svg { width: 15px; height: 15px; fill: none; stroke: var(--success); stroke-width: 2; }
.mx__all { margin-left: auto; font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--primary-text); text-decoration: none; white-space: nowrap; }

/* A narrower window: fewer columns before the panel runs out of room. The nav
   itself is gone below 960px (.sc-hide-md), where the drawer takes over. */
@media (max-width: 1240px) {
  .mx, .mx--sellers { width: 860px; }
}
@media (max-width: 1100px) {
  .mx, .mx--sellers { width: calc(100vw - 40px); }
  .mx__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mx__sell { grid-template-columns: 1fr 1fr; }
  .mx__foot { flex-wrap: wrap; }
}
.sc-menu__who .pill { margin-top: 4px; }

/* ── The two panel menus: help and account ───────────────────────────────────
   Both are built from the shared .sc-menu rules above and then get the same treatment here, so
   the pair reads as one family whichever one you open. The wider panel is for their labels - a
   phone number, an email address, a username - which should not have to wrap. The landing header's
   account menu has no modifier class of its own, so it is matched through its data-menu. Look
   only: the markup, the links and the open/close behaviour are untouched. */
.sc-menu--help, .sc-menu--account, [data-menu="user"] .sc-menu { width: 290px; }
/* The head is a status line in both: the name or the title on one row, and under it the detail -
   an email, or the hours with their pill - sharing a baseline and wrapping together. */
.sc-menu--help .sc-menu__who strong, .sc-menu--account .sc-menu__id strong, [data-menu="user"] .sc-menu__who > strong { font-size: var(--fs-body-lg); letter-spacing: -.01em; }
.sc-menu--help .sc-menu__who small { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.35; }
.sc-menu--help .sc-menu__who .pill { margin-top: 0; }
/* A touch more room per row, and the icon picks up the brand colour under the pointer so the row
   has somewhere to go on hover. */
.sc-menu--help a, .sc-menu--account a, [data-menu="user"] .sc-menu a { padding: 9px 10px; line-height: 1.3; }
.sc-menu--help a + a, .sc-menu--account a + a, [data-menu="user"] .sc-menu a + a { margin-top: 1px; }
.sc-menu--help a:hover svg, .sc-menu--account a:hover svg, [data-menu="user"] .sc-menu a:hover svg { stroke: var(--primary-text); }
/* except the one destructive row, which stays red through its hover */
.sc-menu .sc-menu__out:hover svg { stroke: var(--danger-text) !important; }
.sc-avatar { padding: 0; overflow: hidden; display: grid; place-items: center; }
.sc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.sc-bell .icon-btn { position: relative; }
.sc-notif__empty { text-align: center; padding: 26px 16px; margin: 0; font-size: var(--fs-label); }
.sc-footer__contact span { display: inline-flex; gap: 7px; align-items: center; }
.sc-drawer__who { padding: 12px; display: flex; gap: 10px; align-items: center; }
.sc-drawer__plan { font-size: var(--fs-label); }

/* ── Favourite tools (croppers/starred_tools.py, js/new-ui/stars.js) ───────── */
/* stars.js wraps each tool link in a [data-fav-scan] list: <div class="fav-row"><a/><button class="fav-toggle"/></div> */
.fav-row { position: relative; display: flex; min-width: 0; }
/* display: flex above beats the browser's own rule for [hidden]; the app sidebar hides whole rows */
.fav-row[hidden] { display: none; }
.fav-row > a { flex: 1; min-width: 0; padding-right: 34px !important; }
.fav-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-faint); cursor: pointer; opacity: .75; transition: opacity .12s, color .12s, background .12s; }
.fav-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.fav-row:hover .fav-toggle, .fav-toggle:focus-visible { opacity: 1; }
.fav-toggle:hover { color: var(--accent); background: var(--accent-soft); opacity: 1; }
.fav-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.fav-toggle.is-on { color: var(--accent); opacity: 1; }
.fav-toggle.is-on svg { fill: var(--accent); }
/* Cards (tool grids): star in the top-right corner */
[data-fav-scan="card"] .fav-row { height: 100%; }
[data-fav-scan="card"] .fav-toggle { top: 8px; right: 8px; transform: none; }
/* Dark navy sidebar */
.sidebar .fav-row > a { margin-right: 10px; }
.sidebar .fav-toggle { right: 16px; color: var(--sidebar-caption); }
.sidebar .fav-toggle:hover { background: var(--sidebar-hover); }
.sidebar .fav-toggle.is-on, .sidebar .fav-toggle:hover { color: var(--accent); }
/* Tooltip: one fixed element for every star, placed by stars.js above (or below) the star */
.fav-tip { position: fixed; z-index: 3000; padding: 5px 9px; border-radius: 6px; background: #0a1d29; color: #faf8f5; font-size: var(--fs-small); font-weight: var(--fw-semibold); white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }
:root[data-theme="dark"] .fav-tip { background: #e1e6ea; color: #11151d; }

/* Header favourites menu, drawer and sidebar lists */
.sc-stars-btn.has-stars svg { fill: var(--accent); stroke: var(--accent); }
.sc-menu--stars { width: 280px; }
.starred-list--menu { max-height: 360px; overflow-y: auto; }
.starred-list--menu .starred-item img { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.starred-empty { padding: 8px 10px 10px; color: var(--text-muted); font-size: var(--fs-label); line-height: 1.45; }
.starred-empty__star { color: var(--accent); font-weight: var(--fw-bold); }
.sc-drawer__stars summary::before { content: "★"; color: var(--accent); margin-right: 6px; }
.sc-drawer__stars summary { justify-content: flex-start; }
.sc-drawer__stars summary::after { margin-left: auto; }
.nav__starred[hidden], [data-starred-wrap][hidden] { display: none; }
.fav-tip[hidden] { display: none; }

/* ── Service notices (croppers/new_ui/_status_notices.html, notices.js) ──────────────────
   A toast stack pinned to the bottom-left, floating over the page instead of pushing it down.
   Bottom-left because the support agent widget owns the bottom-right of every page. One card per
   notice - level stripe, tinted icon, level word, the message at full text contrast - with the
   most serious one at the head of the stack, carrying the "N more" toggle. Here rather than in
   seller-app.css because base.html loads this file on every new-design page, app shell or not
   (the wallet shows the same notices). Scoped under .notices so the page-level .notice card in
   seller-app.css and wallet.css is untouched. notices.js sets --notices-left (the app shell's
   sidebar) and --notices-lift (the support bubble, and the sticky Process row on phones). */
.notices { position: fixed; z-index: 1000; left: calc(16px + var(--notices-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--notices-lift, 0px)); width: min(380px, calc(100vw - 32px - var(--notices-left, 0px))); display: grid; gap: 10px; align-content: end; max-height: min(70vh, 560px); overflow-x: hidden; overflow-y: auto; padding: 4px; margin: -4px; overscroll-behavior: contain; }
.notices .notice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "badge level close" "badge text  text" "badge more  more"; column-gap: 10px; align-items: start; row-gap: 2px; margin: 0; padding: 11px 12px 12px 13px; border: 1px solid var(--border); border-left: 3px solid var(--notice-tone); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-size: var(--fs-label); line-height: 1.45; box-shadow: 0 16px 34px -16px rgba(10,29,41,.5), 0 2px 6px -4px rgba(10,29,41,.3); }
.notices .notice--info { --notice-tone: var(--primary); --notice-soft: var(--primary-soft); --notice-text: var(--primary-text); }
.notices .notice--success { --notice-tone: var(--success); --notice-soft: var(--success-soft); --notice-text: var(--success-text); }
.notices .notice--warning { --notice-tone: var(--warning); --notice-soft: var(--warning-soft); --notice-text: var(--warning-text); }
.notices .notice--error { --notice-tone: var(--danger); --notice-soft: var(--danger-soft); --notice-text: var(--danger-text); }
.notices .notice__badge { grid-area: badge; align-self: start; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--notice-soft); color: var(--notice-text); }
.notices .notice__icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.notices .notice__level { grid-area: level; align-self: center; min-height: 26px; display: flex; align-items: center; font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--notice-text); }
.notices .notice__text { grid-area: text; min-width: 0; font-size: var(--fs-body); font-weight: var(--fw-body); color: var(--text); }
.notices .notice__text a { color: var(--notice-text); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; }
.notices .notice__text p + p { margin-top: 4px; }
.notices .notice__more { grid-area: more; justify-self: start; height: 24px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-alt); color: var(--text-muted); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; }
.notices .notice__more:hover { border-color: var(--notice-tone); color: var(--notice-text); }
.notices .notice__close { grid-area: close; align-self: start; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-faint); cursor: pointer; }
.notices .notice__close:hover { background: var(--surface-alt); color: var(--text); }
.notices .notice__close svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.notices .notice :focus-visible, .notices .notice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.notices .notice--in { animation: notice-in .22s cubic-bezier(.2,.7,.3,1) both; }   /* set by notices.js on the cards that are arriving */
@keyframes notice-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .notices .notice--in { animation: none; } }
@media (max-width: 560px) { .notices { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--notices-lift, 0px)); } }
/* display:grid above beats the `hidden` attribute's UA style, and the global [hidden] override
   lives in seller-app.css, which pages like the wallet do not load - so say it here. */
.notices[hidden], .notices .notice[hidden], .notices .notice__more[hidden] { display: none; }