/* =========================================================================
   Wiki vino.com — "Cantina digitale"
   A dark-first, editorial product atlas. The subject is wine, so the palette
   is the spectrum of wine itself (garnet → amber) pooled over a warm cellar
   dark; the display face is Fraunces (high-contrast, vinous). One signature:
   glass area-cards whose top edge lights up with the wine gradient on hover.
   Everything else stays quiet.
   ========================================================================= */

:root {
  --wine-bg: #f4efe8;
  --wine-bg-2: #fbf8f3;
  --wine-panel: rgba(36, 26, 23, 0.025);
  --wine-ink: #221713;
  --wine-muted: #6c5c54;
  --wine-faint: #756458;
  --wine-garnet: #9a1f3a;
  --wine-amber: #a8722a;
  --wine-vine: #566b46;
  /* Theme-stable deep-wine fill for filled buttons: white text stays ≥4.5:1 on
     these in BOTH themes (the accent tokens above brighten in dark, so white on
     them drops below AA). Deliberately NOT overridden in .dark. */
  --wine-btn-1: #8a1a30;
  --wine-btn-2: #864f16;
  --wine-line: rgba(36, 26, 23, 0.12);
  --wine-line-strong: rgba(36, 26, 23, 0.22);
  /* The navigation rail: one shade off the page, in the same direction the
     theme already leans. It exists so the open page has something to stand out
     FROM — see the sidebar section below, where the active entry takes the
     page's own background and joins it. */
  --wine-rail: #e9e2d8;
  --wine-grain: 0.04;
  --wine-glow-1: rgba(154, 31, 58, 0.1);
  --wine-glow-2: rgba(168, 114, 42, 0.08);
  --wine-card: rgba(255, 255, 255, 0.55);
  --wine-card-hover: rgba(255, 255, 255, 0.9);
}

.dark {
  --wine-bg: #17110f;
  --wine-bg-2: #201713;
  --wine-panel: rgba(255, 255, 255, 0.03);
  --wine-ink: #f3ebe2;
  --wine-muted: #b1a29a;
  --wine-faint: #8b7c74;
  --wine-garnet: #e26076;
  --wine-amber: #e2a94f;
  --wine-vine: #9db388;
  --wine-line: rgba(243, 235, 226, 0.09);
  --wine-line-strong: rgba(243, 235, 226, 0.16);
  --wine-rail: #120d0b;
  --wine-grain: 0.05;
  --wine-glow-1: rgba(226, 96, 118, 0.13);
  --wine-glow-2: rgba(226, 169, 79, 0.1);
  --wine-card: rgba(255, 255, 255, 0.035);
  --wine-card-hover: rgba(255, 255, 255, 0.06);
}

/* ---------- Base ---------- */

html {
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: color-mix(in srgb, var(--wine-garnet) 32%, transparent);
  color: var(--wine-ink);
}

/* Ambient cellar light + fine grain, fixed behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      62% 48% at 12% -4%,
      var(--wine-glow-1),
      transparent 68%
    ),
    radial-gradient(
      52% 44% at 104% 8%,
      var(--wine-glow-2),
      transparent 64%
    );
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--wine-grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Upstream fix: stray en-dashes on every page ----------
   nextra-theme-docs 4.6 ships a nested `&::after { --tw-content: "–" }` in its
   prebuilt stylesheet whose parent selector was lost, so the rule matches every
   element instead of the one utility class it was written for. The result is a
   loose "–" scattered across the navbar, the pagination and the footer, on
   viewports wider than 64rem only (the rule sits in that media query).

   Resetting the custom property puts it back to its registered initial value.
   We only touch --tw-content, never `content`, so literal pseudo-elements of
   ours (the ▸ marker, the vintage dot, the login separator) are untouched.
   Remove this when the upstream stylesheet is fixed. */
@media (min-width: 64rem) {
  *::after {
    --tw-content: "";
  }
}

/* ---------- Header / navbar ----------
   Nextra's navbar backdrop is only 70% opaque, so scrolled content muddies
   through it. Make it near-solid (with blur) for a clean sticky header. */

.nextra-navbar-blur {
  background-color: color-mix(in srgb, var(--wine-bg) 90%, transparent) !important;
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
          backdrop-filter: saturate(1.3) blur(12px);
}

/* ---------- Mobile menu ----------
   Nextra's mobile-nav relies on the `bg-nextra-bg` token, which does not
   resolve to an opaque color here — so the open menu shows the page content
   bleeding through. Paint it explicitly with our own opaque background. */

.nextra-mobile-nav {
  background-color: var(--wine-bg) !important;
  background-image: radial-gradient(
    70% 34% at 100% 0%,
    var(--wine-glow-1),
    transparent 70%
  );
}

/* It is a PANEL, not a page.
   Nextra builds the mobile nav as `fixed inset-0`: a full-screen sheet. That
   suits a docs site with a long tree, and it is wrong here — this wiki has five
   pages, so six entries were taking the whole phone screen with ~500px of
   emptiness under them, which reads as something that failed to load rather than
   as a menu.

   `bottom: auto` is the whole change: the element then sizes to its content,
   which is its 64px of top padding (the strip the navbar sits over) plus the
   list. The rest is what makes it read as a panel — an edge, a radius and a
   shadow over the page it covers.

   The closing animation still works: Nextra hides it with
   `translate3d(0, -100%, 0)`, and -100% of a shorter element still takes it fully
   out of view. And a tree long enough to reach the bottom of the screen scrolls
   inside the panel instead of overflowing it. */
.nextra-mobile-nav {
  bottom: auto !important;
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
  border-bottom: 1px solid var(--wine-line-strong);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 22px 45px -14px rgb(0 0 0 / 0.55);
}

/* And a TIGHT panel, because `bottom: auto` alone was not enough.
   Measured on a real content page: 422px, which is half of a desktop window but
   three quarters of a small phone's visible area — so it still read as
   fullscreen, which is what it was reported as. The 422 broke down as 64px of
   navbar strip + 52 search + 244 tree + 61 footer: no fat, just a generous
   rhythm meant for a docs site with a long tree.

   What is NOT done here, and why: collapsing the area groups would be the
   biggest single saving — Catalogo alone is eight rows — but their open state is
   React state, and the only lever
   for it — `sidebar.defaultMenuCollapseLevel` — applies to the desktop rail too,
   where the groups are deliberately expanded (`autoCollapse: false` in layout.tsx)
   because the rail is the wiki's main navigation and carries the per-page
   validation marks. So the height comes out of the rhythm instead, and nothing
   is hidden or removed.

   Rows stay at ~34px rather than being squeezed further: below that a menu row
   stops being comfortable to hit with a thumb, and a shorter panel is not worth
   a missed tap. */
@media (max-width: 767px) {
  .nextra-mobile-nav > ul,
  .nextra-mobile-nav ul ul {
    gap: 0 !important;
  }

  /* The list's own 16px top and bottom were the single largest waste — 32px of
     nothing, on the element whose height is the problem. */
  .nextra-mobile-nav > ul {
    padding-block: 0.35rem !important;
  }

  .nextra-mobile-nav li > a,
  .nextra-mobile-nav li > button {
    padding-block: 0.3rem !important;
  }

  /* The search sits right under the navbar strip; 1rem of extra top padding was
     spacing it away from an edge that isn't there. */
  .nextra-mobile-nav > div:first-child {
    padding-top: 0.45rem !important;
  }

  .nextra-mobile-nav .nextra-sidebar-footer {
    padding-block: 0.3rem !important;
  }

  /* ---------- The reading level, in the menu ----------
     Below `md` the navbar holds the wordmark and the hamburger and nothing
     else, so the level control moves in here beside the theme switch — the two
     questions "how much of this do I want" and "light or dark" are the same
     kind of question, and neither is navigation.

     The block is appended as the menu's LAST child (see
     `src/lib/use-mobile-menu-slot.ts` for why it has to be last), so `order`
     is what actually places it: above the theme row, below the tree. */
  /* Belt and braces with the `wanted` flag on the hook: a slot with nothing in
     it must not draw its own rule across the menu. */
  .wiki-navextra:empty {
    display: none;
  }

  .wiki-navextra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    order: 1;
    margin: 0 1rem;
    padding-block: 0.5rem;
    border-top: 1px solid var(--wine-line);
  }

  .nextra-mobile-nav .nextra-sidebar-footer {
    order: 2;
    /* Its own top border would be the second hairline in a row, a few pixels
       under the one the block above already draws. */
    border-top: 0 !important;
  }

  .wiki-navextra__label {
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wine-faint);
  }

  /* Full words here. The initials exist because the navbar is narrow; inside an
     open panel there is room, and "B D R" is a puzzle where "Brief Deep Raw"
     is a choice. */
  .wiki-navextra .wiki-level__full {
    display: inline;
  }

  .wiki-navextra .wiki-level__short {
    display: none;
  }

  .wiki-navextra .wiki-level__seg {
    padding: 0.28rem 0.6rem;
  }
}

/* The left half: wordmark, hairline, breadcrumb. It sits in Nextra's logo slot,
   which is a flex child. */
.wiki-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.wiki-brand__rule {
  flex: none;
  width: 1px;
  height: 1.5rem;
  background: var(--wine-line-strong);
}

.wiki-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display), ui-serif, serif;
  font-weight: 600;
  /* Bumped from 1.05rem: at the old size the lockup read as a caption next to
     Nextra's own controls, and the official mark has to sit at a size where its
     letterforms are legible. */
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--wine-ink);
  white-space: nowrap;
}

/* Official vino.com wordmark, theme-aware (black in light, white in dark).
   Matched to the cap height of "Wiki" and centred on the same median — the
   logo carries its own "smile" descender, so it needs the small nudge to stop
   sitting low. */
.wiki-logo {
  height: 1.3rem;
  width: auto;
  display: inline-block;
  position: relative;
  top: 0.02em;
}

.wiki-logo--dark {
  display: none;
}

.dark .wiki-logo--light {
  display: none;
}

.dark .wiki-logo--dark {
  display: inline-block;
}

.wiki-crumbs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-crumbs a {
  color: var(--wine-faint);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.wiki-crumbs a:hover {
  color: var(--wine-ink);
}

.wiki-crumbs__here {
  color: var(--wine-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Below the sidebar breakpoint there is no room for it: the wordmark, the
   breadcrumb and the search end up on top of each other. Nothing is lost —
   Nextra renders its own breadcrumb at the top of the article, which is what
   answers "where am I" on a phone. */
@media (max-width: 47.99rem) {
  .wiki-brand__rule,
  .wiki-crumbs {
    display: none;
  }

  /* And the lockup goes back to its old size: at 1.3rem it runs into the
     search field on a phone. */
  .wiki-wordmark {
    font-size: 1.05rem;
  }

  .wiki-wordmark .wiki-logo {
    height: 1.05rem;
  }
}

/* The search stops being an afterthought pinned to the right and becomes the
   middle of the navbar.

   This is the one rule that reaches into the theme's own DOM, so it is written
   against what nextra 4.6 actually renders: `.nextra-search` is NOT the flex
   item — it sits inside an unnamed wrapper div, and the brand link carries
   `me-auto`, which eats the free space before any `flex-grow` can. Both have to
   be addressed or the search stays pinned right. Re-check after a theme
   upgrade; the failure mode is cosmetic, not broken. */
@media (min-width: 48rem) {
  /* Only where the breadcrumb exists: it needs a shrinkable box so a long page
     title ellipses instead of pushing the search out. Below this width the
     breadcrumb is hidden and the same rule would let the WORDMARK shrink and
     spill over the search field. */
  .wiki-brand {
    min-width: 0;
  }

  /* Only where there IS a search to centre. The nav is `justify-end`, so the
     brand's own `me-auto` is the single thing holding the wordmark on the left;
     dropping it unconditionally would send the wordmark to the right on the
     home, which is the one page that renders no navbar search. */
  .nextra-navbar nav:has(.nextra-search) > a:first-of-type {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }

  .nextra-navbar nav > div:has(> .nextra-search) {
    flex: 1 1;
    display: flex;
    justify-content: center;
  }

  .nextra-navbar .nextra-search {
    width: min(26rem, 100%);
  }

  .nextra-navbar .nextra-search input {
    width: 100%;
  }
}

/* The field itself, at every width. nextra-theme-docs fills its search input with
   `bg-black/[.05]` — a grey wash over the page, which on a warm background reads
   as a disabled control rather than as a place to type. The comp draws it as a
   card: the light surface, a real border, and the shortcut badge on the page
   colour behind it.

   TWO CLASSES, because the rule it has to beat is one of Tailwind's own
   utilities and which stylesheet webpack emits last is not something to bet on.
   Outside the media query above: that one only owns the width.

   AND THE HAMBURGER MENU NEEDS ITS OWN SELECTOR. Nextra renders a second
   `.nextra-search` inside the mobile nav, and that element is NOT inside
   `.nextra-navbar` — it is a sibling of the header, so a rule scoped to the
   navbar leaves the phone with the theme's grey field. Checked on the built
   HTML: two instances, one in each place. The hero search on the home is a
   third, and it must NOT match — it has a look of its own. */
.nextra-navbar .nextra-search input,
.nextra-mobile-nav .nextra-search input {
  padding: 7px 11px;
  font-size: 0.88rem;
  color: var(--wine-ink);
  background: var(--wine-bg-2);
  border: 1px solid var(--wine-line-strong);
  border-radius: 9px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.nextra-navbar .nextra-search input::placeholder,
.nextra-mobile-nav .nextra-search input::placeholder {
  color: var(--wine-faint);
  opacity: 1;
}

.nextra-navbar .nextra-search input:focus,
.nextra-mobile-nav .nextra-search input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--wine-garnet) 45%, var(--wine-line-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine-garnet) 14%, transparent);
}

/* The badge sits ON the field, so it needs the page colour to read as raised.
   The theme gives it `bg-nextra-bg`, which is the same value — kept explicit
   because the field under it is no longer the theme's grey. */
.nextra-navbar .nextra-search kbd,
.nextra-mobile-nav .nextra-search kbd {
  background: var(--wine-bg);
}

/* ---------- The map pill ----------
   Sixth element of a strip that already holds the lockup, the breadcrumb, the
   search, the reading level and the chip. An outlined pill and not a filled
   one: filled would make it the primary action of every page, which it is not —
   it is the way out of the page you are on.

   The count is mono and faint, one step below the label: two numbers that
   qualify the word beside them, in the same voice the rail's per-area counts
   and the map's own tally already use.

   IT IS THE FIRST THING TO GO WHEN THE NAVBAR NARROWS, at 1100px — before the
   others start giving up width. Below that the map is still in the footer, in
   the rail and at its own URL; a search field squeezed to nothing would not be.
   `flex: none` and `nowrap` keep it whole above that width, so the number never
   wraps under the label. */
.wiki-maplink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.35rem 0.7rem 0.35rem 0.6rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 999px;
  color: var(--wine-ink);
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 0.18s ease,
    color 0.18s ease;
}

/* The wine tint is on the BORDER, mixed into the line token rather than
   replacing it: the pill lights up at its edge and its text stays ink, which
   is what keeps it from reading as a link the way a garnet label would. */
.wiki-maplink:hover {
  border-color: color-mix(in srgb, var(--wine-garnet) 45%, var(--wine-line-strong));
  color: var(--wine-ink);
}

.wiki-maplink__label {
  font-size: 0.86rem;
}

.wiki-maplink__count {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--wine-faint);
}

@media (max-width: 68.75rem) {
  .wiki-maplink {
    display: none;
  }
}

/* =========================================================================
   Sidebar — the navigation rail

   Nextra's own sidebar is a tree of collapsible folders with a filled pill on
   the active item. This turns it into the design's rail: areas as quiet
   typographic headers with a page count, pages as a flat list carrying a
   validation dot, and the open page joined to the article surface.

   Everything here is scoped to `min-width: 48rem`, which is where the desktop
   sidebar lives — below it `.nextra-sidebar` is hidden (see the responsive
   fallback further down) and navigation happens in `.nextra-mobile-nav`, a
   separate element these rules deliberately leave alone: a rail treatment
   makes no sense in a full-screen menu.

   Two mechanics worth stating outright, because both look like mistakes:

   - `!important` on colour, background and weight. The theme's own utilities
     carry dark-mode variants (`.dark .x\:dark\:hover\:bg-primary-100\/5:hover`)
     whose specificity is out of reach of a sane selector here. The alternative
     is a specificity arms race in every rule.
   - the rail's right-hand divider is an INSET SHADOW, not a border. The active
     entry has to paint over that 1px to merge with the page, and it can only
     do that inside the scroll box: a real border sits outside the padding box,
     where `overflow: auto` clips anything reaching for it.
   ========================================================================= */

@media (min-width: 48rem) {
  .nextra-sidebar {
    background: var(--wine-rail);
    /* Second shadow: the layout is a centred max-width container, so on a wide
       screen the rail would end in mid-air. This floods everything to its left
       with the same shade, and the rail reads as one surface to the edge of the
       viewport. */
    box-shadow:
      inset -1px 0 0 0 var(--wine-line),
      -100vw 0 0 0 var(--wine-rail);
  }

  /* The scroll box. Its right padding is what the active entry's negative
     margin below cancels out — the two numbers have to stay equal. */
  .nextra-sidebar > .nextra-scrollbar {
    padding: 1.5rem 1rem 2.5rem 1.25rem;
  }

  .nextra-sidebar ul {
    gap: 0.15rem;
  }

  /* Children sit flush under their area header: Nextra's indent and vertical
     guide line say "nesting", and one level of nesting doesn't need saying. */
  .nextra-sidebar ul ul {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }

  .nextra-sidebar ul ul::before {
    display: none;
  }

  .nextra-sidebar li:has(> button) {
    margin-top: 1.4rem;
  }

  .nextra-sidebar li:first-child {
    margin-top: 0;
  }

  /* ---------- Area header ---------- */

  /* An eyebrow that is also a control. It is styled as the label the design
     asks for, and it keeps the theme's chevron — which used to be hidden here,
     on the argument that with every area open by default an arrow promised
     nothing. Areas now start folded (see `sidebar` in layout.tsx), so the arrow
     is the only thing on the row that says the fold can be undone: a label with
     a count and no glyph reads as a heading for a list that isn't there. */
  .nextra-sidebar li > button {
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    padding-inline: 0;
    background: none !important;
    color: var(--wine-faint) !important;
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 400 !important;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .nextra-sidebar li > button:hover {
    color: var(--wine-ink) !important;
  }

  /* The disclosure triangle. `order: -1` puts it before the label — the
     conventional place for one, and it leaves the hairline (`order: 2`) and the
     count (`order: 3`) undisturbed. Nextra renders it at `height="18"`, which
     next to a 0.62rem eyebrow reads as a button rather than a mark; it is
     scaled down here and inherits the label's colour, including the hover.
     Rotation is the theme's own: it adds `rotate-90` while the area is open. */
  .nextra-sidebar li > button > svg {
    order: -1;
    width: 0.72rem;
    height: 0.72rem;
    -webkit-margin-start: -0.1rem;
            margin-inline-start: -0.1rem;
    padding: 0;
    /* The theme gives the glyph a hover fill of its own (`hover:bg-gray-800/5`,
       out of specificity reach — see the note at the top of this section). Two
       hover targets on one row imply two actions, and there is only one: the
       whole header toggles the fold. */
    background: none !important;
    opacity: 0.75;
  }

  /* The hairline that carries the eye from the area name to its count. `order`
     works because the button is a flex container and pseudo-elements are flex
     items in it. */
  .nextra-sidebar li > button::after {
    content: "";
    order: 2;
    flex: 1 1;
    height: 1px;
    background: var(--wine-line);
  }

  /* The count itself has no `content` here: it is a number that only the page
     map knows, and it arrives from src/components/sidebar-marks.tsx. Without
     that rule this pseudo-element never generates, which is the intended
     degradation. */
  .nextra-sidebar li > button::before {
    order: 3;
    color: var(--wine-faint);
    opacity: 0.7;
  }

  /* ---------- Page entry ---------- */

  .nextra-sidebar li > a {
    align-items: center;
    gap: 0.55rem;
    /* Cancels the entry's own padding so its text aligns with the area label
       above it, which has none. */
    margin-left: -0.5rem;
    padding: 0.32rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: none !important;
    color: var(--wine-muted) !important;
    font-size: 0.865rem;
    font-weight: 400 !important;
    line-height: 1.3;
  }

  .nextra-sidebar li > a:hover {
    background: var(--wine-panel) !important;
    color: var(--wine-ink) !important;
  }

  /* The validation dot. Hollow is the default and needs no data — a page nobody
     has vouched for is the normal case, and the wiki says so everywhere else
     too. The filled state is added by route in sidebar-marks.tsx. */
  .nextra-sidebar li > a::before {
    content: "";
    flex: none;
    width: 0.4rem;
    height: 0.4rem;
    border: 1px solid var(--wine-line-strong);
    border-radius: 999px;
  }

  /* The open page takes the ARTICLE's background and gives up its right border,
     so the rail opens into the page instead of holding a coloured swatch. The
     negative margin is what carries it over the inset divider; it equals the
     scroll box's right padding. The transparent right border keeps the box
     geometry unchanged while letting the background paint through to the edge. */
  .nextra-sidebar li.active > a {
    margin-right: -1rem;
    border-color: var(--wine-line-strong);
    border-right-color: transparent;
    border-radius: 9px 0 0 9px;
    background: var(--wine-bg) !important;
    color: var(--wine-ink) !important;
    font-weight: 650 !important;
  }

  /* An area whose page is open is not itself "the page you are on". Nextra
     marks both, which reads as two selections and tells the reader nothing
     about which one they are looking at. */
  .nextra-sidebar li.active > button {
    background: none !important;
    color: var(--wine-faint) !important;
  }

  /* ---------- Legend ---------- */

  /* Portalled in by src/components/sidebar-legend.tsx, into the footer the theme
     switch lives in: stacked, and above the switch. `background: none` matters —
     the theme gives this footer the PAGE background (`x:bg-nextra-bg`) so it can
     sit sticky over scrolling links, which on the rail would print a
     page-coloured band across the bottom of it. */
  .nextra-sidebar > .nextra-sidebar-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    border-color: var(--wine-line);
    background: none;
  }

  .wiki-nav-legend {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    order: -1;
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wine-faint);
  }

  .wiki-nav-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }

  .wiki-nav-legend__dot {
    width: 0.4rem;
    height: 0.4rem;
    border: 1px solid var(--wine-line-strong);
    border-radius: 999px;
  }

  .wiki-nav-legend__dot--validated {
    border-color: transparent;
    background: var(--wine-vine);
  }

  /* ---------- Breadcrumb, once ---------- */

  /* The navbar carries the breadcrumb now (`.wiki-crumbs`). Nextra's own copy
     at the top of the article repeats it about forty pixels lower, and the
     lower one is the weaker of the two: it scrolls away. Below this width the
     navbar crumb is hidden and this one is the only answer to "where am I", so
     it survives there — which is why the rule is inside the media query. */
  .nextra-breadcrumb {
    display: none;
  }
}

/* =========================================================================
   Table of contents — the summary column

   The third column of the shell, and the one part of the page chrome that was
   still wearing the theme's own clothes: a bold sans heading reading "On This
   Page", grey links, and a "Scroll to top" underneath. The title and the
   back-to-top link are dealt with in layout.tsx (`toc`); everything visual is
   here.

   Not scoped to a media query, unlike the rail: `.nextra-toc` exists only above
   1280px — Nextra hides it with `max-xl:hidden` and the responsive fallback
   further down forces the same — and it has no mobile counterpart to protect.

   The theme's DOM is three children of one sticky grid: the title `<p>`, the
   `<ul>` of entries, and a meta block holding whatever `toc.extraContent`
   renders. Nextra pads each of the three separately (`pt-6 px-4`, `p-4`,
   `py-4 mx-4`); the design pads the column once and spaces the children with a
   single gap, so those paddings are zeroed below.
   ========================================================================= */

.nextra-toc > div {
  gap: 0.85rem;
  padding: 2.5rem 1.5rem 3rem 0.5rem;
}

/* The eyebrow. Mono, because in this design mono means the wiki talking about
   the content rather than the content itself — the same voice as the area
   labels in the rail, and deliberately the same size. */
.nextra-toc > div > p {
  margin: 0;
  padding: 0;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

/* ---------- The entries ---------- */

/* The thread the active mark hangs on is a BACKGROUND, not a border: the mark
   has to cover it, and a border sits outside the padding box, where this box's
   own `overflow-y: auto` (which makes `overflow-x` compute to `auto` too) would
   clip anything reaching for it. A background also stays put while the list
   scrolls, which an absolutely positioned rule would not — it would travel up
   with the first entries and leave the bottom of the column bare.

   The inset (0.4rem, matching the block padding) is what keeps the thread from
   overshooting the first and last entry, and `padding-inline-start` is the
   distance the mark reaches back across: the two 0.85rem below are the same
   number and have to stay equal. */
.nextra-toc ul {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0.4rem 0 0.4rem 0.85rem;
  /* Longhands rather than the shorthand: four numbers that each mean something,
     and no chance of the whole declaration being dropped over the position/size
     slash. The positioning area is the padding box, so `0` is where the mark
     reaches back to and `100%` is the visible height — not the scrolled one. */
  background-image: linear-gradient(var(--wine-line), var(--wine-line));
  background-repeat: no-repeat;
  background-position: 0 0.4rem;
  background-size: 1px calc(100% - 0.8rem);
  /* Nextra fades the first and last 20px of this box (`nextra-mask`) to hint at
     the scroll. Against its own 1rem of padding that fade lands on padding;
     against the design's 0.4rem it would land on the first and last ENTRY,
     dimming a heading and cutting the thread at both ends. Same affordance,
     short enough to stay inside the padding. The `prefers-contrast` escape is
     the theme's own and has to be repeated, or overriding the mask would put
     one back for a reader who asked for none. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 6px,
    #000 calc(100% - 6px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 6px,
    #000 calc(100% - 6px),
    transparent 100%
  );
}

@media (prefers-contrast: more) {
  .nextra-toc ul {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Each row is the containing block for its own mark, so the mark is sized from
   the row rather than placed beside it: `TocPrune` hides whole `<li>`s when the
   reading level hides their heading, and a mark that were a sibling would
   outlive its row. It also means the row is free to become two lines without
   the mark having to be told. */
.nextra-toc ul li {
  position: relative;
  margin: 0;
}

/* One line per entry, clipped with an ellipsis. The column fits about 28
   characters and the headings here run to 60, so this is not a rare case: the
   summary is a skimmable column of one row per section, and the full title is
   never lost — `TocPrune` puts it on each entry's `title`, which is the half of
   this that lives in JavaScript and the reason it is not optional.

   The prototype's own comment argues the opposite (never clip a heading, wrap
   and design the wrap) while its markup does this; the markup was chosen. If it
   is ever reversed, three things go together: these three declarations, the
   `title` in `TocPrune`, and the note in DESIGN.md — the rest of the column
   already handles a two-line row, since the mark is sized from its row.

   Colours carry `!important` for the reason the rail's do: the theme's own
   utilities ship dark-mode and hover variants whose specificity is out of reach
   of a sane selector here (see the note at the top of the sidebar section). */
.nextra-toc ul a {
  display: block;
  padding: 0.1rem 0;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--wine-muted) !important;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.nextra-toc ul a:hover {
  color: var(--wine-ink) !important;
}

/* The section being read. Matched on a SUBSTRING of the theme's active class,
   which ships as `x:text-primary-600` beside a `contrast-more` variant of the
   same name. If that class ever moves, the colour and the mark stop together
   and the entry reads like its neighbours — mild, and the failure worth having
   next to a mark left pointing at nothing. */
.nextra-toc ul a[class*="text-primary-600"] {
  color: var(--wine-garnet) !important;
  font-weight: 600;
}

/* The mark belongs to the ROW, not to the link: the link carries the theme's
   depth indent (`ms-3` and deeper for `h3`+, and six pages have those), so a
   mark measured from it would sit 0.75rem to the right of the thread on every
   nested heading and read as broken. Measured from the row it stays on the
   thread, and the indent still shows in the text where it belongs. */
.nextra-toc ul li:has(> a[class*="text-primary-600"])::before {
  content: "";
  position: absolute;
  inset-inline-start: -0.85rem;
  top: 0.1rem;
  bottom: 0.1rem;
  width: 3px;
  border-radius: 999px;
  background: var(--wine-garnet);
}

/* ---------- Under the entries ---------- */

/* Nextra's meta block, where `toc.extraContent` lands. Its hairline and padding
   move onto the link itself, because the block renders whether or not anything
   is in it: `<EditThisPage>` returns null for anyone who cannot edit, which is
   most of the wiki's readers, and for them the wrapper was drawing a rule and
   two rems of empty space under the summary.

   The reset below is the half that carries the weight, and it is unconditional:
   with no border and no padding the block has no box, whether or not it holds
   anything. `:empty` only reclaims the grid's own 0.85rem gap, and it is allowed
   to be fragile — it matches in the prerendered HTML (measured: the wrapper
   ships with no children at all, every other child being switched off in
   layout.tsx), and if hydration ever left a comment node in there the cost is
   0.85rem of whitespace at the foot of a sticky column, not a stray rule. */
.nextra-toc > div > div {
  margin: 0;
  padding: 0;
  border: 0;
}

.nextra-toc > div > div:empty {
  display: none;
}

.nextra-toc .wiki-edit-link {
  margin-top: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--wine-line);
}

/* ---------- Footer ---------- */

.wiki-footer {
  width: 100%;
}

.wiki-footer__grid {
  display: grid;
  /* Three tracks, three children: brand, aree, il wiki. A fourth track is what
     was here while the footer had a "Contribuire" column — left behind, it is a
     column of dead space the eye still reads as a missing list. */
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  padding-bottom: 1.6rem;
}

.wiki-footer__brand p {
  margin: 0.55rem 0 0;
  max-width: 22rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--wine-muted);
}

.wiki-footer__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display), ui-serif, serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--wine-ink);
}

.wiki-footer__mark .wiki-logo {
  height: 1.05rem;
}

.wiki-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wiki-footer__label {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-footer__col a {
  font-size: 0.85rem;
  color: var(--wine-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.wiki-footer__col a:hover {
  color: var(--wine-ink);
}

.wiki-footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.9rem;
  border-top: 1px solid var(--wine-line);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--wine-faint);
}

@media (max-width: 60rem) {
  .wiki-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
  }
}

@media (max-width: 34rem) {
  .wiki-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Content typography (rendered MDX) ---------- */

.nextra-body-typesetting-article :where(h1, h2, h3, h4) {
  font-family: var(--font-display), ui-serif, serif;
  font-optical-sizing: auto;
  font-weight: 560;
  letter-spacing: -0.015em;
  color: var(--wine-ink);
}

.nextra-body-typesetting-article :where(h1) {
  font-weight: 600;
  letter-spacing: -0.025em;
}

.nextra-body-typesetting-article :where(a) {
  color: var(--wine-garnet);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.nextra-body-typesetting-article :where(strong) {
  color: var(--wine-ink);
  font-weight: 650;
}

/* ---------- Tables in an article ----------
   Nextra's own table is a Tailwind grid of cool greys: a border on every cell,
   `gray-300`/`gray-600` hairlines and a zebra on the even rows. That is the
   "reference API" look PRODUCT.md names as the anti-reference, and on pages that
   are mostly table — four eighteen-row bands of margin percentages — it is what
   the reader spends most of their time inside.

   The back-label treatment instead: header on a warm film with a mono label,
   body with NO cell borders and no zebra, and a single horizontal hairline
   carrying the rhythm. Fewer lines, so the numbers are what you see.

   Four things are load-bearing.

   EVERY TINT GOES THROUGH color-mix ON A WINE TOKEN, never the mock's literal
   rgba(). The comp is light-only: over `--wine-bg: #17110f` its
   `rgba(36,26,23,.035)` film is invisible. Mixed on `--wine-ink` it inverts by
   itself, because the token already flips to `#f3ebe2` in dark. Same reasoning
   as `.wiki-vis__box`, and the same reason.

   DISPLAY IS NOT TOUCHED. Nextra puts `x:block x:overflow-x-auto` on the
   `<table>` itself, so the table IS the horizontal scroll container — the only
   thing keeping the five- and six-column tables from pushing the article wider
   than the viewport. `border-spacing: 0` is therefore set as well as
   `border-collapse`: a `display: block` table lays its rows out in an anonymous
   table box, and the default 2px spacing would break the row rule into dashes.
   Both properties inherit, which is how they reach that box at all.

   THE HEADER LABEL IS `--wine-muted`, NOT the comp's faint. Faint is the token
   for labels and would have been the faithful choice, but measured against the
   header film it gives 4.63:1 in light and **4.37:1 in dark** — under the 4.5:1
   that PRODUCT.md targets for text this size. Muted reads 5.2:1 and 7.1:1, and
   is still two steps quieter than the ink in the cells, which is all the header
   needed to be.

   NOTHING IS INFERRED FROM THE CONTENT. The comp draws its numeric tables in
   mono and its prose tables with a 650 first column; MDX has no way to say which
   kind a table is, and inventing a heuristic would style the pages by accident.
   So the emphasis stays where the author put it — `**testo**` in the first cell,
   which the `strong` rule above already carries — and the alignment problem mono
   was solving is solved by `tabular-nums` instead, on every cell, with no new
   syntax to learn. */

.nextra-body-typesetting-article table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9rem;
}

.nextra-body-typesetting-article thead tr {
  background: color-mix(in srgb, var(--wine-ink) 4%, transparent);
  border: 0;
}

.nextra-body-typesetting-article thead th {
  border: 0;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wine-muted);
  text-align: left;
  white-space: nowrap;
}

/* `:nth-child(n)` is here for specificity and nothing else. The zebra is
   `.x\:even\:bg-gray-100:nth-child(even)` — a class AND a pseudo-class, so a
   plain descendant rule ties on classes and loses on source order, which is not
   something to bet on when CSS minification is off and file order is webpack's
   business. Two compound selectors beat it outright. */
.nextra-body-typesetting-article tbody tr:nth-child(n) {
  background: transparent;
  border: 0;
}

.nextra-body-typesetting-article tbody td {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--wine-line) 60%, transparent);
  padding: 0.45rem 0.9rem;
  color: var(--wine-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}

/* The row's subject. Left in the ink so the eye has a column to travel down,
   and kept on one line: the table is already a scroll container, so a label
   that would rather be wide costs a little scroll instead of two ragged lines. */
.nextra-body-typesetting-article tbody td:first-child {
  color: var(--wine-ink);
  white-space: nowrap;
}

/* ---------- Previous / next ----------
   Two cards at the foot of an article instead of two coloured links. The
   theme's pagination has no class of its own, so it is addressed by the two
   stable tokens in its class list; `x:mb-8` appears exactly once in a rendered
   page, and `nextra-border` is the theme's own name. Cosmetic failure mode:
   after a theme upgrade the links go back to looking like links. */

article [class~="nextra-border"][class~="x:mb-8"] {
  gap: 1rem;
  border-color: var(--wine-line);
}

article [class~="nextra-border"][class~="x:mb-8"] > a {
  flex: 1 1;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--wine-line);
  border-radius: 12px;
  color: var(--wine-muted);
  font-family: var(--font-display), ui-serif, serif;
  font-size: 1rem;
  font-weight: 500;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

article [class~="nextra-border"][class~="x:mb-8"] > a:hover {
  border-color: var(--wine-line-strong);
  color: var(--wine-ink);
}

/* ---------- Signature: <Inferred> — a provisional wax seal ---------- */

.wiki-inferred {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin: 1.6rem 0;
  padding: 0.95rem 1.1rem;
  border: 1px dashed color-mix(in srgb, var(--wine-garnet) 60%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--wine-garnet) 7%, transparent);
}

.wiki-inferred__seal {
  flex: none;
  margin-top: 0.1rem;
  display: inline-block;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine-garnet);
  border: 1px solid color-mix(in srgb, var(--wine-garnet) 70%, transparent);
  border-radius: 999px;
  padding: 0.24rem 0.7rem;
  transform: rotate(-3deg);
  white-space: nowrap;
}

.wiki-inferred__text {
  margin: 0;
  font-size: 0.96rem;
  color: var(--wine-ink);
}

/* ---------- Signature: <GeneratedOn> — a bottling stamp ---------- */

.wiki-vintage {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--wine-faint);
  border: 1px solid var(--wine-line);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin: -0.25rem 0 1.4rem;
}

.wiki-vintage::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wine-garnet), var(--wine-amber));
}

/* ---------- Signature: <MaintainerNote> — the back-label scheda tecnica ---- */

.wiki-maintainer-note {
  margin: 1.9rem 0;
  border: 1px solid var(--wine-line);
  border-radius: 12px;
  background: var(--wine-panel);
  overflow: hidden;
}

.wiki-maintainer-note__summary {
  cursor: pointer;
  list-style: none;
  padding: 0.7rem 1.05rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine-faint);
  transition: color 0.2s ease;
}

.wiki-maintainer-note__summary:hover {
  color: var(--wine-garnet);
}

.wiki-maintainer-note__summary::-webkit-details-marker {
  display: none;
}

.wiki-maintainer-note__summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.2s ease;
}

.wiki-maintainer-note[open] > .wiki-maintainer-note__summary::before {
  transform: rotate(90deg);
}

.wiki-maintainer-note__body {
  padding: 0.4rem 1.05rem 1.1rem;
  border-top: 1px solid var(--wine-line);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.84rem;
  color: var(--wine-muted);
}

/* ---------- Signature: <Raw> — a fragment of the back label, in place ----- */

/* Built from the two idioms already in this system: the scheda tecnica's hairline
   panel and <Inferred>'s tinted-accent surface — here in amber, since garnet is
   spoken for by <Inferred> and by links. Identity comes from the tint and the mono
   label, not from a coloured edge. */
.wiki-raw {
  margin: 1.6rem 0;
  padding: 0.8rem 1.05rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--wine-amber) 28%, var(--wine-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--wine-amber) 5%, transparent);
}

.wiki-raw__label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* muted, not faint: at this size AA wants 4.5:1, and faint clears only ~3.5:1
     on the light theme's panel. */
  color: var(--wine-muted);
}

.wiki-raw__body {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--wine-muted);
  /* fully-qualified Java paths are long: scroll the block, never the article */
  overflow-x: auto;
}

.wiki-raw__body > :first-child {
  margin-top: 0;
}

.wiki-raw__body > :last-child {
  margin-bottom: 0;
}

/* Inline form: a technical name inside a sentence. Its own class, not a modifier
   of .wiki-raw, so none of the block box above applies. */
.wiki-raw-inline {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.88em;
  padding: 0.1em 0.34em;
  border-radius: 5px;
  background: color-mix(in srgb, var(--wine-amber) 12%, transparent);
  color: var(--wine-ink);
  overflow-wrap: break-word;
}

/* =========================================================================
   Livelli di lettura — Brief / Deep / Raw
   ========================================================================= */

/* The filter itself.

   `data-level` is written on <html> by the pre-paint script (see
   src/components/reading-level-script.tsx) BEFORE the first paint, which is the
   whole reason this is CSS and not a React condition: a Brief reader must never
   see Deep prose appear and then vanish.

   The levels are cumulative — raw shows everything, deep hides raw, brief hides
   both. Content hidden here is STILL IN THE HTML and still in the Pagefind
   index: the cap is soft by decision. Anyone reading these rules as an access
   control has misread them. */

html[data-level="brief"] [data-wiki-level="deep"],
html[data-level="brief"] [data-wiki-level="raw"],
html[data-level="deep"] [data-wiki-level="raw"] {
  display: none;
}

/* <Deep> is the one marker with no visual form of its own — it must be
   invisible to the spacing too, and by default it isn't.

   Nextra spaces prose with `not-first:mt-[1.25em]`: "top margin unless I am the
   first child". <Deep> used to render a fragment, so its first paragraph stayed
   a child of the article and kept that margin. Wrapped in a <div> it becomes a
   first child, the utility declines, and every Deep block sits flush against
   the prose above it. Measured on the built HTML: 16 of the 19 block wrappers
   open on a <p> or a <ul>, both of which lose exactly 1.25em.

   Putting the margin on the WRAPPER rather than on the child lets margin
   collapsing do the arithmetic. The wrapper has no border or padding, so its
   top margin collapses with its first child's and the larger wins: 1.25em for a
   paragraph, and the untouched 2.5rem for the three blocks that open on an <h2>
   (headings carry an unconditional `mt-10`, so re-applying 1.25em to them
   directly would have SHRUNK the gap).

   The value is coupled to Nextra's. If the theme's prose rhythm ever changes,
   this is the line that has to follow it. */
[data-wiki-level="deep"]:not(:first-child) {
  margin-top: 1.25em;
}

/* ---------- The navbar control ----------
   A segmented control, not a cycling button: three levels are worth showing at
   once, and a segment beyond someone's cap has to be visible-but-spent, or they
   don't know there is anything to ask an admin for. */

/* The segmented control, shared: reading level in the navbar, theme in the user
   menu. Same shape because they are the same kind of choice — a handful of
   options, all of them worth showing at once. */
.wiki-level,
.wiki-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--wine-line);
  border-radius: 999px;
  background: var(--wine-panel);
}

/* Same trick as the user chip: hold the space until the control knows the cap,
   so the navbar doesn't reflow when it arrives after hydration.

   The width follows the CAP, because the control offers only the levels the
   reader can reach: three segments at Raw, two at Deep, and at Brief no control
   at all. `html[data-level-cap]` is written by the pre-paint script for exactly
   this — the placeholder ships in the server HTML and has no JavaScript of its
   own to consult. The default is the three-segment case, which is also what an
   unrecognised value falls back to.

   Every width here is MEASURED on a production build with the real IBM Plex Mono
   loaded, not estimated — the segments are monospace and their width does not
   survive a font fallback. The previous single value was 11.4rem against a
   three-segment control of 9.44rem, so the navbar has been jumping ~31px on
   every page load; these numbers close that too. Re-measure rather than adjust
   by eye if the label text, the padding or the font changes. */
.wiki-level--empty {
  width: 9.45rem;
  height: 1.85rem;
  border-color: transparent;
  background: none;
}

html[data-level-cap="deep"] .wiki-level--empty {
  width: 6.82rem;
}

/* One level is not a choice, so there is no control and nothing to hold space
   for. Without this the navbar would reserve a gap that then collapses. */
html[data-level-cap="brief"] .wiki-level--empty {
  display: none;
}

@media (max-width: 1023px) {
  .wiki-level--empty {
    width: 4.63rem;
  }

  html[data-level-cap="deep"] .wiki-level--empty {
    width: 3.17rem;
  }
}

.wiki-level__seg,
.wiki-seg__btn {
  padding: 0.28rem 0.6rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine-faint);
  cursor: pointer;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.wiki-level__seg:hover:not([aria-pressed="true"]),
.wiki-seg__btn:hover:not([aria-pressed="true"]) {
  color: var(--wine-ink);
}

/* Raised rather than tinted: the same move the active sidebar entry makes,
   where the open thing takes the reading surface. Garnet is spoken for by
   <Inferred> and by links — one more accent here would be noise. */
.wiki-level__seg[aria-pressed="true"],
.wiki-seg__btn[aria-pressed="true"] {
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

/* No rule for a spent segment, because there are no spent segments: the control
   offers only the levels the reader can reach. The rule that used to be here was
   dead anyway — it keyed off `:disabled`, and the component set `aria-disabled`,
   which that selector cannot match. */

/* Initials on narrower viewports. Same shape, just shorter — a second
   interaction model for the phone would cost more than it saves. */
.wiki-level__short {
  display: none;
}

@media (max-width: 1023px) {
  .wiki-level__full {
    display: none;
  }

  .wiki-level__short {
    display: inline;
  }

  .wiki-level__seg {
    padding: 0.28rem 0.45rem;
  }
}

/* ---------- In-article notices ----------
   Two cases, one form: "this page is empty at your level" and "the passage you
   searched for is deeper than your level". Both are the honesty principle
   applied to navigation rather than to content — say it, don't let it just be
   missing. The amber side-rule is the quiet form already used by
   .wiki-open-question. */

.wiki-level-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.8rem;
  margin: 1.4rem 0;
  padding: 0.7rem 0 0.7rem 0.95rem;
  border-left: 2px solid color-mix(in srgb, var(--wine-amber) 55%, transparent);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--wine-muted);
}

.wiki-level-notice__text {
  flex: 1 1 16rem;
}

.wiki-level-notice__text strong {
  font-weight: 550;
  color: var(--wine-ink);
}

.wiki-level-notice__action {
  flex: none;
  padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--wine-amber) 40%, var(--wine-line));
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine-ink);
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.wiki-level-notice__action:hover {
  background: color-mix(in srgb, var(--wine-amber) 10%, transparent);
  border-color: var(--wine-amber);
}

/* ---------- Provenance sha ----------
   The commit the page was generated from. Raw level: at Brief and Deep the
   "Aggiornato" stamp keeps the date, which is product information — the sha is
   a code reference like any other. Rendered from the route, not from
   <GeneratedOn>, which receives no page metadata. */

.wiki-source-sha {
  display: block;
  margin: -1.2rem 0 1.6rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--wine-faint);
}

/* =========================================================================
   Landing page
   ========================================================================= */

/* The landing runs edge to edge: its bands carry their own inner max-width, so
   the article's padding has to come off, or the tinted band stops short of the
   viewport and reads as a misaligned box.

   The padded element is the <article> nextra-theme-docs renders — a Tailwind
   class list we don't own — and the landing sits two levels inside it, hence
   the descendant :has(). Failure mode if the theme moves that padding: a
   landing with ordinary article margins, which is merely less striking. */
article:has(.wiki-landing) {
  --wiki-gutter: clamp(1.4rem, 4vw, 3rem);
  padding-inline: 0;
  padding-bottom: 0;
}

/* Whatever the route renders above the landing — the level notices — keeps the
   gutter the article just gave up, or it would sit flush against the edge. */
article:has(.wiki-landing) > main > :not(.wiki-landing) {
  padding-inline: var(--wiki-gutter);
}

.wiki-landing {
  --wiki-band: 96rem;
  /* Repeated rather than inherited from the rule above: if :has() ever stops
     matching, the bands must still have their own gutter. */
  --wiki-gutter: clamp(1.4rem, 4vw, 3rem);
}

/* ---------- Hero: the question, and the field that answers it ---------- */

.wiki-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.5rem, 7vw, 5rem) var(--wiki-gutter) clamp(2.5rem, 5vw, 3.6rem);
}

.wiki-hero__title {
  font-family: var(--font-display), ui-serif, serif;
  font-optical-sizing: auto;
  font-weight: 560;
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  line-height: 1.03;
  letter-spacing: -0.032em;
  color: var(--wine-ink);
  margin: 0 0 1.9rem;
  text-align: center;
  max-width: 22ch;
  text-wrap: balance;
}

/* The search is the page, not a field in the corner — so it gets the width of a
   paragraph and the wine spectrum on its edge. Everything below is written
   against what nextra 4.6 renders inside `.nextra-search`: a combobox whose
   input is sized `w-64` on desktop and whose ⌘K badge is pinned to the end.
   Both assumptions are cosmetic if they break — re-check after a theme bump. */
.wiki-hero__search {
  width: min(44rem, 100%);
}

.wiki-hero__search .nextra-search {
  width: 100%;
}

.wiki-hero__search .nextra-search input {
  width: 100%;
  padding: 0.9rem 1.2rem;
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--wine-ink);
  border: 1px solid transparent;
  border-radius: 14px;
  /* Two-layer trick: the fill paints to the padding edge, the gradient only to
     the border edge. A plain `border-image` would lose the rounded corners. */
  background:
    linear-gradient(var(--wine-bg-2), var(--wine-bg-2)) padding-box,
    linear-gradient(120deg, var(--wine-garnet), var(--wine-amber)) border-box;
  box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--wine-ink) 60%, transparent);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wiki-hero__search .nextra-search input::placeholder {
  color: var(--wine-faint);
  opacity: 1;
}

.wiki-hero__search .nextra-search input:focus {
  outline: none;
  box-shadow:
    0 18px 40px -26px color-mix(in srgb, var(--wine-garnet) 70%, transparent),
    0 0 0 3px color-mix(in srgb, var(--wine-garnet) 18%, transparent);
}

/* The theme centres its shortcut badge against a 2.2rem input; this one is half
   again as tall, so the badge has to be re-centred rather than inherit a margin
   tuned for another size. */
.wiki-hero__search .nextra-search kbd {
  margin-block: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inset-inline-end: 0.7rem;
  background: var(--wine-bg);
}

.wiki-hero__search .nextra-search-results {
  text-align: start;
}

/* ---------- Bands ---------- */

.wiki-band {
  border-top: 1px solid var(--wine-line);
}

.wiki-band--tinted {
  background: var(--wine-panel);
}

.wiki-band__inner {
  max-width: var(--wiki-band);
  margin: 0 auto;
  padding: 2.6rem var(--wiki-gutter) 3.2rem;
}

/* The mono label with a hairline running off to the right: the wiki's own
   section marker, used here instead of a heading because these two bands are
   furniture, not content someone links to. */
.wiki-rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.3rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-rule__line {
  flex: 1 1;
  height: 1px;
  background: var(--wine-line);
}

.wiki-rule__aside {
  flex: none;
}

/* ---------- Area cards ---------- */

.wiki-areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 1.1rem;
  gap: 1.1rem;
}

.wiki-area-card {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.5rem 1.2rem;
  border: 1px solid var(--wine-line);
  border-radius: 14px;
  background: var(--wine-card);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.wiki-area-card:hover,
.wiki-area-card:focus-visible {
  border-color: color-mix(in srgb, var(--wine-garnet) 45%, var(--wine-line));
  background: var(--wine-card-hover);
  transform: translateY(-2px);
}

.wiki-area-card__head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.45rem;
}

.wiki-area-card__title {
  font-family: var(--font-display), ui-serif, serif;
  font-size: 1.3rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  color: var(--wine-ink);
}

.wiki-area-card__count {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-area-card__desc {
  display: block;
  /* Reserves two lines so the page lists below start on the same baseline
     across the row, however long each blurb is. */
  min-height: 2.9rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--wine-muted);
  margin-bottom: 1.1rem;
  text-wrap: pretty;
}

.wiki-area-card__pages {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--wine-line);
}

.wiki-area-card__page {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  font-size: 0.88rem;
  color: var(--wine-muted);
}

.wiki-area-card__page-title {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wiki-area-card__state {
  flex: none;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-area-card__more {
  padding: 0.3rem 0;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

/* The same three states the rail uses, at card size. "Indice" is a fainter ring
   than "non validata" on purpose: an area's overview is a list of pages, not an
   unverified claim waiting for someone. */
.wiki-dot {
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
}

.wiki-dot--ok {
  background: var(--wine-vine);
}

.wiki-dot--open {
  border: 1px solid var(--wine-line-strong);
}

.wiki-dot--index {
  border: 1px solid var(--wine-line);
}

/* ---------- How to read a page ---------- */

.wiki-read {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-gap: 3.5rem;
  gap: 3.5rem;
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}

.wiki-read__lede {
  margin: 0 0 1.6rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--wine-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.wiki-markers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wiki-marker {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  align-items: start;
}

.wiki-marker__tag {
  justify-self: start;
  margin-top: 0.1rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Each tag wears the form of the block it stands for, shrunk: the dashed garnet
   seal of <Inferred>, the bare amber of an open question, the solid vine ring
   of something a person signed off. Legend and page have to look alike or the
   legend teaches nothing. */
.wiki-marker__tag--inferred {
  color: var(--wine-garnet);
  border: 1px dashed color-mix(in srgb, var(--wine-garnet) 60%, transparent);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
}

.wiki-marker__tag--open {
  color: var(--wine-amber);
}

.wiki-marker__tag--validated {
  color: var(--wine-vine);
  border: 1px solid color-mix(in srgb, var(--wine-vine) 60%, transparent);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
}

.wiki-marker__desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--wine-muted);
  text-wrap: pretty;
}

/* ---------- "Quanto è solido" ---------- */

.wiki-solidity {
  display: flex;
  flex-direction: column;
  align-self: start;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid var(--wine-line);
  border-radius: 14px;
  background: var(--wine-rail);
}

.wiki-solidity__label {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wine-faint);
  margin-bottom: 1rem;
}

.wiki-solidity__bar {
  display: flex;
  height: 0.45rem;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.9rem;
}

.wiki-solidity__seg--vine {
  background: var(--wine-vine);
}

.wiki-solidity__seg--open {
  background: color-mix(in srgb, var(--wine-ink) 12%, transparent);
}

.wiki-solidity__rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--wine-muted);
}

.wiki-solidity__row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.wiki-solidity__row .wiki-dot {
  width: 0.45rem;
  height: 0.45rem;
}

.wiki-solidity__row strong {
  color: var(--wine-ink);
  font-weight: 650;
}

.wiki-solidity__unavailable {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--wine-muted);
}

.wiki-solidity__link {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--wine-line);
  font-size: 0.86rem;
  color: var(--wine-muted);
  text-decoration: none;
}

.wiki-solidity__link:hover {
  color: var(--wine-garnet);
}

/* ---------- Narrow ---------- */

@media (max-width: 1080px) {
  .wiki-read {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.2rem;
  }
}

@media (max-width: 820px) {
  .wiki-areas {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .wiki-area-card__desc {
    min-height: 0;
  }

  .wiki-marker {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }
}

/* =========================================================================
   Login — the front door. A full-screen overlay (own background, above the
   docs chrome) so the gate never shows navbar/search/footer around it.
   ========================================================================= */

.wiki-login {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: auto;
  background-color: var(--wine-bg);
  background-image:
    radial-gradient(58% 46% at 12% 0%, var(--wine-glow-1), transparent 66%),
    radial-gradient(52% 44% at 100% 100%, var(--wine-glow-2), transparent 64%);
}

.wiki-login__card {
  position: relative;
  width: min(100%, 24rem);
  padding: 2.4rem 2rem 1.9rem;
  border: 1px solid var(--wine-line);
  border-radius: 18px;
  background: var(--wine-card);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

.wiki-login__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--wine-garnet),
    var(--wine-amber),
    transparent
  );
}

.wiki-login__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display), ui-serif, serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--wine-ink);
}

.wiki-login__brand .wiki-logo {
  height: 1.15rem;
}

.wiki-login__title {
  font-family: var(--font-display), ui-serif, serif;
  font-optical-sizing: auto;
  font-size: 1.6rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  color: var(--wine-ink);
  margin: 1.5rem 0 0.4rem;
}

.wiki-login__sub {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--wine-muted);
  margin: 0;
}

.wiki-login__form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.wiki-login__input {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 10px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.95rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.wiki-login__input::placeholder {
  color: var(--wine-faint);
}

.wiki-login__input:focus {
  outline: none;
  border-color: var(--wine-garnet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine-garnet) 22%, transparent);
}

.wiki-login__btn {
  padding: 0.72rem 1rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--wine-btn-1), var(--wine-btn-2));
  color: #fff;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.wiki-login__btn:hover {
  transform: translateY(-1px);
  filter: saturate(1.1) brightness(1.04);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--wine-garnet) 70%, transparent);
}

.wiki-login__error {
  margin: 0.1rem 0 0;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.82rem;
  color: var(--wine-garnet);
}

.wiki-login__foot {
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--wine-line);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--wine-faint);
}

/* =========================================================================
   Responsive fallback
   Nextra hides the desktop sidebar/TOC on small screens with utilities like
   `.x:max-md:hidden { @media (width < 48rem) { display:none } }` — a nested
   range-media construct that isn't applied on some browsers, leaving the full
   3-column desktop layout on phones (sidebar + TOC crush the content to a
   one-letter-wide column). Force the collapse with plain, universally
   supported top-level media queries. Mobile navigation still works via the
   hamburger (nextra-mobile-nav), which is separate from the desktop sidebar.
   ========================================================================= */

@media (max-width: 767px) {
  .nextra-sidebar {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .nextra-toc {
    display: none !important;
  }
}

/* ---------- Quality floor ---------- */

:focus-visible {
  outline: 2px solid var(--wine-garnet);
  outline-offset: 3px;
  border-radius: 3px;
}

/* =========================================================================
   Login — Google button and separator, alongside the password form.
   ========================================================================= */

.wiki-login__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  padding: 0.72rem 1rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 10px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.95rem;
  font-weight: 550;
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.wiki-login__google:hover {
  transform: translateY(-1px);
  border-color: var(--wine-line-strong);
  background: var(--wine-card-hover);
}

.wiki-login__google-mark {
  width: 18px;
  height: 18px;
  flex: none;
}

.wiki-login__sep {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.15rem 0 -0.35rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-login__sep::before,
.wiki-login__sep::after {
  content: "";
  flex: 1 1;
  height: 1px;
  background: var(--wine-line);
}

.wiki-login__label {
  margin-bottom: -0.35rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

/* =========================================================================
   Navbar user chip — a client component (see src/components/user-menu.tsx):
   reading the session server-side here would make every MDX page dynamic and
   silently kill the Pagefind index.
   ========================================================================= */

.wiki-user {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
}

/* Reserves the chip's footprint while /api/me is in flight, so the navbar
   doesn't reflow when it arrives after hydration. */
.wiki-user--empty {
  width: 1.85rem;
  height: 1.85rem;
}

.wiki-user__chip {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wine-btn-1), var(--wine-btn-2));
  color: #fff;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wiki-user__chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--wine-garnet) 75%, transparent);
}

.wiki-user__menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 60;
  min-width: 13.5rem;
  padding: 0.4rem;
  border: 1px solid var(--wine-line);
  border-radius: 12px;
  background: var(--wine-bg-2);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.6);
}

.wiki-user__id {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.6rem 0.6rem;
  border-bottom: 1px solid var(--wine-line);
  margin-bottom: 0.3rem;
}

.wiki-user__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--wine-ink);
}

.wiki-user__email {
  font-size: 0.78rem;
  color: var(--wine-muted);
  overflow-wrap: anywhere;
}

.wiki-user__role {
  margin-top: 0.25rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

/* The theme, in the user menu. It is here rather than in the rail because the
   home has no rail — and the home is the page everybody lands on, so the one
   surface that works everywhere at this width is the menu behind the chip.
   Below `md` the hamburger carries Nextra's own switch and this row goes away;
   two theme controls at once would be two places to disagree. */
.wiki-user__theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.35rem;
  padding: 0.5rem 0.6rem 0.15rem;
  border-top: 1px solid var(--wine-line);
}

.wiki-user__themelabel {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

@media (max-width: 767px) {
  .wiki-user__theme {
    display: none;
  }
}

/* Nextra's own switch, in the DESKTOP rail only. Hidden there, not everywhere:
   below `md` the same element is the theme control inside the hamburger, and it
   is the one that still works for a reader who isn't signed in — the user menu
   does not exist for them. The `title` is Nextra's, hardcoded and untranslated;
   if upstream ever changes it this rule stops matching and the switch comes
   back in the rail, which is visible rather than silent. */
@media (min-width: 48rem) {
  .nextra-sidebar .nextra-sidebar-footer > button[title="Change theme"] {
    display: none;
  }
}

.wiki-user__item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--wine-ink);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.87rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.wiki-user__item:hover {
  background: var(--wine-panel);
}

/* Download, in the user menu. Grouped under an eyebrow because the three items
   are one thing at three sizes — ungrouped they read as three unrelated
   commands sitting between "Gestione utenti" and the theme. No icons: the
   editor's toolbar and the map pill are the exceptions DESIGN.md makes, and
   this menu is words. */
.wiki-user__group {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--wine-line);
}

.wiki-user__grouplabel {
  display: block;
  padding: 0 0.6rem 0.3rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

/* =========================================================================
   Admin — user management. Lives inside the docs chrome, so it inherits the
   page width and only styles its own content.
   ========================================================================= */

/* Nextra renders this route's children raw — no article container and no
   sidebar, unlike the MDX pages — so the page has to supply its own gutter and
   measure, or it sits flush against the window edge. */
.wiki-admin {
  max-width: 58rem;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 5rem;
}

.wiki-admin__head {
  margin-bottom: 1.9rem;
}

.wiki-admin__eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine-amber);
}

.wiki-admin__title {
  margin: 0;
  font-family: var(--font-display), ui-serif, serif;
  font-optical-sizing: auto;
  font-size: 2rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  color: var(--wine-ink);
}

.wiki-admin__sub {
  max-width: 46rem;
  margin: 0.7rem 0 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--wine-muted);
}

.wiki-users__msg {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--wine-line-strong);
  font-size: 0.88rem;
  line-height: 1.5;
}

.wiki-users__msg.is-error {
  border-color: color-mix(in srgb, var(--wine-garnet) 45%, transparent);
  background: color-mix(in srgb, var(--wine-garnet) 9%, transparent);
  color: var(--wine-garnet);
}

.wiki-users__msg.is-ok {
  border-color: color-mix(in srgb, var(--wine-vine) 45%, transparent);
  background: color-mix(in srgb, var(--wine-vine) 9%, transparent);
  color: var(--wine-vine);
}

.wiki-users__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--wine-line);
}

.wiki-users__count {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-users__add,
.wiki-users__submit {
  padding: 0.55rem 0.95rem;
  border: none;
  border-radius: 9px;
  background: linear-gradient(120deg, var(--wine-btn-1), var(--wine-btn-2));
  color: #fff;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.wiki-users__add:hover,
.wiki-users__submit:hover {
  transform: translateY(-1px);
  filter: saturate(1.1) brightness(1.04);
}

.wiki-users__add:disabled,
.wiki-users__submit:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.wiki-users__submit--danger {
  background: var(--wine-garnet);
}

.wiki-users__form {
  margin-top: 1.1rem;
  padding: 1.1rem;
  border: 1px solid var(--wine-line);
  border-radius: 12px;
  background: var(--wine-panel);
}

.wiki-users__form-note {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--wine-muted);
}

.wiki-users__form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  grid-gap: 0.85rem;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.wiki-users__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.wiki-users__field > span {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-users__field input,
.wiki-users__field select,
.wiki-users__field textarea {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 9px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.9rem;
}

.wiki-users__field textarea {
  resize: vertical;
  line-height: 1.5;
}

.wiki-users__field input:focus,
.wiki-users__field select:focus,
.wiki-users__field textarea:focus {
  outline: none;
  border-color: var(--wine-garnet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine-garnet) 20%, transparent);
}

.wiki-users__field--full {
  grid-column: 1 / -1;
}

/* The LIST owns the columns, and each row inherits them via subgrid — otherwise
   every <li> is an independent grid and the controls land at a different x on
   every row, depending on whether that user has badges. Only the identity column
   flexes; if the role column were also fr, the free space would split between
   the two and open a gap in the middle of the row instead of pushing the
   controls to the right edge. */
.wiki-users__list {
  display: grid;
  /* avatar · identity · marks · role · reading cap · download · status · actions */
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wiki-users__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  grid-gap: 0.9rem;
  gap: 0.9rem;
  padding: 0.85rem 0.2rem;
  border-bottom: 1px solid var(--wine-line);
}

/* Without subgrid the rows fall back to sizing themselves — misaligned across
   rows, but never broken. */
@supports not (grid-template-columns: subgrid) {
  .wiki-users__list {
    display: block;
  }

  .wiki-users__row {
    grid-column: auto;
    /* avatar · identity · marks · role · reading cap · download · status · actions */
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto auto;
  }
}

.wiki-users__row.is-disabled {
  opacity: 0.55;
}

.wiki-users__avatar {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wine-btn-1), var(--wine-btn-2));
  color: #fff;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
}

.wiki-users__identity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.wiki-users__identity .wiki-users__name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--wine-ink);
}

.wiki-users__self {
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: var(--wine-panel);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-users__email {
  font-size: 0.8rem;
  color: var(--wine-muted);
  overflow-wrap: anywhere;
}

.wiki-users__marks {
  display: flex;
  gap: 0.35rem;
}

.wiki-users__mark {
  padding: 0.15rem 0.42rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 999px;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wine-faint);
  white-space: nowrap;
}

.wiki-users__role select {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--wine-line);
  border-radius: 8px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.82rem;
}

/* The download flag. Same pill vocabulary as the status button beside it, so
   the two read as one row of switches rather than a control and a form field. */
.wiki-users__export {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wine-faint);
  white-space: nowrap;
  cursor: pointer;
}

.wiki-users__export input {
  accent-color: var(--wine-vine);
  cursor: pointer;
}

.wiki-users__export:has(input:checked) {
  color: var(--wine-vine);
}

/* An admin row: forced on, not clickable, and it says "sempre". The column is
   ignored for admins by `canExportContent`, so an ordinary unticked box here
   would be the wrong information with nothing to signal it. Not greyed to
   invisibility — a disabled control nobody can read is the mistake the reading
   level control already made once. */
.wiki-users__export.is-implied {
  cursor: default;
}

.wiki-users__export.is-implied input {
  cursor: default;
  opacity: 0.55;
}

/* A checkbox inside the "add user" form, whose fields are all
   label-above-control. It has to undo three of that group's declarations
   (padding, border, background) or the browser draws the tick inside a text
   input's box; and the caption is sentence case rather than the mono eyebrow
   the other fields use, because it is a whole sentence and not a field name. */
.wiki-users__field--check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  align-self: end;
  padding-bottom: 0.6rem;
}

.wiki-users__field--check input {
  padding: 0;
  border: none;
  background: none;
  accent-color: var(--wine-vine);
  cursor: pointer;
}

.wiki-users__field--check > span {
  font-family: var(--font-sans), sans-serif;
  font-size: 0.85rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--wine-muted);
}

.wiki-users__status {
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 999px;
  background: none;
  color: var(--wine-faint);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.wiki-users__status.is-active {
  border-color: color-mix(in srgb, var(--wine-vine) 55%, transparent);
  color: var(--wine-vine);
}

.wiki-users__actions {
  display: flex;
  gap: 0.55rem;
  white-space: nowrap;
}

.wiki-users__link {
  padding: 0.25rem 0;
  border: none;
  background: none;
  color: var(--wine-muted);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: var(--wine-line-strong);
          text-decoration-color: var(--wine-line-strong);
  cursor: pointer;
  transition: color 0.15s ease;
}

.wiki-users__link:hover {
  color: var(--wine-ink);
}

.wiki-users__link--danger:hover {
  color: var(--wine-garnet);
}

.wiki-users__link:disabled {
  opacity: 0.5;
  cursor: default;
}

.wiki-users__legend {
  display: grid;
  grid-gap: 0.45rem;
  gap: 0.45rem;
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--wine-line);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--wine-muted);
}

.wiki-users__legend > div {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wiki-users__legend dt {
  flex: none;
  min-width: 4.2rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wine-faint);
  padding-top: 0.12rem;
}

.wiki-users__legend dd {
  margin: 0;
  flex: 1 1 16rem;
}

/* =========================================================================
   The download register, under the users table. Same page, separate block:
   granting the permission and seeing how it gets used belong together, but a
   log of events is not a property of a user.
   ========================================================================= */

.wiki-exportlog {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--wine-line);
}

.wiki-exportlog__title {
  margin: 0 0 1rem;
  font-family: var(--font-display), ui-serif, serif;
  font-optical-sizing: auto;
  font-size: 1.2rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--wine-ink);
}

.wiki-exportlog__empty {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--wine-muted);
}

.wiki-exportlog__list {
  display: grid;
  /* who · what · pages and size · level · when */
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wiki-exportlog__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  grid-gap: 0.9rem;
  gap: 0.9rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--wine-line);
}

/* Same fallback as the users list: misaligned across rows, never broken. */
@supports not (grid-template-columns: subgrid) {
  .wiki-exportlog__list {
    display: block;
  }

  .wiki-exportlog__row {
    grid-column: auto;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  }
}

.wiki-exportlog__who {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wine-ink);
  white-space: nowrap;
}

.wiki-exportlog__what {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--wine-muted);
}

.wiki-exportlog__target {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.72rem;
  font-style: normal;
  color: var(--wine-faint);
  overflow-wrap: anywhere;
}

.wiki-exportlog__meta,
.wiki-exportlog__when {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
  color: var(--wine-faint);
  white-space: nowrap;
}

/* The column this register exists for. Deep is the ordinary case and stays
   quiet; Raw is the one an admin scans for, so it is the only mark that carries
   the accent. */
.wiki-exportlog__level {
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 999px;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wine-faint);
  white-space: nowrap;
}

.wiki-exportlog__level.is-raw {
  border-color: color-mix(in srgb, var(--wine-garnet) 55%, transparent);
  color: var(--wine-garnet);
}

@media (max-width: 47.99rem) {
  .wiki-exportlog__list {
    display: block;
  }

  .wiki-exportlog__row {
    grid-column: auto;
    grid-template-columns: 1fr auto;
    row-gap: 0.25rem;
  }

  .wiki-exportlog__what {
    grid-column: 1 / -1;
  }
}

.wiki-users__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 52rem) {
  /* Stacked rows: the shared column track no longer applies, so the list stops
     being the grid and each row lays itself out. */
  .wiki-users__list {
    display: block;
  }

  .wiki-users__row {
    grid-column: auto;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar identity"
      "marks marks"
      "role role"
      "export export"
      "status actions";
    row-gap: 0.6rem;
  }

  .wiki-users__avatar {
    grid-area: avatar;
  }
  .wiki-users__identity {
    grid-area: identity;
  }
  .wiki-users__marks {
    grid-area: marks;
  }
  .wiki-users__role {
    grid-area: role;
  }
  .wiki-users__export {
    grid-area: export;
    justify-self: start;
  }
  .wiki-users__status {
    grid-area: status;
    justify-self: start;
  }
  .wiki-users__actions {
    grid-area: actions;
    justify-self: end;
  }
}

/* Dialogs — password and delete confirmation. */

.wiki-dialog {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.wiki-dialog__scrim {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(12, 8, 7, 0.55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  cursor: pointer;
}

.wiki-dialog__card {
  position: relative;
  width: min(100%, 30rem);
  padding: 1.5rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 16px;
  background: var(--wine-bg-2);
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 0.7);
}

.wiki-dialog__title {
  margin: 0 0 0.8rem;
  font-family: var(--font-display), ui-serif, serif;
  font-size: 1.25rem;
  font-weight: 560;
  letter-spacing: -0.015em;
  color: var(--wine-ink);
}

.wiki-users__dialog-text {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--wine-muted);
}

.wiki-users__dialog-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wiki-users__dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .wiki-user__chip:hover,
  .wiki-users__add:hover,
  .wiki-users__submit:hover,
  .wiki-login__google:hover {
    transform: none;
  }
}

/* =========================================================================
   Content editor — source and preview side by side. Like /admin/users this
   route gets no article container and no sidebar from Nextra, so it brings
   its own gutter and measure.
   ========================================================================= */

.wiki-editor {
  /* The reading measure, and the same one in all three modes: Visuale,
     Anteprima and Sorgente must not change width when you switch between them,
     because it is one page. Applied at the bottom of this section, after every
     rule that sets a `margin` shorthand and would reset the centring. */
  --editor-measure: 46rem;
  max-width: 90rem;
  margin: 0 auto;
  /* Room for the save anchor, which is fixed and would otherwise sit on the
     last paragraph of the page. */
  padding: 2rem 1.5rem 6rem;
}

/* Where you are, and the way back. The navbar's breadcrumb stops at the wiki's
   content routes — /admin is deliberately not one — so without this the editor
   is a page you can only leave with the browser button. */
.wiki-editor__crumbs {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-editor__crumbs a {
  color: inherit;
  text-decoration: none;
}

.wiki-editor__crumbs a:hover {
  color: var(--wine-garnet);
}

.wiki-editor__crumbhere {
  color: var(--wine-ink);
}

.wiki-editor__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.wiki-editor__title {
  min-width: 0;
}

.wiki-editor__eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine-amber);
}

.wiki-editor__path {
  margin: 0;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--wine-ink);
  overflow-wrap: anywhere;
}

.wiki-editor__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.wiki-editor__buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Valida and Salva: an outline and a fill, because one of them is what you came
   to do twenty times an hour and the other is a declaration you make once. */
.wiki-editor__ghost,
.wiki-editor__save {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 8px;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.86rem;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.wiki-editor__ghost {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--wine-line-strong);
  background: transparent;
  color: var(--wine-muted);
}

.wiki-editor__ghost:hover:not(:disabled) {
  border-color: var(--wine-garnet);
  color: var(--wine-ink);
}

.wiki-editor__save {
  padding: 0.5rem 1rem;
  border: none;
  background: linear-gradient(120deg, var(--wine-btn-1), var(--wine-btn-2));
  color: #fff;
  font-weight: 600;
}

.wiki-editor__save:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.1) brightness(1.04);
}

.wiki-editor__ghost:disabled,
.wiki-editor__save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* The reason a disabled action is disabled, written out. In a tooltip it is
   found only by someone who already suspects there is a reason. */
.wiki-editor__actionnote {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: right;
  max-width: 22rem;
  color: var(--wine-faint);
}

.wiki-editor__actionnote[data-warn] {
  color: var(--wine-amber);
}

/* ---------- The ⋯ menu ---------- */

.wiki-editor__menu {
  position: relative;
}

.wiki-editor__menubutton {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--wine-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.wiki-editor__menubutton[aria-expanded="true"],
.wiki-editor__menubutton:hover {
  border-color: var(--wine-garnet);
  color: var(--wine-ink);
}

.wiki-editor__menulist {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 45;
  width: 17rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wine-line-strong);
  border-radius: 10px;
  background: var(--wine-bg-2);
  box-shadow: 0 14px 36px -14px rgb(0 0 0 / 0.35);
  overflow: hidden;
}

.wiki-editor__menuitem {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-gap: 0.1rem 0.6rem;
  gap: 0.1rem 0.6rem;
  align-items: start;
  padding: 0.65rem 0.85rem;
  border: none;
  border-bottom: 1px solid var(--wine-line);
  background: none;
  text-align: left;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.86rem;
  color: var(--wine-ink);
  cursor: pointer;
}

.wiki-editor__menuitem:last-child {
  border-bottom: none;
}

.wiki-editor__menuitem svg {
  margin-top: 0.15rem;
}

.wiki-editor__menuitem:hover:not(:disabled) {
  background: var(--wine-panel);
}

.wiki-editor__menuitem[data-danger] {
  color: var(--wine-garnet);
}

.wiki-editor__menuitem:disabled {
  color: var(--wine-faint);
  cursor: not-allowed;
}

.wiki-editor__menunote {
  grid-column: 2;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-editor__pending {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--wine-amber) 45%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--wine-amber) 8%, transparent);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--wine-ink);
}

/* A page queued for deletion wears the same banner in garnet: same shape,
   because it is the same fact — something is waiting to be published — and a
   different colour, because this one takes the page away. */
.wiki-editor__pending.is-danger {
  border-color: color-mix(in srgb, var(--wine-garnet) 45%, transparent);
  background: color-mix(in srgb, var(--wine-garnet) 8%, transparent);
}

.wiki-editor__toolbar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.wiki-editor__toolbar button {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 999px;
  background: var(--wine-bg-2);
  color: var(--wine-muted);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wiki-editor__toolbar button:hover {
  color: var(--wine-ink);
  border-color: var(--wine-garnet);
}

.wiki-editor__errors {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.9rem 0.7rem 1.9rem;
  border: 1px solid color-mix(in srgb, var(--wine-garnet) 45%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--wine-garnet) 8%, transparent);
  color: var(--wine-garnet);
  font-size: 0.85rem;
  line-height: 1.55;
}

.wiki-editor__panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
  align-items: stretch;
  min-height: 60vh;
}

.wiki-editor__source {
  /* A textarea is inline-block by default, and `margin-inline: auto` does
     nothing to an inline-level box: it sat hard against the left gutter while
     every other pane was centred. Measured at x=24 against the toolbar's x=193. */
  display: block;
  width: 100%;
  min-height: 60vh;
  padding: 1rem 1.1rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 12px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  resize: vertical;
  -moz-tab-size: 2;
       tab-size: 2;
}

.wiki-editor__source:focus {
  outline: none;
  border-color: var(--wine-garnet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine-garnet) 18%, transparent);
}

.wiki-editor__preview {
  min-height: 60vh;
  padding: 1rem 1.4rem;
  border: 1px solid var(--wine-line);
  border-radius: 12px;
  background: var(--wine-panel);
  overflow: auto;
}

/* Wide content inside the preview must scroll in its own box rather than push
   the pane — a table in a half-width pane would otherwise stretch the grid. */
.wiki-editor__preview :where(table, pre) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}


@media (max-width: 62rem) {
  .wiki-editor__panes {
    grid-template-columns: 1fr;
  }

  .wiki-editor__source {
    min-height: 40vh;
  }
}

/* ---------- Editor modes ---------- */

/* Visuale · Anteprima · Sorgente. The same segmented control as the reading
   level in the navbar — a track, and the active segment RAISED onto the writing
   surface rather than tinted. Garnet is spoken for by <Inferred> and by links;
   one more accent on a control pressed all day would be noise. */
.wiki-editor__modeswrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.2rem;
}

.wiki-editor__moderow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.wiki-editor__modes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--wine-muted) 8%, transparent);
}

.wiki-editor__modes > button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--wine-muted);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.86rem;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.wiki-editor__modes > button:hover:not(:disabled):not([aria-pressed="true"]) {
  color: var(--wine-ink);
}

.wiki-editor__modes > button[aria-pressed="true"] {
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.wiki-editor__modes > button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The hint of the ACTIVE mode. Three tooltips to be found one at a time do not
   explain the difference between three ways of working. Reserved height so the
   row below doesn't jump when the text changes. */
.wiki-editor__modehint {
  margin: 0;
  min-height: 1.2em;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--wine-faint);
}

/* The preview's own level switch. Sits in the mode row because it only means
   anything while the preview is on screen. */
.wiki-editor__levels {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.wiki-editor__levelslabel {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-faint);
  margin-right: 0.3rem;
}

.wiki-editor__levels button {
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 5px;
  background: transparent;
  color: var(--wine-muted);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.wiki-editor__levels button[aria-pressed="true"] {
  border-color: var(--wine-ink);
  background: var(--wine-ink);
  color: var(--wine-bg);
}

/* The offending line, quoted back. In visuale a line number is unusable, so the
   error names its block and shows the text that was flagged. */
.wiki-editor__errorline {
  display: inline-block;
  max-width: 100%;
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--wine-garnet) 14%, transparent);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.wiki-editor__jump {
  border: none;
  background: none;
  padding: 0;
  color: var(--wine-garnet);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

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

.wiki-vis__page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Title and description are the only frontmatter a person writes. The rest of
   the block — repo, commit, paths — is the traceability spine and is carried
   through byte for byte, so it is shown and not offered. */
/* Two rows of a grid rather than a card. A page's title is not a setting, it is
   the page's first line, so it is set in the face it will be read in — and the
   mono labels beside it are the same "this is the system talking" voice the
   rest of the wiki uses for metadata. */
.wiki-vis__front {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  grid-gap: 0.7rem 0.9rem;
  gap: 0.7rem 0.9rem;
  align-items: center;
}

.wiki-vis__fieldlabel {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-vis__fieldinput {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 8px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
}

.wiki-vis__fieldinput--title {
  font-family: var(--font-display), ui-serif, serif;
  font-optical-sizing: auto;
  font-size: 1.4rem;
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.25;
  padding: 0.5rem 0.7rem;
}

.wiki-vis__fieldinput:focus {
  outline: none;
  border-color: var(--wine-garnet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine-garnet) 18%, transparent);
}

@media (max-width: 40rem) {
  .wiki-vis__front {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

.wiki-vis__prov {
  grid-column: 1 / -1;
}

.wiki-vis__prov summary {
  cursor: pointer;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--wine-muted);
}

.wiki-vis__prov summary > span {
  margin-left: 0.6rem;
  color: var(--wine-faint);
}

.wiki-vis__provnote {
  margin: 0.5rem 0 0.3rem;
  font-size: 0.78rem;
  color: var(--wine-muted);
}

.wiki-vis__prov ul {
  margin: 0;
  padding-left: 1.1rem;
  max-height: 12rem;
  overflow: auto;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--wine-faint);
  overflow-wrap: anywhere;
}

.wiki-vis__loading {
  padding: 2rem;
  border: 1px dashed var(--wine-line-strong);
  border-radius: 12px;
  color: var(--wine-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* MDXEditor redeclares `--font-mono` and `--font-body` on its own root with
   hardcoded stacks, which SHADOWS the next/font variables for everything inside
   the editor — including the rules below. `--font-mono: var(--font-mono)` on the
   same element would be self-referential and therefore invalid, so the wiki's
   values are captured here, one level up, under names of our own. */
.wiki-vis {
  --wiki-mono: var(--font-mono), ui-monospace, monospace;
  --wiki-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  /* MDXEditor does not currently redeclare --font-display, but it declares its
     two siblings, so this one is captured the same way rather than relying on
     that staying true. */
  --wiki-display: var(--font-display), ui-serif, serif;
}

/* Remap the library's own design tokens onto the wiki's.
   TWO SELECTORS DELIBERATELY: MDXEditor declares these variables on its root
   element, and a value inherited from an ancestor loses to one declared on the
   element itself. `.wiki-vis__root` is passed to the component for exactly this
   reason — one class more specific than its own. */
.wiki-vis .wiki-vis__root {
  --basePageBg: var(--wine-bg);
  --baseBase: var(--wine-bg);
  --baseBg: var(--wine-bg-2);
  --baseBgSubtle: var(--wine-panel);
  --baseBgHover: var(--wine-card-hover);
  --baseBgActive: var(--wine-card);
  --baseLine: var(--wine-line);
  --baseBorder: var(--wine-line-strong);
  --baseBorderHover: var(--wine-garnet);
  --baseSolid: var(--wine-muted);
  --baseSolidHover: var(--wine-ink);
  --baseText: var(--wine-ink);
  --baseTextContrast: var(--wine-ink);

  --accentBase: color-mix(in srgb, var(--wine-garnet) 6%, transparent);
  --accentBg: color-mix(in srgb, var(--wine-garnet) 10%, transparent);
  --accentBgSubtle: color-mix(in srgb, var(--wine-garnet) 8%, transparent);
  --accentBgHover: color-mix(in srgb, var(--wine-garnet) 16%, transparent);
  --accentBgActive: color-mix(in srgb, var(--wine-garnet) 22%, transparent);
  --accentLine: color-mix(in srgb, var(--wine-garnet) 35%, transparent);
  --accentBorder: color-mix(in srgb, var(--wine-garnet) 45%, transparent);
  --accentBorderHover: var(--wine-garnet);
  --accentSolid: var(--wine-garnet);
  --accentSolidHover: var(--wine-garnet);
  --accentText: var(--wine-garnet);
  --accentTextContrast: var(--wine-ink);

  --font-body: var(--wiki-sans);
  --font-mono: var(--wiki-mono);

  --radius-small: 6px;
  --radius-base: 8px;
  --radius-medium: 8px;
  --radius-large: 12px;

  border: 1px solid var(--wine-line-strong);
  border-radius: 12px;
  background: var(--wine-bg-2);
}

/* The toolbar follows you down the page, because the document is long and the
   controls belong to the paragraph you are in, not to the top of the file.
   MDXEditor already makes it `sticky; top: 0`; the offset is ours, or it slides
   under Nextra's own sticky navbar.

   `overflow: visible` UNDOES the library's `overflow-x: auto`. A scroll
   container clips in both directions, which would cut the Inserisci panel off
   at the toolbar's own height — the wrap below is the better answer to a
   toolbar that doesn't fit. Measured: the panel opened and was invisible.

   TWO CLASSES, like the token remapping above and for the same reason: the
   library's rule is a single hashed class, this file's would be a single class
   too, and which stylesheet webpack emits last is not something to bet on. */
.wiki-vis .wiki-vis__toolbar {
  top: var(--nextra-navbar-height, 64px);
  border-bottom: 1px solid var(--wine-line);
  border-radius: 12px 12px 0 0;
  gap: 0.2rem;
  flex-wrap: wrap;
  overflow: visible;
}

/* ---------- Inserisci ---------- */

.wiki-vis__insertwrap {
  position: relative;
}

.wiki-vis__insert {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 6px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--wiki-sans);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}

.wiki-vis__insert:hover,
.wiki-vis__insert[aria-expanded="true"] {
  border-color: var(--wine-garnet);
}

/* Inside the toolbar's own DOM and absolutely positioned, not portalled:
   `insertJsx$` inserts at the editor's last selection, and the further this
   panel is from the toolbar the more chances there are to lose it. */
/* Anchored to the button's RIGHT edge: Inserisci is the last control in the
   toolbar, and a panel opening rightwards from there hangs off the card. */
.wiki-vis__insertlist {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 25;
  width: 19rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wine-line-strong);
  border-radius: 10px;
  background: var(--wine-bg-2);
  box-shadow: 0 14px 36px -14px rgb(0 0 0 / 0.35);
  overflow: hidden;
}

.wiki-vis__insertitem {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.8rem;
  border: none;
  border-bottom: 1px solid var(--wine-line);
  background: none;
  text-align: left;
  cursor: pointer;
}

.wiki-vis__insertitem:last-child {
  border-bottom: none;
}

.wiki-vis__insertitem:hover {
  background: var(--wine-panel);
}

.wiki-vis__insertname {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--wiki-sans);
  font-size: 0.86rem;
  color: var(--wine-ink);
}

.wiki-vis__insertglyph {
  font-family: var(--wiki-mono);
  font-size: 0.7rem;
  color: var(--wine-faint);
}

.wiki-vis__insertglyph[data-tone="inferred"] {
  color: var(--wine-garnet);
}

.wiki-vis__inserthint {
  font-family: var(--wiki-sans);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--wine-muted);
}

.wiki-vis__content {
  min-height: 55vh;
  padding: 1.2rem 1.4rem 3rem;
  outline: none;
}

/* A ceiling and an inner scroll. Four eighteen-row tables turn one page into
   something you cannot see the end of, and this is only presentation — it comes
   from the stylesheet and not from an inline style, so it survives every redraw
   Lexical does of its own nodes. */
.wiki-vis__content :where(table) {
  display: block;
  max-width: 100%;
  max-height: 22rem;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Prose inside the editor, restored from scratch — and it HAS to be from
   scratch, for two reasons that compound.

   Nextra runs Tailwind, whose preflight flattens the semantic tags:
   `h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit }` and
   `menu,ol,ul { list-style: none }`. Nextra puts the sizes back only inside its
   own article container, which the editor is not.

   And MDXEditor's Lexical theme has NO heading entry at all (see
   `styles/lexicalTheme.js`): Lexical emits bare `<h1>`…`<h6>` with no class,
   because the library expects to inherit the host page's typography. Between the
   two, an `## Heading` typed in Visuale rendered exactly like a paragraph — so
   the one thing the author most needs to see, the shape of the page, was
   invisible.

   The scale is the editor's own, tighter than the reading page: this is a
   writing surface, and a full-size h1 would push everything else off screen.
   The FAMILY and the colour are the reading page's, so the editor speaks in the
   same voice as the result. */

.wiki-vis__content :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--wiki-display);
  font-optical-sizing: auto;
  font-weight: 560;
  letter-spacing: -0.015em;
  color: var(--wine-ink);
  line-height: 1.25;
}

.wiki-vis__content :where(h1) {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0.2em 0 0.7em;
}

.wiki-vis__content :where(h2) {
  font-size: 1.3rem;
  margin: 1.7em 0 0.6em;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--wine-line);
}

.wiki-vis__content :where(h3) {
  font-size: 1.08rem;
  margin: 1.5em 0 0.5em;
}

.wiki-vis__content :where(h4, h5, h6) {
  font-size: 0.97rem;
  margin: 1.3em 0 0.45em;
}

/* The first heading of a box sits right under its label; the wrapper already
   provides the gap, and the heading's own top margin would double it. */
.wiki-vis__boxbody :where(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0.3em;
}

.wiki-vis__content :where(p) {
  margin: 0.85em 0;
  line-height: 1.7;
}

.wiki-vis__content :where(ul) {
  list-style: disc;
  margin: 0.85em 0;
  padding-left: 1.4rem;
}

.wiki-vis__content :where(ol) {
  list-style: decimal;
  margin: 0.85em 0;
  padding-left: 1.6rem;
}

.wiki-vis__content :where(li) {
  margin: 0.3em 0;
  line-height: 1.65;
}

/* Nested lists: markers change so depth reads at a glance, and the library's own
   `nestedListItem` rule hides the marker of the <li> that only carries a list. */
.wiki-vis__content :where(ul ul) {
  list-style: circle;
  margin: 0.25em 0;
}

.wiki-vis__content :where(strong) {
  font-weight: 650;
  color: var(--wine-ink);
}

.wiki-vis__content :where(a) {
  color: var(--wine-garnet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.wiki-vis__content :where(code) {
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: color-mix(in srgb, var(--wine-muted) 12%, transparent);
  font-family: var(--wiki-mono);
  font-size: 0.86em;
}

.wiki-vis__content :where(blockquote) {
  margin: 0.9em 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--wine-line-strong);
  color: var(--wine-muted);
}

.wiki-vis__content :where(th) {
  font-weight: 620;
  color: var(--wine-ink);
}

/* A labelled box the author writes inside.
   <Deep> has NO visual form for the reader — it is prose that simply sits
   deeper than Brief — so this box exists only in the editor, on purpose:
   the marking is what is being edited, and GENERATION.md §3 says a heading left
   outside its <Deep> costs a Brief reader an empty section. */
.wiki-vis__box {
  margin: 1.1rem 0;
  border: 1px solid var(--wine-line-strong);
  border-radius: 10px;
  background: var(--wine-panel);
  overflow: hidden;
}

/* Four blocks that differ only by a word in their header are four blocks the
   author reads one at a time. The whole box is toned instead: the fill, the
   border and the label together, so the shape of the page is legible from a
   scroll rather than from a read.

   Every tint goes through color-mix on a wine token — the mock's literal rgba()
   values are light-theme only, and over `--wine-bg: #17110f` they are invisible. */
.wiki-vis__box[data-tone="inferred"] {
  border-color: color-mix(in srgb, var(--wine-garnet) 30%, transparent);
  background: color-mix(in srgb, var(--wine-garnet) 6%, transparent);
}

.wiki-vis__box[data-tone="inferred"] .wiki-vis__boxhead {
  background: color-mix(in srgb, var(--wine-garnet) 8%, transparent);
  border-bottom-color: color-mix(in srgb, var(--wine-garnet) 20%, transparent);
}

.wiki-vis__box[data-tone="inferred"] .wiki-vis__boxlabel {
  color: var(--wine-garnet);
}

/* Dashed, and the only dashed border in the editor: a question nobody has
   answered yet is provisional, which is what dashed means everywhere in this
   system. Its answered sibling above is solid. */
.wiki-vis__box[data-tone="open"] {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--wine-amber) 50%, transparent);
  background: color-mix(in srgb, var(--wine-amber) 7%, transparent);
}

.wiki-vis__box[data-tone="open"] .wiki-vis__boxhead {
  border-bottom-color: transparent;
}

.wiki-vis__box[data-tone="open"] .wiki-vis__boxlabel {
  color: var(--wine-amber);
}

/* One surface DOWN from the writing area, in both themes: `--wine-bg` is the
   page behind `--wine-bg-2`, lighter in light and darker in dark. */
.wiki-vis__box[data-tone="deep"] {
  background: var(--wine-bg);
}

.wiki-vis__box[data-tone="raw"] {
  border-color: var(--wine-line);
  background: color-mix(in srgb, var(--wine-muted) 7%, transparent);
}

.wiki-vis__box[data-tone="note"] {
  border-color: var(--wine-line);
  background: transparent;
}

.wiki-vis__boxhead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.42rem 0.75rem;
  border-bottom: 1px solid var(--wine-line);
}

.wiki-vis__box[data-closed] .wiki-vis__boxhead {
  border-bottom-color: transparent;
}

.wiki-vis__box[data-closed] .wiki-vis__boxbody {
  display: none;
}

.wiki-vis__boxlabel {
  font-family: var(--wiki-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wine-faint);
  white-space: nowrap;
}

/* The name of the section, which is content: display face, not mono. It is what
   a closed box is identified by — "Marchio proprio", not "Deep". */
.wiki-vis__boxname {
  font-family: var(--wiki-display);
  font-optical-sizing: auto;
  font-size: 1.02rem;
  font-weight: 560;
  letter-spacing: -0.015em;
  color: var(--wine-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}

.wiki-vis__boxfill {
  flex: 1 1;
}

.wiki-vis__boxcount,
.wiki-vis__boxtoggle {
  font-family: var(--wiki-mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wine-faint);
  white-space: nowrap;
}

.wiki-vis__boxtoggle {
  border: 0;
  background: none;
  padding: 0.1rem 0;
  cursor: pointer;
}

.wiki-vis__boxtoggle:hover {
  color: var(--wine-ink);
}

.wiki-vis__boxbody {
  padding: 0.2rem 0.9rem 0.6rem;
}

/* MDXEditor draws the nested editor as a panel of its own — page-coloured, with
   its own padding and radius. Inside a box that is already a panel that reads as
   a second frame around everything you type. It also zeroes the paragraph
   margins (`._nestedEditor_ > p { margin: 0 }`), so two paragraphs in one <Deep>
   run together with no gap at all.

   Both undone here. Two classes deep on purpose: the library's rules are a
   single hashed class, and the order in which the two stylesheets load is not
   something this file can rely on. */
.wiki-vis .wiki-vis__boxbody > * {
  background: none;
  padding: 0;
  border-radius: 0;
}

.wiki-vis .wiki-vis__boxbody :where(p) {
  margin: 0.7em 0;
}

.wiki-vis .wiki-vis__boxbody > * > :first-child {
  margin-top: 0.25em;
}

.wiki-vis .wiki-vis__boxbody > * > :last-child {
  margin-bottom: 0.25em;
}

/* <GeneratedOn />: a mono label and a date, on the page's own line rather than
   in a pill. It is a fact about the file, not a block of content. */
.wiki-vis__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.1rem 0 0;
}

.wiki-vis__props {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.wiki-vis__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--wine-muted);
  cursor: pointer;
}

.wiki-vis__labelinput {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--wine-line);
  border-radius: 6px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--wiki-mono);
  font-size: 0.7rem;
  min-width: 8rem;
}

/* Written by the in-page control when a person vouches for the block, so it is
   shown and not offered: typing a colleague's name here would forge the very
   signal the page prints at the top. */
.wiki-vis__stamp {
  font-size: 0.68rem;
  color: var(--wine-vine);
}

.wiki-vis__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.05rem 0.45rem;
  border: 1px dashed var(--wine-line-strong);
  border-radius: 999px;
  background: var(--wine-bg-2);
  font-family: var(--wiki-mono);
  font-size: 0.68rem;
  color: var(--wine-muted);
  vertical-align: baseline;
}

/* Anything the editor cannot draw. It shows its own source and round-trips
   verbatim: NOTHING DISAPPEARS SILENTLY, which is how a WYSIWYG over MDX
   normally ruins a file. */
.wiki-vis__opaque {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 1.1rem 0;
  padding: 0.7rem 0.9rem;
  border: 1px dashed var(--wine-line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--wine-muted) 6%, transparent);
}

.wiki-vis__opaque code,
.wiki-vis__opaque pre {
  margin: 0;
  font-family: var(--wiki-mono);
  font-size: 0.76rem;
  color: var(--wine-ink);
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wiki-vis__opaquelabel {
  font-family: var(--wiki-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wine-muted);
}

.wiki-vis__opaquehint {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font-size: 0.72rem;
  color: var(--wine-faint);
}

/* ---------- The save anchor ---------- */

/* Fixed, but only in the state where it is needed: the component renders
   nothing while the text matches the last save. A permanent bar would cost 56px
   of every screen of a page you read in order to write in it, and it would cost
   them to somebody with nothing to save.

   Its palette is DECLARED and not inherited. This is a dark pill in both
   themes, the same exception the filled buttons make (`--wine-btn-1/2` are
   fixed too): `var(--wine-ink)` is cream in dark, which would draw a pale pill
   with pale text, and light-theme amber on near-black lands under 4.5:1. */
.wiki-anchor {
  --anchor-bg: #221713;
  --anchor-amber: #e2a94f;
  --anchor-faint: rgb(243 235 226 / 0.55);
  --anchor-alert: #e26076;

  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  background: var(--anchor-bg);
  box-shadow: 0 8px 28px -8px rgb(36 26 23 / 0.55);
  animation: wiki-anchor-in 160ms ease-out;
}

.dark .wiki-anchor {
  --anchor-bg: #0d0908;
  box-shadow: 0 8px 28px -8px rgb(0 0 0 / 0.7);
}

@keyframes wiki-anchor-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wiki-anchor {
    animation: none;
  }
}

.wiki-anchor__state {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

/* Amber: this is the "pending" state, the same one that marks an open question.
   Not garnet — unsaved work is not an error. */
.wiki-anchor__state strong {
  font-weight: 500;
  text-transform: uppercase;
  color: var(--anchor-amber);
}

.wiki-anchor__where,
.wiki-anchor__blocked {
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wiki-anchor__where {
  color: var(--anchor-faint);
}

.wiki-anchor__blocked {
  color: var(--anchor-alert);
}

.wiki-anchor__save {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--wine-btn-1), var(--wine-btn-2));
  color: #fff;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.wiki-anchor__save:disabled {
  background: rgb(243 235 226 / 0.14);
  color: rgb(243 235 226 / 0.5);
  cursor: not-allowed;
}

/* ---------- One measure, three modes ----------
   LAST in this section on purpose: several of the rules above set a `margin`
   shorthand, which resets the inline margins this needs. The list is
   enumerated rather than `> *` because `.wiki-dialog` and `.wiki-anchor` are
   also children of `.wiki-editor`, and both are position: fixed — a max-width
   on either would shrink an overlay to the width of a paragraph. */
.wiki-editor
  > :where(
    .wiki-editor__crumbs,
    .wiki-editor__head,
    .wiki-editor__modeswrap,
    .wiki-editor__toolbar,
    .wiki-editor__errors,
    .wiki-editor__pending,
    .wiki-users__msg,
    .wiki-vis__page,
    .wiki-editor__preview,
    .wiki-editor__source
  ) {
  max-width: var(--editor-measure);
  margin-inline: auto;
}

/* Sorgente keeps its own floor, and the snippet row keeps it too — the row
   belongs to the field under it and would otherwise sit visibly inset from it.

   At 0.82rem Plex Mono a 46rem box is about 89 columns; the canonical format
   wraps at 100, so every prose line would soft-wrap with a dozen characters
   orphaned and the file's real shape — the only reason to be in this mode — would
   be invisible. 55rem is 112 of those columns, and the box is a BORDER box:
   the 1.1rem of padding on each side and a scrollbar come out of it, leaving
   about 105. Coupled to the font-size two rules up; change one, recheck the
   other with a 100-character line. */
.wiki-editor > .wiki-editor__source,
.wiki-editor > .wiki-editor__toolbar {
  max-width: 55rem;
}

/* ---------- Content list ---------- */

.wiki-content-list__queue,
.wiki-content-list__area {
  margin-top: 1.8rem;
}

.wiki-content-list h2 {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-content-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wiki-content-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--wine-line);
}

.wiki-content-list a {
  color: var(--wine-ink);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.84rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.wiki-content-list a:hover {
  border-bottom-color: var(--wine-garnet);
}

.wiki-content-list__warn {
  color: var(--wine-garnet) !important;
  font-size: 0.72rem !important;
}

.wiki-content-list__queue {
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--wine-amber) 40%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--wine-amber) 6%, transparent);
}

.wiki-content-list__queue li:last-child {
  border-bottom: none;
}

/* ---------- Content actions: publish and structural operations ---------- */

.wiki-content-actions {
  margin-top: 1.6rem;
  padding: 1.1rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 12px;
  background: var(--wine-panel);
}

.wiki-content-actions__loading {
  margin-top: 1.6rem;
  padding: 1.1rem;
  border: 1px dashed var(--wine-line-strong);
  border-radius: 12px;
  color: var(--wine-muted);
  font-size: 0.85rem;
}

.wiki-content-actions__primary {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.wiki-content-actions__primary-btn {
  padding: 0.7rem 1.2rem;
  font-size: 0.92rem;
}

.wiki-content-actions__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--wine-ink);
}

.wiki-content-actions__others {
  color: var(--wine-faint);
}

.wiki-content-actions__buttons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.wiki-content-actions__buttons > button:not(.wiki-users__submit) {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 9px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.wiki-content-actions__buttons > button:not(.wiki-users__submit):hover {
  border-color: var(--wine-garnet);
}

.wiki-content-actions__note {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--wine-line);
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--wine-muted);
}

.wiki-content-actions__mine {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.wiki-content-actions__mine li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.45rem 0;
  border-top: 1px solid var(--wine-line);
  font-size: 0.85rem;
}

.wiki-content-actions__mine code {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--wine-ink);
}

.wiki-content-actions__rename {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wiki-content-actions__rename input {
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 8px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.8rem;
}

/* The blurb edit inside a section row reuses this layout with a <textarea>
   instead of an <input> — full width of its own row, buttons wrap beneath. */
.wiki-content-actions__rename textarea {
  flex: 1 1 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 8px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
}

.wiki-content-actions__rename button {
  border: none;
  background: none;
  color: var(--wine-muted);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wiki-content-actions__area {
  margin-top: 1.1rem;
}

.wiki-content-actions__area h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-content-actions__area ol {
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
}

.wiki-content-actions__area li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--wine-ink);
}

.wiki-content-actions__area li span {
  flex: 1 1;
}

.wiki-content-actions__area li button {
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 6px;
  background: var(--wine-bg-2);
  color: var(--wine-muted);
  cursor: pointer;
  line-height: 1;
}

.wiki-content-actions__area li button:hover {
  border-color: var(--wine-garnet);
  color: var(--wine-ink);
}

.wiki-content-actions__section {
  padding: 0.9rem 0;
  border-top: 1px solid var(--wine-line);
}

.wiki-content-actions__section:first-of-type {
  border-top: none;
}

.wiki-content-actions__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
  color: var(--wine-ink);
}

.wiki-content-actions__section-slug {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.76rem;
  color: var(--wine-faint);
}

.wiki-content-actions__section-count {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--wine-muted);
}

.wiki-content-actions__section-blurb {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--wine-muted);
}

/* "Modifica questa pagina" — sits in the TOC's extra-content slot, where
   Nextra's own edit link used to be, so it inherits that column's rhythm. */
.wiki-edit-link {
  display: block;
  font-size: 0.8rem;
  color: var(--wine-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.wiki-edit-link:hover {
  color: var(--wine-garnet);
}

/* ---------- <Inferred aperta>: an open question ----------
   Deliberately quieter than the <Inferred> seal. A page carries one hypothesis
   but may carry several open questions, so this form has to be legible in
   repetition — a side rule and a mono label instead of the wax seal. */

.wiki-open-question {
  margin: 1.4rem 0;
  padding: 0.75rem 0 0.75rem 1rem;
  border-left: 2px solid color-mix(in srgb, var(--wine-amber) 65%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--wine-amber) 6%, transparent),
    transparent 60%
  );
}

.wiki-open-question__label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine-amber);
}

.wiki-open-question__label em {
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--wine-faint);
}

.wiki-open-question__text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--wine-ink);
}

.wiki-open-question__text > :first-child {
  margin-top: 0;
}

.wiki-open-question__text > :last-child {
  margin-bottom: 0;
}

/* ---------- Validation badge ----------
   One line at the top of every page saying how much to trust it. Most pages are
   machine-written first drafts; saying so plainly is what makes the validated
   state believable. */

.wiki-validation {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -0.4rem 0 1.6rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}

.wiki-validation__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  flex: none;
}

.wiki-validation--none {
  color: var(--wine-faint);
}

.wiki-validation--none .wiki-validation__dot {
  border: 1px solid var(--wine-line-strong);
}

.wiki-validation--ok {
  color: var(--wine-vine);
}

.wiki-validation--ok .wiki-validation__dot {
  background: var(--wine-vine);
}

.wiki-validation--stale {
  color: var(--wine-amber);
}

.wiki-validation--stale .wiki-validation__dot {
  background: var(--wine-amber);
}

/* ---------- Blocchi: stato validato e azioni inline ----------
   The resolved state of both <Inferred> forms. Same shape, vine instead of
   garnet/amber: the block is still marked, but marked as settled. Vine is
   already the system's "validated" colour (see .wiki-validation--ok), so
   nothing new is introduced here. */

.wiki-inferred.is-validated {
  border-style: solid;
  border-color: color-mix(in srgb, var(--wine-vine) 55%, transparent);
  background: color-mix(in srgb, var(--wine-vine) 7%, transparent);
}

.wiki-inferred.is-validated .wiki-inferred__seal {
  color: var(--wine-vine);
  border-color: color-mix(in srgb, var(--wine-vine) 65%, transparent);
  /* The tilt is what makes the open seal read as provisional; a settled one
     sits straight. */
  transform: none;
}

.wiki-inferred__main {
  flex: 1 1;
  min-width: 0;
}

.wiki-open-question.is-validated {
  border-left-color: color-mix(in srgb, var(--wine-vine) 65%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--wine-vine) 6%, transparent),
    transparent 60%
  );
}

.wiki-open-question.is-validated .wiki-open-question__label {
  color: var(--wine-vine);
}

.wiki-block__stamp {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--wine-faint);
}

/* The gutter marks. They hang in the article's left margin, so they never move
   the text and never widen the block; on narrow screens, where there is no
   margin to hang in, they tuck back inside.

   The positioning context is the BLOCK, not the inner column: the full form is
   a flex row whose first child is the seal, so offsetting from the inner column
   lands the marks on top of it. */

.wiki-inferred,
.wiki-open-question {
  position: relative;
}

.wiki-block__gutter {
  position: absolute;
  /* The whole margin here is ~61px: the sidebar rule sits at one end and the
     block's border at the other, and the sidebar's collapse toggle reaches into
     it. -2.1rem is what clears both. */
  left: -2.1rem;
  top: 0.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.wiki-inferred:hover .wiki-block__gutter,
.wiki-open-question:hover .wiki-block__gutter,
.wiki-block__gutter:focus-within {
  opacity: 1;
}

.wiki-block__mark {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 8px;
  background: var(--wine-bg-2);
  color: var(--wine-muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wiki-block__mark:hover {
  color: var(--wine-garnet);
  border-color: var(--wine-garnet);
}

/* Only the approve mark goes vine. Keyed to the action, not to position: the
   reopen mark is also the first child of its gutter, and colouring the control
   that UN-validates with the validated colour says the opposite of what it
   does. */
.wiki-block__mark--approve:hover {
  color: var(--wine-vine);
  border-color: var(--wine-vine);
}

.wiki-block__mark:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 68rem) {
  .wiki-block__gutter {
    position: static;
    flex-direction: row;
    margin-bottom: 0.5rem;
    opacity: 1;
  }
}

/* Editing in place: same measure, same line-height, so the text doesn't jump
   when the field replaces it. */

.wiki-block__field {
  width: 100%;
  min-height: 6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--wine-line-strong);
  border-radius: 9px;
  background: var(--wine-bg-2);
  color: var(--wine-ink);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.96rem;
  line-height: 1.65;
  resize: vertical;
}

.wiki-block__field:focus {
  outline: none;
  border-color: var(--wine-garnet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine-garnet) 18%, transparent);
}

.wiki-block__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.wiki-block__btn {
  padding: 0.4rem 0.85rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(120deg, var(--wine-btn-1), var(--wine-btn-2));
  color: #fff;
  font-family: var(--font-sans), sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.wiki-block__btn--ghost {
  background: none;
  border: 1px solid color-mix(in srgb, var(--wine-vine) 55%, transparent);
  color: var(--wine-vine);
}

.wiki-block__btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.wiki-block__link {
  padding: 0;
  border: none;
  background: none;
  color: var(--wine-muted);
  font-family: var(--font-sans), sans-serif;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wiki-block__link:hover {
  color: var(--wine-ink);
}

.wiki-block__hint {
  margin-left: auto;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-block__error {
  margin: 0.6rem 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--wine-garnet);
}

.wiki-block__undo {
  margin: 0.6rem 0 0;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--wine-faint);
}

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

/* =========================================================================
   Mappa dei contenuti
   ========================================================================= */

/* The tally is the page's only number and it is derived — same discipline as
   the home's counters. Set as an aside rather than as a headline: it says how
   much is done, it is not what the page is for. */
.wiki-map__tally {
  margin: 0 0 2rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wine-faint);
}

.wiki-map__entry {
  /* The tick hangs in the list's own gutter, so the titles of written and
     unwritten entries stay on one left edge — the eye reads the column of
     names, and the marks are what stands out from it. */
  position: relative;
}

/* AND THE BULLET HAS TO GO WHERE THE TICK LANDS, or the two draw on the same
   spot: the tick is positioned into the gutter, which is exactly where Nextra's
   `list-disc` puts the disc. Only on written entries — an unwritten one keeps
   its disc, and that is the list's whole visual language: a tick where there is
   a page, a bullet where there is only a name. */
.wiki-map li:has(> .wiki-map__entry[data-state="done"]) {
  list-style: none;
}

.wiki-map__entry[data-state="open"] {
  color: var(--wine-ink);
}

.wiki-map__entry[data-state="done"] {
  color: var(--wine-garnet);
  text-decoration: none;
}

.wiki-map__entry[data-state="done"]:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.wiki-map__mark {
  position: absolute;
  left: -1.15em;
  color: var(--wine-vine);
  font-size: 0.85em;
}

/* The state is said in words for anyone who cannot see the tick or the colour;
   the tick is decoration and carries aria-hidden. */
.wiki-map__state {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}