/* dosi.dev wiki — document pages (/wiki/<slug>/) and the dashboard (/wiki/).
 *
 * Scope rules:
 *   - every selector starts with a `wiki-*` class or `.wikibook`; this file adds
 *     no site-wide reset and no element-level rule outside those namespaces;
 *   - colour, border and rhythm come from the sacred theme tokens, so both
 *     theme-light and theme-dark follow the site's own switch;
 *   - the site shell (header, footer, container) is untouched: a wiki page is a
 *     normal page of the site, with a document-shaped body inside it.
 *
 * Typography split on purpose: chrome (kickers, meta, TOC, dashboard) keeps the
 * site's monospace system language; the document body switches to a 17px system
 * sans at a long-form line height, because these pages are read, not scanned.
 */

.wiki-doc,
.wiki-dash {
  --wiki-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo",
    "Pretendard", "Noto Sans KR", Inter, "Helvetica Neue", sans-serif;
  --wiki-gutter: 16px;
  --wiki-measure: 72ch;
  --wiki-rhythm: var(--line-rhythm, 1.25rem);
}

/* The reading column of a document page is wider than a post's; `:has()` keeps
   this scoped to wiki pages without touching the shared container rule. Browsers
   without `:has()` simply keep the site default width. */
.container:has(.wiki-doc),
.container:has(.wiki-dash) {
  max-width: 1240px;
}

.wiki-main {
  display: block;
}

/* ---------------------------------------------------------------- document */

.wiki-doc__head {
  border-bottom: 1px solid var(--theme-border);
  padding-bottom: var(--wiki-rhythm);
  margin-bottom: calc(var(--wiki-rhythm) * 1.5);
}

.wiki-doc__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1ch;
  margin: 0 0 calc(var(--wiki-rhythm) * 0.5);
  font-size: 0.85em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-text-subdued);
}

.wiki-doc__home {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wiki-doc__title {
  margin: 0 0 calc(var(--wiki-rhythm) * 0.5);
  font-size: 2em;
  line-height: 1.15;
}

.wiki-doc__lead {
  margin: 0 0 var(--wiki-rhythm);
  max-width: var(--wiki-measure);
  font-family: var(--wiki-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--theme-text-subdued);
}

.wiki-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch 3ch;
  margin: 0 0 calc(var(--wiki-rhythm) * 0.5);
  font-size: 0.85em;
}

.wiki-doc__metaitem {
  display: flex;
  align-items: baseline;
  gap: 1ch;
}

.wiki-doc__meta dt {
  color: var(--theme-text-subdued);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wiki-doc__meta dd {
  margin: 0;
}

.wiki-doc__note {
  margin: 0 0 var(--wiki-rhythm);
  padding: calc(var(--wiki-rhythm) * 0.5) 1.5ch;
  max-width: var(--wiki-measure);
  box-shadow: inset 0 0 0 1px var(--theme-border);
  font-size: 0.9em;
  color: var(--theme-text-subdued);
}

.wiki-doc__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
  margin: 0;
}

.wiki-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.5ch;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--theme-border);
  color: var(--theme-text);
  font-size: 0.9em;
  letter-spacing: 0.06em;
}

.wiki-btn:hover,
.wiki-btn:focus-visible {
  background: var(--theme-button);
  color: var(--theme-button-text);
}

.wiki-doc__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wiki-rhythm);
}

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

.wiki-doc__missing {
  color: var(--theme-text-subdued);
}

/* ---------------------------------------------------------------------- TOC */

.wiki-toc--desktop {
  display: none;
}

.wiki-toc__box {
  box-shadow: inset 0 0 0 1px var(--theme-border);
}

/* A 60-chapter book must not push the article a screen and a half down. */
.wiki-toc__box[open] .wiki-toc__list {
  max-height: 60vh;
  overflow-y: auto;
}

.wiki-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1ch;
  min-height: 44px;
  padding: 0 1.5ch;
  cursor: pointer;
  letter-spacing: 0.08em;
}

.wiki-toc__count {
  color: var(--theme-text-subdued);
}

.wiki-toc__label {
  margin: 0 0 calc(var(--wiki-rhythm) * 0.5);
  font-size: 0.8em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-text-subdued);
}

.wiki-toc__list {
  list-style: none;
  margin: 0;
  padding: 0 1.5ch calc(var(--wiki-rhythm) * 0.5);
  text-indent: 0;
  counter-reset: none;
}

.wiki-toc--desktop .wiki-toc__list {
  padding: 0;
}

.wiki-toc__item {
  padding-left: 0;
  text-indent: 0;
}

.wiki-toc__item::before {
  content: none;
}

.wiki-toc__item > a {
  display: flex;
  gap: 1ch;
  align-items: baseline;
  padding: calc(var(--wiki-rhythm) * 0.3) 0;
  background: transparent;
  color: var(--theme-text-subdued);
  font-size: 0.9em;
  line-height: 1.4;
}

.wiki-toc__item > a:hover,
.wiki-toc__item > a:focus-visible {
  color: var(--theme-text);
  background: var(--theme-border-subdued);
}

.wiki-toc__num {
  flex: none;
  min-width: 2ch;
  color: var(--theme-text-subdued);
  font-variant-numeric: tabular-nums;
}

.wiki-toc__item--l2 > a {
  padding-left: 2ch;
}

.wiki-toc__item--l3 > a {
  padding-left: 4ch;
}

/* ------------------------------------------------------- imported book body */

/* The book's own root element is nested here as a div, so its stylesheet still
   addresses descendants through it. It must not inherit the site shell's own
   `.content` layout rules, hence the explicit reset of the few that exist. */
.wikibook > .content {
  display: block;
  flex: none;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.wikibook {
  font-family: var(--wiki-sans);
  font-size: 17px;
  line-height: 1.8;
  color: var(--theme-text);
  max-width: var(--wiki-measure);
  overflow-wrap: anywhere;
  word-break: keep-all;
}

/* Neutralise the site-wide text rules that exist for monospace post bodies.
   They are theme-level element rules, so they reach into the imported book and
   would break its own numbering, indents and link styling. */
.wikibook a {
  background: transparent;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wikibook a:hover,
.wikibook a:focus-visible {
  background: var(--theme-border-subdued);
  color: var(--theme-text);
}

.wikibook ul,
.wikibook ol {
  list-style-position: outside;
  text-indent: 0;
  counter-reset: none;
  padding-left: 1.6em;
  margin: 1em 0;
}

.wikibook ul {
  list-style-type: disc;
}

.wikibook ol {
  list-style-type: decimal;
}

.wikibook li {
  padding-left: 0;
  text-indent: 0;
}

.wikibook ul li::before,
.wikibook ol li::before {
  content: none;
  display: none;
}

.wikibook h1::before,
.wikibook h2::before,
.wikibook h3::before,
.wikibook h4::before,
.wikibook h5::before,
.wikibook h6::before {
  content: none;
}

.wikibook h1,
.wikibook h2,
.wikibook h3,
.wikibook h4 {
  border-bottom: 0;
  padding-bottom: 0;
  overflow-wrap: break-word;
}

.wikibook img,
.wikibook svg {
  max-width: 100%;
  height: auto;
}

.wikibook figure {
  margin: calc(var(--wiki-rhythm) * 1.5) 0;
}

.wikibook figcaption {
  font-size: 0.85em;
  color: var(--theme-text-subdued);
}

.wikibook table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92em;
}

.wikibook th,
.wikibook td {
  border-bottom: 1px solid var(--theme-border);
  padding: 0.4em 0.6em;
  text-align: left;
  vertical-align: top;
}

/* Footnote references are inline typography, not touch targets: the 44px rule
   applies to navigation and buttons only. */
.wikibook sup a,
.wikibook .fnref a,
.wikibook .fnback {
  min-height: 0;
  padding: 0;
  font-size: 0.75em;
}

.wikibook :target {
  background: var(--theme-border-subdued);
}

/* ------------------------------------------------------------- dashboard */

.wiki-dash__head {
  border-bottom: 1px solid var(--theme-border);
  padding-bottom: var(--wiki-rhythm);
  margin-bottom: var(--wiki-rhythm);
}

.wiki-dash__title {
  margin: 0 0 calc(var(--wiki-rhythm) * 0.5);
}

.wiki-dash__lead {
  margin: 0 0 calc(var(--wiki-rhythm) * 0.5);
  max-width: var(--wiki-measure);
  font-family: var(--wiki-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--theme-text-subdued);
}

.wiki-dash__count,
.wiki-filter__status {
  margin: 0;
  font-size: 0.85em;
  color: var(--theme-text-subdued);
}

.wiki-filter {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wiki-rhythm) * 0.5);
  margin-bottom: var(--wiki-rhythm);
}

.wiki-filter[hidden] {
  display: none;
}

.wiki-filter__row {
  display: flex;
  align-items: center;
  gap: 1ch;
  flex-wrap: wrap;
}

.wiki-filter__label {
  font-size: 0.8em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-text-subdued);
}

.wiki-filter__input {
  flex: 1 1 24ch;
  min-height: 44px;
  padding: 0 1.5ch;
  background: var(--theme-background);
  color: var(--theme-text);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--theme-border);
  font: inherit;
}

.wiki-filter__input:focus-visible {
  outline: 2px solid var(--theme-text);
  outline-offset: 1px;
}

.wiki-filter__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
}

.wiki-chip {
  min-height: 44px;
  padding: 0 1.5ch;
  background: transparent;
  color: var(--theme-text-subdued);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--theme-border);
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}

.wiki-chip[aria-pressed="true"] {
  background: var(--theme-button);
  color: var(--theme-button-text);
}

.wiki-chip:focus-visible {
  outline: 2px solid var(--theme-text);
  outline-offset: 1px;
}

.wiki-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-indent: 0;
  counter-reset: none;
}

.wiki-entry {
  padding: var(--wiki-rhythm) 0;
  border-bottom: 1px dashed var(--theme-border);
  text-indent: 0;
}

.wiki-entry::before {
  content: none;
  display: none;
}

.wiki-entry[hidden] {
  display: none;
}

.wiki-entry__title {
  margin: 0 0 calc(var(--wiki-rhythm) * 0.25);
  font-size: 1.15em;
  border-bottom: 0;
}

.wiki-entry__title::before {
  content: none;
}

.wiki-entry__title a {
  background: transparent;
}

.wiki-entry__title a:hover,
.wiki-entry__title a:focus-visible {
  background: var(--theme-border-subdued);
}

.wiki-entry__desc {
  margin: 0 0 calc(var(--wiki-rhythm) * 0.25);
  max-width: var(--wiki-measure);
  font-family: var(--wiki-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--theme-text-subdued);
}

.wiki-entry__meta,
.wiki-entry__dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1ch;
  margin: 0;
  font-size: 0.82em;
  color: var(--theme-text-subdued);
}

.wiki-entry__dl a {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wiki-tag,
.wiki-flag {
  display: inline-block;
  padding: 0.1em 0.8ch;
  box-shadow: inset 0 0 0 1px var(--theme-border);
  line-height: 1.4;
}

.wiki-flag {
  color: var(--theme-text);
}

.wiki-dash__empty {
  margin: var(--wiki-rhythm) 0;
  color: var(--theme-text-subdued);
}

/* ------------------------------------------------------------- viewports */

@media (max-width: 640px) {
  .wiki-doc__title {
    font-size: 1.6em;
  }

  .wikibook {
    padding-left: 0;
    padding-right: 0;
  }

  /* Wide children (tables, figures) may scroll, but never under the 16px gutter. */
  .wikibook table,
  .wikibook pre,
  .wikibook .table-wrap,
  .wikibook .tablewrap {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (min-width: 64rem) {
  .wiki-doc__body {
    grid-template-columns: 26ch minmax(0, 1fr);
    gap: 4ch;
    align-items: start;
  }

  .wiki-toc--mobile {
    display: none;
  }

  .wiki-toc--desktop {
    display: block;
    position: sticky;
    top: var(--wiki-rhythm);
    max-height: calc(100vh - var(--wiki-rhythm) * 2);
    overflow-y: auto;
    grid-column: 1;
    grid-row: 1;
  }

  .wiki-doc__article {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wiki-toc--desktop {
    scroll-behavior: auto;
  }
}