/* 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;
}

/* The kit's one breakpoint. Below it the sidebar stops being a sidebar. */
@media (max-width: 720px) {
  .zw-wiki-shell { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .zw-wiki-nav { position: static; }
}

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

.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 ------------------------------------------------------------- */

.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); }

.zw-wiki-toc { margin-bottom: 24px; padding: 14px 16px; background: var(--zw-paper-3); border-radius: var(--zw-radius-md); }
.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; }
.zw-wiki-prose h2 { margin: 10px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; 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); }