.fv-title { font-size: 22px; margin: 6px 0 12px; }
.fv-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--hint); margin: 16px 0 8px; }
.fv-hint { color: var(--hint); }
.fv-error { padding: 12px; border-radius: 10px; background: var(--card); }
.fv-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fv-item {
  width: 100%; text-align: left; border: 0; border-radius: 10px; padding: 10px 12px;
  background: var(--card); color: var(--fg); font: inherit; display: grid; gap: 2px; cursor: pointer;
}
.fv-item-title { font-weight: 600; }
.fv-item-path { font-size: 12px; color: var(--hint); word-break: break-all; margin: 0; }
.fv-expired { opacity: .55; cursor: default; }
.fv-badge { font-size: 11px; color: var(--hint); text-transform: uppercase; }
/* A shown document: the always-light reading page (html.paper, see shell.css). */
.fv-page {
  --ink: #1f2328;
  --accent-ink: #0f454a;
  --soft: #f4f6f7;
  --rule: #e3e7e9;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  max-width: 70ch; margin: 0 auto;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px; line-height: 1.6; color: var(--ink);
}
.fv-head { margin: 4px 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.fv-doc-title { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0 0 2px; word-break: break-word; color: var(--hint); }
.fv-page .fv-item-path { font-family: var(--mono); font-size: 11.5px; line-height: 1.4; }

.fv-doc { overflow-wrap: break-word; text-rendering: optimizeLegibility; }
.fv-doc > :first-child { margin-top: 0; }
.fv-doc p { margin: 0 0 1.05em; }
.fv-doc h1, .fv-doc h2, .fv-doc h3, .fv-doc h4, .fv-doc h5, .fv-doc h6 { line-height: 1.28; font-weight: 700; }
.fv-doc h1 { font-size: 1.7em; margin: 1.5em 0 .6em; color: var(--accent-ink); letter-spacing: -.01em; }
.fv-doc h2 {
  font-size: 1.36em; margin: 1.9em 0 .65em; padding-bottom: .3em; color: var(--accent-ink);
  border-bottom: 1px solid rgba(15, 69, 74, .18);
}
.fv-doc h3 { font-size: 1.15em; margin: 1.6em 0 .5em; }
.fv-doc h4 { font-size: 1em; margin: 1.4em 0 .4em; }
.fv-doc h5, .fv-doc h6 { font-size: .86em; margin: 1.3em 0 .4em; text-transform: uppercase; letter-spacing: .05em; color: var(--hint); }
.fv-doc a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.fv-doc strong { font-weight: 700; }
.fv-doc hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2em 0; }
.fv-doc img { max-width: 100%; height: auto; border-radius: 6px; }

.fv-doc ul, .fv-doc ol { margin: 0 0 1.05em; padding-left: 1.45em; }
.fv-doc li { margin: .35em 0; }
.fv-doc li > p { margin: .35em 0; }
.fv-doc li > ul, .fv-doc li > ol { margin: .2em 0 .4em; }
.fv-doc li::marker { color: var(--accent-ink); }
.fv-doc li:has(> input[type=checkbox]) { list-style: none; margin-left: -1.3em; }
.fv-doc li > input[type=checkbox] { margin: 0 .5em 0 0; vertical-align: -1px; }

.fv-doc blockquote {
  margin: 1.3em 0; padding: .75em 1em; color: #3a434a;
  background: #eef4f4; border-left: 3px solid rgba(15, 69, 74, .45); border-radius: 0 10px 10px 0;
}
.fv-doc blockquote > :last-child { margin-bottom: 0; }

.fv-doc code, .fv-doc pre, .fv-text pre { font-variant-ligatures: none; }
.fv-doc code { font-family: var(--mono); font-size: .82em; padding: .12em .36em; border-radius: 5px; background: #eef0f2; }
.fv-doc pre, .fv-text pre {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.55;
  margin: 1.3em 0; padding: 12px 14px; overflow-x: auto;
  background: var(--soft); border: 1px solid var(--rule); border-radius: 10px;
}
.fv-text pre { margin: 0; }
.fv-doc .chroma .err, .fv-text .chroma .err { color: inherit; background: none; }
.fv-doc pre code { font-size: inherit; padding: 0; background: none; border-radius: 0; }

.fv-doc table {
  display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-collapse: collapse; margin: 1.4em 0; font-size: .86em; line-height: 1.45;
}
.fv-doc th, .fv-doc td { padding: .55em .8em; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; min-width: 5em; }
.fv-doc th { background: #e6eeee; color: var(--accent-ink); font-weight: 700; border-bottom: 2px solid rgba(15, 69, 74, .25); }
.fv-doc tbody tr:nth-child(even) { background: #f7f9f9; }
.fv-doc th[align=center], .fv-doc td[align=center] { text-align: center; }
.fv-doc th[align=right], .fv-doc td[align=right] { text-align: right; }

/* Mermaid: source until drawn (and if it cannot be), then a scrollable figure. */
.fv-doc pre.mermaid { white-space: pre; }
.fv-mermaid {
  margin: 1.4em 0; padding: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; text-align: center;
  border: 1px solid var(--rule); border-radius: 10px; background: #fff;
}
.fv-mermaid svg { display: inline-block; max-width: 100%; height: auto; }
.fv-mermaid.fv-wide svg { max-width: none; }
.fv-mermaid-error { margin: -.9em 0 1.3em; font-family: system-ui, sans-serif; font-size: 12.5px; color: #9a3412; }
/* An HTML document fills the window, edge to edge: it brings its own margins
   and cover, and a sandboxed frame cannot report its height to grow into. */
.fv-frame { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }