/* VisualText Help — documentation layout and content styles (loaded after site.css) */

:root {
  --code-bg: #f4f2ec;
  --callout-bg: #fff8d6;
  --callout-line: #e2c94a;
  --c-red: #c0262d;
  --c-blue: #1f4fd1;
  --c-teal: #0f7171;
  --c-green: #1b7f2a;
  --c-purple: #7b2c9b;
  --c-magenta: #b0127f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --code-bg: #1f2029;
    --callout-bg: #2a2716;
    --callout-line: #8a7a2a;
    --c-red: #ff8080;
    --c-blue: #93b2ff;
    --c-teal: #63d6d6;
    --c-green: #79da95;
    --c-purple: #d59ff2;
    --c-magenta: #f27cc9;
  }
}

/* Layout: sidebar + content */
.docs { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
.docs-side {
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
  padding: 24px 8px 24px 0; border-right: 1px solid var(--line); font-size: .88rem;
}
.docs-side-hidden { display: none; }
.docs-side-hidden + .docs-main { grid-column: 1 / -1; }
.docs-toc-toggle > summary { display: none; }
.docs-home { display: block; font-weight: 600; margin: 0 0 12px; text-decoration: none; }
.docs-toc, .docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc ul { padding-left: 12px; border-left: 1px solid var(--line); margin-left: 6px; }
.docs-toc a { display: block; padding: 3px 6px; border-radius: 4px; text-decoration: none; color: var(--muted); }
.docs-toc a:hover { color: var(--text); background: var(--notice-bg); }
.docs-toc a[aria-current="page"] { color: var(--text); background: var(--notice-bg); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.docs-toc summary { cursor: pointer; padding: 3px 6px; color: var(--text); font-weight: 600; }

.docs-main { padding: 32px 0 0; min-width: 0; }
.docs-main h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }

@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; gap: 0; }
  .docs-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
  .docs-toc-toggle > summary {
    display: block; cursor: pointer; font-weight: 600; padding: 8px 12px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  }
  .docs-toc-toggle[open] > summary { margin-bottom: 12px; }
}

/* Topic content */
.doc { max-width: 50rem; overflow-wrap: break-word; }
.doc h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; }
.doc h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
.doc h4, .doc h5 { font-size: 1rem; margin: 1.25rem 0 .3rem; font-family: var(--font); }
.doc .subtitle { color: var(--muted); font-size: 1.05rem; margin-top: -4px; }
.doc img { border-radius: 4px; vertical-align: middle; }
.doc p > img:only-child, .doc p > a > img:only-child { background: #fff; padding: 3px; border: 1px solid var(--line); }
.doc .indent { margin-left: 2rem; }
.doc li > p { margin: .25rem 0; }

.doc code, .doc .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .88em; }
.doc code { background: var(--code-bg); padding: 1px 4px; border-radius: 4px; }
.doc .code {
  display: block; background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 14px; margin: 12px 0; overflow-x: auto; white-space: nowrap; line-height: 1.55;
}
.doc .code + .code { margin-top: -6px; }

.doc .callout, .doc td.callout {
  background: var(--callout-bg); border-left: 4px solid var(--callout-line);
  border-radius: 6px; padding: 12px 16px; margin: 16px 0;
}
.doc .callout p { margin: .3rem 0; }

.doc .table-wrap { overflow-x: auto; margin: 16px 0; }
.doc table.doc-table { border-collapse: collapse; font-size: .92rem; min-width: 60%; }
.doc table.doc-table td, .doc table.doc-table th {
  border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top;
}
.doc table.doc-table th { background: var(--notice-bg); font-weight: 600; }
.doc table.doc-table p { margin: 0 0 4px; }
.doc table.doc-table p:last-child { margin: 0; }

.c-red { color: var(--c-red); }
.c-blue { color: var(--c-blue); }
.c-teal { color: var(--c-teal); }
.c-green { color: var(--c-green); }
.c-purple { color: var(--c-purple); }
.c-magenta { color: var(--c-magenta); }

/* Sidebar: home link and filter */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.docs-home[aria-current="page"] { color: var(--accent); }
.docs-filter { display: block; margin: 0 6px 12px 0; }
.docs-filter input {
  width: 100%; font: inherit; font-size: .88rem; padding: 7px 10px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.docs-filter input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.docs-filter-empty { color: var(--muted); margin: 0 6px 8px; }

/* Docs home */
.doc .lede { font-size: 1.12rem; color: var(--muted); }
.doc .cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.doc .card h3 { font-size: 1.05rem; }
.doc .card .count { display: block; margin-top: 10px; font-size: .8rem; color: var(--accent); font-weight: 600; }