/*
 * The reference's styling, loaded by typedoc as `customCss`.
 *
 * Two jobs: put the pages into the console's palette, taken from
 * packages/console-beta/src/theme, so the reference looks like the product it documents; and hide
 * the chrome the theme provides that this site has no use for — the duplicated project name, the
 * breadcrumbs, the visibility filters, the theme selector, the footer.
 *
 * `typedoc-github-style.css` loads *after* this file, so an equal-specificity rule here loses to
 * it. Where that matters the selector is doubled — `:root:root`, `.site-menu.site-menu` — which
 * beats the theme without `!important`; better still is setting the variables the theme itself
 * reads, which several rules below do.
 */

/*
 * The project name identifies the site, so it belongs in the toolbar — and, with only this one
 * package documented, nowhere else. typedoc otherwise prints it three times on the index page.
 */

/*
 * The sidebar's root entry: a second link to index.html, directly under the toolbar's link to it.
 *
 * Scoped away from `#tsd-sidebar-links`, which is also a `.tsd-navigation` holding a bare anchor —
 * the `sidebarLinks` block would otherwise be hidden by this too.
 */
.tsd-navigation:not(#tsd-sidebar-links) > a {
  display: none;
}

/*
 * The index page's own heading. Member pages emit a breadcrumb before their <h1>, so "the heading
 * is the first child" is what distinguishes the index from them — and if typedoc ever gives the
 * index a breadcrumb too, this stops matching and the heading simply comes back.
 */
.tsd-page-title:not(:has(.tsd-breadcrumb)) {
  display: none;
}

/*
 * The breadcrumb above a member's heading: a single entry, linking to the page it is already on and
 * naming what the heading directly beneath it names. Nothing in this reference is nested, so it
 * never carries any navigation. It stays in the DOM, so the rule above still distinguishes the
 * index from a member page.
 */
.tsd-breadcrumb {
  display: none;
}

/*
 * The Settings panel. `visibilityFilters: {}` empties its member-visibility half, leaving only a
 * light/dark selector — and the palette below is the console's, which has no dark counterpart to
 * switch to.
 */
.tsd-navigation.settings {
  display: none;
}

/*
 * The console's palette, so the reference looks like the product it documents.
 *
 * Values come from `packages/console-beta/src/theme/` — `TriplyColors.ts` for the tokens and
 * `themes.ts` for what each one means — rather than from sampling a screenshot, so they stay
 * honest about which semantic role each colour plays.
 *
 * Set on the resolved `--color-*` variables rather than typedoc's `--light-color-*` / `--dark-*`
 * pairs. Those pairs are picked between by media queries and `[data-theme]`, which is exactly the
 * switching we have just removed; assigning the resolved names once makes the mode irrelevant.
 * `:root:root` is deliberate: the theme plugin's stylesheet loads after this file, and doubling
 * the selector outranks its plain `:root` without resorting to `!important`.
 */
:root:root {
  color-scheme: light;
  --color-scheme: light;

  /* surfaces: level1 for what you read, base for the frame around it */
  --color-background: #ffffff; /* neutral0 */
  --color-background-secondary: #f0f4f7; /* mistyForest05 */
  --color-background-navbar: #f0f4f7; /* mistyForest05 */
  --color-background-active: #e4eaed; /* mistyForest10 */
  --color-active-menu-item: #e4eaed; /* mistyForest10 */
  --color-accent: #cbd5d9; /* mistyForest20, the borders token */
  --color-icon-background: #ffffff; /* neutral0 */

  /* text: `default` for prose, `subtle` for the asides typedoc greys out */
  --color-text: #3c5b62; /* mistyForest80 */
  --color-text-aside: #536f75; /* mistyForest70 */
  --color-contrast-text: #ffffff; /* neutral0 */

  /* the brand pink, which the console uses for every actionable thing */
  --color-link: #df0f79; /* pink50 */
  --color-focus-outline: #df0f79; /* pink50 */
}

/*
 * Symbol-kind colours, in three groups rather than typedoc's twenty-three.
 *
 * typedoc gives every kind its own hue, which on a palette built from one teal and one pink means
 * a page full of colours that belong to neither. Grouping them costs nothing: each badge already
 * carries the kind's initial, so hue was never what told a class from an interface.
 */
:root:root {
  /* what you name: classes, interfaces, the type aliases and enums beside them */
  --color-ts-class: #0891b2 /* info70 */;
  --color-ts-interface: #0891b2 /* info70 */;
  --color-ts-type-alias: #0891b2 /* info70 */;
  --color-ts-enum: #0891b2 /* info70 */;
  --color-ts-enum-member: #0891b2 /* info70 */;
  --color-ts-type-parameter: #0891b2 /* info70 */;

  /* what you call */
  --color-ts-function: #df0f79 /* pink50 */;
  --color-ts-method: #df0f79 /* pink50 */;
  --color-ts-constructor: #df0f79 /* pink50 */;
  --color-ts-accessor: #df0f79 /* pink50 */;
  --color-ts-call-signature: #df0f79 /* pink50 */;
  --color-ts-get-signature: #df0f79 /* pink50 */;
  --color-ts-set-signature: #df0f79 /* pink50 */;
  --color-ts-constructor-signature: #df0f79 /* pink50 */;
  --color-ts-index-signature: #df0f79 /* pink50 */;

  /* what you read, and what holds it */
  --color-ts-property: #6a8489 /* mistyForest60 */;
  --color-ts-variable: #6a8489 /* mistyForest60 */;
  --color-ts-parameter: #6a8489 /* mistyForest60 */;
  --color-ts-module: #6a8489 /* mistyForest60 */;
  --color-ts-namespace: #6a8489 /* mistyForest60 */;
  --color-ts-project: #6a8489 /* mistyForest60 */;
  --color-ts-reference: #6a8489 /* mistyForest60 */;
  --color-ts-keyword: #6a8489 /* mistyForest60 */;
}

/*
 * The chrome — toolbar, sidebar, the margins around the page — takes the console's inverted
 * surface, leaving the document itself light. This is the arrangement the console uses, and it is
 * why the palette above is scoped rather than global: the same variables have to work on both.
 *
 * Done with colours only. `.site-menu` sits in a centred grid whose columns are fractions, so
 * there is no honest way to stretch it to the viewport edge; painting the page behind it instead
 * gets the same result and leaves typedoc's responsive rules alone.
 */
body {
  background: #f0f4f7; /* mistyForest05 — surfaces.default.base, what the console puts pages on */
}

.col-content,
.page-menu {
  background: #ffffff; /* neutral0 — surfaces.default.level1 */
}

/* The grid puts a gap between these two, so they are two of the console's panels, not one. */
.col-content,
.page-menu {
  border-radius: 16px;
}

/*
 * Inset both panels from their edges. The theme gives the document a horizontal padding only and
 * the outline just a left one, which was fine while they sat directly on the page and reads as a
 * mistake once each is a panel of its own. The document gets the more generous inset, being the
 * thing you actually read.
 */
.col-content {
  padding: 1.5rem 2rem;
}

.page-menu {
  padding: 1rem;
}

/*
 * A page whose symbol has nothing to outline — a function, a type alias — leaves this panel
 * holding only the hidden settings block, which rendered as an empty white column the height of
 * the page. Hide it, and let the document have the width back.
 */
.page-menu:not(:has(.tsd-page-navigation)) {
  display: none;
}

.page-menu {
  align-self: stretch;
}

/*
 * The toolbar reads as part of the page. The console has no dark top bar — its rail runs the full
 * height and carries the search itself — so inverting this one would invent a band that does not
 * exist there, and would take the search popover with it.
 */
.tsd-page-toolbar {
  --color-background-navbar: #f0f4f7; /* mistyForest05 */
  --color-background-secondary: #f0f4f7; /* mistyForest05 */
}

/*
 * The sidebar itself.
 *
 * `color` is set explicitly, not just the variable: the theme colours `summary > span` but never
 * the `summary`, so the category chevrons inherit from the page and were sitting at 1.6:1 against
 * this background. Setting it here means anything the theme leaves alone inherits a legible value.
 *
 * The kind colours are restated in their light form. The icon sprite is inlined into the document,
 * so custom properties reach it.
 */
.site-menu {
  /*
   * Painted explicitly: the theme leaves `.site-menu` transparent and lets the page show through,
   * so the variable below is not enough on its own. The radius is the console's panel radius —
   * its rail is flush to the viewport edge, which a centred grid of fractional columns cannot be,
   * so this reads as one of the console's panels rather than as a misaligned block.
   */
  background: #25464e; /* mistyForest90 */
  border-radius: 16px; /* only while it is a block in the flow — see the wide layout below */
  color: var(--color-text);
  --color-background: #25464e; /* mistyForest90 — the rail, measured on the console */
  --color-background-secondary: #315058; /* mistyForest85 — its inset controls */
  --color-background-active: #3c5b62; /* mistyForest80 — hover */
  --color-accent: #3c5b62; /* mistyForest80 — a divider that reads on dark */
  --color-text: #ffffff; /* neutral0 — the console's rail labels are pure white */
  --color-text-aside: #b2c1c5; /* mistyForest30 */
  --color-link: #ffffff; /* neutral0 — these are nav labels, not accent links */
  --color-icon-background: #25464e; /* mistyForest90 — the badge sits on the rail */
  --color-icon-text: #ffffff; /* neutral0 — the letter inside the badge */
  --color-document: #6a8489; /* mistyForest60 — the badge outline */
  --color-active-menu-item: #df0f79; /* pink50 — the console marks the current item in brand pink */

  --color-ts-class: #b2ecf5 /* info30 */;
  --color-ts-interface: #b2ecf5 /* info30 */;
  --color-ts-type-alias: #b2ecf5 /* info30 */;
  --color-ts-enum: #b2ecf5 /* info30 */;
  --color-ts-enum-member: #b2ecf5 /* info30 */;
  --color-ts-type-parameter: #b2ecf5 /* info30 */;

  --color-ts-function: #eb7bb5 /* pink30 */;
  --color-ts-method: #eb7bb5 /* pink30 */;
  --color-ts-constructor: #eb7bb5 /* pink30 */;
  --color-ts-accessor: #eb7bb5 /* pink30 */;
  --color-ts-call-signature: #eb7bb5 /* pink30 */;
  --color-ts-get-signature: #eb7bb5 /* pink30 */;
  --color-ts-set-signature: #eb7bb5 /* pink30 */;
  --color-ts-constructor-signature: #eb7bb5 /* pink30 */;
  --color-ts-index-signature: #eb7bb5 /* pink30 */;

  --color-ts-property: #cbd5d9 /* mistyForest20 */;
  --color-ts-variable: #cbd5d9 /* mistyForest20 */;
  --color-ts-parameter: #cbd5d9 /* mistyForest20 */;
  --color-ts-module: #cbd5d9 /* mistyForest20 */;
  --color-ts-namespace: #cbd5d9 /* mistyForest20 */;
  --color-ts-project: #cbd5d9 /* mistyForest20 */;
  --color-ts-reference: #cbd5d9 /* mistyForest20 */;
  --color-ts-keyword: #cbd5d9 /* mistyForest20 */;
}

/*
 * The current page. The theme plugin paints this as a translucent tint of the aside colour, and
 * its stylesheet loads after ours, so matching its specificity would not have been enough.
 */
/*
 * The console's rail items are rounded pills inset from its edges, rather than bars running the
 * full width. Measured there: 8px radius, 6px/8px/6px/12px padding.
 */
.site-menu .tsd-navigation a {
  border-radius: 8px;
}

.site-menu .tsd-navigation a.current {
  background-color: #df0f79; /* pink50 */
  color: #ffffff; /* neutral0 */

  /*
   * The kind badge is drawn from variables that assume the rail behind it, so on the pill it came
   * out teal-filled with a pink outline against pink. Everything about it goes white here: the
   * outline, the letter, and the fill, which takes the pill's own colour.
   */
  --color-icon-background: #df0f79; /* pink50 */
  --color-icon-text: #ffffff; /* neutral0 */
  --color-document: #ffffff; /* neutral0 — the badge outline */
  --color-ts-accessor: #ffffff; /* neutral0 */
  --color-ts-call-signature: #ffffff; /* neutral0 */
  --color-ts-class: #ffffff; /* neutral0 */
  --color-ts-constructor: #ffffff; /* neutral0 */
  --color-ts-constructor-signature: #ffffff; /* neutral0 */
  --color-ts-enum: #ffffff; /* neutral0 */
  --color-ts-enum-member: #ffffff; /* neutral0 */
  --color-ts-function: #ffffff; /* neutral0 */
  --color-ts-get-signature: #ffffff; /* neutral0 */
  --color-ts-index-signature: #ffffff; /* neutral0 */
  --color-ts-interface: #ffffff; /* neutral0 */
  --color-ts-keyword: #ffffff; /* neutral0 */
  --color-ts-method: #ffffff; /* neutral0 */
  --color-ts-module: #ffffff; /* neutral0 */
  --color-ts-namespace: #ffffff; /* neutral0 */
  --color-ts-parameter: #ffffff; /* neutral0 */
  --color-ts-project: #ffffff; /* neutral0 */
  --color-ts-property: #ffffff; /* neutral0 */
  --color-ts-reference: #ffffff; /* neutral0 */
  --color-ts-set-signature: #ffffff; /* neutral0 */
  --color-ts-type-alias: #ffffff; /* neutral0 */
  --color-ts-type-parameter: #ffffff; /* neutral0 */
  --color-ts-variable: #ffffff; /* neutral0 */
}

/*
 * The console's arrangement, once there is room for it: the rail runs the full height against the
 * left edge and the header sits beside it, rather than the rail being a panel below a full-width
 * header.
 *
 * Confined to the width where typedoc lays out three columns. Below that it stacks the rail into
 * the flow and turns the header into a menu button, which works; taking the rail out of the flow
 * there would break it.
 */
@media (min-width: 1200px) {
  /*
   * Doubled, as with `:root:root` above: the theme plugin sets `.site-menu { padding: 1rem 0 }`
   * and its stylesheet loads after ours, so the horizontal padding was being dropped and the
   * items sat against the window edge.
   */
  .site-menu.site-menu {
    padding: 1.5rem 0.75rem;
    /*
     * Without this the padding is added to `height`, making the rail taller than the screen: its
     * last item then sits below the viewport, where scrolling the rail cannot reach it.
     */
    box-sizing: border-box;
    position: fixed;
    inset: 0 auto 0 0;
    width: 17rem;
    height: 100vh;
    /* typedoc caps this to fit between header and footer, which no longer applies. */
    max-height: none;
    margin-top: 0;
    border-radius: 0;
    /* Above the sticky header, so the two do not fight over the corner. */
    z-index: 2;
  }

  /* Make room for the rail, and collapse the grid column it no longer occupies. */
  body {
    padding-left: 17rem;
  }

  .container-main {
    grid-template-columns: 0 minmax(0, 2.5fr) minmax(0, 20rem);
    /* Without this the document and the in-page outline are two panels sharing an edge. */
    column-gap: 1.5rem;
  }

  /*
   * Hiding the outline panel is not enough on its own: its grid track keeps its width and leaves a
   * dead gutter, so the track is collapsed here too. Asking the grid whether it contains an
   * outline is what makes this expressible in CSS at all.
   */
  .container-main:not(:has(.tsd-page-navigation)) {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }
}

/*
 * No footer. The console has none, and ours held only typedoc's own attribution — which the
 * generator's README records instead, where it is a fact about the toolchain rather than a line on
 * every page of the reference.
 */
footer {
  display: none;
}

/*
 * `default → App` is the barrel's `export { default }` — the line that keeps
 * `import App from "@triply/triplydb"` working. It is the one reflection still called `default`,
 * and naming things is the whole reason the barrel exists, so it is hidden rather than left to
 * contradict every other page.
 *
 * It surfaces in three places, and each needs its own rule: the flat index renders it from the
 * markup, the rail builds its tree from an encoded index, and search builds results at runtime.
 * All three are matched on where the link points, which is the one thing they share. The row is
 * hidden rather than the anchor, or each would leave a gap behind.
 *
 * The search result stays in the list for keyboard navigation, so arrowing through results can
 * still land on it. One invisible stop is a better trade than `default` being the first hit for
 * anyone typing that word.
 */
#default.tsd-member-summary,
#default.tsd-member-summary + dd,
.site-menu .tsd-navigation li:has(> a[href$="modules.html#default"]),
li[role="option"]:has(> a[href$="modules.html#default"]) {
  display: none;
}

/*
 * The changelog is reached from the `sidebarLinks` entry at the top of the rail. typedoc also files
 * the document into the navigation tree, where — being untagged — it lands under `defaultCategory`,
 * i.e. among the types. Hiding that row leaves one link to it rather than two, one of them
 * miscategorised. The row, not the anchor, or it would leave a gap.
 */
.site-menu .tsd-navigation li:has(> a[href$="documents/CHANGELOG.html"]) {
  display: none;
}

/*
 * The mark and wordmark at the top of the rail, laid out as the console lays out its own:
 * a 32px mark, an 8px gap, then the wordmark, all sitting straight on the dark surface.
 *
 * No white chip behind them. The console uses a wordmark drawn for dark backgrounds — white text
 * with the pink accent — which is why it needs no ground of its own; the earlier version put the
 * near-black lockup on white because that asset had no inverse.
 *
 * It is an anchor rather than `::before` so that it can be clicked; `custom.js` adds it, since the
 * link target depends on how deep the page sits.
 */
.site-menu .triply-home {
  display: block;
  height: 2rem;
  margin: 0.25rem 0 1.5rem 0.25rem;
  border-radius: 8px;
  background:
    url("t.svg") left center / 2rem 2rem no-repeat,
    url("wordmark.svg") 2.5rem center / auto 1.375rem no-repeat;
}

/*
 * The `sidebarLinks` block, which holds the changelog link.
 *
 * Left as the theme renders it, it sits at the top of the rail at the same size and weight as the
 * "Reference" and "Types" group labels below it, with nothing between — so it reads as a heading
 * over the tree. A divider is what separates it; the type itself is left exactly as the rail sets
 * it, because shrinking and muting it made the row look like a text input instead.
 */
#tsd-sidebar-links {
  border-bottom: 1px solid var(--color-accent);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

/*
 * The `Optional` marker on a parameter. The theme leaves it with no right margin, so the chip
 * touches the parameter name it qualifies.
 */
.tsd-tag {
  margin-right: 0.375rem;
}