/* Hyke Studio — The documentation's guides list and guide pages (site-content-docs/guides__c and guide__c).
 * Built from the approved designs' own styles. A guide page is the long-page layout of content-page.css with the
 * documentation's bar above it and a link back to the guides list above its title; the list is its own page.
 * Owning section(s): §38 */

:root {
  --hs-card-border: rgba(26,25,23,0.12);
  --hs-hairline: rgba(26,25,23,0.10);
}
html[data-theme="dark"] {
  --hs-amber-ink: #E09A12;
  --hs-card-border: rgba(251,248,239,0.14);
  --hs-hairline: rgba(251,248,239,0.10);
}

/* The guides list. */
.guides-page { padding: 36px 0 24px; max-width: 800px; }
.docs-kicker { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; color: var(--hs-amber-ink); }
.docs-hero { display: flex; flex-direction: column; gap: 14px; }
.docs-title { margin: 0; font-size: clamp(28px, 4.4vw, 42px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; color: var(--hs-ink); }
.docs-subtitle { margin: 0; font-size: 15px; line-height: 1.6; color: var(--hs-ink-body); max-width: 620px; }
.guide-group { margin-top: 26px; background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-card); padding: 18px 22px 8px; }
.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--hs-hairline); }
.guide-entry:last-child { border-bottom: none; }
.guide-entry-title { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--hs-ink); }
a.guide-entry-title:hover { text-decoration: underline; text-decoration-color: var(--hs-amber); text-underline-offset: 3px; }
.guide-entry-desc { grid-column: 1; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--hs-ink-body); }
@media (max-width: 560px) { .guide-entry { grid-template-columns: 1fr; } }

/* A guide page: the link back to the guides list above its title, and the guides' own blocks. */
.doc-back { display: flex; width: fit-content; align-items: center; gap: 7px; min-height: 32px; margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-body); text-decoration: none; }
.doc-back-icon { display: block; color: var(--hs-ink-muted); transition: transform .12s ease, color .12s ease; }
@media (hover: hover) { .doc-back:hover { color: var(--hs-ink); text-decoration: underline; text-underline-offset: 3px; } .doc-back:hover .doc-back-icon { color: var(--hs-ink); transform: translateX(-2px); } }
@media (max-width: 940px) { .doc-back { min-height: 44px; } }
/* A guide's example picture with the disclaimer under it (guide__c's figures). */
.doc-figure { margin: 4px 0 18px; display: flex; flex-direction: column; gap: 8px; }
.doc-figure-img { display: block; width: min(100%, 440px); aspect-ratio: 3 / 2; height: auto; object-fit: contain; object-position: center; }
.doc-figure-disclaimer { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; color: var(--hs-ink-muted); text-align: center; }
/* A guide's code example with its Copy button in the top right (content.add_code_copy_buttons); the example keeps
   room on its right so a long line never runs under the button. */
.doc-code { position: relative; }
.doc-code .doc-code-block, .doc-code pre { padding-right: 78px; }
.doc-code-copy { position: absolute; top: 9px; right: 10px; font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; color: var(--hs-ink); background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-chip); height: 28px; padding: 0 10px; cursor: pointer; }
.doc-code-copy:hover { border-color: var(--hs-amber); }
@media (max-width: 940px) { .doc-code-copy { min-height: 44px; top: 4px; right: 4px; } .doc-code .doc-code-block, .doc-code pre { padding-top: 52px; padding-right: 16px; } }
/* The end of a guide: the next guide in the list's order, or the list itself after the last. */
.doc-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hs-hairline); }
.doc-next-label { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; color: var(--hs-ink-muted); }
.doc-next-link { display: inline-block; padding: 12px 0; font-size: 16px; font-weight: 600; color: var(--hs-ink); }
.doc-next-link:hover { text-decoration: underline; text-decoration-color: var(--hs-amber); text-underline-offset: 3px; }
.doc-code-block { margin: 4px 0 18px; padding: 14px 16px; background: var(--hs-surface-sunk); border: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field); font-family: var(--hs-font-mono); font-size: 12.5px; line-height: 1.6; color: var(--hs-ink-body); overflow-x: auto; white-space: pre-wrap; word-break: break-word; }