/* TexKit Studio documentation site.
   The tokens below are the app's own (src/texkit_studio/static/css/tokens.css): same "Inkwell" accent, same greys,
   same light and dark palettes, solid colours only. Layout comes from Tailwind (utility classes in the HTML);
   this file holds the tokens, the logo colours and the typography of the documentation text. */

/* Fonts, self-hosted (SIL Open Font Licence, see assets/fonts): Figtree for text, Source Serif 4 for headings, JetBrains Mono for code. */
@font-face { font-family: "Figtree Variable"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Source Serif 4 Variable"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"); }

:root {
  color-scheme: light;
  --accent: #1D6A72;  --accent-hover: #175A61;  --accent-soft: rgba(29, 106, 114, .10);
  --btn: #1D6A72;  --btn-hover: #175A61;  --on-btn: #fff;  --mark: #1D6A72;

  --bg-window: #F5F5F7;  --bg-surface: #FFFFFF;  --bg-card: #FFFFFF;  --bg-pdf: #E9E9EE;  --bg-code: #F0F0F3;
  --material-chrome: rgba(246, 246, 248, .82);
  --fill-hover: rgba(0, 0, 0, .045);  --fill-pressed: rgba(0, 0, 0, .08);  --separator: rgba(0, 0, 0, .09);
  --text-primary: #1D1D1F;  --text-secondary: #6E6E73;  --text-tertiary: #8E8E93;
  --danger: #D93036;  --danger-soft: rgba(217, 48, 54, .10);
  --warning: #B86E00; --warning-soft: rgba(245, 165, 36, .14);
  --success: #1F8A4C; --success-soft: rgba(48, 164, 108, .12);
  --syn-cmd: #1D6A72;  --syn-env: #6B5BA8;  --syn-math: #B0435E;  --syn-comment: #8E8E93;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .06);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .08);

  --font-ui: "Figtree Variable", Figtree, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Source Serif 4 Variable", "Source Serif 4", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono Variable", "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #7CC4BE;  --accent-hover: #96D3CE;  --accent-soft: rgba(124, 196, 190, .14);
  --btn: #2E7D83;  --btn-hover: #358C93;  --on-btn: #fff;  --mark: #2E7D83;

  --bg-window: #161618;  --bg-surface: #1C1C1F;  --bg-card: #232326;  --bg-pdf: #111113;  --bg-code: #101012;
  --material-chrome: rgba(30, 30, 33, .84);
  --fill-hover: rgba(255, 255, 255, .06);  --fill-pressed: rgba(255, 255, 255, .10);  --separator: rgba(255, 255, 255, .09);
  --text-primary: #F5F5F7;  --text-secondary: #A1A1A6;  --text-tertiary: #76767B;
  --danger: #FF6B6F;  --danger-soft: rgba(255, 107, 111, .14);
  --warning: #FFB547; --warning-soft: rgba(255, 181, 71, .14);
  --success: #4CD48A; --success-soft: rgba(76, 212, 138, .14);
  --syn-cmd: #7CC4BE;  --syn-env: #B7A8E6;  --syn-math: #F08AA6;  --syn-comment: #6E6E73;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, .45), 0 0 0 .5px rgba(255, 255, 255, .08);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(255, 255, 255, .1);
}

/* Tailwind's browser build draws the page a moment after load: keep it hidden until then (site.js adds tw-ready). */
html:not(.tw-ready) body { visibility: hidden; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }
body { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; letter-spacing: -.004em; background: var(--bg-window); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Headings are set in a serif: it gives the site a printed, scholarly voice, and it suits a tool for papers. */
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.022em; font-optical-sizing: auto; }
code, pre, kbd, samp { font-family: var(--font-mono); letter-spacing: 0; font-feature-settings: normal; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Logo: the app's mark, coloured by the theme. */
.appmark svg { width: 100%; height: 100%; overflow: visible; display: block; }
.appmark .lg-doc { fill: var(--mark); }
.appmark .lg-fold { fill: #fff; opacity: .4; }
.appmark .lg-ink { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.appmark .lg-orbit { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.appmark .lg-back { opacity: .45; }
.appmark .lg-pen { fill: #fff; stroke: var(--accent); stroke-width: 1.1; }
.appmark .lg-nib { fill: var(--accent); }

/* Window frame around screenshots. */
.frame { border-radius: 12px; background: var(--bg-surface); box-shadow: var(--shadow-3); overflow: hidden; }
.frame-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--bg-window); border-bottom: .5px solid var(--separator); }
.frame-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--fill-pressed); display: block; }
.frame img { display: block; width: 100%; height: auto; cursor: zoom-in; }
html[data-theme="dark"] .only-light, html:not([data-theme="dark"]) .only-dark { display: none; }

/* Badges that echo the app's reference badges. */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.badge.warn { background: var(--warning-soft); color: var(--warning); }
.badge.info { background: var(--accent-soft); color: var(--accent); }
.badge.plain { background: var(--fill-hover); color: var(--text-secondary); }

kbd, .kbd { font-family: var(--font-ui); font-size: .78rem; font-weight: 500; padding: 1px 7px 2px; border-radius: 6px; background: var(--bg-surface); border: .5px solid var(--separator); box-shadow: 0 1px 0 var(--separator); color: var(--text-primary); white-space: nowrap; }

/* ── Documentation text ───────────────────────────────────────────────── */
.doc { font-size: 1rem; line-height: 1.7; color: var(--text-primary); }
.doc > section { padding-top: 3rem; margin-top: 3rem; border-top: .5px solid var(--separator); }
.doc > section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.doc h2 { font-size: 2rem; line-height: 1.15; font-weight: 600; margin: 0 0 1rem; }
.doc h3 { font-size: 1.1rem; font-weight: 650; letter-spacing: -.005em; margin: 2rem 0 .5rem; }
.doc p { margin: 0 0 1rem; color: var(--text-primary); }
.doc p.lead { font-size: 1.125rem; color: var(--text-secondary); }
.doc ul, .doc ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.doc ul { list-style: disc; } .doc ol { list-style: decimal; }
.doc li { margin: .35rem 0; padding-left: .2rem; }
.doc li::marker { color: var(--text-tertiary); }
.doc strong { font-weight: 650; }
.doc a:not(.btn) { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.doc a:not(.btn):hover { text-decoration-color: var(--accent); }
.doc code { font-family: var(--font-mono); font-size: .86em; padding: .12em .42em; border-radius: 6px; background: var(--bg-code); border: .5px solid var(--separator); }
.doc pre { margin: 0 0 1.2rem; padding: 1rem 1.15rem; border-radius: 10px; background: var(--bg-code); border: .5px solid var(--separator); overflow-x: auto; font-size: .86rem; line-height: 1.65; }
.doc pre code { padding: 0; border: 0; background: none; font-size: inherit; }
.doc pre .c { color: var(--syn-comment); } .doc pre .k { color: var(--syn-cmd); } .doc pre .e { color: var(--syn-env); }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.3rem; font-size: .93rem; }
.doc th { text-align: left; font-weight: 600; color: var(--text-secondary); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; padding: .55rem .8rem; border-bottom: .5px solid var(--separator); }
.doc td { padding: .65rem .8rem; border-bottom: .5px solid var(--separator); vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }
.doc .table-wrap { border: .5px solid var(--separator); border-radius: 10px; background: var(--bg-surface); overflow-x: auto; margin: 0 0 1.3rem; }
.doc .table-wrap table { margin: 0; }
.doc .shot { margin: 1.4rem 0 1.6rem; }
.doc .shot figcaption { margin-top: .6rem; font-size: .86rem; color: var(--text-secondary); text-align: center; }

.callout { display: flex; gap: .8rem; padding: .9rem 1.1rem; border-radius: 10px; margin: 0 0 1.3rem; font-size: .95rem; line-height: 1.6; background: var(--accent-soft); border: .5px solid var(--separator); }
.callout .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.callout p { margin: 0; } .callout p + p { margin-top: .5rem; }
.callout.warn { background: var(--warning-soft); } .callout.warn .ico { color: var(--warning); }

/* Sidebar navigation */
.side-link { display: block; padding: .32rem .75rem; border-radius: 8px; font-size: .9rem; color: var(--text-secondary); transition: background .15s, color .15s; }
.side-link:hover { background: var(--fill-hover); color: var(--text-primary); }
.side-link[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-group { margin: 1.3rem 0 .35rem; padding: 0 .75rem; font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }

/* Copy button feedback */
.copy-btn[data-done="true"] { color: var(--success); }

/* Release notes lists */
.notes ul { list-style: none; padding: 0; margin: 0; }
.notes li { position: relative; padding: .55rem 0 .55rem 1.5rem; margin: 0; border-bottom: .5px solid var(--separator); line-height: 1.6; }
.notes li:last-child { border-bottom: 0; }
.notes li::before { content: ""; position: absolute; left: .15rem; top: 1.12rem; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.notes.is-fixed li::before { background: var(--warning); } .notes.changed li::before { background: var(--text-tertiary); }
.notes li b { font-weight: 650; }
.notes code { font-family: var(--font-mono); font-size: .85em; padding: .1em .38em; border-radius: 6px; background: var(--bg-code); border: .5px solid var(--separator); }

@media print { header, footer, aside { display: none !important; } }

/* Lightbox */
#lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 3vmin; background: rgba(0, 0, 0, .72); cursor: zoom-out; animation: lb-in .18s var(--ease); }
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: var(--shadow-3); background: var(--bg-surface); }
#lightbox button { position: fixed; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: 50%; font-size: 28px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .14); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Thin scrollbars: a hairline that widens a little on hover, never a bulky bar ─────── */
:root { --scroll: rgba(0, 0, 0, .26); --scroll-hover: rgba(0, 0, 0, .5); }
:root[data-theme="dark"] { --scroll: rgba(255, 255, 255, .26); --scroll-hover: rgba(255, 255, 255, .5); }
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll); border: 4px solid transparent; background-clip: padding-box; border-radius: 99px; min-height: 36px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); border-width: 3px; background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; } }