/* The Lua docs, in the site's own design. The variables, font, 8px corners, panels, inputs and buttons all come from
   /assets/style.css and /assets/nav.css, the same ones the forum and the account pages use; nothing here redefines them.
   This file only adds what a reference needs on top: the sidebar, tables, code blocks and the small parts of the
   generated markup (cards, callouts, chips, config lists). */

:root {
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  /* syntax colors: one lightness ramp, keywords brightest, comments dimmest */
  --t-k: #f1f1f3; --t-s: #b6b6ba; --t-n: #a8a8ac; --t-c: #737378;
  --t-a: #dedee1; --t-f: #dedee1; --t-b: #c2c2c6; --t-o: #97979c;
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
.is-hidden { display: none !important; }

/* ------------------------------------------------------------------ layout: sidebar card + one column, like .wrap */
.layout {
  flex: 1 0 auto; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 28px; align-items: start;
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 20px 56px;
}
main { display: block; min-width: 0; }
.content { max-width: 860px; line-height: 1.65; }

.sidebar {
  position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 14px 10px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .12);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; line-height: 1.4;
}
.tools { margin-bottom: 8px; padding: 0 2px; }
.search {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; outline: none;
}
.search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }
.search-status { min-height: 16px; margin: 0 4px 6px; font-size: 12px; color: var(--muted); }

.nav { font-size: 13px; }
.nav-group { margin: 14px 0 4px; padding: 0 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.nav a {
  display: block; padding: 6px 10px; border-radius: 6px; color: var(--muted); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
.nav a:hover, .nav a.active { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav .sub { margin: 0 0 4px 14px; padding-left: 8px; border-left: 1px solid var(--line); }
.nav .sub a { padding: 3px 8px; font-family: var(--mono); font-size: 12px; }
.nav .sub a.plain { font-family: inherit; }

.menu-toggle { display: none; }

/* ------------------------------------------------------------------ page header: .page-title, then the numbers, then the jump buttons */
.hero { display: grid; gap: 16px; }
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.stat { padding: 12px 16px; background: var(--panel); }
.stat b { display: block; font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.3; }
.stat span { font-size: 12px; color: var(--muted); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ text */
section.part { margin-top: 40px; }
h2, h3, h4 { position: relative; line-height: 1.3; }
h2 { margin: 0 0 16px; padding-bottom: 10px; font-size: 20px; border-bottom: 1px solid var(--line); }
h3 { margin: 28px 0 10px; font-size: 16px; }
h4 { margin: 0; font-size: 14px; }
.anchor { margin-left: 8px; font-weight: 400; font-size: .85em; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity .15s; }
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, .anchor:focus-visible { opacity: 1; }
.content p { margin: 0 0 12px; }
.content ul, .content ol { margin: 0 0 14px; padding-left: 20px; }
.content li { margin: 4px 0; }
.content li > p { margin: 0; }
.content a:hover { text-decoration: underline; }
strong { font-weight: 600; }
code {
  padding: 1px 5px; font-family: var(--mono); font-size: .9em; color: var(--text); overflow-wrap: anywhere;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
}
.label { margin: 14px 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ------------------------------------------------------------------ tables: the same look as .list */
.table-wrap { margin: 0 0 16px; overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  padding: 9px 14px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: var(--panel-2);
}
td { padding: 9px 14px; vertical-align: top; border-top: 1px solid var(--line); }
tr:first-child td { border-top: 0; }
td:first-child { white-space: nowrap; }
table.args td:first-child, table.fields td:first-child { min-width: 9em; }
table.args td:nth-child(2), table.fields td:nth-child(2) { color: var(--muted); }
table.facts th, table.multi th { display: none; }
table.facts td:first-child { width: 11em; color: var(--muted); }
table.multi td { white-space: nowrap; }
table.config td:first-child { white-space: normal; word-break: break-all; }
table.config td:nth-child(2) { color: var(--muted); white-space: nowrap; }
table.config td:nth-child(3) { color: var(--muted); font-family: var(--mono); font-size: 12px; }
tr.is-hidden { display: none; }

/* ------------------------------------------------------------------ callouts: the look of the forum's quotes; the bar's lightness says how serious it is */
.callout { margin: 16px 0; padding: 12px 16px; background: var(--panel-2); border-left: 3px solid var(--accent-2); border-radius: 0 6px 6px 0; }
.callout > :last-child { margin-bottom: 0; }
.callout-title { margin-bottom: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-2); }
.callout.tip { border-left-color: var(--good); } .callout.tip .callout-title { color: var(--good); }
.callout.warn { border-left-color: var(--warn); } .callout.warn .callout-title { color: var(--warn); }
.callout.danger { border-left-color: var(--bad); } .callout.danger .callout-title { color: var(--bad); }

/* ------------------------------------------------------------------ code: like .bb-code, with a bar for the copy button */
.code { margin: 14px 0 18px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.code-bar {
  display: flex; align-items: center; justify-content: space-between; padding: 5px 6px 5px 12px;
  font-size: 12px; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.copy { padding: 4px 10px; font-size: 12px; color: var(--muted); cursor: pointer; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; }
.copy:hover { color: var(--text); background: var(--panel); }
pre { margin: 0; padding: 12px 14px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; tab-size: 4; }
pre code { padding: 0; font-size: inherit; background: none; border: 0; border-radius: 0; }
.t-k { color: var(--t-k); font-weight: 600; } .t-s { color: var(--t-s); } .t-n { color: var(--t-n); } .t-c { color: var(--t-c); font-style: italic; }
.t-a { color: var(--t-a); } .t-f { color: var(--t-f); } .t-b { color: var(--t-b); } .t-o { color: var(--t-o); }

/* ------------------------------------------------------------------ cards: one entry of the reference, like a .post */
.card, .ex, .recipe { margin: 16px 0; padding: 18px 20px 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.card header { margin-bottom: 10px; }
.card h4 { font-weight: 600; }
.sig, code.sig { padding: 0; font-family: var(--mono); font-size: 13.5px; color: var(--text); word-break: break-word; background: none; border: 0; }
.card .table-wrap, .ex .table-wrap { background: var(--bg); }
.ex h3, .recipe h3 { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip { padding: 3px 10px; font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; }
.chip code { padding: 0; color: inherit; background: none; border: 0; }
a.chip:hover { color: var(--text); border-color: #3a3a3f; text-decoration: none; }

/* ------------------------------------------------------------------ the config reference: a list of folding rows */
details.cfg { margin: 8px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
details.cfg > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 16px; list-style: none; cursor: pointer; border-radius: var(--radius); }
details.cfg > summary:hover { background: var(--panel-2); }
details.cfg > summary > code { min-width: 0; }
details.cfg > summary::-webkit-details-marker { display: none; }
details.cfg > summary::before { content: "\25B8"; font-size: 12px; color: var(--muted); transition: transform .12s; }
details.cfg[open] > summary::before { transform: rotate(90deg); }
details.cfg .count { margin-left: auto; font-size: 12px; color: var(--muted); }
details.cfg .table-wrap { margin: 0; background: var(--bg); border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }

.no-results { display: none; margin: 40px 0; padding: 40px 24px; text-align: center; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
body.searching.empty .no-results { display: block; }
footer.foot { margin-top: 56px; padding-top: 16px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 20px 14px 72px; }
  .sidebar {
    position: fixed; z-index: 30; top: 56px; bottom: 0; left: 0; width: min(88vw, 320px); max-height: none;
    border-radius: 0 var(--radius) var(--radius) 0; transform: translateX(-102%); transition: transform .18s ease;
  }
  body.nav-open .sidebar { transform: none; box-shadow: 8px 0 32px rgba(0, 0, 0, .5); }
  .menu-toggle { display: block; position: fixed; z-index: 20; right: 14px; bottom: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
}
@media (max-width: 480px) {
  .card, .ex, .recipe { padding: 14px 14px 4px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .sidebar, .menu-toggle, .copy, .anchor, #nav { display: none !important; }
  .layout { display: block; padding: 0; }
  body { color: #000; background: #fff; }
  .card, .ex, .recipe, .callout, .code { break-inside: avoid; box-shadow: none; }
}
.content a.btn:hover { text-decoration: none; }