/* The Guide's pages (site/guide.mjs): the widgets' g-* classes on the
   site's own tokens (site.css), light and dark alike. */

.guide [hidden] { display: none !important; }
.guide {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 40px;
  padding-top: 92px;
  padding-bottom: 64px;
}
.g-side { position: relative; }
.g-toc {
  position: sticky; top: 76px;
  max-height: calc(100vh - 92px); overflow-y: auto;
  padding-right: 6px;
}
.g-toc > summary {
  font: 600 0.8rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); cursor: pointer; list-style: none; margin-bottom: 10px;
}
.g-toc > summary::-webkit-details-marker { display: none; }
.g-search {
  width: 100%; margin-bottom: 14px; padding: 7px 10px;
  font: 0.9rem var(--ui); color: var(--fg);
  background: var(--widget); border: 1px solid var(--border); border-radius: 6px;
}
.g-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
html:not(.js) .g-search, html:not(.js) .g-filter, html:not(.js) .g-filters button, html:not(.js) .g-copy { display: none; }
.g-group { padding: 0; }
.g-group h2 { font-size: 0.82rem; letter-spacing: 0; margin: 14px 0 4px; color: var(--title); }
.g-group ol, .g-results { list-style: none; margin: 0; padding: 0; }
.g-group a, .g-results a {
  display: block; padding: 3px 8px; border-radius: 4px;
  color: var(--fg); font-size: 0.86rem; line-height: 1.4;
}
.g-group a:hover, .g-results a:hover { background: var(--hover); text-decoration: none; }
.g-group a[aria-current] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--title); }
.g-code { font: 0.78em var(--mono); color: var(--desc); }
.g-results small { display: block; color: var(--desc); font-size: 0.75rem; }

.g-article { min-width: 0; max-width: 860px; font-size: 0.97rem; }
.g-chapter { font: 500 0.78rem var(--mono); color: var(--accent); letter-spacing: 0.04em; margin-bottom: 6px; }
.g-article h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -0.03em; margin-bottom: 10px; }
.g-article h1 .g-code { font-size: 0.55em; vertical-align: middle; }
.g-subtitle { color: var(--desc); font-size: 1.05rem; }
.g-inapp { font-size: 0.88rem; color: var(--desc); }
.g-inapp strong { color: var(--fg); font-weight: 600; }
.g-body { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.g-body p { margin: 0; }
.g-body code { white-space: normal; word-break: break-word; }
.g-section { padding: 0; display: flex; flex-direction: column; gap: 14px; }
.g-section > h2 { font-size: 1.3rem; letter-spacing: -0.02em; margin: 18px 0 0; scroll-margin-top: 80px; }
.g-anchor { color: inherit; }
.g-anchor:hover { text-decoration: none; color: var(--accent); }
.g-steps, .g-bullets, .g-brief ul { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 4px; }

.g-icon { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.4em; color: var(--accent); }
.g-icon svg { width: 100%; height: 100%; }
.g-label { font-weight: 600; color: var(--title); margin-bottom: 4px !important; }

.g-brief { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 8px; padding: 12px 16px; }
.g-callout { border-left: 3px solid var(--accent); background: var(--panel); border-radius: 4px; padding: 10px 14px; }
.g-callout.g-info { border-left-color: var(--link); }
.g-callout.g-warn { border-left-color: var(--amber); }
.g-callout.g-warn .g-icon { color: var(--amber); }
.g-under, .g-qa, .g-related { border: 1px solid var(--border); background: var(--panel); border-radius: 8px; }
.g-under > summary { cursor: pointer; padding: 9px 14px; font-weight: 600; color: var(--title); }
.g-under > div { border-top: 1px solid var(--border); padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.g-qa { padding: 10px 14px; }
.g-q { font-weight: 600; color: var(--title); margin-bottom: 4px !important; }
.g-related { padding: 10px 14px; }
.g-related ul { margin: 0; padding-left: 1.2em; }

.g-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: flow; }
.g-flow li { counter-increment: flow; flex: 1 1 160px; max-width: 220px; border: 1px solid var(--border); background: var(--panel); border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; }
.g-flow b { display: block; color: var(--title); }
.g-flow b::before { content: counter(flow) ". "; color: var(--accent); }
.g-flow span { color: var(--desc); }

.g-table { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.g-table table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.g-table th, .g-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.g-table th { background: var(--panel); color: var(--title); font-weight: 600; }
.g-table tr:last-child td { border-bottom: 0; }
.g-table td p { margin: 4px 0 0 !important; color: var(--desc); font-size: 0.8rem; }
.g-tree { border: 0; background: none; padding: 0; color: var(--title); }

kbd {
  font: 0.8em var(--mono); padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--border); border-bottom-width: 2px; background: var(--widget);
}
.g-ui { font-weight: 600; color: var(--title); }
.g-badge {
  display: inline-block; font: 0.72rem var(--mono); padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--desc); white-space: nowrap;
}
.g-badge.g-focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }

.g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.g-card { border: 1px solid var(--border); background: var(--panel); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
.g-card-head { display: flex; align-items: center; gap: 4px; }
.g-card-head h3 { margin: 0; font-size: 1rem; flex: 1; }
.g-card-action { margin-top: auto; font-weight: 500; }

.g-codeblock { margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.g-codeblock figcaption { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.g-codeblock figcaption b { color: var(--title); }
.g-copy { margin-left: auto; font: 0.78rem var(--ui); color: var(--fg); background: var(--button2); border: 0; border-radius: 4px; padding: 3px 10px; cursor: pointer; }
.g-copy:hover { background: var(--button2-hover); }
.g-codeblock pre { margin: 0; padding: 12px; overflow-x: auto; background: var(--code-bg); }
.g-codeblock pre code { border: 0; background: none; padding: 0; white-space: pre; font-size: 0.82rem; }

.g-shot { margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel); }
.g-shot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 0.85rem; color: var(--title); }
.g-zoom { display: block; cursor: zoom-in; background: rgb(0 0 0 / 0.15); }
.g-zoom img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; object-position: top; }
.g-caption { padding: 10px 14px; font-size: 0.88rem; color: var(--desc); display: flex; flex-direction: column; gap: 8px; }
.g-example { border-left: 2px solid var(--accent); background: var(--bg); padding: 8px 12px; color: var(--fg); border-radius: 4px; }
.g-zoom-dialog { max-width: min(1240px, 95vw); padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--widget); color: var(--fg); }
.g-zoom-dialog::backdrop { background: rgb(0 0 0 / 0.8); }
.g-zoom-dialog img { display: block; max-width: 100%; height: auto; }
.g-zoom-dialog form { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.g-zoom-dialog button { font: inherit; background: var(--button2); color: var(--fg); border: 0; border-radius: 4px; padding: 3px 10px; cursor: pointer; }

.g-folders, .g-terms { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; }
.g-folders dt, .g-terms dt { font-weight: 600; color: var(--title); }
.g-folders dd, .g-terms dd { margin: 0; }

.g-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.g-filters button { font: 0.8rem var(--ui); color: var(--fg); background: var(--button2); border: 0; border-radius: 4px; padding: 3px 10px; cursor: pointer; }
.g-filters button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.g-filter { flex: 1 1 220px; padding: 6px 10px; font: 0.88rem var(--ui); color: var(--fg); background: var(--widget); border: 1px solid var(--border); border-radius: 6px; }
.g-filterlist { display: flex; flex-direction: column; gap: 14px; }
.g-filterlist > .g-filter { max-width: 420px; }
.g-filterlist .g-section { gap: 10px; }

.g-sketch {
  display: grid; grid-template-columns: 44px 34% 1fr; grid-template-rows: 26px minmax(120px, auto) 52px 26px;
  gap: 2px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 0.75rem;
}
.g-sketch > div { padding: 6px 8px; background: var(--panel); color: var(--fg); }
.g-sk-title, .g-sk-status { grid-column: 1 / -1; display: flex; align-items: center; }
.g-sk-title { background: var(--hover) !important; }
.g-sk-status { background: color-mix(in srgb, var(--accent) 22%, var(--panel)) !important; }
.g-sk-activity { grid-row: 2 / 4; writing-mode: vertical-rl; background: var(--hover) !important; }
.g-sk-side { grid-row: 2 / 4; }
.g-sk-tabs { background: var(--bg) !important; }

.g-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border); }
.g-pager a { display: flex; flex-direction: column; max-width: 48%; font-weight: 500; }
.g-pager a span { font-size: 0.78rem; color: var(--desc); font-weight: 400; }
.g-next { text-align: right; margin-left: auto; }

@media (max-width: 900px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 80px; }
  .g-toc { position: static; max-height: none; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
  .g-toc > summary { margin-bottom: 0; }
  .g-toc[open] > summary { margin-bottom: 10px; }
}
@media (max-width: 560px) {
  .g-folders, .g-terms { grid-template-columns: minmax(0, 1fr); }
  .g-folders dd, .g-terms dd { margin-bottom: 6px; }
}