/* site/css/wiki.css
   Wiki layer — aligns with site/css/site.css tokens & wallpaper model
   - Uses the same variables from site.css (color, spacing, radii, shadows)
   - Only adds wiki-specific utilities/components
   - Wallpaper size controlled via --tile (inherited by site.css body::before)
*/

/* ---------------- Wiki wallpaper scale ----------------
   Default small tiles come from site.css.
   Make tiles larger on wiki child pages only (not on landing/section-index).
------------------------------------------------------- */
body.wiki:not(.section-index){
  /* Larger tiles for deeper wiki pages */
  --tile: 320px;
}
@media (min-width: 1280px){
  body.wiki:not(.section-index){
    --tile: 360px;
  }
}

/* ---------------- Typography helpers ---------------- */
.lede{
  font-size: 1.125rem;
  line-height: 1.65;
  margin: .25rem 0 1rem;
}
.muted{ color: var(--ink-2); }

/* ---------------- Layout helpers ------------------- */
.wrap{ max-width: var(--container); margin: 0 auto; padding: 24px var(--pad); }

/* Simple grid helpers that match card spacing */
.grid{ display: grid; gap: 16px; }
.cols-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
.cols-2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 980px){ .cols-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px){ .cols-3, .cols-2{ grid-template-columns: 1fr; } }

/* ---------------- Common UI pieces ----------------- */
.notice{
  padding: .9rem 1rem;
  border-left: 4px solid #84cc16;
  background: #f7fee7;
  border-radius: var(--r-md);
  margin: 1rem 0 1.2rem;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
  border-left-color: #84cc16; /* keep the lime accent */
}

.toc{
  list-style: none;
  padding: 0;
  margin: .6rem 0 0;
  border-left: 4px solid var(--line);
  padding-left: 12px;
}
.toc li{ margin: .25rem 0; }

.divider{ height: 1px; background: var(--line); margin: 1.25rem 0; }

.card{
  background: var(--bg);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
}
.card h3{ margin: .1rem 0 .25rem; font-size: 1.05rem; }

.list{ list-style: none; margin: .5rem 0 0; padding: 0; }
.list li{ margin: .25rem 0; }

.chip{
  /* Keep a light blue chip close to site.css .badge background */
  --chip: #e6f2f6;
  display: inline-block;
  background: var(--chip);
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .82rem;
  margin-left: .45rem;
}

.crumbs{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .92rem;
}
.crumbs a{ text-decoration: none; }

/* ---------------- Wiki landing tweaks ----------------
   Keep landing cards transparent like blog/wiki landing in site.css
------------------------------------------------------- */
body.wiki-landing .card,
body.wiki-landing .article,
body.wiki-landing .panel{
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid var(--surface-stroke-1,#E6DFC4);
}
body.wiki-landing .card .header,
body.wiki-landing .article .header,
body.wiki-landing .panel .header{ background: transparent !important; }

.surface-none,
body.wiki-landing .surface-none{ background: transparent !important; border: 0 !important; box-shadow: none !important; }

@media (max-width: 720px){
  body.wiki-landing .hero-cta{
    position: static;
    margin: .75rem 16px 0 clamp(16px,4vw,48px);
  }
  body.wiki-landing .wiki-hero{ padding-bottom: 1.25rem; }
}

/* ---------------- Wiki content area -----------------
   Optional: a mild container style for article bodies
------------------------------------------------------- */
.wiki-content{
  background: transparent;
}
.wiki-content .kicker{
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85rem;
}

/* Ensure "On this page" blocks feel consistent */
.on-this-page{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .75rem .9rem;
  box-shadow: var(--shadow-1);
}
.on-this-page h2{ margin-top: .25rem; }
.on-this-page ul{ margin: .25rem 0 0; padding-left: 1rem; }
.on-this-page li{ margin: .15rem 0; }

/* ---------------- Do NOT override globals -------------
   We intentionally do NOT redefine:
   - font families (inherit Montserrat from site.css)
   - global <a> styles (blue underlines from site.css)
   - .site-header structure/colors (keep site.css)
   - wallpaper image (site.css applies it via body::before)
   The only global we influence is --tile (above) to change
   wallpaper cell size by page type.
------------------------------------------------------- */