@import 'tailwindcss';

/* seemore:imports — the configured fumadocs theme preset and the paths Tailwind must scan
   are inserted here by the seemore Vite plugin. They belong above `preset.css`, and above
   every rule, because `@import` is only valid before the first style rule. */

@import 'fumadocs-ui/css/preset.css';
@import 'fumadocs-ui/components/image-zoom2.css';

@layer base {
  body {
    @apply flex min-h-screen flex-col bg-fd-background text-fd-foreground;
  }
}

@layer components {
  .seemore-shell {
    @apply flex min-h-screen flex-col;
  }

  .seemore-header {
    @apply sticky top-0 z-50 flex items-center gap-2 border-b border-fd-border bg-fd-background/80 px-4 py-3 backdrop-blur md:gap-4;
  }

  .seemore-brand {
    @apply truncate;
  }

  /* One glyph in one slot, whichever trigger is showing: at header scale the panel icon
     reads as "navigation", and which way it will move is the label's job, not a second
     arrow's. Sized and muted to sit with the search and theme buttons rather than shout
     over them. */
  .seemore-sidebar-trigger,
  .seemore-sidebar-collapse {
    @apply shrink-0 rounded-lg p-1.5 text-fd-muted-foreground transition-colors;
  }

  .seemore-sidebar-trigger:hover,
  .seemore-sidebar-collapse:hover {
    @apply bg-fd-accent text-fd-accent-foreground;
  }

  .seemore-sidebar-trigger svg,
  .seemore-sidebar-collapse svg {
    @apply size-5;
  }

  .seemore-sidebar-trigger {
    @apply md:hidden;
  }

  .seemore-sidebar-collapse {
    @apply hidden md:inline-flex;
  }

  .seemore-brand {
    @apply text-base font-semibold;
  }

  .seemore-nav {
    @apply flex items-center gap-3 text-sm text-fd-muted-foreground;
  }

  .seemore-search-trigger {
    @apply ms-auto inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-lg border border-fd-border p-2 text-sm text-fd-muted-foreground sm:px-3 sm:py-1.5;
  }

  /* Icon only where there is no room for the label. */
  .seemore-search-trigger span,
  .seemore-search-trigger kbd {
    @apply hidden sm:inline;
  }

  .seemore-search-trigger kbd {
    @apply rounded border border-fd-border px-1 text-xs;
  }

  .seemore-theme-toggle,
  .seemore-lock {
    @apply shrink-0;
  }

  .seemore-search-error {
    @apply px-4 py-6 text-sm text-fd-muted-foreground;
  }

  .seemore-search-suggestion {
    @apply px-4 pb-2 text-sm text-fd-muted-foreground;
  }

  .seemore-search-suggestion span {
    @apply opacity-60;
  }

  .seemore-search-input {
    @apply w-0 flex-1 bg-transparent text-lg placeholder:text-fd-muted-foreground focus-visible:outline-none;
  }

  .seemore-search-loading {
    @apply flex items-center justify-center gap-2 px-4 py-6 text-sm text-fd-muted-foreground;
  }

  .seemore-search-spinner {
    @apply h-4 w-4 animate-spin rounded-full border-2 border-fd-muted-foreground/30 border-t-fd-muted-foreground;
  }

  .seemore-theme-toggle,
  .seemore-lock {
    @apply cursor-pointer rounded-lg border border-fd-border p-2;
  }

  .seemore-icon-dark {
    @apply hidden dark:block;
  }

  .seemore-icon-light {
    @apply block dark:hidden;
  }

  .seemore-body {
    @apply mx-auto flex w-full max-w-[1400px] flex-1;
  }

  /* The scroll container is the viewport `SidebarViewport` renders, which sizes itself with
     `flex-1 min-h-0` — so this has to be the flex column that gives it a bounded height. */
  .seemore-sidebar {
    @apply flex min-h-0 flex-1 flex-col;
  }

  /* Item labels come from filenames/headings as a bare text node next to the icon — no wrapper
     span we can target — so long unbroken identifiers (`Cartalyst_stripe_migration_plan`) need
     to break, or they overflow the fixed-width rail. `break-words` (overflow-wrap: break-word) is
     not enough: per spec it's excluded from min-content sizing, so the flex item still refuses to
     shrink below the full word width. `break-all` (word-break: break-all) does shrink it, but
     breaks every word regardless of whether it already fits on its own line ("Wallet Withdraw Api
     Chang es"). `wrap-anywhere` (overflow-wrap: anywhere) is the one that does both: it counts
     toward min-content sizing like break-all, but only breaks mid-word when a word doesn't fit on
     its own line, same as break-words otherwise. */
  .seemore-sidebar-link {
    @apply flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-start text-sm wrap-anywhere text-fd-muted-foreground transition-colors;
  }

  .seemore-sidebar-link:hover {
    @apply bg-fd-accent text-fd-accent-foreground;
  }

  .seemore-sidebar-link[data-active='true'] {
    @apply bg-fd-primary/10 font-medium text-fd-primary;
  }

  .seemore-sidebar-folder-label {
    @apply text-fd-foreground;
  }

  /* The rule the nesting reads from: one guide line per level, indented from its parent. */
  .seemore-sidebar-folder-content {
    @apply ms-4 flex flex-col border-s border-fd-border ps-1;
  }

  .seemore-sidebar-folder {
    @apply flex flex-col;
  }

  .seemore-sidebar-separator {
    @apply mt-4 mb-1 px-3 text-xs font-medium text-fd-muted-foreground uppercase;
  }

  .seemore-sidebar-column {
    /* `pt-20` clears the sticky header, which sits above the drawer. Height is definite in both
       modes — the drawer via `inset-y-0`, the rail via `md:h-[calc(100vh-4rem)]` — so the nav
       scrolls inside itself rather than overflowing a column that cannot scroll. */
    @apply fixed inset-y-0 start-0 z-40 flex w-72 -translate-x-full flex-col border-e border-fd-border bg-fd-background px-4 pt-20 pb-4 transition-transform rtl:translate-x-full;
    @apply md:sticky md:top-16 md:z-auto md:h-[calc(100vh-4rem)] md:w-64 md:translate-x-0 md:px-2 md:py-6 rtl:md:translate-x-0;
  }

  .seemore-sidebar-column[data-open='true'] {
    @apply translate-x-0 rtl:translate-x-0;
  }

  /* Collapse is the rail's state alone. Below `md` the same column is the drawer, which has
     its own trigger and its own reason to be open, so the collapsed choice must not reach it. */
  .seemore-sidebar-column[data-collapsed='true'] {
    @apply md:hidden;
  }

  /* Matches the rule above but keyed off the attribute the blocking head script sets, so a
     remembered collapse hides the rail on the very first paint, before React has hydrated and
     taken over via `data-collapsed`. */
  :root[data-sidebar-collapsed='true'] .seemore-sidebar-column {
    @apply md:hidden;
  }

  .seemore-sidebar-backdrop {
    @apply fixed inset-0 z-30 bg-black/40 md:hidden;
  }

  /* A flex column, so the site footer can take `mt-auto`: on a page too short to fill the
     viewport it settles at the bottom instead of floating mid-screen, and on a long one the
     `gap-10` is all that separates it from the content above. */
  .seemore-main {
    @apply mx-auto flex min-w-0 max-w-3xl flex-1 flex-col gap-10 px-4 py-8 md:px-8;
  }

  /* Docs are full of long identifiers — `EmbeddedPaymentsController`,
     `Service::createIntent()` — and each is one unbreakable word. On a phone a single such
     word is wider than the column, and an overflowing heading or inline code drags a
     horizontal scrollbar onto the whole page. Fenced blocks are exempt: they get their own
     scroller from fumadocs, and breaking code mid-line there would be a lie. */
  .seemore-article :is(h1, h2, h3, h4, h5, h6),
  .seemore-article :not(pre) > code {
    @apply break-words;
  }

  /* fumadocs renders a heading as a flex row — the link, then the copy-anchor button — and a
     flex item defaults to `min-width: auto`, so the link floors at the width of its longest
     word and `break-words` above never gets to act. `min-w-0` lets it shrink so the break
     can happen. */
  .seemore-article :is(h1, h2, h3, h4, h5, h6) > * {
    @apply min-w-0;
  }

  .seemore-toc {
    @apply sticky top-16 hidden h-[calc(100vh-4rem)] flex-col w-56 shrink-0 py-8 pe-4 text-sm lg:flex xl:pe-8;
  }

  .seemore-toc-title {
    @apply mb-2 font-medium text-fd-muted-foreground;
  }

  .seemore-toc-integrated {
    @apply mt-6 border-t border-fd-border pt-4 text-sm;
  }

  .seemore-breadcrumb {
    @apply mb-4 flex flex-wrap items-center gap-2 text-sm text-fd-muted-foreground;
  }

  .seemore-page-footer {
    @apply grid grid-cols-2 gap-4 border-t border-fd-border pt-6 text-sm;
  }

  .seemore-next {
    @apply flex items-center justify-end gap-2 text-end;
  }

  .seemore-prev {
    @apply flex items-center gap-2;
  }

  .seemore-edit-link {
    @apply inline-flex items-center gap-2 self-start text-sm text-fd-muted-foreground;
  }

  .seemore-site-footer {
    @apply mt-auto flex flex-wrap gap-4 border-t border-fd-border pt-6 text-sm text-fd-muted-foreground;
  }

  /* The generated index page: pages as cards, folders as titled sections of cards. */

  .seemore-overview-grid {
    @apply mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2;
  }

  .seemore-overview-card {
    @apply flex flex-col gap-1.5 rounded-xl border border-fd-border bg-fd-card p-4 no-underline transition-colors hover:border-fd-primary/60;
  }

  .seemore-overview-card-row {
    @apply flex items-center justify-between gap-3;
  }

  .seemore-overview-card-title {
    @apply font-semibold text-fd-card-foreground;
  }

  .seemore-overview-card-icon {
    @apply size-4 shrink-0 text-fd-muted-foreground transition-all group-hover:translate-x-0.5 group-hover:text-fd-primary;
  }

  .seemore-overview-card-description {
    @apply text-sm text-fd-muted-foreground;
  }

  .seemore-overview-section {
    @apply mt-10;
  }

  .seemore-overview-section-title {
    @apply text-fd-foreground;
  }

  .seemore-overview-section-description {
    @apply mt-1 text-sm text-fd-muted-foreground;
  }

  .seemore-back-to-top {
    @apply fixed bottom-6 end-6 inline-flex items-center gap-1.5 rounded-full border border-fd-border/60 bg-fd-background/60 px-3 py-1.5 text-xs text-fd-muted-foreground shadow-sm backdrop-blur-sm transition-colors hover:border-fd-border hover:bg-fd-background hover:text-fd-foreground;
  }

  .seemore-selection-copy {
    @apply fixed z-50 rounded-md border border-fd-border bg-fd-popover px-2 py-1 text-xs font-medium shadow-lg;
  }

  .seemore-preview {
    @apply pointer-events-none fixed z-50 max-h-80 w-[400px] overflow-hidden rounded-xl border border-fd-border bg-fd-popover p-4 text-sm shadow-lg;
  }

  .seemore-preview-title {
    @apply mb-2 font-medium;
  }

  .seemore-preview-body {
    @apply line-clamp-6 opacity-80;
  }

  .seemore-loading {
    @apply min-h-[50vh];
  }

  .seemore-broken-wikilink {
    @apply cursor-help border-b border-dotted border-fd-muted-foreground text-fd-muted-foreground;
  }

  .seemore-mermaid {
    @apply my-6 flex justify-center;
  }

  .seemore-mermaid-source {
    @apply w-full overflow-x-auto text-xs opacity-60;
  }

  .seemore-mermaid-error {
    @apply my-6 rounded-lg border border-fd-border p-4 text-sm text-fd-muted-foreground;
  }

  .seemore-d2 {
    @apply my-6 flex justify-center;
  }

  .seemore-d2-source {
    @apply w-full overflow-x-auto text-xs opacity-60;
  }

  .seemore-d2-error {
    @apply my-6 rounded-lg border border-fd-border p-4 text-sm text-fd-muted-foreground;
  }

  .seemore-diagram-loading {
    @apply my-6 flex items-center justify-center py-8;
  }

  .seemore-diagram-spinner {
    @apply h-6 w-6 animate-spin rounded-full border-2 border-fd-muted-foreground/30 border-t-fd-muted-foreground;
  }

  /* Inline editing (dev only, `content.edit`). The article is the positioning context for
     the editor layer, which sits over the block being edited. The minimum height and the
     bottom padding leave room below the content to double-click and append, including on
     an empty page, which would otherwise collapse to nothing. */
  .seemore-editable {
    @apply relative min-h-48 pb-12;
  }

  .seemore-editable [data-seemore-pos]:hover {
    @apply cursor-text rounded-sm bg-fd-muted/40;
    box-shadow: 0 0 0 4px var(--color-fd-muted);
  }

  /* Written as a plain `.dark` rule rather than `dark:` on the `@apply` above: Tailwind
     wraps a `dark:` variant reached through `@apply` in `:where(.dark, .dark *)`, which
     carries no specificity of its own and loses the tie to the plain `box-shadow` line
     and the `bg-fd-muted/40` utility above regardless of source order. */
  .dark .seemore-editable [data-seemore-pos]:hover {
    background-color: transparent;
    box-shadow: none;
  }

  .seemore-editable .seemore-editing {
    @apply invisible;
  }

  .seemore-editor-layer {
    @apply pointer-events-none absolute inset-0;
  }

  /* `scroll-mt-20` clears the sticky header: without it, scrolling a tall editor into view
     tucks its first lines underneath the header bar. */
  .seemore-editor {
    @apply pointer-events-auto absolute z-20 scroll-mt-20 rounded-lg border border-fd-primary/40 bg-fd-background shadow-lg;
  }

  .seemore-editor-input {
    @apply block w-full resize-none bg-transparent p-3 font-mono text-sm leading-relaxed text-fd-foreground outline-none;
  }

  .seemore-editor-actions {
    @apply flex items-center justify-end gap-2 border-t border-fd-border px-2.5 py-2;
  }

  .seemore-editor-status {
    @apply me-auto ps-0.5 text-xs text-fd-muted-foreground;
  }

  .seemore-editor-button {
    @apply rounded-md border border-fd-border px-3 py-1 text-xs font-medium text-fd-foreground transition-colors;
  }

  .seemore-editor-button:hover:not(:disabled) {
    @apply bg-fd-accent text-fd-accent-foreground;
  }

  .seemore-editor-button:disabled {
    @apply cursor-not-allowed opacity-50;
  }

  .seemore-editor-button-primary {
    @apply border-transparent bg-fd-primary text-fd-primary-foreground;
  }

  .seemore-editor-button-primary:hover:not(:disabled) {
    @apply bg-fd-primary/90 text-fd-primary-foreground;
  }

  /* Anchored to the viewport, not to the layer: the layer is `absolute inset-0` over the
     article, so a `sticky` child of it renders at the article's top and lands on the
     heading. A conflict is rare and worth reading, so it sits out of the content's way. */
  .seemore-editor-error {
    @apply pointer-events-auto fixed bottom-6 left-1/2 z-50 max-w-[min(32rem,calc(100vw-2rem))] -translate-x-1/2 cursor-pointer rounded-lg border border-fd-border bg-fd-background px-4 py-2.5 text-sm text-fd-foreground shadow-xl;
  }

  .seemore-pdf {
    @apply my-6 block;
  }

  .seemore-pdf embed {
    @apply block h-[70vh] w-full rounded-lg border border-fd-border;
  }

  .seemore-pdf-fallback {
    @apply mt-2 flex items-center gap-2 text-sm text-fd-muted-foreground no-underline transition-colors hover:text-fd-foreground;
  }

  .seemore-pdf-fallback-icon {
    @apply size-4 shrink-0;
  }

  .seemore-pdf-fallback-title {
    @apply font-medium text-fd-foreground;
  }

  /* Most touch browsers can't render `<embed type="application/pdf">` at all, so the box
     above sits blank. Hide it there and promote the download link into the primary UI.
     `.seemore-pdf-unsupported` is the same fallback, applied via JS (see Pdf.tsx) for
     environments — Electron webviews included — that fail the same way despite a fine
     pointer, so both selectors share these rules. */
  @media (pointer: coarse) {
    .seemore-pdf embed {
      @apply hidden;
    }

    .seemore-pdf-fallback {
      @apply mt-0 flex-col items-start gap-1 rounded-lg border border-fd-border bg-fd-card px-4 py-4 hover:border-fd-primary/60;
    }

    .seemore-pdf-fallback-icon {
      @apply size-6;
    }
  }

  .seemore-pdf-unsupported embed {
    @apply hidden;
  }

  .seemore-pdf-unsupported .seemore-pdf-fallback {
    @apply mt-0 flex-col items-start gap-1 rounded-lg border border-fd-border bg-fd-card px-4 py-4 hover:border-fd-primary/60;
  }

  .seemore-pdf-unsupported .seemore-pdf-fallback-icon {
    @apply size-6;
  }

  /* Page actions: the row above the article holding the export dropdown. Right-aligned so
     it reads as chrome, not content, and stays clear of the heading it hangs over. No
     bottom margin: the main column's own `gap-10` already separates it from the article,
     and a margin here would stack on top of that gap. */
  .seemore-page-actions {
    @apply relative flex justify-end;
  }

  .seemore-page-actions-trigger {
    @apply inline-flex items-center gap-1.5 rounded-lg border border-fd-border px-3 py-1.5 text-sm text-fd-muted-foreground transition-colors;
  }

  .seemore-page-actions-trigger:hover,
  .seemore-page-actions-trigger[aria-expanded='true'] {
    @apply bg-fd-accent text-fd-accent-foreground;
  }

  .seemore-page-actions-trigger svg {
    @apply size-4;
  }

  /* Mobile: the row's trigger padding reads as wasted space on a phone, and the column's
     `gap-10` is generous for a viewport this small — tighten both below the `md`
     breakpoint, where the TOC rail is hidden and this row is pure chrome. */
  @media (max-width: 767.98px) {
    .seemore-page-actions-trigger {
      @apply px-2.5 py-1;
    }

    .seemore-main {
      @apply gap-6;
    }
  }

  /* `top-full` is load-bearing: without it the menu keeps its static position, which in this
     flex row is beside the trigger rather than under it, so it opens over its own button. */
  .seemore-page-actions-menu {
    @apply absolute end-0 top-full z-50 mt-1.5 min-w-44 rounded-lg border border-fd-border bg-fd-background p-1 shadow-lg;
  }

  .seemore-page-actions-item {
    @apply flex w-full cursor-pointer items-center gap-2 rounded-md border-none bg-transparent px-2.5 py-1.5 text-sm text-fd-muted-foreground transition-colors;
  }

  .seemore-page-actions-item:hover {
    @apply bg-fd-accent text-fd-accent-foreground;
  }

  .seemore-page-actions-item svg {
    @apply size-4 shrink-0;
  }
}

/* Unlayered, deliberately: fumadocs' `max-h-[460px]` utility lives in Tailwind's utilities
   layer, which beats anything in `@layer components` regardless of specificity. fumadocs
   caps the results list at 460px, but the dialog opens at `top-4` plus a ~3.5rem input row,
   so on a short (landscape phone) viewport the list runs past the fold with its bottom
   unreachable. Bind it to the real viewport height there instead. */
@media (max-height: 600px) {
  [role='dialog'] [class*='max-h-[460px]'] {
    max-height: calc(100dvh - 6rem);
  }
}

/* Unlayered, deliberately, for the same reason as the dialog fix above: fumadocs underlines
   in-content links from its utilities layer, which beats `@layer components` regardless of
   specificity. The PDF fallback reads as a button, not prose — it keeps its icon and title
   flush, with no underline. */
.seemore-pdf-fallback {
  text-decoration-line: none;
}

/* The single-page export reuses this same stylesheet — the exported file inlines it — so
   the classes below only ever appear in the exported document, and cost the live site a
   few hundred unused bytes. They are unlayered so nothing from a theme preset can beat
   them inside a file that has no other seemore rules to lean on. */

/* The exported page's body column: the article alone, at reading width, centred — the
   centring is what keeps slack space symmetric at any viewport width instead of piling
   up on one side. `width: 100%` is load-bearing: the theme's body is a column flex
   container, and auto margins alone would switch the block from stretch to
   shrink-to-fit, letting wide content stretch it past the viewport. */
.seemore-export-main {
  margin-inline: auto;
  max-width: 56rem;
  /* Generous top padding: with no header above it, the title needs more room than the
     live page's column or it reads as glued to the top edge. */
  overflow-x: clip;
  padding: 4rem 2rem 4rem;
  width: 100%;
}


/* Zoom affordance in the export, where the site's zoom runtime is the fallback overlay. */
.seemore-export-main img {
  cursor: zoom-in;
}

.seemore-export-main a img {
  cursor: pointer;
}

/* The "On this page" block generated for the export: the live site's TOC transplanted to
   a page with no layout columns.

   Two shapes, one markup. On narrow screens it sits in flow under the title as a
   collapsible — fumadocs' own inline-TOC pattern. From 1280px up, where the viewport has
   room, it becomes a floating rail on the right edge and the runtime opens it.

   Styled after fumadocs' rail — small muted label, text-sm links, the indicator line per
   nesting level — using the theme's real tokens. The rail itself is a React component
   that draws its connector as SVG from live layout measurements; a static file gets the
   same look from plain borders instead. */
.seemore-export-toc {
  font-size: 0.875rem;
  margin-block: 1.5rem;
}

.seemore-export-toc summary {
  color: var(--color-fd-muted-foreground, #8b8b8b);
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  margin: 0 0 0.5rem;
}

.seemore-export-toc summary::-webkit-details-marker {
  display: none;
}

.seemore-export-toc summary::after {
  border-block-end: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  content: '';
  display: inline-block;
  height: 0.3rem;
  margin-inline-start: 0.5rem;
  transform: rotate(-45deg);
  transition: transform 0.15s;
  vertical-align: middle;
  width: 0.3rem;
}

.seemore-export-toc details[open] > summary::after {
  transform: rotate(45deg);
}

.seemore-export-toc ul {
  border-inline-start: 1px solid var(--color-fd-border, #e5e7eb);
  list-style: none;
  margin: 0;
  padding-inline-start: 1rem;
}

.seemore-export-toc li {
  margin-block: 0.375rem;
}

.seemore-export-toc a {
  color: var(--color-fd-muted-foreground, #8b8b8b);
  display: block;
  text-decoration: none;
}

.seemore-export-toc a:hover,
.seemore-export-toc a[data-active='true'] {
  color: var(--color-fd-foreground, #111827);
}

/* Tablet width, below the rail breakpoint: the collapsible TOC still sits in flow, but the
   base 1rem side padding reads as too tight once the column is this wide. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .seemore-export-main {
    padding: 4rem 3rem 4rem;
  }
}

/* From 1024px up — the live page's own `lg` breakpoint for showing its TOC rail — there is
   enough room for the rail if the reading column gives up its centring and narrows to make
   space; below that the rail would ride over the text at any column width, so the
   collapsible stays in flow there.

   Two tiers because a centred 56rem column plus the rail's 14rem + 2rem gap needs
   1152px+ to coexist without narrowing: from 1024px the column is pinned to the left
   with a right-hand reservation sized exactly for the rail, gap and outer margin; once
   there is enough width (1440px) for the column to sit at its full 56rem *and* stay
   centred with that same 2rem gap to the rail, it switches back to centred — matching
   the live page's `md:px-8` column padding either way. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .seemore-export-main {
    margin-inline: 0;
    max-width: none;
    padding-inline-end: 18rem;
    padding-inline-start: 6rem;
  }

  .seemore-export-toc {
    inset-inline-end: 2rem;
    margin-block: 0;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    position: fixed;
    top: 5rem;
    width: 14rem;
    z-index: 40;
  }

  .seemore-export-toc summary {
    cursor: default;
    margin-bottom: 0.75rem;
  }

  .seemore-export-toc summary::after {
    display: none;
  }
}

@media (min-width: 1440px) {
  .seemore-export-main {
    margin-inline: auto;
    max-width: 56rem;
    padding-inline: 1rem;
  }

  .seemore-export-toc {
    inset-inline-end: calc((100vw - 56rem) / 2 - 14rem - 2rem);
    margin-block: 0;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    position: fixed;
    top: 5rem;
    width: 14rem;
    z-index: 40;
  }

  /* The rail is always a rail: no disclosure chevron in it. */
  .seemore-export-toc summary {
    cursor: default;
    margin-bottom: 0.75rem;
  }

  .seemore-export-toc summary::after {
    display: none;
  }
}

/* The export's only chrome: a floating theme toggle, since the header is gone. */
.seemore-export-theme-toggle {
  align-items: center;
  background: var(--color-fd-background, #fff);
  border: 1px solid var(--color-fd-border, #e5e7eb);
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  padding: 0.5rem;
  position: fixed;
  top: 1rem;
  z-index: 50;
  inset-inline-end: 1rem;
}

.seemore-export-theme-toggle svg {
  height: 1rem;
  width: 1rem;
}

/* Click-to-zoom overlay for the exported file, where the site's zoom runtime is absent. */
.seemore-export-overlay {
  align-items: center;
  background: rgb(0 0 0 / 80%);
  cursor: zoom-out;
  display: grid;
  inset: 0;
  justify-items: center;
  position: fixed;
  z-index: 100;
}

.seemore-export-overlay img {
  max-height: 92vh;
  max-width: 92vw;
  object-fit: contain;
}

/* Printing. Every pixel of chrome goes, the article gets the whole page, and nothing
   reader-consumed is ever split across a page break. */
@media print {
  .seemore-header,
  .seemore-sidebar,
  .seemore-toc,
  .seemore-export-toc,
  .seemore-breadcrumb,
  .seemore-edit-link,
  .seemore-page-footer,
  .seemore-site-footer,
  .seemore-back-to-top,
  .seemore-page-actions,
  .seemore-selection-copy,
  .seemore-preview,
  .seemore-export-theme-toggle,
  .seemore-export-overlay {
    display: none !important;
  }

  .seemore-body,
  .seemore-main,
  .seemore-article {
    display: block;
    margin: 0;
    max-width: none;
    padding: 0;
  }

  body {
    background: #fff;
  }

  pre,
  .seemore-mermaid,
  .seemore-d2,
  .seemore-pdf,
  img,
  table,
  blockquote {
    break-inside: avoid;
  }
}

/* seemore:user-css — the stylesheet named by `css` in seemore.config.ts is inlined here, at
   the very end, so that it wins against everything above it. */