/* sqzass documentation
 *
 * The page is monochrome. The only colour on it comes from the code, which is
 * the point: highlighting is the feature this tool does properly, and a brand
 * colour competing with it would be noise. One accent exists, used solely for
 * links and focus, because a link that is not visibly a link is a defect.
 *
 * The +++ rule appears once per page, between the title block and the body.
 * That is the same boundary it marks in a source file: front matter ends,
 * content begins. It is the one decorative-looking thing here and it is not
 * decoration.
 */

:root {
  color-scheme: light dark;

  --paper:   #fbfbfc;
  --raised:  #f1f3f5;
  --ink:     #14171a;
  --ink-2:   #4a5058;
  --ink-3:   #767d86;
  --rule:    #e2e5e9;
  --accent:  #1946c9;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR",
          "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --s-1: 0.8125rem;
  --s0:  1.0625rem;
  --s1:  1.25rem;
  --s2:  1.5rem;
  --s3:  1.9rem;
  --s4:  2.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:  #0f1113;
    --raised: #17191d;
    --ink:    #e9ebed;
    --ink-2:  #a9afb6;
    --ink-3:  #71787f;
    --rule:   #262a2f;
    --accent: #86a8ff;
  }
}
:root[data-theme="dark"] {
  --paper:  #0f1113;
  --raised: #17191d;
  --ink:    #e9ebed;
  --ink-2:  #a9afb6;
  --ink-3:  #71787f;
  --rule:   #262a2f;
  --accent: #86a8ff;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--s0)/1.7 var(--sans);
  /* Korean does not break inside a word. Without this, browsers split 어절
     mid-word at narrow widths and the text becomes hard to read. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.masthead {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.brand {
  font-family: var(--mono);
  font-size: var(--s1);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--accent); }

.masthead nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: var(--s-1);
}

.masthead nav a { color: var(--ink-2); text-decoration: none; }
.masthead nav a:hover { color: var(--accent); text-decoration: underline; }

.theme-toggle {
  font: inherit;
  font-family: var(--mono);
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); border-color: currentColor; }

/* ---------- layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 13rem;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  max-width: 84rem;
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 5rem;
}

main { min-width: 0; max-width: var(--measure); }

.sidebar, .toc {
  position: sticky;
  top: 2rem;
  font-size: var(--s-1);
  line-height: 1.6;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

/* ---------- sidebar ---------- */

.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar > ul > li + li { margin-top: 1.5rem; }

.sidebar ul ul {
  margin-top: 0.4rem;
  border-left: 1px solid var(--rule);
}

.sidebar a {
  display: block;
  padding: 0.2rem 0;
  color: var(--ink-2);
  text-decoration: none;
}
.sidebar ul ul a { padding-left: 0.85rem; margin-left: -1px; }
.sidebar a:hover { color: var(--accent); }

/* Section headings in the tree read as labels, not links-among-links. */
.sidebar > ul > li > a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sidebar a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}
.sidebar ul ul a[aria-current="page"] {
  border-left: 2px solid var(--accent);
  padding-left: calc(0.85rem - 1px);
}

/* ---------- table of contents ---------- */

.toc ul { list-style: none; margin: 0; padding: 0; }
.toc > ul > li + li { margin-top: 0.15rem; }
.toc ul ul { padding-left: 0.85rem; }
.toc a { color: var(--ink-3); text-decoration: none; display: block; padding: 0.15rem 0; }
.toc a:hover { color: var(--accent); }

.toc::before {
  content: attr(data-label);
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.6rem;
}

/* ---------- title block and the +++ rule ---------- */

/* Mono carries structure -- wordmark, headings, labels, code. The sans face is
   reserved for prose. For a tool you drive from a terminal that split says
   something; it also keeps headings visually adjacent to the commands they
   introduce. Mono runs wide, so the scale is pulled in a step. */
.title-block h1 {
  font-family: var(--mono);
  font-size: var(--s3);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin: 0;
}

.title-block .lede {
  color: var(--ink-2);
  font-size: var(--s1);
  line-height: 1.55;
  margin: 0.6rem 0 0;
}

/* The front matter fence. Ends the metadata, opens the content -- exactly
   what +++ does in the source file this page was written in. */
.fence {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--mono);
  font-size: var(--s0);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin: 1.6rem 0 2.25rem;
  user-select: none;
}
.fence::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}

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

.prose > :first-child { margin-top: 0; }

.prose h2, .prose h3, .prose h4 {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.3;
  scroll-margin-top: 2rem;
}
.prose h2 { font-size: var(--s2); margin: 2.9rem 0 0.9rem; }
.prose h3 { font-size: var(--s1); margin: 2.25rem 0 0.7rem; }
.prose h4 { font-size: var(--s0); margin: 1.75rem 0 0.5rem; }

/* h2 opens a section; a hairline above it makes that legible at a glance
   without adding another visual device. */
.prose h2 {
  border-top: 1px solid var(--rule);
  padding-top: 2.9rem;
}
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; }
.prose li + li { margin-top: 0.3rem; }

/* The anchor is there for people who want to link to a section, not for
   everyone else to look at. */
.anchor {
  margin-left: 0.4rem;
  color: var(--ink-3);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
}
h1:hover > .anchor, h2:hover > .anchor, h3:hover > .anchor,
h4:hover > .anchor, h5:hover > .anchor, h6:hover > .anchor,
.anchor:focus-visible { opacity: 1; }
@media (hover: none) { .anchor { opacity: 1; } }

/* ---------- code ---------- */

.prose code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--raised);
  padding: 0.15em 0.35em;
  border-radius: 3px;
}

.prose pre.highlight {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.3rem;
  overflow-x: auto;
}
.prose pre.highlight code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* ---------- tables ---------- */

.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--s-1);
  margin: 0 0 1.3rem;
  display: block;
  overflow-x: auto;
}
.prose th, .prose td {
  text-align: left;
  padding: 0.5rem 0.9rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose th {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* ---------- admonitions (comrak alerts) ---------- */

.prose .markdown-alert {
  border-left: 2px solid var(--ink-3);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 0 0 1.3rem;
  color: var(--ink-2);
}
.prose .markdown-alert-title {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.35rem;
}
.prose .markdown-alert > p:last-child { margin-bottom: 0; }

.prose blockquote {
  margin: 0 0 1.3rem;
  padding-left: 1rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-2);
}

.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ---------- section index ---------- */

.children { list-style: none; margin: 0; padding: 0; }
.children li { border-top: 1px solid var(--rule); }
.children li:last-child { border-bottom: 1px solid var(--rule); }
.children a {
  display: block;
  padding: 0.9rem 0;
  text-decoration: none;
  color: var(--ink);
}
.children a:hover { color: var(--accent); }
.children .desc { display: block; color: var(--ink-3); font-size: var(--s-1); margin-top: 0.15rem; }

/* ---------- footer ---------- */

.colophon {
  border-top: 1px solid var(--rule);
  padding: 1.5rem var(--gutter);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}
.colophon a { color: var(--ink-3); }

/* ---------- responsive ---------- */

@media (max-width: 68rem) {
  .layout { grid-template-columns: 14rem minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 48rem) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 1.5rem;
  }
  .sidebar {
    position: static;
    max-height: none;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
  }
  .title-block h1 { font-size: var(--s3); }
}

/* ---------- Korean ----------
   Three Latin devices do not survive contact with Hangul:

   letter-spacing pushes syllable blocks apart until a word stops reading as one
   word; text-transform does nothing at all; and a monospace family is the worst
   of them, because Hangul falls back to a proportional font while the *space*
   still comes from the mono face, so every gap between 어절 renders double
   width and the heading looks broken.

   Structure still reads through size, weight and colour, which need no help. */
html[lang="ko"] .title-block h1,
html[lang="ko"] .prose h2,
html[lang="ko"] .prose h3,
html[lang="ko"] .prose h4,
html[lang="ko"] .sidebar > ul > li > a,
html[lang="ko"] .toc::before,
html[lang="ko"] .prose th,
html[lang="ko"] .prose .markdown-alert-title {
  font-family: var(--sans);
  letter-spacing: -0.01em;
  text-transform: none;
}
html[lang="ko"] .title-block h1,
html[lang="ko"] .prose h2,
html[lang="ko"] .prose h3,
html[lang="ko"] .prose h4 {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}