/* 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; /* Tailwind max-w-7xl, the site header's measure */
  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; } }

.zw-wiki-title {
  font-family: var(--zw-font-serif);
  font-size: 32px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15;
  color: var(--zw-ink); margin: 0 0 6px;
}

.zw-wiki-dek {
  margin: 0 0 26px; font-size: 15px; line-height: 1.6;
  color: var(--zw-muted); max-width: 620px;
}

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

.zw-wiki-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.zw-wiki-nav { position: sticky; top: 76px; display: grid; gap: 1px; }

/* The kit's one breakpoint. Below it the sidebar stops being a sidebar.
   This block has to come AFTER the rule above, not before it: 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; }
}

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

.zw-wiki-nav__blurb {
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--zw-border-warm);
  font-size: 13px; line-height: 1.55; 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); }

/* Flush with the prose. The tinted, padded box set its contents 16px in from
   every other line on the page, so the one element listing the page's own
   structure was the one element that did not line up with it. */
.zw-wiki-toc { margin: 0 0 24px; padding: 14px 0; border-top: 1px solid var(--zw-border-warm); border-bottom: 1px solid var(--zw-border-warm); }
.zw-wiki-toc__eyebrow { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zw-muted); }
.zw-wiki-toc__links { margin-top: 8px; display: grid; gap: 5px; }
.zw-wiki-toc__links a { font-size: 15px; font-weight: 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; }

/* A wikilink that resolves is an ordinary action-blue link. One that does not
   is deliberately distinct: the kit treats an unwritten entry as an invitation
   to write it, not as a broken link. */
.zw-wiki-link { color: var(--zw-blue-700); text-decoration: none; border-bottom: 1px solid var(--zw-blue-300); }
.zw-wiki-link:hover { border-bottom-color: var(--zw-blue-700); }
.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);
}