/* The guide's own layout. Colors, fonts and pieces (sidebar, search, buttons, dialogs, code windows) come from the
   FileFortress kit (ff-kit/kit.css), so the guide follows the visitor's site theme. Class names here start with gd-. */

/* without the kit (double-click preview without ff-dev.js) it still reads fine */
body { margin: 0; background: var(--ff-bg, #120a18); color: var(--ff-text, #f4f0f7); font-family: var(--ff-font, system-ui, sans-serif); }

/* ---------- frame: sidebar left, page right ---------- */
.gd-shell { --ff-sidebar-width: 16rem; }
.gd-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.gd-sidebar > :not(.ff-side-spacer) { flex-shrink: 0; } /* a long page list scrolls instead of squeezing the filter */
.gd-filter { margin: 0 0 .5rem; --ff-search-height: 2.4rem; }
.gd-nav { display: flex; flex-direction: column; gap: 2px; }
.gd-main { min-width: 0; }

.gd-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .75rem; height: 3.5rem; padding: 0 1.5rem;
  border-bottom: 1px solid var(--ff-line, rgba(255, 255, 255, .1)); background: var(--ff-chrome, rgba(18, 10, 24, .85));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gd-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.gd-top .ff-kbd { margin-left: .25rem; }

.gd-body { display: grid; grid-template-columns: minmax(0, 46rem) 12rem; justify-content: center; gap: 3rem; padding: 2.5rem 1.5rem 4rem; }
.gd-toc { position: sticky; top: 5.5rem; align-self: start; font-size: .82rem; }
.gd-toc a { display: block; padding: .3rem 0 .3rem .8rem; border-left: 2px solid var(--ff-line, rgba(255, 255, 255, .1)); color: var(--ff-text-3, #9a8fa3); text-decoration: none; }
.gd-toc a:hover { color: var(--ff-text, #fff); }
.gd-toc a.is-on { border-color: var(--ff-brand, #ec4899); color: var(--ff-text, #fff); }

/* ---------- the page ---------- */
.gd-title { margin: .25rem 0 1.5rem; }
.gd-text { line-height: 1.7; color: var(--ff-text-2, #d8cfe0); }
.gd-text h2 { margin: 2.5rem 0 .75rem; font-size: 1.35rem; color: var(--ff-text, #fff); scroll-margin-top: 4.5rem; }
.gd-text h3 { margin: 1.75rem 0 .5rem; font-size: 1.05rem; color: var(--ff-text, #fff); scroll-margin-top: 4.5rem; }
.gd-text p { margin: .75rem 0; }
.gd-text ul, .gd-text ol { margin: .75rem 0; padding-left: 1.4rem; }
.gd-text li { margin: .3rem 0; }
.gd-text strong { color: var(--ff-text, #fff); }
.gd-text code { padding: .1rem .35rem; border-radius: .35rem; background: var(--ff-raised, rgba(255, 255, 255, .07)); font-family: var(--ff-mono, ui-monospace, monospace); font-size: .86em; color: var(--ff-text, #fff); }
.gd-text hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--ff-line, rgba(255, 255, 255, .1)); }
.gd-text blockquote { margin: 1rem 0; padding: .25rem 1rem; border-left: 3px solid var(--ff-line-strong, rgba(255, 255, 255, .2)); color: var(--ff-text-3, #b3a8bc); }
.gd-text img { display: block; max-width: 100%; height: auto; margin: 1.25rem 0; border-radius: .8rem; border: 1px solid var(--ff-line, rgba(255, 255, 255, .1)); }
.gd-download { margin: .25rem 0; text-decoration: none; }
.gd-url { font-family: var(--ff-mono, ui-monospace, monospace); font-size: .82em; color: var(--ff-text-3, #9a8fa3); word-break: break-all; }
.gd-callout { margin: 1.25rem 0; line-height: 1.6; }
.gd-callout code { background: rgba(255, 255, 255, .08); }
.gd-code { margin: 1.25rem 0; }
.gd-code .ff-win-code code { padding: 0; background: none; font-size: inherit; }
.gd-table { margin: 1.25rem 0; overflow-x: auto; }
.gd-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.gd-table th, .gd-table td { padding: .55rem .75rem; border: 1px solid var(--ff-line, rgba(255, 255, 255, .1)); text-align: left; vertical-align: top; }
.gd-table th { background: var(--ff-raised, rgba(255, 255, 255, .05)); color: var(--ff-text, #fff); }

.gd-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; }
.gd-pager-card { display: block; padding: 1rem 1.2rem; text-decoration: none; color: inherit; }
.gd-pager-card small { display: block; color: var(--ff-text-3, #9a8fa3); }
.gd-pager-card b { display: block; margin-top: .2rem; color: var(--ff-text, #fff); }
.gd-pager-card.is-next { text-align: right; }

/* ---------- dialogs ---------- */
.gd-search { width: min(38rem, calc(100% - 32px)); }
.gd-results { margin-top: .75rem; max-height: min(55vh, 28rem); overflow-y: auto; }
.gd-result { text-decoration: none; }
.gd-result:hover { background: rgba(255, 255, 255, .05); }
.gd-result small { display: block; margin-top: .15rem; color: var(--ff-text-3, #9a8fa3); font-size: .78rem; line-height: 1.4; }
.gd-search-foot { margin: .75rem 0 0; font-size: .78rem; }
.gd-copy { width: min(40rem, calc(100% - 32px)); }
.gd-copy-text { width: 100%; margin: .75rem 0; font-family: var(--ff-mono, ui-monospace, monospace); font-size: .8rem; resize: vertical; }
.gd-empty { padding: 1rem; text-align: center; }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .gd-body { grid-template-columns: minmax(0, 46rem); }
  .gd-toc { display: none; }
}
@media (max-width: 760px) {
  .gd-shell { display: block; }
  /* the sidebar becomes a strip of pages you can swipe */
  .gd-sidebar { position: static; height: auto; overflow: visible; flex-direction: column; align-items: stretch; gap: .5rem; padding: .75rem 1rem;
    border-right: 0; border-bottom: 1px solid var(--ff-line, rgba(255, 255, 255, .1)); }
  .gd-sidebar .ff-side-brand { padding-bottom: 0; }
  .gd-sidebar .ff-side-spacer, .gd-sidebar .ff-side-foot, .gd-nav .ff-side-group, .gd-filter { display: none; }
  .gd-nav { flex-direction: row; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; }
  .gd-nav::-webkit-scrollbar { display: none; }
  .gd-nav .ff-side-item { flex: none; white-space: nowrap; }
  .gd-top { padding: 0 1rem; }
  .gd-body { padding: 1.5rem 1rem 3rem; }
  .gd-hide-sm { display: none; }
  .gd-pager { grid-template-columns: 1fr; }
}