/* Wiki — the knowledge layer's read and edit surface.

   Deliberately thin. The wiki is a feature inside Sabha, not a second product,
   so it borrows the shell wholesale: the same content gutter the message list
   and the forum use, .btn for actions, .callout for warnings, and the app's own
   sidebar and nav. What is left here is what genuinely has no equivalent — the
   chips, the generated listings, and prose styling for renderer output, which is
   plain HTML rather than ActionText and so inherits none of actiontext.css.

   Semantic tokens only. Every value below resolves through colors.css, so dark
   mode needs no rules of its own. */

/* --- the shell ------------------------------------------------------------ */

/* The wiki runs the app's shell exactly as chat runs it — rooms rail docked,
   same nav bar, same content column — so a reader moving between a room and a
   page finds the furniture where they left it.

   One thing differs, and only because the content does. body.sidebar anchors
   #main-content to the bottom so a message log grows upward into it. A document
   is read from the top.

   The scrollbar gutter is reserved whether or not a page scrolls, so a short
   surface and a long one centre their reading in the same width — without it a
   page that scrolls sits a few pixels left of one that does not, and moving
   between them nudges the column. */
body.wiki #main-content {
  justify-content: start;
  scrollbar-gutter: stable;
}

/* One measure for the whole surface: the reading column the wiki was always
   set at, plus the app's content gutter on each side.

   Declared on the body rather than on the column, because the bar above has to
   know it too. The trail, the title and the bar's own controls all line up only
   while they are measured from the same number, and the session that produced
   this file was mostly the consequence of their being measured from two. */
body.wiki {
  --wiki-measure: calc(72ch + 2 * (var(--inline-space) + 1vw));

  /* The wiki's own type, declared once beside the measure and for the same
     reason: several surfaces have to agree about it, and the only way they can
     is to read it from one place.

     Two of these sit off the app's six-step scale on purpose. A surface here
     opens with its name, and the app's x-large heading is a shade small to
     carry a document; the deck under it wants to be larger than the body rather
     than the same size muted. Named rather than typed out, so the next wiki
     surface inherits them instead of inventing a third size.

     Weights are a two-level rule: headings take the bold, everything that is
     apparatus — row titles, labels, controls — takes the semibold. Leadings are
     one per job, not one per block. */
  --wiki-title-size: 2.125rem;
  --wiki-deck-size: 1.0625rem;
  --wiki-eyebrow-size: var(--font-size-x-small);
  --wiki-eyebrow-tracking: 0.06em;
  --wiki-prose-h2-size: 1.15rem;

  --wiki-heading-weight: 700;
  --wiki-ui-weight: 600;

  --wiki-leading-title: 1.2;
  --wiki-leading-heading: 1.25;
  --wiki-leading-deck: 1.45;
  --wiki-leading-ui: 1.4;
  --wiki-leading-prose: 1.6;
}

/* The document column, centred in what is left of the window after the rail.

   Centred rather than flush left because on a wide monitor flush left is a
   column of text against the left edge and a third of the screen of nothing
   beside it. It is still the same measure — nothing about the reading width
   changes, only where the slack goes.

   It was a .panel — a centred *card* — and that was a different thing and
   genuinely broken: .panel caps itself against the viewport while living in a
   column that is the viewport less the rail, so at narrow widths the rail
   clipped its right edge and sliced every listing row mid-border. This is
   capped against its container, which is the fix that outlived the card.

   The top clears the fixed nav. The chat stream pins to the bottom and never
   collides with it; a document reads top-down and has to start below it. */
.wiki-document {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--wiki-measure);
  padding: calc(var(--navbar-height) + 1rem) calc(var(--inline-space) + 1vw)
    2.5rem;
}

/* And the bar centres with it.

   #nav is fixed and spans the window less the rail, so left to itself its
   controls stay at the window's edge while the document moves to the middle —
   which is exactly the drift that made the trail read as belonging to neither
   the bar nor the page.

   A row inside the bar rather than padding on the bar itself. #nav is
   position: fixed, so a percentage in its own padding resolves against the
   viewport and not against the bar — which put the back arrow 250px adrift of
   the document on the first attempt. An ordinary in-flow child resolves against
   its parent's content box, which is the number this actually needs, and it
   needs no arithmetic about the rail's width or the scrollbar's.

   Narrow windows fall out of it: the measure is wider than the bar, so the row
   is simply full width and the auto margins have nothing to distribute. */
.wiki-nav {
  align-items: center;
  column-gap: var(--inline-space-half);
  display: flex;
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--wiki-measure);
  padding-inline: calc(var(--inline-space) + 1vw);

  /* #nav sits over the document and passes clicks through everywhere it has no
     control, which is how you can still reach the top of a page under it. The
     row spans the whole bar, so it has to pass them through too and hand them
     back only where something actually is. */
  pointer-events: none;

  & > * {
    pointer-events: auto;
  }
}

/* The gutter belongs to the row now, so the bar gives up its own. Only the
   inline padding — the block padding and the ☰'s reserved room stay where they
   are, because neither has anything to do with where the column sits. */
body.wiki #nav {
  padding-inline: 0;
}

/* One seam between the index and the document, not two.

   The bar and the content column each draw a hairline on their inline start
   wherever the sidebar is docked, which is right when they sit against the
   sidebar itself. With the index between them they sit against its own trailing
   border instead, and a second hairline a pixel to the right of the first reads
   as a smudge rather than as an edge — and it takes a pixel off the bar's
   content box, which is what the toolbar inside it measures itself against. */
body.wiki:has(#list-rail) :is(#nav, #main-content) {
  border-inline-start: 0;
}

/* --- the page column ------------------------------------------------------ */

/* The document and its own column, side by side above 1536 and the document
   alone below it.

   Below the dock width none of this fires: .wiki-document caps to the measure
   and centres as it does on every wiki surface, the column is display:none, and
   the backlinks sit at the foot of the document. Above 1536 the document gives
   up its measure cap to the reading wrapper inside it, the row stands the
   reading column and the page column side by side, and the backlinks move into
   the column.

   1536 is a chosen dock, not a fit. The two 272 rails and the ~789 measure are
   the wall: keeping the measure whole beside a column pins the dock near 1700,
   above a common monitor, whatever the column's width. So above the fit the
   measure gives instead — the reading wrapper caps at the measure but its flex
   box is free to fall short of it, so from 1536 to ~1676 the reading is a little
   narrower than 789 (about 62ch at 1536) to let the column in, and returns to
   the full measure both above 1676 and, folded, below 1536. The trade is the
   column on a 1536 laptop against a slightly tighter line while it stands.

   The column is 240 rather than the 272 index on purpose: the index is the
   surface's spine and this is a reference beside one page. */
body.wiki {
  --wiki-column-width: 240px;
}

.wiki-page__column {
  display: none;
}

@media (min-width: 1536px) {
  /* The measure moves inside, so the document is free to span the content area
     and hold the column beside its reading. */
  .wiki-document--with-column {
    max-inline-size: none;
  }

  .wiki-document--with-column .wiki-page__doc {
    align-items: flex-start;
    display: flex;
  }

  /* The reading column keeps the measure and centres it in whatever the row
     leaves after the page column, so the prose sits where it always has and the
     slack that used to open on its right becomes the column instead. */
  .wiki-document--with-column .wiki-page__reading {
    flex: 1 1 auto;
    margin-inline: auto;
    max-inline-size: var(--wiki-measure);
    min-inline-size: 0;
  }

  .wiki-document--with-column .wiki-page__column {
    display: flex;
    flex: 0 0 var(--wiki-column-width);
    flex-direction: column;
  }

  /* In the column now, so the surface's own folded copy goes. Everything a
     column stands up has a home in the document when folded — a page's
     backlinks at its foot, a namespace's note and roll-up under its listing —
     and this hides that home while the column carries it, so the two are never
     shown at once. */
  .wiki-document--with-column .wiki-col-foot {
    display: none;
  }

  /* Above 1536 every wiki surface reserves the column's slot, so the reading
     column sits in the same place on all of them — a page, a namespace, the
     overview, a listing — and nothing jumps sideways when you move between them.

     Two halves to that. The bar widens to the content area on every wiki surface
     (not only where a column stands), so its address lands flush left over a
     reading column that has shifted left, the same on all of them. */
  body.wiki .wiki-nav {
    margin-inline: 0;
    max-inline-size: none;
  }

  /* And a surface without a column reserves the slot anyway: its document fills
     the width less the column and caps at the measure, exactly as a page's
     reading wrapper does, so the two land at the same left edge and the same
     width — the space where a column would be is simply left empty. Without this
     the overview and the listings centre in the full width and jump when you
     open a page. */
  body.wiki:not(.wiki-has-column) #main-content {
    padding-inline-end: var(--wiki-column-width);
  }
}

/* An anchored heading has to clear the fixed bar when the outline jumps to it,
   or it lands underneath it. Harmless where no outline links to it. */
.wiki-prose :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-block-start: calc(var(--navbar-height) + var(--block-space));
}

/* The column's own furniture: a stack of small labelled blocks, each a fact you
   check about the page rather than part of what you read, set quiet against the
   reading beside them. */
.wiki-page__column {
  gap: var(--block-space);
  padding-inline-start: var(--inline-space-double);
}

.wiki-page__col-block {
  display: flex;
  flex-direction: column;
  gap: var(--block-space-half);
}

/* The label over each block, in the shared uppercased register above, so the
   two standing columns read as one system. */
.wiki-page__col-label {
  color: var(--color-text-subtle);
}

.wiki-page__col-line {
  color: var(--color-text-lighter);
  font-size: var(--font-size-small);
  line-height: var(--wiki-leading-ui);
}

.wiki-page__col-strong {
  color: var(--color-text);
  font-weight: var(--wiki-ui-weight);
}

.wiki-page__col-sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-x-small);
  line-height: var(--wiki-leading-ui);

  & a {
    color: var(--color-text-lighter);
  }
}

.wiki-page__col-bot {
  --icon-size: 14px;

  color: var(--color-text-muted);
}

/* On this page. The list is filled by the outline controller from the rendered
   headings; h3s sit one step in from the h2s, so the shape of the page reads in
   the outline the way it does in the document. */
.wiki-page__outline {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wiki-page__outline-item--h3 {
  padding-inline-start: var(--inline-space);
}

.wiki-page__outline-link {
  color: var(--color-text-lighter);
  display: block;
  font-size: var(--font-size-small);
  line-height: var(--wiki-leading-ui);
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      color: var(--color-text);
      text-decoration: underline;
    }
  }
}

.wiki-page__col-links {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wiki-page__col-link {
  color: var(--color-link);
  font-size: var(--font-size-small);
  text-decoration: none;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      text-decoration: underline;
    }
  }
}

/* The version count, closing the column as a quiet link out to the history. */
.wiki-page__col-history {
  --icon-size: 14px;

  align-items: center;
  color: var(--color-text-muted);
  display: inline-flex;
  font-size: var(--font-size-x-small);
  gap: var(--inline-space-half);
  text-decoration: none;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      color: var(--color-text);
      text-decoration: underline;
    }
  }
}

/* --- a namespace's column ------------------------------------------------- */

/* A namespace has no prose, author or backlinks, so its column carries two
   different facts: what the namespace is, and how its pages stand with the
   agent. The block frame and labels are the page column's; only these two are
   its own. */

/* The namespace root, set as code inside the "This namespace" line — it is an
   address, and reads as one. */
.wiki-namespace__root {
  background-color: var(--color-bg-sunk);
  border-radius: 0.3em;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
}

/* How many of the namespace's pages the agent can answer from. A lit dot and a
   line, the same dot the page's in-memory strip uses, so "on" reads the same
   across the surface. */
.wiki-namespace__agent-state {
  align-items: baseline;
  color: var(--color-text-lighter);
  display: flex;
  font-size: var(--font-size-small);
  gap: var(--inline-space-half);
  line-height: var(--wiki-leading-ui);

  /* The dot sits on the text baseline rather than the line's top. */
  & .wiki-agent-strip__dot {
    align-self: center;
  }
}

.wiki-namespace__agent-held {
  color: var(--color-text-muted);
  font-size: var(--font-size-x-small);
  line-height: var(--wiki-leading-ui);
  margin-block-start: 0.35em;

  & a {
    color: var(--color-link);
    text-decoration: none;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

/* The roll-up's folded home: a line under the listing, set apart from it the way
   the listing's own note is. Shown only while the column is folded — wiki.css
   hides every .wiki-col-foot once the column docks. */
.wiki-namespace__agent-foot {
  border-block-start: 1px solid var(--color-border);
  margin-block-start: var(--block-space);
  padding-block-start: var(--block-space);
}

/* --- the standing index --------------------------------------------------- */

/* Two things stand beside the document, and the wiki only owns one of them.

     1280 and up   sidebar docked, index docked, document the rest
     1024 to 1279  sidebar in its icon rail, index docked
     below 1024    index over the document, opened from Browse in the bar

   The sidebar is the app's, unchanged: it docks at 1280 and takes its 60px icon
   rail from 834 to 1279, the same everywhere. Three columns fit well above 1280
   — the sidebar and the index together are ~536px, which leaves a full reading
   measure and slack to spare even at 1280 — so there is nothing for the wiki to
   fold. It once folded the sidebar to the rail up to 1440, which was a column of
   slack too early and cost a reader the rooms on a common laptop width; the
   sidebar now behaves here exactly as it does in chat.

   So all the wiki manages is its own index column, below.

   Below the split width the index stops being a column and becomes an overlay
   over the document, opened from Browse in the bar.

   The DM rail's answer was to promote its list to the whole screen, and that is
   right for an inbox — the list *is* the surface. It is wrong here: every browse
   would cost the reader the page they were on, which is the one thing this
   concept exists to fix. So the index keeps its width and comes over the top,
   on the sidebar drawer's own machinery — the same toggle-class controller,
   the same scrim, the same focus trap and Escape.

   Off-canvas rather than hidden, so opening it slides rather than appears, and
   so a reader who opens it mid-scroll keeps their place in the tree. */
@media (max-width: 1023.9px) {
  body.wiki #list-rail {
    background-color: var(--color-bg);
    border-inline-end: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    inline-size: min(320px, 85vw);
    inset-block: 0;
    /* Beside the rooms rail, not over it. Below 834px the sidebar is itself an
       off-canvas drawer and this resolves to zero, which is the right answer
       there too. */
    inset-inline: var(--sidebar-width) auto;
    min-block-size: 0;
    /* The scrolling happens one level in, so this can let Browse hang outside
       the panel — a control clipped to the thing it opens could never be
       pressed while that thing was shut. */
    overflow: visible;
    padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
    position: fixed;
    /* Its own width *and* the column it is offset by, so shut means off the
       screen rather than resting on top of the rooms rail. */
    transform: translate(calc((100% + var(--sidebar-width)) * -1));
    /* Shut, the panel is not only off-screen but out of the tab order and the
       a11y tree: visibility:hidden makes its search field, tree links and close
       button unreachable by keyboard and screen reader, which a bare transform
       leaves fully focusable behind the document. The change waits one
       transform's length so a closing panel still slides out before it goes
       dark; opening restores it at once. Browse overrides this back below — it
       is the one control that must work while the panel is shut. */
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1), visibility 0s 300ms;
    visibility: hidden;
    z-index: 4;

    &.open {
      transform: translate(0);
      transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1), visibility 0s;
      visibility: visible;
    }

    /* Kept reachable while the panel is shut: it is how the panel is opened, and
       it floats outside the panel's box, so the hidden panel must not take it
       down too. (It hands over to the in-panel close button once open, which is
       display-toggled, so this never fights that.) */
    .wiki-index-pane__browse {
      visibility: visible;
    }
  }

  /* The overlay covers the document, so dim it and lock the page scroll — the
     drawer's treatment, for the same reason the drawer has it. */
  body.wiki:has(#list-rail.open) {
    overflow: hidden;

    &::after {
      background-color: var(--color-scrim);
      content: "";
      inset: 0;
      position: fixed;
      z-index: 3;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.wiki #list-rail {
    transition: none;
  }
}

/* Browse only exists where the index is not already beside the document.

   Pinned to the index's own trailing edge rather than to a coordinate in the
   bar, so it needs no arithmetic about the panel's width and stays put whether
   the panel is off-canvas or open. From 834 to 1023 the rooms rail is a docked
   icon column, so the toggle clears its width; below 834 the rail is a drawer
   and the toggle stands where the rooms hamburger used to (see below).

   Its own icon size: the index pane sizes its glyphs at 14px, which is right for
   a tree row and far too small for a bar toggle. This is the same 18px the app's
   own hamburger uses, so the one wiki menu reads at the weight of a menu. */
.wiki-index-pane__browse {
  --icon-size: 18px;

  display: none;
}

@media (max-width: 1023.9px) {
  body.wiki .wiki-index-pane__browse {
    display: inline-flex;
    inset-block-start: calc((var(--navbar-height) - var(--btn-size)) / 2);
    inset-inline-start: 100%;
    /* The panel is offset by the rooms rail and translated back out by both, so
       clearing the docked icon rail is this button's own job from 834 up. Below
       834 the rail is a drawer and this margin is overridden to sit flush. */
    margin-inline-start: calc(
      var(--sidebar-width) +
        var(--wiki-browse-clearance, max(var(--inline-space), 1vw))
    );
    position: absolute;
    z-index: 5;
  }

  /* Open, it would ride out with the panel and land on top of the address in
     the bar. The way out is the X in the panel's own corner, which is how the
     sidebar drawer hands over between its two controls. */
  body.wiki #list-rail.open .wiki-index-pane__browse {
    display: none;
  }

  body.wiki #list-rail.open .wiki-index-pane__close {
    display: inline-flex;
  }
}

.wiki-index-pane__close {
  display: none;
  margin-inline-start: auto;
}

/* On the wiki the index is the sidebar, so a wiki page gets one menu, not two.
   The wiki toggle exists below 1024, wherever the index is a drawer — and across
   that whole band the rooms hamburger stands down, so the two ☰ never share the
   bar. Chat is a tap up the bar's back control, so nothing reachable is lost.
   (Above 1024 both columns dock and there is no toggle at all.) */
@media (max-width: 1023.9px) {
  body.wiki #sidebar-toggle {
    display: none;
  }
}

/* Below the drawer breakpoint the rooms rail is off-canvas too, so the toggle
   sits flush at the bar's start edge where the hamburger used to. From 834 up it
   keeps the browse block's margin, clearing the docked icon rail. */
@media (max-width: 833.9px) {
  body.wiki .wiki-index-pane__browse {
    margin-inline-start: max(var(--inline-space), 1vw);
  }
}

/* And the bar makes room for whatever is floating over its start edge.

   The wiki's bar gives up #nav's own inline padding so its row can carry the
   document's gutter and line up with the column below — which also gives up the
   room #nav reserves for the rooms hamburger. The single wiki toggle floats over
   that start edge, so the row reserves one button's worth for it. Only below the
   split width: above it the index is a docked column, the toggle does not exist,
   and the row goes back to agreeing with the document. */
@media (max-width: 1023.9px) {
  body.wiki .wiki-nav {
    padding-inline-start: calc(
      var(--wiki-browse-clearance, max(var(--inline-space), 1vw)) +
        var(--btn-size, 2.65em) + 12px
    );
  }
}

/* The wiki's own column, in the slot the DM conversation list already docks
   into: between the sidebar and the document, from 1024px up, absent below it.

   Absent rather than redrawn small. Under 1024px the DM rail hides and its
   inbox becomes the whole screen, and the wiki does the same thing with the
   surface it already had — the map is the browsing screen there, which is what
   it has always been. A third column squeezed into a phone would be the
   navigation problem, not the fix for it.

   Three bands and only the middle one scrolls: the name and the search field
   stay put at the top, the tally stays at the bottom, and the corpus moves
   between them. #list-rail is already a flex column that hides its overflow,
   so this is what decides which of its children gets the leftover height. */
#list-rail:has(.wiki-index-pane__scroll) {
  --icon-size: 14px;
}

.wiki-index-pane__header {
  align-items: center;
  border-block-end: 1px solid var(--color-border);
  display: flex;
  min-block-size: var(--navbar-height);
  padding-inline: var(--inline-space);
}

.wiki-index-pane__title {
  /* 15px from the design — a step above the app scale's small (13.6). Kept as a
     literal on purpose: the wiki's own wordmark sits between the scale's small
     and medium, and the design's 15 reads right where either scale step does
     not. */
  font-size: 0.9375rem;
  font-weight: var(--wiki-heading-weight);
  margin: 0;

  & a {
    color: var(--color-text);
    text-decoration: none;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

/* Groups the search field and the tree under one controller without taking a
   box of its own: the two stay direct flex children of the rail, the field
   fixed at the top and the tree scrolling below, exactly as before. */
.wiki-index-pane__filter {
  display: contents;
}

/* The wiki's only search field now. Sized for a 272px column: the actor input
   keeps the base .input metrics — 16px text and its inner input's own vertical
   padding on top — which stacks into a pill far too tall for a rail. */
.wiki-index-pane__search {
  padding: var(--block-space-half) var(--inline-space);

  .wiki-search__form {
    margin-block-end: 0;
  }

  .input--actor {
    --input-padding: 0.4em 0.6em;

    font-size: var(--font-size-x-small);
  }

  .input--actor .input {
    font-size: var(--font-size-x-small);
    padding-block: 0;
  }
}

.wiki-index-pane__scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding-block-end: var(--block-space);
}

/* --- the three destinations ----------------------------------------------- */

.wiki-index-pane__destinations {
  border-block-end: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--block-space-half) var(--inline-space-half) var(--block-space);
}

.wiki-index-pane__destination {
  align-items: center;
  border-radius: 0.4em;
  color: var(--color-text-lighter);
  display: flex;
  font-size: var(--font-size-small);
  gap: var(--inline-space-half);
  padding: 0.4em var(--inline-space-half);
  text-decoration: none;

  & .icon {
    color: var(--color-text-subtle);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--color-bg-hover);
    }
  }
}

/* The one you are on takes the full ink back, so it reads as the place rather
   than one of the three quiet destinations above the tree. */
.wiki-index-pane__destination--current {
  background-color: var(--color-bg-sunk);
  color: var(--color-text);
  font-weight: var(--wiki-ui-weight);
}

.wiki-index-pane__destination-label {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Always drawn, zero included — a count that shows up only when there is trouble
   teaches people to stop looking at that corner. In the alert ink and bold,
   because this is the backlog a reader is meant to act on, not a neutral tag:
   the design draws it as a number, not a grey pill. */
.wiki-index-pane__count {
  color: var(--color-alert);
  font-size: var(--font-size-x-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--wiki-heading-weight);
}

/* --- the tree ------------------------------------------------------------- */

.wiki-index-pane__tree {
  padding: var(--block-space) var(--inline-space-half) 0;
}

.wiki-index-pane__group-summary {
  align-items: center;
  border-radius: 0.4em;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-small);
  font-weight: var(--wiki-ui-weight);
  gap: var(--inline-space-half);
  list-style: none;
  padding: 0.35em var(--inline-space-half);

  &::-webkit-details-marker {
    display: none;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--color-bg-hover);
      color: var(--color-text);
    }
  }
}

/* The disclosure points along the row when shut and down when open, so the
   glyph says which way the group is going rather than only that it can move. */
.wiki-index-pane__disclosure {
  --icon-size: 10px;

  transition: transform 120ms ease;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  [open] > summary > & {
    transform: rotate(90deg);
  }
}

.wiki-index-pane__group-label {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wiki-index-pane__group-count {
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.wiki-index-pane__pages {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--block-space-half);
}

.wiki-index-pane__page {
  align-items: center;
  border-radius: 0.4em;
  color: var(--color-text-muted);
  display: flex;
  font-size: var(--font-size-small);
  gap: var(--inline-space-half);
  padding: 0.3em var(--inline-space-half) 0.3em calc(var(--inline-space-half) + 18px);
  text-decoration: none;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--color-bg-hover);
    }
  }
}

/* Where the reader is, marked on the column that does not move. The bar above
   says the same thing in words; this says it in the tree, which is the only
   place it also says what the page is next to.

   The tinted ground the sidebar's current room and the DM rail's open
   conversation both use, and the ink left alone. Three rails on one screen
   marking "you are here" three different ways would be three things to learn
   for one fact. */
.wiki-index-pane__page--current {
  background-color: var(--color-selected);
  color: var(--color-text);
  font-weight: var(--wiki-ui-weight);

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--color-selected);
    }
  }
}

.wiki-index-pane__page--unwritten {
  color: var(--color-text-muted);

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: transparent;
    }
  }
}

.wiki-index-pane__page-title {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* What the agent is not being served. Drawn at the end of the row rather than
   in front of the title, so a column of them reads as a column of pages with a
   mark on some of them and not as a column of marks. */
.wiki-index-pane__held {
  --icon-size: 13px;

  color: var(--color-alert);
  flex-shrink: 0;
}

.wiki-index-pane__unwritten {
  color: var(--color-text-lighter);
  flex-shrink: 0;
  font-size: var(--font-size-x-small);
}

.wiki-index-pane__empty {
  color: var(--color-text-lighter);
  font-size: var(--font-size-x-small);
  padding: 0.3em var(--inline-space-half) 0.3em calc(var(--inline-space-half) + 18px);
}

/* What narrowing shows when no title matches — a quiet line pointing at the full
   search, which reads the body the tree filter cannot. */
.wiki-index-pane__no-matches {
  color: var(--color-text-muted);
  font-size: var(--font-size-x-small);
  line-height: 1.45;
  padding: var(--block-space-half) var(--inline-space);
}

/* --- the index, filtered to the backlog ----------------------------------- */

/* What the column shows while the queue is open: the pages the agent cannot
   read, under the namespace each is in.

   Flat and open, where the tree is grouped and shut. A corpus is large and a
   reader browsing it wants one page out of it; a backlog is small by the time
   anybody is working it, and every row here is a row they came to act on. */
.wiki-index-pane__triage {
  padding-block: var(--block-space-half);
}

.wiki-index-pane__triage-title {
  color: var(--color-text-muted);
  padding: 0 var(--inline-space) var(--block-space-half);
}

/* The namespace a group of them sits under. A label, not a disclosure: there is
   nothing to open, and a triangle beside a heading that never moves is a
   control that lies about itself. */
.wiki-index-pane__triage-group {
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--wiki-ui-weight);
  padding: var(--block-space-half) var(--inline-space) 0.2em;
}

/* --- the tally ------------------------------------------------------------ */

.wiki-index-pane__footer {
  border-block-start: 1px solid var(--color-border);
  padding: var(--block-space-half) var(--inline-space);
}

.wiki-index-pane__tally {
  color: var(--color-text-muted);
  font-size: var(--font-size-x-small);
  margin: 0;
}

.wiki-index-pane__separator {
  padding-inline: 0.25em;
}

/* --- the trail ------------------------------------------------------------ */

/* Where the reader is, at the top of the document rather than in the bar.

   The bar names the surface; the trail is how you climb out of it, and that is
   page content. Keeping it there also stops it costing the page height: #nav is
   fixed and the document clears it by a fixed --navbar-height, so a trail up
   there that wrapped to a second line grew the bar *downward over the page* — a
   93-character address took it from 74px to 122px. Down here a second line is
   just a second line, so the trail wraps rather than truncating and no address
   is ever unreadable. */
.wiki-crumbs {
  font-size: var(--font-size-small);
  margin-block-end: var(--block-space-half);
}

.wiki-crumbs__list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space-half);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A single segment can be longer than the column on its own, and there is no
   space in it to break at. */
.wiki-crumbs__crumb {
  overflow-wrap: anywhere;
}

/* The separator is drawn rather than written, so it is never read aloud as a
   character between two names. */
.wiki-crumbs__crumb + .wiki-crumbs__crumb::before {
  color: var(--color-text-muted);
  content: "/";
  margin-inline-end: var(--inline-space-half);
}

.wiki-crumbs__link {
  color: var(--color-text-muted);
  text-decoration: none;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      color: var(--color-text);
      text-decoration: underline;
    }
  }
}

/* Where the reader is: solid against the muted links behind it, and no heavier
   than that. The page's own title is the next line down, so a bold crumb saying
   the same thing louder is two headings arguing. */
.wiki-crumbs__here {
  color: var(--color-text);
}

/* --- nav ------------------------------------------------------------------ */

/* What a reader needs from anywhere on the surface, in the bar the layout
   already renders. Every control in it is the app's own; only the placement is
   here. */

.wiki-nav__search {
  max-inline-size: 28ch;

  /* On a phone the bar is already the way back, the overflow and the ☰ floating
     over the end of it; a field between them would be a few characters wide.
     The search page is one tap away through the map. */
  @media (max-width: 100ch) {
    display: none;
  }

  /* The form carries the search page's own bottom margin, which is wrong inside
     a single-row bar. */
  .wiki-search__form {
    margin-block-end: 0;
  }

  /* Sized for the bar, not the search page. The actor field keeps the base
     .input metrics — 16px text, ~0.5em padding — and its inner input adds its
     own vertical padding on top, which stacks into a pill that towers over the
     small controls beside it. Here it is one control in a single row, so it
     sits at their height: the small step, and the height comes from the
     wrapper's padding alone rather than the wrapper's plus the input's. */
  .input--actor {
    --input-padding: 0.45em 0.7em;
    font-size: var(--font-size-small);
  }

  .input--actor .input {
    font-size: var(--font-size-small);
    padding-block: 0;
  }
}

.wiki-nav__parent {
  color: var(--color-text-muted);
  flex-shrink: 0;
  font-size: var(--font-size-small);
  text-decoration: none;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      color: var(--color-text);
      text-decoration: underline;
    }
  }
}

/* The address, on a sunk chip — the design gives it a subtle fill and pulls the
   slug and glyph off full ink, so it reads as a quiet label rather than a hard
   input. */
.wiki-nav__address {
  align-items: center;
  background-color: var(--color-bg-sunk);
  border: 1px solid var(--color-border-dark);
  border-radius: 0.5em;
  display: flex;
  min-inline-size: 0;
  padding: 0.4em 0.75em;

  & h1 {
    align-items: center;
    color: var(--color-text-lighter);
    display: flex;
    font-family: var(--font-mono);
    font-size: var(--font-size-x-small);
    font-weight: 400;
    gap: var(--inline-space-half);
  }

  & .icon {
    color: var(--color-text-subtle);
  }
}

/* The overview's address is "Wiki" — the same name the standing index gives
   itself at the top of its column. While that index is docked (1024 up) the two
   would repeat side by side, so the bar drops its copy; below 1024 the index is
   a drawer and the bar carries the wiki's identity alone. */
@media (min-width: 1024px) {
  .wiki-nav__address--root {
    display: none;
  }
}

/* The back control is a bare chevron in the design; the parent name beside it
   says where it goes. Hide the helper's "Back" word visually but keep it as the
   link's accessible name. */
.wiki-nav .navbar-back__label {
  clip-path: inset(50%);
  block-size: 1px;
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* The bar's ⋯ is the app's anchored popover (popover_menu_tag + popover
   controller), so it needs no rules here — chrome, placement and light dismiss
   are all the shared .anchored-popover/.menu-popover. Only the trigger's wrapper
   takes .position-relative, from utilities. */

/* --- chips ---------------------------------------------------------------- */

.wiki-chip {
  align-items: center;
  border: 1px solid var(--color-border-darker);
  border-radius: 999px;
  color: var(--color-text-lighter);
  display: inline-flex;
  font-size: var(--font-size-x-small);
  gap: var(--inline-space-half);
  line-height: 1;
  padding: 0.35em 0.75em;
  white-space: nowrap;
}

/* The type chip carries the page's raw `type` ("decision", "guide", …); the
   design sets it title-case. Capitalize here rather than in the model so the
   stored value stays exactly what the frontmatter said. */
.wiki-chip--type {
  text-transform: capitalize;
}

/* What kind of document this is, in a colour of its own.

   The most useful colour on the surface, and the one that was missing: every
   type rendered the same grey outline, so a corpus of decisions, guides and
   references looked like one undifferentiated pile and the reader had to read
   the word to learn anything. Three hues and you can tell a decision from a
   guide across a listing without reading at all.

   `type` is free-form in OKF, so this is a courtesy for the three we use and
   never a requirement: anything else keeps the grey outline and loses nothing.

   One value per tone. The surface and the edge are mixed from it against
   whatever the page's ground is, so warm paper and dark mode both work out of
   the same declaration and a tone stays one number to change. */
.wiki-chip--decision {
  --wiki-chip-ink: oklch(48% 0.15 255);
}

.wiki-chip--guide {
  --wiki-chip-ink: oklch(45% 0.11 150);
}

.wiki-chip--reference {
  --wiki-chip-ink: oklch(45% 0.09 75);
}

/* Restated rather than computed. A dark ground does not want the same hue at a
   flipped lightness — it wants a lighter, less saturated ink, which is a
   judgement and not an arithmetic. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    .wiki-chip--decision { --wiki-chip-ink: oklch(80% 0.12 255); }
    .wiki-chip--guide { --wiki-chip-ink: oklch(82% 0.13 150); }
    .wiki-chip--reference { --wiki-chip-ink: oklch(84% 0.10 75); }
  }
}

:root[data-theme="dark"] {
  .wiki-chip--decision { --wiki-chip-ink: oklch(80% 0.12 255); }
  .wiki-chip--guide { --wiki-chip-ink: oklch(82% 0.13 150); }
  .wiki-chip--reference { --wiki-chip-ink: oklch(84% 0.10 75); }
}

.wiki-chip--decision,
.wiki-chip--guide,
.wiki-chip--reference {
  background-color: color-mix(in oklch, var(--wiki-chip-ink) 10%, var(--color-bg));
  border-color: color-mix(in oklch, var(--wiki-chip-ink) 22%, var(--color-bg));
  color: var(--wiki-chip-ink);
}

/* Provenance, when a page's latest revision came from the agent rather than a
   person. Purple is the app's contrast colour and is used nowhere else on this
   surface, so "an agent wrote this" reads at a glance without a legend. Filled
   like the type chips beside it, so the row reads as one row. */
.wiki-chip--agent {
  background-color: color-mix(in oklch, var(--color-contrast) 10%, var(--color-bg));
  border-color: color-mix(in oklch, var(--color-contrast) 22%, var(--color-bg));
  color: var(--color-contrast);
}

/* Trust, not provenance — a page nobody has vouched for yet. Deliberately not
   the alert colour: this is a normal state for a freshly written page, not a
   fault, and colouring it red would teach people to ignore red. */
.wiki-chip--provisional {
  border-color: var(--color-border-darker);
  color: var(--color-text-muted);
}

.wiki-chip--unreadable {
  background-color: var(--color-negative-bg);
  border-color: var(--color-negative);
  color: var(--color-negative);
}

.wiki-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space-half);
  list-style: none;
  padding: 0;
}

/* A chip that goes somewhere — the pages that link this one. Reads as a link on
   hover and as a name at rest, so a row of eight does not become a row of eight
   underlines. */
.wiki-chip--link {
  color: var(--color-link);
  text-decoration: none;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--color-bg-hover);
      text-decoration: underline;
    }
  }
}

/* --- document ------------------------------------------------------------- */

.wiki-page__header {
  border-block-end: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--block-space-half);
  margin-block-end: var(--block-space);
  padding-block-end: var(--block-space);
}

.wiki-page__header--plain {
  border-block-end: 0;
  margin-block-end: var(--block-space);
  padding-block-end: 0;
}

/* The one thing on the surface that has to win. A surface opens with its name,
   and everything around it — the eyebrow, the tools, the trail — is apparatus.

   One size for every wiki surface that opens with a name: a page, a namespace,
   the overview, the listings, the review queue. 34/700 from the design, a shade
   larger and heavier than the app's x-large heading. The overview and the review
   queue had drifted to their own smaller headings; the type lives here now so
   the surfaces cannot disagree about it again. The review title keeps its own
   rule below for the flex row that carries the count badge — only the type is
   shared. */
.wiki-page__title,
.wiki-welcome__title,
.wiki-review__title {
  font-size: var(--wiki-title-size);
  font-weight: var(--wiki-heading-weight);
  line-height: var(--wiki-leading-title);
}

/* The small uppercased label that stands over a block — the page column's
   sections, the index's triage groups, the decision callout, the reversion
   screen's scope warning.

   One device, and until now four specifications of it: three sizes and four
   trackings for the same six-word label. Each rule keeps its own ink and its own
   spacing, because those are what distinguish an accent label from a warning
   one; only the type is shared. */
.wiki-page__col-label,
.wiki-index-pane__triage-title,
.wiki-page__decision-label,
.wiki-agent-reversion__scope,
.wiki-overview__label {
  font-size: var(--wiki-eyebrow-size);
  font-weight: var(--wiki-ui-weight);
  letter-spacing: var(--wiki-eyebrow-tracking);
  text-transform: uppercase;
}

/* --- the masthead --------------------------------------------------------- */

/* What the page is at one end, what you can do to it at the other.

   The actions were three slabs at body size under the title — one filled, one
   outlined, one solid red — which is three primary buttons arguing with the
   document, and the loudest of them was the one you least want to hit by
   accident. Up here, sharing a line with the type, they read as chrome for the
   page rather than as part of it. */
.wiki-page__eyebrow-row {
  align-items: center;
  display: flex;
  gap: var(--inline-space-half);
  margin-block-end: var(--block-space-half);
}

/* Set at the small step and in the lighter ink. The app's .btn is sized for a
   composer and a settings form; these sit over a heading. */
.wiki-page__tool {
  --btn-padding: 0.3em 0.75em;

  color: var(--color-text-lighter);
  font-size: var(--font-size-small);
}

/* The page's ⋯ is the app's anchored popover (popover_menu_tag + popover
   controller), so chrome, placement and light dismiss are all the shared
   .anchored-popover/.menu-popover. Only the destructive row needs a rule here,
   tinted to read as destructive the way the room menu's negative row is. */
.wiki-page-menu .wiki-page-menu__negative {
  color: var(--color-negative);
}

.wiki-page__masthead {
  margin-block-end: var(--block-space);
}

/* The intro under a surface's title, set as a deck: larger than the body, muted,
   the sentence a reader uses to decide whether to read on. A page's own summary,
   the overview's lead and the review queue's lead are the same line at heart, so
   they read at one size — each surface keeps its own margins, only the type is
   shared, so these cannot drift apart the way the titles had. */
.wiki-page__deck,
.wiki-welcome__lead,
.wiki-review__lead {
  color: var(--color-text-muted);
  font-size: var(--wiki-deck-size);
  line-height: var(--wiki-leading-deck);
}

.wiki-page__deck {
  margin-block-start: var(--block-space-half);
}

/* Where the words came from, and who stood behind them. One line, muted, under
   the deck — provenance is what you check, not what you read. */
.wiki-page__provenance {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-x-small);
  gap: 0.3em;
  margin-block-start: var(--block-space-half);

  & a {
    color: var(--color-text-lighter);
  }
}

/* The machine's byline, marked as such. Small enough to sit inside a line of
   x-small text without setting the line height. */
.wiki-page__bot {
  --icon-size: 14px;

  color: var(--color-text-muted);
}

.wiki-page__author {
  color: var(--color-text-lighter);
  font-weight: var(--wiki-ui-weight);
}

.wiki-page__separator {
  color: var(--color-text-subtle);
}

/* Trust, stated in the byline: a held-back page has nobody standing behind what
   it currently says. The alert tone, not the negative one — being unconfirmed
   is a normal step, not a fault. */
.wiki-page__unconfirmed {
  color: var(--color-alert);
}

/* --- what the page decided ------------------------------------------------ */

/* A decision's answer, set apart from the prose that argues for it. A decision
   a reader has to find in the body is a decision the next person will ask about
   again.

   Below the agent strip rather than in the masthead, because it is the document
   opening rather than the page describing itself — the deck above says what the
   question was, and this is where the answer starts. */
.wiki-page__decision {
  background-color: var(--color-bg-sunk);
  border-inline-start: 3px solid var(--color-accent-brand);
  border-radius: 0 0.4em 0.4em 0;
  margin-block-end: var(--block-space);
  padding: var(--block-space) var(--inline-space);
}

.wiki-page__decision-label {
  color: var(--color-accent-brand);
  margin-block-end: 0.35rem;
}

.wiki-page__decision-body {
  font-size: var(--font-size-medium);
  font-weight: var(--wiki-ui-weight);
  line-height: var(--wiki-leading-ui);
}

/* --- the agent strip ------------------------------------------------------ */

/* What the agent can do with this page, said on the page.

   Nothing on this surface used to say it. "Written by …" was a chip and whether
   the words were in the agent's reach was a colour on a second chip, which
   means nothing without the model behind it — so a reader could not tell a page
   the agent answers from apart from one it has never been allowed to read.

   A strip rather than a callout: it is present in every state, including the
   good one, and a box that appears only when something is wrong teaches people
   not to look at it. */
.wiki-agent-strip {
  align-items: center;
  background-color: var(--color-selected);
  border-radius: 0.5em;
  color: var(--color-text-lighter);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  gap: var(--inline-space);
  margin-block-end: var(--block-space);
  padding: var(--block-space-half) var(--inline-space);

  & > :is(p, div) {
    flex: 1 1 20rem;
  }

  & strong {
    color: var(--color-text);
  }

  & .btn {
    --btn-padding: 0.35em 0.9em;

    flex-shrink: 0;
  }
}

/* The good state gets a dot rather than a glyph. An eye beside "in the agent's
   memory" says the same word twice; a lit dot says only "on", which is what
   this state is. */
.wiki-agent-strip__dot {
  background-color: var(--color-positive);
  block-size: 0.5em;
  border-radius: 50%;
  flex-shrink: 0;
  inline-size: 0.5em;
}

/* Held back is a normal state — most of what the agent writes passes through it
   — so it takes the neutral alert tint rather than the negative one. */
.wiki-agent-strip--held {
  background-color: var(--color-alert-bg);
  color: var(--color-text);
}

/* The document proper starts below this. The masthead and the strip above it are
   the page describing itself; under the rule it is the page talking.

   A rule of its own rather than a border on whatever follows, because what
   follows is often the tinted decision block, and a line drawn on that reads as
   the box's own top edge instead of as a division in the page. */
.wiki-page__divider {
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--block-space);
}

/* A page that does not parse is a fault, and the repair is unrelated to review. */
.wiki-agent-strip--broken {
  background-color: var(--color-bg-negative);
  color: var(--color-text);
}

/* --- what points here ----------------------------------------------------- */

/* The pages that link this one, closing the document as names on a line.

   It was a full section — a heading, a paragraph explaining that the list is
   computed, and a grouped listing — which on a hub read as a second document
   about the first. The pages themselves are where the detail is. */
.wiki-page__backlinks {
  border-block-start: 1px solid var(--color-border);
  margin-block-start: var(--block-space-double);
  padding-block-start: var(--block-space);
}

.wiki-page__backlinks-title {
  font-size: var(--font-size-medium);
  font-weight: var(--wiki-ui-weight);
}

/* Said out loud, because "computed, not curated" is the thing about this list
   that gets misread — a reader who thinks somebody maintains it will wonder why
   their page is missing instead of going and linking it. */
.wiki-page__backlinks-lead {
  color: var(--color-text-muted);
  font-size: var(--font-size-x-small);
  margin-block: 0.35rem var(--block-space-half);
}

/* Prose for Wiki::Renderer output. The renderer emits an allowlisted subset of
   HTML — headings, lists, tables, code, blockquote, links, images — and nothing
   here should assume more than that subset. */
.wiki-prose {
  line-height: var(--wiki-leading-prose);

  & > * + * {
    margin-block-start: var(--block-space);
  }

  /* A real step per level. h2 through h6 were all set at the body size, so a
     page with nested sections showed no depth at all and the column's outline
     promised a structure the document did not draw. Three sizes carry the levels
     a wiki page actually uses; below h3 the size has run out, so the drop is in
     weight instead — deep enough to read as subordinate, and no fourth size
     invented for a level almost nothing reaches. */
  & h1, & h2, & h3, & h4, & h5, & h6 {
    font-weight: var(--wiki-heading-weight);
    line-height: var(--wiki-leading-heading);
    margin-block-start: var(--block-space-double);
  }

  & h1 { font-size: var(--font-size-large); }
  & h2 { font-size: var(--wiki-prose-h2-size); }
  & h3 { font-size: var(--font-size-medium); }

  & h4, & h5, & h6 {
    font-size: var(--font-size-medium);
    font-weight: var(--wiki-ui-weight);
  }

  & > :first-child {
    margin-block-start: 0;
  }

  & ul, & ol {
    padding-inline-start: var(--inline-space-double);
  }

  /* The browser normalisation in _defaults.css strips list-style to none on
     every ol/ul, so a rendered list loses its bullets and numbers unless prose
     puts them back. This is the one surface where markers carry meaning — an
     ordered list is a sequence. */
  & ul { list-style: disc; }
  & ol { list-style: decimal; }
  & ul ul { list-style: circle; }

  /* Muted so the marker punctuates the item rather than competing with it. */
  & li::marker {
    color: var(--color-text-muted);
  }

  & li + li {
    margin-block-start: var(--block-space-half);
  }

  & a {
    color: var(--color-link);
  }

  & blockquote {
    border-inline-start: 2px solid var(--color-border-darker);
    color: var(--color-text-lighter);
    padding-inline-start: var(--inline-space);
  }

  & code {
    background-color: var(--color-bg-sunk);
    border-radius: 0.3em;
    font-size: 0.9em;
    padding: 0.15em 0.4em;
  }

  & pre {
    background-color: var(--color-bg-sunk);
    border-radius: 0.5em;
    overflow-x: auto;
    padding: var(--block-space);
  }

  /* The padding and background belong to the block, not twice to the span. */
  & pre code {
    background: none;
    padding: 0;
  }

  & img {
    max-inline-size: 100%;
  }

  & hr {
    border: 0;
    border-block-start: 1px solid var(--color-border);
  }

  /* A page can carry a table wider than the column. Scroll the table rather
     than letting it widen the document and scroll the whole page sideways. */
  & table {
    border-collapse: collapse;
    display: block;
    max-inline-size: 100%;
    overflow-x: auto;
  }

  & th, & td {
    border: 1px solid var(--color-border);
    padding: var(--block-space-half) var(--inline-space);
    text-align: start;
  }

  & th {
    font-weight: var(--wiki-ui-weight);
  }
}

/* --- the review queue ----------------------------------------------------- */

/* The number the wiki exists to move, beside the words for it. Drawn at zero
   too: a badge that appears only when there is trouble teaches people to stop
   looking, and "nothing outstanding" is worth being able to see. */
/* Only the row that carries the count badge; the title's type comes from the
   shared .wiki-page__title rule, so the review heading matches every other. */
.wiki-review__title {
  align-items: center;
  display: flex;
  gap: var(--inline-space-half);
}

.wiki-review__count {
  background-color: var(--color-text);
  border-radius: 999px;
  color: var(--color-bg);
  font-size: var(--font-size-x-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--wiki-ui-weight);
  min-inline-size: 1.7em;
  padding: 0.2em 0.6em;
  text-align: center;
}

.wiki-review__lead {
  margin-block: 0.5rem var(--block-space-double);
}

/* One page waiting for somebody to stand behind it.

   A card and not a listing row, and the difference is the whole surface. A row
   is something you scan and click through; this is a unit of work with
   everything the judgement needs already on it — what the page claims, who
   wrote it, the room they wrote it from — so it can be finished here. */
.wiki-review-card {
  border: 1px solid var(--color-border-dark);
  border-radius: 0.6em;
  margin-block-end: var(--block-space);
  padding: var(--block-space) var(--inline-space);
}

.wiki-review-card__head {
  align-items: baseline;
  column-gap: var(--inline-space);
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.2em;
}

.wiki-review-card__title {
  align-items: center;
  display: flex;
  flex: 1 1 16rem;
  font-size: var(--font-size-medium);
  font-weight: var(--wiki-ui-weight);
  gap: var(--inline-space-half);

  & a {
    color: var(--color-text);
    text-decoration: none;
  }

  @media (hover: hover) and (pointer: fine) {
    & a:hover {
      text-decoration: underline;
    }
  }
}

/* The address, quiet and at the far end. Two namespaces can hold pages of the
   same name, and this is the surface where a reviewer is deciding about a page
   they have not opened. */
.wiki-review-card__slug {
  color: var(--color-text-lighter);
  font-family: var(--font-mono);
  font-size: var(--font-size-x-small);
  margin-inline-start: auto;
}

.wiki-review-card__provenance {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  gap: 0.35em;
  margin-block-start: 0.3em;

  & a {
    color: inherit;
  }
}

.wiki-review-card__bot {
  --icon-size: 14px;

  color: var(--color-text-lighter);
}

.wiki-review-card__separator {
  color: var(--color-text-lighter);
}

/* What the page says, in its own words. The excerpt is the card's reason for
   existing: without it a reviewer is confirming a title. */
.wiki-review-card__opening {
  color: var(--color-text);
  margin-block-start: var(--block-space-half);
}

/* The other state of this queue, and an unrelated repair. Confirming is not
   offered for it at all, so the card says why rather than showing a body it
   cannot parse. */
.wiki-review-card__broken {
  align-items: center;
  background-color: var(--color-bg-negative);
  border-radius: 0.4em;
  color: var(--color-text);
  display: flex;
  font-size: var(--font-size-small);
  gap: var(--inline-space-half);
  margin-block-start: var(--block-space-half);
  padding: var(--block-space-half) var(--inline-space-half);
}

.wiki-review-card__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space-half);
  margin-block-start: var(--block-space);
}

/* The wiki's ghost secondary — a text button rather than an outlined box, so a
   filled primary beside it (such as Save in the editor) remains unmistakable.
   Same box as a .btn; only its border and fill go. Works at either size. */
.wiki-btn-ghost {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-color: var(--color-text-lighter);
  --hover-size: 0;
  --hover-filter: none;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--color-bg-hover);
    }
  }
}

/* No as an answer, kept quiet and kept far from yes. It is the one control on
   this card you least want to hit while working down a list — and it is
   reversible, so it does not need red to say so. */
.wiki-review-card__discard {
  --btn-color: var(--color-text-lighter);

  border-color: transparent;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --btn-color: var(--color-negative);
    }
  }
}

/* --- what else the corpus needs a person for ------------------------------ */

/* Three findings under the queue, and the rule above them is what they are:
   the queue is work, and these are notes about how the corpus reads. Nobody
   clears them in a sitting. */
.wiki-review__findings {
  border-block-start: 1px solid var(--color-border);
  margin-block-start: var(--block-space-double);
  padding-block-start: var(--block-space);
}

.wiki-review__findings-title {
  font-size: var(--font-size-large);
  font-weight: var(--wiki-ui-weight);
}

.wiki-review__findings-lead {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin-block: 0.25em var(--block-space-double);
  max-inline-size: 65ch;
}

.wiki-findings + .wiki-findings {
  margin-block-start: var(--block-space-double);
}

.wiki-findings__title {
  align-items: baseline;
  display: flex;
  font-size: var(--font-size-medium);
  font-weight: var(--wiki-ui-weight);
  gap: var(--inline-space);
}

/* Always shown, zero included, for the same reason the map's badge is. */
.wiki-findings__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-x-small);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.wiki-findings__why {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin-block: 0.25em var(--block-space-half);
  max-inline-size: 65ch;
}

/* A finding, as a card rather than as a listing row. The difference is the
   point: a listing is a place you browse, and this is a thing to pick up and
   deal with, so it gets an edge of its own rather than a rule between it and
   the next one. */
.wiki-finding {
  align-items: center;
  border: 1px solid var(--color-border-dark);
  border-radius: 0.6em;
  column-gap: var(--inline-space);
  display: flex;
  flex-wrap: wrap;
  margin-block-end: 0.5em;
  padding: 0.6em var(--inline-space);
  row-gap: var(--block-space-half);
  text-decoration: none;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--color-bg-sunk);
    }
  }
}

/* What kind of finding it is, on its edge. Four groups of identical grey cards
   is a wall; the colour is what lets you see at a glance that one group is a
   repair and another is only a note about how the corpus reads.

   Orange, not red: nothing here is broken in a way that has hurt anybody, and
   the wiki spends red on actions that destroy. */
.wiki-finding--repair {
  border-color: color-mix(in oklch, var(--color-alert) 45%, var(--color-border-dark));
}

/* Already gone. Stated in the register of a thing that is no longer here. */
.wiki-finding--deleted {
  border-style: dashed;

  & .wiki-finding__what {
    color: var(--color-text-muted);
    font-weight: 400;
  }
}

.wiki-finding__what {
  color: var(--color-text);
  flex: 1 1 14rem;
  font-weight: var(--wiki-ui-weight);
}

.wiki-finding__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-x-small);
  margin-inline-start: auto;
  white-space: nowrap;
}

.wiki-finding__arrow {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* --- the listing row ------------------------------------------------------ */

/* One row shape for every generated listing — a namespace's pages, everything
   else, recently changed, search results.

   Three lines, because the four things a row carries are not equally weighted.
   The name and when it moved decide whether you look, so they share the first
   line and the date goes to the far end. The page's own sentence decides
   whether you open it, so it gets a line and the room to be a sentence. Who
   wrote it is what you check afterwards, so it goes last and small.

   The one-line version squeezed the sentence into whatever the title left over
   and crowded the byline against the date, and it is the sentence that does the
   choosing — which was the audit's finding about this surface in the first
   place: choosing between seven decisions meant opening seven of them. */
.wiki-row {
  border-block-end: 1px solid var(--color-border);
  display: block;
  padding-block: var(--block-space-half);
  text-decoration: none;

  @media (hover: hover) and (pointer: fine) {
    &:hover .wiki-row__title {
      text-decoration: underline;
    }
  }
}

.wiki-row__head {
  align-items: baseline;
  column-gap: var(--inline-space-half);
  display: flex;
  flex-wrap: wrap;
}

.wiki-row__title {
  color: var(--color-text);
  font-weight: var(--wiki-ui-weight);
}

/* Takes the slack, so the date lands on the right edge and the titles stay in
   a column. */
.wiki-row__when {
  color: var(--color-text-muted);
  font-size: var(--font-size-x-small);
  margin-inline-start: auto;
  white-space: nowrap;
}

/* Two lines at most. On a search result this holds the matching fragment rather
   than a written summary, and a paragraph of body text in a listing row would
   make one hit as tall as three. */
.wiki-row__blurb {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--color-text-lighter);
  display: -webkit-box;
  font-size: var(--font-size-small);
  margin-block-start: 0.2rem;
  overflow: hidden;
}

.wiki-row__byline {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  font-size: var(--font-size-x-small);
  gap: 0.35em;
  margin-block-start: 0.3rem;
}

/* Lighter than the byline it sits in — the design draws it at the subtle tone,
   so the glyph marks who wrote the page without weighing as much as the name. */
.wiki-row__bot {
  --icon-size: 14px;
  color: var(--color-text-subtle);
}

/* The one thing on a row that is about the agent rather than about the page,
   and the one thing a reader cannot infer from the page itself — so it is
   labelled rather than left as a glyph they have to learn.

   The alert tone, not the negative one: a page waiting for review is a normal
   state, and colouring the ordinary case red teaches people to stop seeing
   red. */
.wiki-row__held {
  --icon-size: 13px;

  align-items: center;
  background-color: var(--color-alert-bg);
  border: 1px solid var(--color-alert-border);
  border-radius: 999px;
  color: var(--color-alert);
  display: inline-flex;
  font-size: var(--font-size-x-small);
  gap: 0.35em;
  line-height: 1;
  padding: 0.3em 0.6em;
  white-space: nowrap;
}

/* A page a listing names and cannot open — one of the org's own pages that
   nobody has written. Not a link, because there is nothing to open. */
.wiki-row--unwritten .wiki-row__title {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* A listing with nothing in it still says so. An empty section that rendered
   nothing would read as a section that had not loaded. */
.wiki-index__empty {
  margin-block-start: var(--block-space-half);
}

/* Where a listing came from, when that is the surprising part. Set small and
   quiet at the end of it, because it answers a question a reader only has after
   they have looked at the listing and wondered where the folder is. */
.wiki-listing__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-x-small);
  margin-block-start: var(--block-space);
  max-inline-size: 60ch;
}

/* --- a namespace's own page ----------------------------------------------- */

.wiki-root__header {
  border-block-end: 1px solid var(--color-border);
  margin-block-end: var(--block-space);
  padding-block-end: var(--block-space);
}

/* Given room rather than tucked under the title as a caption: on a namespace
   page this line is what the namespace is *for*, and it is the one piece of
   writing on the surface that a person put there rather than a query. */
.wiki-root__description {
  color: var(--color-text-lighter);
  margin-block-start: var(--block-space-half);
  max-inline-size: 65ch;
}

/* --- the map -------------------------------------------------------------- */

/* The front door: the org's three pages, then one line per group. Nothing here
   scales with the corpus — that is the point of it. */

/* The three pages every install has, given the width and a shape of their own.
   Three full-width cards stacked down the top of the map, each a doorway in its
   own right rather than a cell in a strip — these are the three a new joiner
   reads first, and they read as three distinct places, not three of many. */
/* Three across, like the design: the org's own three read as a set, not a
   stack. A responsive grid rather than three fixed columns, so the reading
   measure narrowing — the page column docking, a phone — folds them to two and
   then one instead of cramping three into a rail. */
.wiki-trio {
  display: grid;
  gap: var(--block-space-half);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  margin-block-end: var(--block-space-double);
}

/* A card on the map's own ground: white with a hairline border, so the trio
   sits above the corpus without borrowing a tint the rest of the map avoids. */
.wiki-trio__page {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.7em;
  display: block;
  padding: var(--block-space) var(--inline-space);
  text-decoration: none;
}

/* Only the written cards are links, so only they light on hover. */
@media (hover: hover) and (pointer: fine) {
  a.wiki-trio__page:hover {
    background-color: var(--color-bg-hover);
  }
}

.wiki-trio__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space-half);
}

/* In the link colour: the title is the doorway, and these three lead somewhere
   the moment they exist. */
.wiki-trio__title {
  color: var(--color-link);
  font-size: var(--font-size-medium);
  font-weight: var(--wiki-ui-weight);
}

.wiki-trio__purpose {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin-block-start: 0.25em;
}

/* A page the org is expected to have and does not. Sunk fill, muted title, and
   no link — still named, and still saying what it would be for, because the gap
   is the useful part. */
.wiki-trio__page--unwritten {
  background-color: var(--color-bg-sunk);
}

.wiki-trio__page--unwritten .wiki-trio__title {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* The gap stated as a property of the page, inline beside its name, rather than
   as a line of body copy under it. */
.wiki-trio__flag {
  border: 1px solid var(--color-border-dark);
  border-radius: 0.4em;
  color: var(--color-text-subtle);
  font-size: var(--font-size-x-small);
  font-weight: var(--wiki-ui-weight);
  padding: 0.05em 0.5em;
  white-space: nowrap;
}

/* --- search --------------------------------------------------------------- */

/* The field borrows .input/.btn from the shell; only the layout is here. */
.wiki-search__form {
  margin-block-end: calc(var(--block-space) + 0.125rem);

  & > .input--actor {
    --input-padding: 0.72em 0.9em;

    background-color: var(--color-bg);
    border-color: var(--color-border-darker);
    gap: var(--inline-space-half);

    &:focus-within {
      border-color: var(--color-link);
      box-shadow: 0 0 0 3px var(--color-selected-dark);
    }
  }

  & .input--actor > .input {
    border: 0;
    box-shadow: none;
    min-inline-size: 8rem;
    padding: 0;
  }
}

.wiki-search__hint {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.wiki-search__note {
  margin-block-start: var(--block-space);
}

.wiki-search__operator-hint {
  color: var(--color-text-subtle);
  flex-shrink: 0;
  font-size: var(--font-size-x-small);

  @media (max-width: 34rem) {
    display: none;
  }
}

.wiki-search__notice {
  background-color: var(--color-bg-sunk);
  border: 1px solid var(--color-border-dark);
  border-radius: 0.5em;
  display: grid;
  gap: var(--block-space-half);
  margin-block-end: calc(var(--block-space) + 0.125rem);
  padding: 0.85rem;

  & p {
    align-items: start;
    color: var(--color-text-lighter);
    display: flex;
    font-size: var(--font-size-small);
    gap: var(--inline-space-half);
    line-height: var(--wiki-leading-ui);
    margin: 0;
  }

  & .icon {
    color: var(--color-text-muted);
    margin-block-start: 0.15em;
    --icon-size: 15px;
  }
}

.wiki-search__results {
  border: 1px solid var(--color-border-dark);
  border-radius: 0.5em;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;

  & li + li .wiki-row {
    border-block-start: 1px solid var(--color-border);
  }

  /* The rows carry the list's rules; the list draws its own outline, so the
     last row must not draw a second one against it. */
  & .wiki-row {
    border-block-end: 0;
    padding-inline: var(--inline-space);
  }
}

/* --- history -------------------------------------------------------------- */

/* The history view: a filter over the list, versions grouped by the day they
   were recorded, and each row carrying its number and the size of its own
   change against the version before it. The filter is the app's shared
   .segmented-control (patterns.css); this only spaces it off the list below. */
.wiki-history__filter {
  margin-block-end: var(--block-space);
}

/* The rail's masthead: what the list is and how much of it there is. */
.wiki-history__masthead {
  margin-block-end: var(--block-space);
}

.wiki-history__heading {
  font-size: var(--font-size-medium);
  font-weight: var(--wiki-ui-weight);
  margin: 0;
}

.wiki-history__stat {
  color: var(--color-text-subtle);
  font-size: var(--font-size-x-small);
  margin: 0.15rem 0 0;
}

/* The author's avatar in the list and the pane. The box is the app's shared
   .avatar (a rounded square, sized here), so a person and the agent carry the
   same avatar the rest of the app gives them; an accountless actor fills it with
   a neutral initials tile instead. */
.wiki-avatar {
  --avatar-size: 1.75rem;

  flex: 0 0 auto;
}

.wiki-avatar__initials {
  align-items: center;
  background-color: var(--color-bg-sunk);
  block-size: 100%;
  color: var(--color-text-muted);
  display: flex;
  font-size: var(--font-size-x-small);
  font-weight: var(--wiki-ui-weight);
  inline-size: 100%;
  justify-content: center;
  line-height: 1;
}

.wiki-history {
  border: 1px solid var(--color-border-dark);
  border-radius: 0.5em;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;

  & > li + li {
    border-block-start: 1px solid var(--color-border);
  }
}

/* A day heading between the rows it introduces. A list item so it sits in the
   ordered list's own flow, but it labels rows rather than being one, so it is
   hidden from the count a screen reader announces. */
.wiki-history__daygroup {
  background-color: var(--color-bg-sunk);
  color: var(--color-text-subtle);
  font-size: var(--font-size-x-small);
  font-weight: var(--wiki-ui-weight);
  letter-spacing: 0.04em;
  padding: 0.4rem 1rem;
  text-transform: uppercase;

  & time {
    font-variant-numeric: tabular-nums;
  }
}

.wiki-history__num {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-x-small);
}

/* Pushed to the trailing edge of the row, so the change sizes line up down the
   list however wide the actor and chips beside them run. */
.wiki-history__counts {
  display: flex;
  font-family: var(--font-mono);
  font-size: var(--font-size-x-small);
  gap: 0.4rem;
  margin-inline-start: auto;
}

.wiki-history__added {
  color: var(--color-positive);
}

.wiki-history__removed {
  color: var(--color-negative);
}

.wiki-history__entry {
  &.wiki-history__entry--open {
    background-color: var(--color-bg-hover);
  }
}

.wiki-history__summary {
  align-items: flex-start;
  display: flex;
  font-size: var(--font-size-small);
  gap: 0.75rem;
  padding: 0.8rem 1rem;
}

.wiki-history__marker {
  color: var(--color-text-subtle);
  --icon-size: 15px;
}

.wiki-history__select {
  color: inherit;
  min-inline-size: 0;
  text-decoration: none;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--color-bg-hover);
    }
  }
}

.wiki-history__meta {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.2rem;
  min-inline-size: 0;
}

.wiki-history__line {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space-half);
}

.wiki-history__actor {
  font-weight: var(--wiki-ui-weight);
}

.wiki-history__when {
  color: var(--color-text-subtle);
  font-size: var(--font-size-x-small);
}

/* The writer's note on the change — the line a reader scans to see what a
   version did without opening it, so it reads at body weight, not as chrome. */
.wiki-history__note {
  color: var(--color-text);
  font-size: var(--font-size-x-small);
  line-height: var(--wiki-leading-ui);
}

.wiki-history__body {
  padding: 0 1rem 1rem calc(1rem + 15px + 0.75rem);
}

.wiki-diff {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-dark);
  border-radius: 0.5em;
  overflow: hidden;
}

.wiki-diff__header {
  align-items: center;
  background-color: var(--color-bg-sunk);
  border-block-end: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-x-small);
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
}

.wiki-diff__count {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-x-small);
}

.wiki-diff__against {
  color: var(--color-text-subtle);
  font-size: var(--font-size-x-small);
  margin-inline-start: auto;
}

.wiki-diff__line {
  display: flex;
  gap: 0.75rem;
  padding: 0.25rem 0.75rem;

  & code {
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-x-small);
    line-height: var(--wiki-leading-prose);
    overflow-wrap: anywhere;
    padding: 0;
    white-space: pre-wrap;
  }
}

.wiki-diff__line--addition {
  background-color: color-mix(in oklch, var(--color-positive) 10%, transparent);

  & .wiki-diff__sign { color: var(--color-positive); }
}

.wiki-diff__line--deletion {
  background-color: var(--color-negative-bg);

  & .wiki-diff__sign { color: var(--color-negative); }
}

.wiki-diff__line--context {
  & .wiki-diff__sign { color: var(--color-text-subtle); }
  & code { color: var(--color-text-muted); }
}

.wiki-diff__line--omission {
  background-color: var(--color-bg-sunk);

  & .wiki-diff__sign,
  & code {
    color: var(--color-text-subtle);
    font-style: italic;
  }
}

.wiki-diff__sign {
  flex: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-x-small);
  line-height: var(--wiki-leading-prose);
}

.wiki-history__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block-start: 0.85rem;
}

.wiki-history__consequence {
  color: var(--color-text-muted);
  flex: 1 1 18rem;
  font-size: var(--font-size-x-small);
  line-height: var(--wiki-leading-ui);
  margin: 0;
}

.wiki-history__version {
  &[open] {
    flex-basis: 100%;
    order: 4;
  }

  & > summary {
    list-style: none;
  }

  & > summary::-webkit-details-marker {
    display: none;
  }
}

.wiki-history__source {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-dark);
  border-radius: 0.5em;
  margin-block-start: var(--block-space-half);
  max-block-size: 24rem;
  overflow: auto;
  padding: var(--block-space);
  white-space: pre-wrap;
}

/* --- the two-pane split --------------------------------------------------- */

/* The default is one column: the filter and the list stack, and the open
   version is folded under its own row (.wiki-history__body). The standing pane
   is not drawn — its copy would put the open version on screen twice. */
.wiki-history__pane {
  display: none;
}

/* Above 1700 the surface can hold the whole list in view beside the version
   being read, which is what a version list is for. The document gives up its
   reading cap so the row spans the content area; the list takes a fixed rail on
   the left and the open version stands in the rest, still while the list
   scrolls. The copy folded under the row goes, so the version shows once.

   1700 rather than the page column's 1536: the two 272 rails plus a readable
   rail and diff only clear here, which is the measure the concept was drawn to. */
@media (min-width: 106.25rem) {
  .wiki-history-view {
    max-inline-size: none;
  }

  .wiki-history-view .wiki-history-layout {
    align-items: start;
    display: grid;
    gap: var(--inline-space-double);
    grid-template-columns: 19rem minmax(0, 1fr);
  }

  .wiki-history-view .wiki-history__body {
    display: none;
  }

  .wiki-history__pane {
    display: block;
    max-inline-size: var(--wiki-measure);
    position: sticky;
    inset-block-start: calc(var(--navbar-height) + 1rem);
  }
}

/* The pane's own heading: the version's identity, which its row carries in the
   single column but the detached pane has to state for itself — with the restore
   standing at its trailing edge rather than buried under the diff. */
.wiki-version__head {
  align-items: start;
  border-block-end: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space);
  justify-content: space-between;
  margin-block-end: var(--block-space);
  padding-block-end: var(--block-space-half);
}

.wiki-version__head-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-inline-size: 0;
}

.wiki-version__head-actions {
  flex: 0 0 auto;
}

.wiki-version__id {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space-half);
}

.wiki-version__title {
  font-size: var(--font-size-medium);
  font-weight: var(--wiki-ui-weight);
  margin: 0;
}

.wiki-version__by {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  font-size: var(--font-size-x-small);
  gap: var(--inline-space-half);
  margin: 0;
}

/* --- agent reversion ------------------------------------------------------ */

.wiki-agent-reversion__header {
  display: grid;
  gap: 0.55rem;
}

/* Mono, because it is a stamp on an admin-only screen rather than a section
   label — but sized and tracked with the other three. */
.wiki-agent-reversion__scope {
  align-items: center;
  color: var(--color-negative);
  display: flex;
  font-family: var(--font-mono);
  gap: var(--inline-space-half);
  margin: 0;

  & .icon { --icon-size: 14px; }
}

.wiki-agent-reversion__lede,
.wiki-agent-reversion__note,
.wiki-agent-reversion__actions > p {
  color: var(--color-text-muted);
  line-height: var(--wiki-leading-ui);
  margin: 0;
}

.wiki-agent-reversion__lede {
  font-size: var(--font-size-small);
}

.wiki-agent-reversion__group {
  margin-block-start: calc(var(--block-space) + 0.125rem);
}

.wiki-agent-reversion__group-head {
  align-items: center;
  display: flex;
  gap: var(--inline-space-half);
}

.wiki-agent-reversion__title {
  font-size: var(--font-size-medium);
  font-weight: var(--wiki-heading-weight);
}

.wiki-agent-reversion__count {
  background-color: var(--color-text);
  border-radius: 999px;
  color: var(--color-text-reversed);
  font-size: var(--font-size-x-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--wiki-ui-weight);
  line-height: 1;
  padding: 0.25em 0.7em;
}

.wiki-agent-reversion__count--warning {
  background-color: var(--color-alert);
  color: var(--color-text-reversed);
}

.wiki-agent-reversion__note {
  font-size: var(--font-size-small);
  margin-block: 0.45rem 0.55rem;
}

.wiki-agent-reversion__list {
  border: 1px solid var(--color-border-dark);
  border-radius: 0.5em;
  overflow: hidden;
}

.wiki-agent-reversion__item {
  align-items: center;
  color: var(--color-text-lighter);
  display: flex;
  font-size: var(--font-size-x-small);
  gap: var(--inline-space);
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  text-decoration: none;

  & + & {
    border-block-start: 1px solid var(--color-border);
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--color-bg-hover);
    }
  }

  & code {
    background: none;
    color: var(--color-text-lighter);
    font-size: var(--font-size-x-small);
    padding: 0;
  }

  & span {
    color: var(--color-text-muted);
    text-align: end;
  }
}

.wiki-agent-reversion__more {
  color: var(--color-text-subtle);
  font-size: var(--font-size-x-small);
  margin-block-start: 0.55rem;
}

.wiki-agent-reversion__actions {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-block-start: calc(var(--block-space) + 0.125rem);
  padding-block-end: 1.6rem;

  & > p {
    flex: 1;
    font-size: var(--font-size-x-small);
  }
}

@media (max-width: 34rem) {
  .wiki-history__summary {
    align-items: start;
    flex-wrap: wrap;
  }

  .wiki-history__body {
    padding-inline-start: 1rem;
  }

  .wiki-agent-reversion__item {
    align-items: start;
    flex-direction: column;
    gap: 0.25rem;

    & span { text-align: start; }
  }

  .wiki-agent-reversion__actions {
    flex-wrap: wrap;

    & > p { flex-basis: 100%; }
  }
}

/* --- editor --------------------------------------------------------------- */

/* The editor fills the screen it is given. Left to itself Marksmith sizes its
   textarea from a rows count, which lands well short of the document and leaves
   the body scrolling inside a fixed box with dead space below the Save button.
   Instead the section stands a full viewport tall and hands the slack to the
   textarea: the form grows into whatever the header leaves, the Marksmith
   wrapper grows into whatever the form leaves, and its flex-1 chain
   (content → pane → textarea) carries that height down to the writing surface.
   The actions ride at the foot.

   The floor lives on the section, not the textarea. A short window still gets a
   usable editor and scrolls the page to reach the actions; a min-height on the
   textarea itself would instead refuse to shrink and overflow the box. */
.wiki-editor {
  display: flex;
  flex-direction: column;
  min-block-size: max(100dvh, 40rem);
}

.wiki-editor__form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
}

.wiki-editor .marksmith-editor-wrapper {
  flex: 1 1 auto;
  min-block-size: 0;

  /* The gem's wrapper carries an ms:block class that wins over its own
     flex-col, so left alone it stacks its children at their content height and
     the flex-1 chain inside (content → pane → textarea) has no flex parent to
     grow into — the textarea sits at its floor and the pane overflows. Make the
     wrapper the column the chain expects and the height flows down to the
     writing surface. */
  display: flex;
  flex-direction: column;
}

/* The gem gives both its toolbars flex-1, so in the wrapper column they split
   the height with the writing surface — the top bar (Write/Preview + format
   buttons) or the bottom "Markdown is supported" strip balloons. They are
   chrome, not surface: hold each to its content height and let the editor
   content take everything left over. */
.wiki-editor :is(.marksmith-toolbar, .marksmith-bottom-toolbar) {
  flex: 0 0 auto;
}

/* Marksmith opts into field-sizing:content, which makes a long document grow
   the textarea through the editor frame. Keep the field inside the pane and
   scroll its content instead. */
.wiki-editor .marksmith-editor-wrapper textarea {
  block-size: 100%;
  field-sizing: fixed;
  min-block-size: 0;
  overflow-y: auto;
}

.wiki-editor__summary {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.35rem;
  margin-block-start: var(--block-space);
}

.wiki-editor__actions {
  display: flex;
  gap: var(--inline-space);
  margin-block-start: var(--block-space);
}

/* --- the map's opening ---------------------------------------------------- */

/* A line about what the wiki is for, above the sections that say what is in it.
   Short on purpose: the map underneath it is the actual front door. */
.wiki-welcome {
  padding-block: var(--block-space);
}

.wiki-welcome__lead {
  margin-block-start: var(--block-space-half);
  max-inline-size: 46ch;
}

/* The two quiet labels below the ledger — the trio, then what moved lately. They
   borrow the wiki eyebrow's type above and set only their colour and the room
   they stand in, so a label reads as a whisper over the section rather than a
   heading competing with the titles under it. */
.wiki-overview__label {
  color: var(--color-text-subtle);
  margin-block: 2rem var(--block-space-half);
}

/* The recent rows sit closer than a full listing: this is a preview, so it stays
   short and does not earn the changes page's breathing room. */
.wiki-overview__recent {
  margin-block-start: var(--block-space-half);
}

/* The reading ledger on the overview: the corpus's health as a headline, a
   meter, a sentence and four counts, in an accent-tinted callout. It leads the
   front door now that Ask, which the design put here, is deferred.

   The tint is the accent-tint pair the palette already defines — the same
   surface a selection paints. Mixing the brand accent onto the page by hand
   instead read pink: color-mix in oklch interpolates hue, and white carries
   hue 0 (red), so a few percent of indigo over white lands near red. These
   tokens are the pre-computed tint at the right hue, and they carry their own
   dark-mode values, which a hand mix would not. */
.wiki-ledger {
  background-color: var(--color-selected);
  border: 1px solid var(--color-selected-dark);
  border-radius: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-block: var(--block-space);
  padding: 1.25rem;
}

.wiki-ledger__head {
  align-items: center;
  column-gap: var(--inline-space);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: var(--block-space-half);
}

/* Reading N of M: the one bold statement the ledger is built around. The number
   is already bold with the line, so the <strong> only marks it for a reader. */
.wiki-ledger__reading {
  align-items: center;
  color: var(--color-text);
  display: flex;
  font-size: var(--font-size-medium);
  font-weight: 700;
  gap: var(--inline-space-half);
  margin: 0;
}

.wiki-ledger__glyph {
  color: var(--color-accent-brand);
  flex-shrink: 0;
}

/* The reading fraction as a bar, so the state reads before the number does: a
   rounded track in the border tint, filled to the fraction in the accent. */
.wiki-ledger__meter {
  background-color: var(--color-selected-dark);
  block-size: 6px;
  border-radius: 999px;
  overflow: hidden;
}

.wiki-ledger__meter-fill {
  background-color: var(--color-accent-brand);
  block-size: 100%;
  display: block;
}

.wiki-ledger__detail {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: 1.55;
  margin: 0;
  max-inline-size: 68ch;
}

.wiki-ledger__rule {
  background-color: var(--color-selected-dark);
  block-size: 1px;
  border: 0;
  margin: 0;
}

/* Four equal columns, flush like the design, each a link into its section of the
   review surface. The row is pulled out by its own inner padding so the first
   number sits on the ledger's left edge and the counts still divide the width
   evenly. */
.wiki-ledger__counts {
  display: flex;
  margin-inline: calc(var(--inline-space-half) * -1);
}

.wiki-ledger__count {
  border-radius: 0.4em;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.15em;
  padding: var(--block-space-half) var(--inline-space-half);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .wiki-ledger__count:hover {
    background-color: var(--color-selected-dark);
  }
}

/* Coloured by what the count is: held back is work the agent waits on, a broken
   link is a defect, the middle two are only notes and stay plain. */
.wiki-ledger__number {
  color: var(--color-text);
  font-size: var(--font-size-large);
  font-weight: 700;
  line-height: 1.1;
}

.wiki-ledger__count--alert .wiki-ledger__number {
  color: var(--color-alert);
}

.wiki-ledger__count--negative .wiki-ledger__number {
  color: var(--color-negative);
}

.wiki-ledger__label {
  align-items: center;
  color: var(--color-text-lighter);
  display: flex;
  font-size: var(--font-size-x-small);
  gap: 0.25em;
}

/* The chevron the design draws on each tile, as a mark rather than an icon so no
   glyph has to be named. Hidden from a screen reader, which already hears a
   link. */
.wiki-ledger__label::after {
  color: var(--color-text-muted);
  content: "\203A";
}