/* ==========================================================================
   Neko paged documents — the sheets, the desk and the default `neko` theme.

   A page that says `document: true` is drawn as A4 (or Letter) sheets on a desk,
   with a slim bar for the way back and the Word download. Everything on a sheet
   is sized in `cqw` — one hundredth of the sheet's width — so a sheet is one
   composition that scales as a piece, the way a printed page does. The Word
   export lays the same sheets out at exactly 794 px (A4 at 96 dpi) and reads
   what the browser drew, so this stylesheet is also the file's design.

   Structure of a sheet (generated by HtmlGenerator.Document):
     .doc-page[data-layout][data-ground]
       .doc-art[data-doc-bg]      decorative art, placed by the layout
       .doc-panel[data-doc-bg]    a decorative panel (sidebar layout)
       .doc-head[data-doc-part]   the running head   → the Word header
       .doc-body                  the flow
       .doc-foot[data-doc-part]   brand and page no. → the Word footer

   Theme hooks: `[data-doc-theme="neko"]` (this file) and `curiosity`
   (document-curiosity.css). A sheet's ground sets --g (surface), --t (text),
   --t2 (secondary text), --t3 (labels) and --rule (hairlines).
   ========================================================================== */

:root {
  --doc-desk: #E5E7EB;
  --doc-desk-ink: #111827;
  --doc-desk-dim: #4B5563;
  --doc-desk-rule: #D1D5DB;
  --doc-bar-bg: #F3F4F6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --doc-desk: #14171C; --doc-desk-ink: #F3F4F6; --doc-desk-dim: #9CA3AF; --doc-desk-rule: #2A2F38; --doc-bar-bg: #0E1115;
  }
}

html.neko-doc-html { background: var(--doc-desk); }
.neko-doc-body {
  margin: 0;
  background: var(--doc-desk);
  color: var(--doc-desk-ink);
  font-family: Inter, ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- the bar ---------- */

.doc-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px clamp(12px, 3vw, 28px);
  background: var(--doc-bar-bg);
  border-bottom: 1px solid var(--doc-desk-rule);
  font-size: 14px;
}
.doc-bar-spacer { flex: 1; }
.doc-back, .doc-bar button {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--doc-desk-ink); text-decoration: none;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--doc-desk-dim); background: transparent; cursor: pointer;
}
.doc-back:hover, .doc-bar button:hover { background: var(--doc-desk-ink); color: var(--doc-desk); }
.doc-bar button:disabled { opacity: .6; cursor: progress; }
.doc-bar button:focus-visible, .doc-back:focus-visible { outline: 3px solid var(--doc-desk-ink); outline-offset: 2px; }
.doc-count { font: 400 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--doc-desk-dim); }

/* ---------- the desk ---------- */

.docs { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px clamp(8px, 3vw, 28px) 96px; }

/* ---------- the sheet ---------- */

.doc-page {
  /* The ground, the type on it, the secondary type, the label tone and the hairline. */
  --g: #FFFFFF; --t: #111827; --t2: #4B5563; --t3: #6B7280; --rule: #E5E7EB;
  --mx: 10cqw; --mt: 9cqw; --mb: 8cqw;     /* side, top and bottom margins */
  --fs: 1.76cqw;                              /* the body size: 10.5pt on A4 */

  container-type: inline-size;
  position: relative;
  box-sizing: border-box;
  width: min(100%, 900px);
  aspect-ratio: 210 / 297;
  display: flex;
  flex-direction: column;
  background: var(--g);
  color: var(--t);
  font-family: Inter, ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 10px 28px rgba(0, 0, 0, .10);
}
html[data-doc-size="letter"] .doc-page { aspect-ratio: 8.5 / 11; }

.doc-head, .doc-body, .doc-foot {
  position: relative;
  z-index: 1;
  margin-left: var(--mx);
  margin-right: var(--mx);
  font-size: var(--fs);
  line-height: 1.55;
}
.doc-head { margin-top: var(--mt); }
.doc-body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; padding-top: var(--mt); padding-bottom: 3cqw; }
.doc-head + .doc-body { padding-top: 2cqw; }
.doc-foot { margin-bottom: 5cqw; }

.doc-art, .doc-panel { position: absolute; z-index: 0; pointer-events: none; }
.doc-art svg, .doc-art-block svg { display: block; width: 100%; height: 100%; }

/* ---------- running head and foot ---------- */

.doc-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw;
  font: 500 1.2cqw/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: var(--t3);
  padding-bottom: 1.6cqw; border-bottom: 1px solid var(--rule);
}
.doc-head svg { display: inline-block; height: .9em; width: auto; margin-right: .6em; vertical-align: -.05em; }
.doc-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 2cqw;
  padding-top: 1.6cqw; border-top: 1px solid var(--rule);
  font-size: 1.3cqw; color: var(--t3);
}
.doc-brand { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; letter-spacing: -.01em; color: var(--t); }
.doc-brand img { height: 2.4cqw; width: auto; display: block; }
.doc-pagenum, .doc-foot-text { font: 400 1.25cqw/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.doc-lockup { display: inline-flex; font-size: 2.1cqw; line-height: 1; }
.doc-lockup svg { height: 1em; width: auto; display: block; }

/* ---------- the flow, in the neko theme ---------- */

.doc-body > :first-child { margin-top: 0; }
.doc-body h1 { font-size: 2.7em; line-height: 1.08; font-weight: 600; letter-spacing: -.025em; margin: 1.2em 0 .5em; color: var(--t); }
.doc-body h2 { font-size: 1.7em; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; margin: 1.5em 0 .5em; color: var(--t); }
.doc-body h3 { font-size: 1.3em; line-height: 1.25; font-weight: 600; margin: 1.3em 0 .4em; color: var(--t); }
.doc-body h4, .doc-body h5, .doc-body h6 { font-size: 1.05em; font-weight: 600; margin: 1.2em 0 .3em; }
.doc-body p { margin: 0 0 .8em; }
.doc-body a { color: var(--doc-accent, #2563EB); text-decoration: underline; text-underline-offset: .15em; }
.doc-body strong { font-weight: 600; }
.doc-body ul, .doc-body ol { margin: 0 0 .9em; padding-left: 1.5em; list-style: disc outside; }
.doc-body ol { list-style-type: decimal; }
.doc-body ul ul { list-style-type: circle; }
.doc-body li { margin: .2em 0; }
.doc-body li > p { margin: 0; }
.doc-body hr { border: 0; border-top: 1px solid var(--rule); margin: 1.4em 0; }
.doc-body code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace; font-size: .88em; background: #F3F4F6; padding: .1em .35em; border-radius: .25em; color: #111827; }
.doc-body pre { margin: 0 0 1em; padding: 1em 1.2em; background: #F3F4F6; border-radius: .4em; font-size: .86em; line-height: 1.55; overflow: hidden; white-space: pre; }
.doc-body pre code { background: none; padding: 0; font-size: 1em; border-radius: 0; }
/* A code block keeps Neko's own wrapper (copy button, utility classes); on a sheet it is just the pre. */
.doc-body .neko-code-block { margin: 0 0 1em; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.doc-body .neko-code-block .copy-btn { display: none; }
.doc-body pre code { display: block; padding: 0 !important; margin: 0 !important; font-size: inherit !important; line-height: inherit; background: none !important; color: inherit !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; white-space: pre; }
.doc-body blockquote { margin: 0 0 1em; padding: .3em 0 .3em 1.1em; border-left: .3em solid var(--doc-accent, #2563EB); color: var(--t2); }
.doc-body blockquote > :last-child { margin-bottom: 0; }
.doc-body img { max-width: 100%; height: auto; display: block; margin: 0 auto 1em; }
.doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.1em; font-size: .94em; }
.doc-body th { text-align: left; font-weight: 600; padding: .55em .7em; border-bottom: .15em solid var(--t); }
.doc-body td { padding: .5em .7em; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc-body dt { font-weight: 600; }
.doc-body dd { margin: 0 0 .6em 1.2em; color: var(--t2); }
.doc-body figure { margin: 0 0 1.1em; }
.doc-body figcaption { font-size: .85em; color: var(--t3); margin-top: .5em; }
.doc-label { font: 500 .78em/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); margin: 0 0 .5em; }
.doc-legend { color: var(--t3); }

/* Components that work in every theme. */
.doc-cols { display: grid; grid-template-columns: repeat(var(--doc-n, 2), minmax(0, 1fr)); gap: 3cqw; margin: 0 0 1.1em; }
.doc-cols[data-cols="1"] { --doc-n: 1; } .doc-cols[data-cols="3"] { --doc-n: 3; } .doc-cols[data-cols="4"] { --doc-n: 4; }
.doc-cols[style*="--doc-cols-ratio"] { grid-template-columns: var(--doc-cols-ratio); }
.doc-col { min-width: 0; }
.doc-col > :last-child { margin-bottom: 0; }
.doc-box { padding: 1.4em 1.6em; margin: 0 0 1.1em; background: #F3F4F6; }
.doc-box-title { margin-top: 0 !important; }
.doc-note { margin: 0 0 1em; padding-top: .6em; border-top: 1px solid var(--t); }
.doc-note-label, .doc-box-label, .doc-key-label { font: 500 .78em/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .5em !important; }
.doc-note > p { color: var(--t2); margin: 0 0 .6em; }
.doc-key { margin: 0 0 1em; padding: 1.2em 1.4em; background: var(--doc-accent, #2563EB); color: #fff; }
.doc-key-body > :last-child { margin-bottom: 0; }
.doc-lead { font-size: 1.2em; color: var(--t2); }
.doc-claim { font-size: 1.5em; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; margin: 0 0 1em; }
.doc-claim p { margin: 0; }
.doc-figure { margin: 0 0 1.2em; }
.doc-flow-svg { display: block; width: 100%; height: auto; overflow: visible; }
.doc-flow-svg text { font-family: inherit; }
.doc-flow-svg .f-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.doc-flow-svg .f-box { fill: none; stroke: currentColor; stroke-width: 1; }
.doc-flow-svg .f-solid { fill: currentColor; stroke: currentColor; stroke-width: 1; }
.doc-flow-svg .f-line { stroke: currentColor; stroke-width: 1.2; stroke-linecap: square; }
.doc-flow-svg .f-ink { fill: currentColor; }
.doc-flow-svg .f-mute { fill: var(--t3); }
.doc-flow-svg .f-inv { fill: var(--g); }
.doc-flow-svg .f-inv2 { fill: var(--g); opacity: .75; }
.doc-flow-svg .art-sig, .doc-art-svg .art-sig { fill: var(--doc-signal, #2F6BFF); }
.doc-facts dl, .doc-facts { margin: 0 0 1em; }
.doc-entries .doc-entry { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; gap: 1em; padding: .8em 0; border-top: 1px solid var(--rule); }
.doc-entry-num, .doc-entry-page { font: 500 .8em/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.doc-entry-body > p.doc-entry-title { margin: 0 !important; font-weight: 600; color: var(--t); }
.doc-entry-body p { margin: 0; color: var(--t2); }
.doc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; margin: 0 0 1.2em; }
.doc-step { padding: 1.2em; background: #F3F4F6; }
.doc-step-num { font: 500 1.6em/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; margin: 0 0 .8em !important; }
.doc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4cqw; margin: 0 0 1.2em; }
.doc-stat { padding: 1.2em; background: #F3F4F6; }
.doc-stat-value { font: 500 2.4em/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; margin: 0 0 .3em !important; }
.doc-stat-label { margin: 0 !important; color: var(--t3); }
.doc-quote { margin: 0 0 1.2em; }
.doc-quote blockquote { font-size: 1.6em; line-height: 1.3; font-weight: 600; border: 0; padding: 0; color: var(--t); }
.doc-quote figcaption { color: var(--t3); }
.doc-quote-logo { height: 3.4cqw; width: 14cqw; margin: 0 0 1em; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; }
.doc-glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3cqw; margin: 0 0 1em; }
.doc-term { padding: .9em 0; border-top: 1px solid var(--rule); }
.doc-term-name { font: 500 .8em/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .4em !important; }
.doc-term p { margin: 0; color: var(--t2); }
.doc-aside { min-width: 0; }
.doc-mark { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.15em; background: var(--t); }
.doc-mark[data-kind="part"] { background: #8A9099; }
.doc-mark[data-kind="no"] { background: transparent; border: 1px solid var(--t); box-sizing: border-box; }
.doc-body .deck-tag { display: inline-block; padding: .35em .9em; border: 1px solid currentColor; border-radius: 999px; font-size: .9em; font-weight: 500; }
.doc-body .deck-tag[data-tone="solid"] { background: var(--doc-accent, #2563EB); border-color: var(--doc-accent, #2563EB); color: #fff; }
.doc-body input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 1em; height: 1em; margin: 0 .6em 0 0; border: 1px solid currentColor; vertical-align: -.12em; background: transparent; }
.doc-body input[type="checkbox"]:checked { background: currentColor; }
.doc-body li.task-list-item { list-style: none; margin-left: -1.5em; }

/* A sheet's ground. */
.doc-page[data-ground="stone"] { --g: #E6E8E8; }
.doc-page[data-ground="ink"], .doc-page[data-ground="slate"], .doc-page[data-ground="deep"] { --t: #F4F4F2; --t2: #D1D5DB; --t3: #9CA3AF; --rule: #374151; }
.doc-page[data-ground="ink"] { --g: #111418; }
.doc-page[data-ground="slate"] { --g: #2A2F38; }
.doc-page[data-ground="deep"] { --g: #0029E7; --t2: #D5DCFF; --t3: #AEBBFF; --rule: rgba(244, 244, 242, .4); }

/* ---------- the neko theme: a plain, readable page ---------- */

[data-doc-theme="neko"] .doc-art, [data-doc-theme="neko"] .doc-panel { display: none; }
[data-doc-theme="neko"] .doc-page { --doc-accent: #2563EB; }

/* ---------- locked ---------- */

.doc-locked #content-container { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 5vw, 64px); }
.doc-locked #password-form-container { max-width: 30rem; margin: 0 auto; width: 100%; background: transparent; border: 0; padding: 0; }

/* ---------- print: one sheet per page ---------- */

@media print {
  @page { size: A4; margin: 0; }
  html[data-doc-size="letter"] { }
  .doc-bar { display: none !important; }
  .neko-doc-body, html.neko-doc-html { background: #fff; }
  .docs { display: block; padding: 0; }
  .doc-page { width: 210mm; height: 297mm; min-height: 297mm; box-shadow: none; break-after: page; page-break-after: always; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html[data-doc-size="letter"] .doc-page { width: 8.5in; height: 11in; }
}