/* The Wiki tool — /wiki.
   Ported from the 3.0 kit's Tools.dc.html, whose Wiki screen begins at line 750.

   Loaded via yield :page_stylesheets, not on every page.

   Everything resolves through --zw-* tokens; no literal colour, radius or
   timing values, which is what no_inline_hex_test.rb and the token guards
   check for. */

/* The page matches the site header exactly rather than the kit's 1440px tool
   measure. A tool surface wider than the menu above it reads as a broken page
   rather than a wide one — the Map tool paid for learning this. */
.zw-wiki-page {
  width: 100%;
  max-width: 80rem; /* the site header's measure — one width on every surface */
  margin: 0 auto;
  padding: 28px 1rem 56px;
}

@media (min-width: 640px) { .zw-wiki-page { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .zw-wiki-page { padding-block: 44px 72px; padding-inline: 2rem; } }

/* The portal's heading and subhead are .zw-tool-masthead__* in zw_components.css,
   shared with the other three tools.

   No margin on the masthead itself. The dek carries the 26px gap under this block, as
   it does on the other three; a margin here would stack on top of it and push the
   wiki's shell lower than theirs. The 22px that used to be here existed only for the
   window when the dek was deleted and the title had nothing to space it. */

/* An ENTRY has no dek -- the entry's own title is the page heading, and this is the
   way back to the portal rather than a masthead. So the entry keeps a small label,
   and the gap the dek would have carried is set here instead. */
.zw-wiki-masthead--entry { margin-bottom: 22px; }

.zw-wiki-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--zw-ink);
  margin: 0;
}


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

/* column-gap, not gap: the index puts the search in its own grid row above the
   main column, and a 44px row-gap there would double the search's own 22px
   bottom margin. The nav spans both rows so the sidebar stays one column. */
.zw-wiki-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 44px;
  align-items: start;
}

/* Row 1 / span 2 also holds on the entry page, which has no search child: the
   second row is empty there and costs no height. */
.zw-wiki-nav { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 76px; display: grid; gap: 1px; }

.zw-wiki-shell > .zw-wiki-search { grid-column: 2; }

/* On an ENTRY the topics do not follow the reader; the table of contents is the
   only thing that does. On the listings they stay sticky, because there they are
   the page's navigation and there is no rail to replace them.

   grid-column and grid-row stay as they are -- this changes where the nav sits
   as you scroll, not which column it is in. Two classes beat the one-class rule
   above at every width, which is what is wanted: the entry's sidebar is static
   on a phone for the layout's reasons and static on a desktop for this one. */
.zw-wiki-shell--entry .zw-wiki-nav { position: static; top: auto; }

/* The kit's one breakpoint. Below it the sidebar stops being a sidebar, and the
   shell stacks in source order — search, topics, entries — which is what puts
   the search above the topics on a phone.
   This block has to come AFTER the rules above, not before them: a media query
   adds no specificity, so an earlier `position: static` loses to a later
   `position: sticky` and the nav stays stuck at every width — which on a
   phone means it floats over the entries as you scroll past. */
@media (max-width: 720px) {
  .zw-wiki-shell { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .zw-wiki-nav { position: static; top: auto; grid-column: auto; grid-row: auto; }
  /* The stack's 24px gap spaces it; keeping the margin would add both. */
  .zw-wiki-shell > .zw-wiki-search { grid-column: auto; margin-bottom: 0; }
}

.zw-wiki-nav__eyebrow {
  margin: 0 0 8px 11px; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--zw-faint);
}

/* --- topics --------------------------------------------------------------- */

.zw-wiki-topic {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: var(--zw-radius-sm);
  font-size: 15px; font-weight: 600; color: var(--zw-muted);
  text-align: left; text-decoration: none;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.zw-wiki-topic:hover { background: var(--zw-surface-warm); }
.zw-wiki-topic.is-on { background: var(--zw-surface-warm); color: var(--zw-ink); }
.zw-wiki-topic__label { flex: 1; min-width: 0; }
.zw-wiki-topic__count { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--zw-muted); }

.zw-wiki-topic__dot {
  width: 7px; height: 7px; flex: none; border-radius: 999px;
  background: var(--zw-wiki-topic-basics);
}

.zw-wiki-topic__dot--all { background: none; border: 1.5px solid var(--zw-border-warm-2); }
.zw-wiki-topic__dot--warn { background: var(--zw-wiki-warn); }

/* The bounded palette a topic's tone_key selects from. Topics are admin-CRUD
   and can be added on the fly; these are not. */
.zw-wiki-topic__dot[data-tone="kitchen"]  { background: var(--zw-wiki-topic-kitchen); }
.zw-wiki-topic__dot[data-tone="clothes"]  { background: var(--zw-wiki-topic-clothes); }
.zw-wiki-topic__dot[data-tone="repair"]   { background: var(--zw-wiki-topic-repair); }
.zw-wiki-topic__dot[data-tone="buying"]   { background: var(--zw-wiki-topic-buying); }
.zw-wiki-topic__dot[data-tone="curbside"] { background: var(--zw-wiki-topic-curbside); }
.zw-wiki-topic__dot[data-tone="hosting"]  { background: var(--zw-wiki-topic-hosting); }
.zw-wiki-topic__dot[data-tone="basics"]   { background: var(--zw-wiki-topic-basics); }
.zw-wiki-topic__dot[data-tone="bigger"]   { background: var(--zw-wiki-topic-bigger); }

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

.zw-wiki-search {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px; margin-bottom: 22px;
  background: var(--zw-panel);
  border: 1px solid var(--zw-border-warm);
  border-radius: var(--zw-radius-md);
  box-shadow: var(--shadow-xs);
}

.zw-wiki-search__icon { width: 16px; height: 16px; color: var(--zw-faint); flex: none; }

.zw-wiki-search__input {
  flex: 1; min-width: 0; height: 100%;
  font-size: 15px; color: var(--zw-ink);
  background: transparent; border: none; outline: none;
}

.zw-wiki-aliashit { margin: -12px 0 18px 2px; font-size: 13px; color: var(--zw-faint); }

/* --- rules between blocks -------------------------------------------------- */

.zw-wiki-rule { display: flex; align-items: center; gap: 12px; margin: 0 0 10px 2px; }
.zw-wiki-rule__label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zw-muted); white-space: nowrap; }
.zw-wiki-rule__line { flex: 1; height: 1px; background: var(--zw-border-warm); }
.zw-wiki-rule__meta { font-size: 13px; color: var(--zw-muted); white-space: nowrap; }
.zw-wiki-rule--warn .zw-wiki-rule__label { color: var(--zw-wiki-warn-ink); }
.zw-wiki-rule + .zw-wiki-list { margin-bottom: 36px; }

/* --- lists ---------------------------------------------------------------- */

.zw-wiki-list { display: grid; gap: 1px; }

.zw-wiki-row, .zw-wiki-brief, .zw-wiki-thin {
  display: grid; gap: 5px; padding: 14px 16px; margin: 0 -16px;
  border-radius: var(--zw-radius-md); text-decoration: none;
  transition: background var(--dur-2) var(--ease-out);
}

.zw-wiki-row:hover, .zw-wiki-brief:hover, .zw-wiki-thin:hover { background: var(--zw-paper-3); }
.zw-wiki-row__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.zw-wiki-row__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--zw-ink); }
.zw-wiki-row__dek { font-size: 15px; line-height: 1.5; color: var(--zw-muted); }
.zw-wiki-row__topic { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--zw-muted); }

.zw-wiki-brief { grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 13px 16px; }
.zw-wiki-brief__left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.zw-wiki-brief__title { flex: none; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--zw-ink); }
.zw-wiki-brief__dek { min-width: 0; font-size: 15px; color: var(--zw-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zw-wiki-brief__topic { flex: none; font-size: 13px; color: var(--zw-faint); white-space: nowrap; }

.zw-wiki-thin { display: flex; align-items: baseline; gap: 12px; padding: 9px 10px; margin: 0 -10px; }
.zw-wiki-thin__title { font-size: 15px; color: var(--zw-ink-2); }
.zw-wiki-thin__meta { margin-left: auto; font-size: 13px; color: var(--zw-faint); white-space: nowrap; }

/* --- pills ---------------------------------------------------------------- */

.zw-wiki-pill {
  padding: 2px 8px; font-size: 12px; font-weight: 600;
  border-radius: 999px; white-space: nowrap;
}

.zw-wiki-pill--rec { background: var(--zw-tool-actions-tint); color: var(--zw-tool-actions-ink); }
.zw-wiki-pill--stale { background: var(--zw-wiki-warn-tint); color: var(--zw-wiki-warn-ink); }

.zw-wiki-tier { margin-left: auto; padding: 2px 9px; font-size: 12px; font-weight: 600; border-radius: 999px; white-space: nowrap; }
.zw-wiki-tier--org { background: var(--zw-green-50); color: var(--zw-green-700); }
.zw-wiki-tier--community { background: var(--zw-tool-wiki-tint); color: var(--zw-tool-wiki-ink); }
.zw-wiki-tier--rec { background: var(--zw-tool-actions-tint); color: var(--zw-tool-actions-ink); }

/* --- the featured "Start here" card ---------------------------------------- */

.zw-wiki-feature {
  display: grid; gap: 10px; padding: 24px 26px; margin-bottom: 34px;
  background: var(--zw-panel);
  border: 1px solid var(--zw-border-warm-2);
  border-radius: var(--zw-radius-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.zw-wiki-feature:hover { box-shadow: var(--shadow-md); border-color: var(--zw-border-warm-2); }
.zw-wiki-feature__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zw-wiki-feature__badge { padding: 2px 9px; font-size: 12px; font-weight: 600; background: var(--zw-green-50); color: var(--zw-green-700); border-radius: 999px; }
.zw-wiki-feature__topic { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--zw-muted); }
.zw-wiki-feature__title { font-family: var(--zw-font-serif); font-size: 26px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--zw-ink); }
.zw-wiki-feature__dek { font-size: 16px; line-height: 1.55; color: var(--zw-muted); max-width: 620px; }

/* --- the short version ----------------------------------------------------- */

.zw-wiki-short {
  display: block; padding: 18px 20px; margin-bottom: 26px;
  background: var(--zw-paper); border: 1px solid var(--zw-border-warm);
  border-radius: var(--zw-radius-md);
}

.zw-wiki-short--feature { margin: 6px 0 0; padding: 14px 0 0; background: none; border: none; border-top: 1px solid var(--zw-border-warm); border-radius: 0; }
.zw-wiki-short__eyebrow { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zw-muted); }
.zw-wiki-short__lines { margin-top: 11px; display: grid; gap: 8px; }
.zw-wiki-short__line { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: baseline; }
.zw-wiki-short__mark { font-weight: 600; }
.zw-wiki-short__mark.is-ok { color: var(--zw-green-600); }
.zw-wiki-short__mark.is-caution { color: var(--zw-wiki-warn-ink); }
.zw-wiki-short__text { font-size: 15px; line-height: 1.55; color: var(--zw-ink-2); }

/* --- the entry ------------------------------------------------------------- */

/* The article sits in the shell's right column now, so its measure is a cap
   on the prose rather than the page's own width. */
.zw-wiki-article { max-width: 680px; }
.zw-wiki-article__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.zw-wiki-back { font-size: 14px; font-weight: 600; color: var(--zw-muted); text-decoration: none; }
.zw-wiki-back:hover { color: var(--zw-ink); }
.zw-wiki-article__title { font-family: var(--zw-font-serif); font-size: 30px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--zw-ink); margin: 0 0 12px; }
.zw-wiki-article__dek { margin: 0 0 22px; font-size: 18px; line-height: 1.6; color: var(--zw-muted); }
.zw-wiki-article__foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--zw-border-warm); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.zw-wiki-article__fresh { font-size: 13px; color: var(--zw-faint); }

.zw-wiki-stale {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; margin-bottom: 24px;
  background: var(--zw-wiki-warn-tint); border: 1px solid var(--zw-wiki-warn-border);
  border-radius: var(--zw-radius-md);
}

.zw-wiki-stale__icon { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--zw-wiki-warn-ink); }
.zw-wiki-stale__title { font-size: 14px; font-weight: 600; color: var(--zw-wiki-warn-ink); }
.zw-wiki-stale__body { margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--zw-muted); }

/* --- on this page ---------------------------------------------------------- */

/* A rail in the gutter beside the article, or nothing.
   It used to be a bordered strip between the dek and the first paragraph, which
   meant every reader met a list of links before they met a sentence.

   1240px is where the sums stop working, not a taste call: the page caps at
   80rem with 2rem of padding either side, the topics sidebar and its gap take
   264px and the article's measure takes 680px, which leaves 232px for a 200px
   rail and its 32px gap. Below that the rail is not rendered at all rather than
   falling back into the flow -- the strip is the thing being removed, and a
   phone has the least room to spare for it.

   Grid tracks cannot overlap, so the rail can never land ON the prose while
   this grid exists -- an assertion to that effect would be green by
   construction. What breaks if the sums go wrong is the ARTICLE, squeezed below
   its 680px by minmax(0, 680px). Widening the sidebar quietly narrows
   the prose. */
.zw-wiki-toc { display: none; }

@media (min-width: 1240px) {
  /* --entry, not the bare class: .zw-wiki-main is the portal's column too, and
     its children there are a feature card, three rules and three lists rather
     than one article. Unscoped, this grid auto-placed every other one of them
     into the rail's column.

     Explicit rows because the rail comes first in source, for the reason given
     in wiki/show.html.erb, and both belong on row 1. */
  .zw-wiki-main--entry {
    display: grid;
    grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }

  .zw-wiki-main--entry > .zw-wiki-article { grid-column: 1; grid-row: 1; }

  .zw-wiki-toc {
    display: block;
    grid-column: 2; grid-row: 1;
    /* The topics sidebar's offset. The two pin on the same line. */
    position: sticky; top: 76px;
    max-width: 240px;
    /* An entry with forty headings would otherwise run its last links off the
       bottom of the screen, where a sticky element can never be scrolled to. */
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
}

.zw-wiki-toc__eyebrow { display: block; padding-left: 18px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zw-faint); }

/* No gap: each link carries its own left border, and they only draw one
   continuous line down the rail if they touch. The padding does the spacing. */
.zw-wiki-toc__links { margin-top: 10px; display: grid; }

.zw-wiki-toc__links a {
  padding: 5px 0 5px 16px;
  border-left: 2px solid var(--zw-border-warm);
  font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--zw-muted); text-decoration: none;
  /* overflow-y: auto computes overflow-x to auto as well, so one unbroken
     word in a heading would put a horizontal scrollbar in a 200px rail. */
  overflow-wrap: anywhere;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.zw-wiki-toc__links a:hover { color: var(--zw-ink); }

/* Blue, because it marks where the reader is and green is never an action here.
   wiki_toc_controller sets aria-current alongside the class; the attribute is
   what the test reads, since it is the half a screen reader can see. */
.zw-wiki-toc__links a.is-on { color: var(--zw-ink); border-left-color: var(--zw-blue-600); }

/* --- prose ----------------------------------------------------------------- */

.zw-wiki-prose { display: grid; gap: 18px; }
.zw-wiki-prose p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--zw-ink-2); text-wrap: pretty; }
/* Only h2 was styled, so an entry written with an h3 rendered it as body text
   on the live page while still listing it in the table of contents. Every
   level the editor can produce is styled here. */
.zw-wiki-prose h2 { margin: 10px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; color: var(--zw-ink); scroll-margin-top: 80px; }
.zw-wiki-prose h1 { margin: 10px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -0.015em; color: var(--zw-ink); scroll-margin-top: 80px; }
.zw-wiki-prose h3 { margin: 8px 0 0; font-size: 19px; font-weight: 600; color: var(--zw-ink); scroll-margin-top: 80px; }
.zw-wiki-prose h4,
.zw-wiki-prose h5,
.zw-wiki-prose h6 { margin: 8px 0 0; font-size: 17px; font-weight: 600; color: var(--zw-ink); scroll-margin-top: 80px; }
/* list-style is restated because Tailwind's preflight sets
   `ol,ul,menu{list-style:none}` globally. Without it the markup is a correct
   list that renders as unindented prose with no bullets. */
.zw-wiki-prose ul, .zw-wiki-prose ol { margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.7; color: var(--zw-ink-2); }
.zw-wiki-prose ul { list-style: disc outside; }
.zw-wiki-prose ol { list-style: decimal outside; }
.zw-wiki-prose li { margin: 0.2em 0; }
.zw-wiki-prose li > p { margin: 0; }

/* The resolving `.zw-wiki-link` lives in zw_components.css, because a wikilink
   now renders in action descriptions on pages that never load this stylesheet.
   This variant stays here: only the :wiki context emits it, and its tokens are
   declared in this file.

   A link to an unwritten entry is deliberately distinct rather than absent — the
   kit treats it as an invitation to write the entry. That reading holds for a
   contributor reading the wiki and not for a member reading an action card,
   which is why the :web context degrades such a link to plain text instead. */
.zw-wiki-link--missing { color: var(--zw-wiki-missing); border-bottom: 1px dashed var(--zw-wiki-missing-underline); }

/* --- sections at the foot of an entry --------------------------------------- */

.zw-wiki-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--zw-border-warm); }
.zw-wiki-section__eyebrow { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zw-muted); }
.zw-wiki-places, .zw-wiki-sources { margin-top: 12px; display: grid; gap: 8px; }

.zw-wiki-place {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 13px 16px; background: var(--zw-panel);
  border: 1px solid var(--zw-border-warm-2); border-radius: var(--zw-radius-sm);
  text-decoration: none; transition: box-shadow var(--dur-2) var(--ease-out);
}

.zw-wiki-place:hover { box-shadow: var(--shadow-md); }
.zw-wiki-place__name { display: block; font-size: 15px; font-weight: 600; color: var(--zw-ink); }
.zw-wiki-place__address { display: block; font-size: 13px; color: var(--zw-faint); }
.zw-wiki-place__go { font-size: 13px; font-weight: 600; color: var(--zw-blue-700); white-space: nowrap; }

.zw-wiki-source__detail { display: block; font-size: 13px; color: var(--zw-faint); }

/* --- empty state ------------------------------------------------------------ */

.zw-wiki-empty { padding: 30px 4px; }
.zw-wiki-empty__title { font-size: 15px; font-weight: 600; color: var(--zw-ink); }
.zw-wiki-empty__body { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--zw-muted); }

/* --- suggest an edit --------------------------------------------------------- */

.zw-wiki-suggest { margin-left: auto; }

.zw-wiki-suggest__toggle {
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  color: var(--zw-muted); background: transparent;
  border: 1px solid var(--zw-border-warm-2); border-radius: 999px;
  cursor: pointer; white-space: nowrap; list-style: none;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.zw-wiki-suggest__toggle:hover { background: var(--zw-paper-3); color: var(--zw-ink); }
.zw-wiki-suggest[open] .zw-wiki-suggest__toggle { display: none; }

.zw-wiki-suggest__form {
  width: min(100%, 560px);
  margin-top: 14px; padding: 18px 20px;
  background: var(--zw-panel); border: 1px solid var(--zw-border-warm);
  border-radius: var(--zw-radius-md); box-shadow: var(--shadow-md);
}

.zw-wiki-suggest__title { font-size: 15px; font-weight: 600; color: var(--zw-ink); margin-bottom: 12px; }
.zw-wiki-suggest__error { margin: 0 0 10px; font-size: 13px; color: var(--zw-wiki-missing); }

.zw-wiki-suggest__input {
  width: 100%; height: 40px; padding: 0 12px; margin-bottom: 10px;
  font-size: 15px; color: var(--zw-ink);
  background: var(--zw-paper); border: 1px solid var(--zw-border-warm);
  border-radius: var(--zw-radius-sm); outline: none;
}

.zw-wiki-suggest__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .zw-wiki-suggest__pair { grid-template-columns: 1fr; } }

.zw-wiki-suggest__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.zw-wiki-suggest__gate { font-size: 13px; color: var(--zw-faint); min-width: 0; }

.zw-wiki-suggest__send {
  margin-left: auto; padding: 7px 14px; font-size: 13px; font-weight: 600;
  color: #ffffff; background: var(--zw-green-600);
  border: none; border-radius: 999px; cursor: pointer;
}

.zw-wiki-suggest__send:hover { background: var(--zw-green-700); }

/* --- share ------------------------------------------------------------------ */

/* Sits beside "Suggest an edit" in the entry footer. Quiet by default: an
   entry is for reading, and the share is a thing you go looking for. */
.zw-wiki-share {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; padding: 6px 12px;
  font-size: 13px; font-weight: 600; color: var(--zw-muted);
  background: transparent; border: 1px solid var(--zw-border-warm-2);
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.zw-wiki-share:hover { background: var(--zw-paper-3); color: var(--zw-ink); }
.zw-wiki-share__icon { width: 14px; height: 14px; }

/* Both live in the footer's flex row; only the first should push right. */
.zw-wiki-share + .zw-wiki-suggest { margin-left: 0; }

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

/* On an entry the title is a link back to the portal but renders identically
   to the portal's own — same face, same size, same colour — so the header does
   not resize or shift as you move between them. It is a <div> there rather than
   an <h1>, because the entry's title is the page's heading; the difference is
   semantic only and must stay invisible. */
.zw-wiki-title__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}

.zw-wiki-title__link:hover { color: var(--zw-blue-700); }

/* The remaining block types the editor can produce. Without these the markup
   is correct and the page renders a quote, a rule and a code block as three
   more paragraphs. */
.zw-wiki-prose blockquote {
  margin: 0; padding-left: 16px;
  border-left: 3px solid var(--zw-border-warm-2);
  color: var(--zw-muted);
  font-size: 17px; line-height: 1.7;
}

.zw-wiki-prose pre {
  margin: 0; padding: 14px 16px;
  background: var(--zw-paper-3);
  border-radius: var(--zw-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; line-height: 1.55;
  overflow-x: auto;
}

.zw-wiki-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--zw-paper-3);
  padding: 1px 5px; border-radius: 4px;
}

.zw-wiki-prose pre code { background: none; padding: 0; font-size: inherit; }

.zw-wiki-prose hr {
  margin: 8px 0; border: 0;
  border-top: 1px solid var(--zw-border-warm);
}

/* Body images. Size and alignment arrive as classes, not inline style, because
   the page's sanitize allowlist has no `style` in it — see
   TiptapRenderer#render_wiki_image. `display: block` is what makes the `auto`
   margins below align anything; an inline image ignores them. */
.zw-wiki-prose img {
  display: block;
  max-width: 100%;
  height: auto;
}

.zw-wiki-image--small { width: 200px; }
.zw-wiki-image--medium { width: 400px; }
.zw-wiki-image--full { width: 100%; }

.zw-wiki-image--left { margin-right: auto; }
.zw-wiki-image--center { margin-left: auto; margin-right: auto; }
.zw-wiki-image--right { margin-left: auto; }

/* Tables — an entry listing repair programs or zero waste companies.

   The wrapper, not the table, is what scrolls. A four-column list of companies
   does not fit a phone, and letting the table itself overflow drags the whole
   page sideways instead; the wrapper keeps the overflow local so the rest of
   the entry still reads at 390px. TiptapRenderer emits it around every table.

   Borders have to be stated here at all because Tailwind's preflight sets
   `border-style: solid; border-width: 0` on everything — the same reason lists
   and headings are restated above. Left alone the markup is correct and the
   page draws an invisible grid. */
.zw-wiki-table-wrap {
  overflow-x: auto;
  /* .zw-wiki-prose is a grid, and a grid item's default `min-width: auto` is
     sized by its content — so without this the wide table pushes the grid
     track wider and the whole page scrolls sideways, which is the exact thing
     the wrapper exists to prevent. overflow-x alone does not do it. */
  min-width: 0;
  /* Room for the scrollbar so it does not sit on top of the last row. */
  padding-bottom: 2px;
}

.zw-wiki-prose table {
  border-collapse: collapse;
  width: 100%;
  /* Below this the columns squeeze rather than the wrapper scrolling, and a
     cell holding a company name and a link becomes unreadable. */
  min-width: 480px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--zw-ink-2);
  text-align: left;
}

.zw-wiki-prose th,
.zw-wiki-prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--zw-border-warm);
  vertical-align: top;
}

.zw-wiki-prose th {
  font-weight: 600;
  color: var(--zw-ink);
  border-bottom-color: var(--zw-border-warm-2);
  white-space: nowrap;
}

/* TipTap wraps every cell's content in a paragraph. Without this the prose
   grid's paragraph spacing lands inside each cell and every row grows. */
.zw-wiki-prose th > p,
.zw-wiki-prose td > p { margin: 0; }