/*
 * Magna Docs: hides AFFiNE's links out of the app and swaps its logo for Magna's
 * (selfhost/README.md, "Branding"). Loaded after AFFiNE's own stylesheets on every page, so
 * it applies before the first paint; brand.js covers what CSS can't select.
 *
 * Selectors use what AFFiNE keeps stable: link targets, data-testid attributes and the logo's
 * SVG path. Where there is nothing stable, a hashed class name of the pinned image is used,
 * marked "pinned"; apply.mjs --strict (CI) fails if one of them is gone after an upgrade.
 *
 * Never what users wrote. A rule either names one of AFFiNE's own elements (a data-testid, a
 * pinned class, a command id, its logo's SVG path, the Admin panel's box) or excludes every
 * place that shows user content (the :not(:is(...) *) part): documents and shared pages, a
 * database's Link cells wherever they show (in a doc, in an opened row, in a doc's Info),
 * comments. That list is USER_CONTENT in brand.js, repeated here as it is (CSS can't import
 * it); apply.mjs --strict (CI) fails if a :not(:is(...) *) here is not that list, or if
 * AFFiNE's code no longer has one of its names. A link to affine.pro that someone wrote stays
 * and opens.
 */

/* What brand.js hides. */
[data-magna-hidden] {
  display: none !important;
}

/* 1. Links to AFFiNE's sites, its community channels and its desktop app, anywhere outside a
 *    document: sidebar "Learn more", Settings → About, the top bar of the sign-in and error
 *    pages, the "Built with AFFiNE" badge on shared pages, Web Clipper, templates, import. */
:is(
  a[href*="affine.pro" i],
  a[href*="affineassets.com" i],
  a[href*="toeverything" i],
  a[href*="github.com/toeverything" i],
  a[href*="twitter.com/AffineOfficial" i],
  a[href*="x.com/AffineOfficial" i],
  a[href*="discord.gg/" i],
  a[href*="discord.com/invite" i],
  a[href*="discord.com/channels" i],
  a[href*="youtube.com/@affinepro" i],
  a[href*="reddit.com/r/Affine" i],
  a[href*="t.me/affine" i],
  a[href*="chromewebstore.google.com/detail/affine-" i],
  a[href*="typeform.com" i],
  a[href^="affine:" i],
  a[href^="affine-beta:" i],
  a[href^="affine-canary:" i],
  a[href^="affine-internal:" i]
):not(:is(
  [data-affine-editor-container], editor-host, doc-title, rich-text, affine-link, affine-reference,
  [data-block-id], [contenteditable], input, textarea, affine-database-link-cell,
  affine-data-view-record-detail, [data-testid="database-backlink-cell"], .comment-editor-viewport
) *) {
  display: none !important;
}

/* 2. AFFiNE elements without a link of their own. (Rules with :has() are kept apart: a browser
 *    without :has() drops the whole rule it is in, not just that selector.) */
[data-testid="open-in-app-card"],               /* "Open this doc in AFFiNE app" card on a doc */
[data-testid="editor-option-menu-link"],        /* doc ••• menu: "Open in desktop app" */
[data-testid="workspace-setting:license"],      /* workspace settings: AFFiNE license and pricing */
[data-testid="ai-island"],                      /* AI chat button (AI is off on this server) */
[data-testid="about-title"] + div ~ div,        /* About: contact, communities, legal (affine.pro) */
[data-sonner-toast] [data-testid="download"] {  /* toast action "Download Client" (copy as image) */
  display: none !important;
}

/* The sign-in and 404 pages' illustration with AFFiNE's logo (never an image someone added). */
img[src*="/assets/other-page."]:not(:is(
  [data-affine-editor-container], editor-host, doc-title, rich-text, affine-link, affine-reference,
  [data-block-id], [contenteditable], input, textarea, affine-database-link-cell,
  affine-data-view-record-detail, [data-testid="database-backlink-cell"], .comment-editor-viewport
) *) {
  display: none !important;
}

/* Settings → Appearance → Links: "Open AFFiNE links" in the desktop app or the browser. */
div:has(> [data-testid="open-in-app-links-trigger"]) {
  display: none !important;
}

/* Sidebar bottom: "Download App" (affine.pro/download). Pinned. Nothing hides it by its text: a
 * workspace or doc can be called "Download App" too. If an upgrade renames the class, --strict
 * fails in CI; a click on it would still open nothing (brand.js blocks the window.open). */
._1m8wqfs0 {
  display: none !important;
}

/* Settings footer: "Love our app? Star us on GitHub and create issues". Pinned; brand.js also
 * empties its text. */
._17spnbp5 {
  display: none !important;
}

/* Top bar of the sign-in, invite and error pages: keep the logo (a link to /), drop "Official
 * website", "Blog", "Contact us", "Download app" and the small-screen menu of the same links. */
div:has(> a[href="/"] + div > a[href="https://affine.pro"]):not(:is(
  [data-affine-editor-container], editor-host, doc-title, rich-text, affine-link, affine-reference,
  [data-block-id], [contenteditable], input, textarea, affine-database-link-cell,
  affine-data-view-record-detail, [data-testid="database-backlink-cell"], .comment-editor-viewport
) *) > :not(a[href="/"]) {
  display: none !important;
}

/* Shared pages: "Empower your sharing with AFFiNE Cloud … Get started for free" under the doc
 * (its own component, outside the doc). Pinned. */
.ognlc70 {
  display: none !important;
}

/* Import dialog: the "… Discord." line under the formats, and the same link after an import.
 * Pinned: only these two lines of the dialog, and only while they hold the Discord link. */
:is(._1ec1s8g4, ._1ec1s8g6):has(> a[href*="affine.pro/redirect/discord" i]) {
  display: none !important;
}

/* Ctrl/Cmd+K: "What's new" (AFFiNE's changelog), "Contact us" and "Open in desktop app", and
 * the Help group heading when nothing else is left in it. By command id ("command:..."; a doc's
 * entry is "doc:<id>"). brand.js stops Enter on them too. */
[cmdk-item]:has(> [data-value="command:affine:help-whats-new"]),
[cmdk-item]:has(> [data-value="command:affine:help-contact-us"]),
[cmdk-item]:has(> [data-value="command:editor:open-in-app"]),
[cmdk-group]:has([data-value="command:affine:help-whats-new"]):not(:has([cmdk-item] > [data-value]:not([data-value="command:affine:help-whats-new"]):not([data-value="command:affine:help-contact-us"]))) {
  display: none !important;
}

/* Admin → About: AFFiNE's box of links ("Star AFFiNE on GitHub", "Report an Issue", "Self-host
 * Document", "Upgrade to Team"). 1. hides each link; here the divider line after each one, and
 * the box's frame. The box and its rows stay shown, so anything else AFFiNE puts in them (text,
 * a control, another link) shows too. CI doesn't check these rules (no pinned class): look at
 * Admin → About after an upgrade. */
div.rounded-md.border > div > a:is([href*="github.com/toeverything" i], [href*="affine.pro" i]) + [role="none"]:empty {
  display: none !important;
}
div.rounded-md.border:has(> div > a[href*="github.com/toeverything" i]) {
  border-color: transparent !important;
}

/* 3. AFFiNE's logo → Magna's. The logo is an inline SVG (no file to replace): its path is
 *    hidden and Magna's mark drawn as the SVG's background, at the same size. */
svg:has(> path[d^="m21.602 18.535"]):not(:is(
  [data-affine-editor-container], editor-host, doc-title, rich-text, affine-link, affine-reference,
  [data-block-id], [contenteditable], input, textarea, affine-database-link-cell,
  affine-data-view-record-detail, [data-testid="database-backlink-cell"], .comment-editor-viewport
) *),
svg:has(> path[d^="M18.6172 16.2657"]) {
  background: url("/magna/magna-mark.svg") center / contain no-repeat;
}
svg:has(> path[d^="m21.602 18.535"]):not(:is(
  [data-affine-editor-container], editor-host, doc-title, rich-text, affine-link, affine-reference,
  [data-block-id], [contenteditable], input, textarea, affine-database-link-cell,
  affine-data-view-record-detail, [data-testid="database-backlink-cell"], .comment-editor-viewport
) *) > *,
svg:has(> path[d^="M18.6172 16.2657"]) > * {
  visibility: hidden;
}

/* The logo at the top left of the sign-in and error pages: the full Magna logo (about 6.4:1).
 * Not inside a workspace: there the error page's top bar is under the app sidebar, which covers
 * AFFiNE's 24px logo but not a 134px one, so it stays Magna's mark at AFFiNE's size. */
body:not(:has([data-testid="app-sidebar"])) div:has(> a[href="/"] + div > a[href="https://affine.pro"]) > a[href="/"] > svg {
  width: 134px;
  height: 21px;
  background-image: url("/magna/magna-logo.svg");
}
[data-theme="dark"] body:not(:has([data-testid="app-sidebar"])) div:has(> a[href="/"] + div > a[href="https://affine.pro"]) > a[href="/"] > svg {
  background-image: url("/magna/magna-logo-dark.svg");
}