/* Craftly documentation.

   Palette roles: paper ground, chalk raised, stone rules; ink and soft ink for
   text; brand green for links, focus and the stitch that marks position;
   marigold only on a callout.

   Signature: a running stitch. Section rules are basting stitches, the sidebar
   marks your page with a cross-stitch, and the contents rail is thread sewn
   tight behind you and left loose ahead. Position, separation and progress out
   of one motif, because the mark of hand work is the stitch and this is
   documentation for a craft-supply theme. */

:root {
  --paper: #fbfaf7;
  --chalk: #f2f0ea;
  --stone: #e4e1d8;
  --ink: #211f1e;
  --soft: #6e6a65;
  --green: #007969;
  --green-deep: #00564b;
  --marigold: #e8a33d;
  --marigold-bg: #fbf2e2;

  --measure: 68ch;
  --header: 65px;

  --display: "Young Serif", Georgia, serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;

  --stitch-h: repeating-linear-gradient(90deg, #b9b4ab 0 9px, transparent 9px 17px);
  --stitch-v: repeating-linear-gradient(180deg, #cfcac1 0 7px, transparent 7px 14px);
  --stitch-v-on: repeating-linear-gradient(180deg, #007969 0 7px, transparent 7px 14px);
}

/* A second palette, not an inverted filter: the greens lighten so they still
   carry links and focus against a dark ground. */
[data-theme="dark"] {
  --paper: #171514;
  --chalk: #221f1d;
  --stone: #37332f;
  --ink: #f0ede7;
  --soft: #a9a39b;
  --green: #54bfa9;
  --green-deep: #7fd6c3;
  --marigold: #f0b75c;
  --marigold-bg: #2a2318;

  --stitch-h: repeating-linear-gradient(90deg, #5a544e 0 9px, transparent 9px 17px);
  --stitch-v: repeating-linear-gradient(180deg, #4a443f 0 7px, transparent 7px 14px);
  --stitch-v-on: repeating-linear-gradient(180deg, #54bfa9 0 7px, transparent 7px 14px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-deep); }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
::selection { background: rgb(0 121 105 / 0.18); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; z-index: 90; top: 8px; left: 8px;
  padding: 12px 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--stone); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ── The stitch ─────────────────────────────────────────────────────────── */

.stitch { height: 2px; margin: 44px 0; background: var(--stitch-h); }
.stitch--nav { margin: 26px 0 14px; }
.stitch--foot { margin: 56px 0 22px; }

/* ── Masthead ───────────────────────────────────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; gap: 16px;
  height: var(--header); padding: 0 20px;
  background: var(--paper); border-bottom: 1px solid var(--stone);
}

.wordmark { display: flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--ink); }
.wordmark__stitch { color: var(--green); align-self: center; }
.wordmark__name { font-family: var(--display); font-size: 19px; letter-spacing: -0.01em; }
.wordmark__kind {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--soft);
}

.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: var(--chalk); color: var(--ink);
  border: 1px solid var(--stone); cursor: pointer;
}

.masthead__menu { display: none; }
.masthead__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

.button-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px;
  border: 1px solid var(--green); color: var(--green);
  font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.button-ghost:hover { background: var(--chalk); }

/* ── Search ─────────────────────────────────────────────────────────────── */

.search { position: relative; flex: 1; max-width: 420px; }

.search__icon { position: absolute; left: 11px; top: 11px; color: var(--soft); }

.search__input {
  width: 100%; height: 36px; padding: 0 62px 0 32px;
  background: var(--chalk); color: var(--ink);
  border: 1px solid var(--stone); border-radius: 2px;
  font-family: var(--body); font-size: 14px;
}

.search__key {
  position: absolute; right: 8px; top: 9px;
  padding: 1px 5px; background: var(--paper);
  border: 1px solid var(--stone);
  font-family: var(--mono); font-size: 11px; color: var(--soft);
}

.search__results {
  position: absolute; z-index: 80; inset-inline: 0; top: calc(100% + 8px);
  max-height: 60vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--stone);
  box-shadow: 0 12px 32px rgb(33 31 30 / 0.14);
}

.search__hit {
  display: block; padding: 10px 14px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--stone);
}
.search__hit:last-child { border-bottom: 0; }
.search__hit:hover, .search__hit[aria-selected="true"] { background: var(--chalk); }
.search__hit-page {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft);
}
.search__hit-label { display: block; font-size: 14.5px; }
.search__empty { padding: 14px; font-size: 14px; color: var(--soft); }

/* ── Shell ──────────────────────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 232px;
  max-width: 1480px; margin: 0 auto;
}

.sidebar {
  position: sticky; top: var(--header);
  height: calc(100vh - var(--header)); overflow-y: auto;
  padding: 30px 22px 48px; border-right: 1px solid var(--stone);
}

.nav__group {
  margin: 22px 0 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--soft);
}
.nav__group:first-child { margin-top: 0; }

.nav__link {
  display: block; padding: 7px 10px 7px 26px; margin-bottom: 2px;
  font-size: 14.5px; color: var(--ink); text-decoration: none;
}
.nav__link:hover { color: var(--green); }

.nav__link--current {
  display: flex; align-items: center; gap: 9px;
  padding-left: 10px; font-weight: 600;
  color: var(--green); background: var(--chalk);
  border-left: 2px solid var(--green);
}
.nav__mark { flex: none; }

.sidebar__meta { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--soft); }

.drawer-scrim { display: none; }

/* ── Article ────────────────────────────────────────────────────────────── */

.article { min-width: 0; padding: 46px 56px 96px; }
.prose { max-width: var(--measure); }

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--soft);
}

.prose h1 {
  margin: 0 0 18px;
  font-family: var(--display); font-weight: 400; font-size: 40px;
  line-height: 1.12; letter-spacing: -0.015em;
}

.prose h2 {
  margin: 44px 0 16px;
  font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.2;
  scroll-margin-top: 96px;
}

.prose h3 {
  margin: 32px 0 12px;
  font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.25;
  scroll-margin-top: 96px;
}

.prose h4 { margin: 26px 0 10px; font-size: 17px; font-weight: 600; }

.prose h1 + p { font-size: 18.5px; color: var(--soft); }

.prose p, .prose ul, .prose ol { margin: 0 0 20px; }
.prose li { margin-bottom: 6px; }
.prose ul, .prose ol { padding-left: 22px; }

.prose code {
  padding: 2px 5px; background: var(--chalk);
  font-family: var(--mono); font-size: 0.86em;
}

.prose pre {
  margin: 0 0 22px; padding: 16px 18px; overflow-x: auto;
  background: var(--ink);
}
.prose pre code { padding: 0; background: none; color: var(--paper); }

.table-wrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--stone); }
table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; }

thead tr { background: var(--chalk); }

th[scope="col"] {
  padding: 11px 16px; text-align: left;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--soft);
  border-bottom: 1px solid var(--stone);
}

th[scope="row"] { padding: 14px 16px; text-align: left; font-weight: 600; }
td { padding: 14px 16px; color: var(--soft); }
tbody tr { border-bottom: 1px solid var(--stone); }
tbody tr:last-child { border-bottom: 0; }

.callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px;
  margin: 0 0 22px; padding: 20px 22px;
  background: var(--marigold-bg); border: 1px solid var(--marigold);
}
.callout__mark { margin-top: 3px; color: var(--marigold); }
.callout__label {
  margin: 0 0 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink);
}
.callout__body { margin: 0; font-size: 16.5px; line-height: 1.65; }

.page-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px;
  font-size: 14.5px; color: var(--soft);
}
.page-foot__mark {
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── Support form ───────────────────────────────────────────────────────── */

.support-form {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 34rem; margin: 0 0 24px;
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field label { font-size: 14px; color: var(--ink); font-weight: 500; }

.field input, .field select, .field textarea {
  min-height: 44px; padding: 10px 12px;
  background: var(--paper); color: inherit;
  border: 1px solid var(--stone); border-radius: 2px;
  font: inherit; font-size: 15px;
}

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--soft); }

.field__hint { margin: 0; font-size: 13px; color: var(--soft); }

.button-solid {
  align-self: flex-start;
  min-height: 44px; padding: 0 22px;
  background: var(--green); color: var(--paper);
  border: 1px solid var(--green); border-radius: 2px;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.button-solid:hover { background: var(--green-deep); border-color: var(--green-deep); }

[data-theme="dark"] .button-solid { color: #171514; }

.honey {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.form-status {
  margin: 0; padding: 12px 14px;
  border: 1px solid var(--stone); background: var(--chalk);
  font-size: 15px;
}
.form-status[data-state="ok"] { border-color: var(--green); color: var(--green-deep); }
.form-status[data-state="error"] { border-color: var(--marigold); background: var(--marigold-bg); }

/* ── Contents rail ──────────────────────────────────────────────────────── */

.toc {
  position: sticky; top: var(--header);
  height: calc(100vh - var(--header));
  padding: 46px 24px 0 4px; overflow-y: auto;
}

.toc__title {
  margin: 0 0 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--soft);
}

.toc__list { display: block; }

.toc__item {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px;
  min-height: 34px; text-decoration: none;
}

/* Thread: sewn tight behind you, loose ahead. */
.toc__rail { position: relative; justify-self: center; width: 2px; background: var(--stitch-v); }
.toc__item[data-passed="true"] .toc__rail { background: var(--stitch-v-on); }

.toc__knot {
  position: absolute; left: -4px; top: 9px;
  width: 10px; height: 10px;
  background: var(--paper); border: 2px solid var(--green);
  opacity: 0;
}
.toc__item[aria-current="true"] .toc__knot { opacity: 1; }

.toc__label { padding: 5px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.toc__item[aria-current="true"] .toc__label { color: var(--green); font-weight: 600; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .toc { display: none; }
  .shell { grid-template-columns: 268px minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed; z-index: 60; top: var(--header); bottom: 0; left: 0;
    width: 284px; background: var(--paper);
    transform: translateX(-101%); transition: transform 0.22s ease;
  }
  .sidebar[data-open="true"] { transform: none; }

  .drawer-scrim {
    display: block; position: fixed; z-index: 50; inset: var(--header) 0 0;
    background: rgb(0 0 0 / 0.35);
  }
  .drawer-scrim[hidden] { display: none; }

  .masthead__menu { display: inline-flex; }
  .masthead { gap: 10px; padding-inline: 14px; }
  .wordmark__kind { display: none; }
  .button-ghost { display: none; }
  .article { padding: 28px 20px 72px; }
  .search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}