/* Guides library, using the site's existing paper, type and green accent. */
[hidden] { display: none !important; }
.sheet--guides { max-width: 1280px; }
.guides-layout { display: grid; grid-template-columns: 208px minmax(0,1fr); gap: 48px; align-items: start; }
.guides-layout main { min-width: 0; max-width: 960px; }
.guides-sidebar { position: sticky; top: 24px; margin-top: 42px; max-height: calc(100dvh - 48px); overflow-y: auto; padding-right: 20px; border-right: 1px solid var(--hairline); font-size: 14px; }
.guides-sidebar > summary { font-weight: 750; list-style: none; cursor: pointer; margin-bottom: 24px; }
.guides-sidebar > summary::-webkit-details-marker { display:none; }
.guides-sidebar-content { padding-bottom: 24px; }
.guides-nav-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--ink-soft); text-decoration: none; padding: 8px 10px; border-radius: 5px; }
.guides-nav-link span { font: 11px var(--mono); color: var(--ink-soft); }
.guides-nav-link:hover,.guides-nav-link[aria-current] { background: var(--safe-soft); color: var(--safe); }
.guides-nav-label { margin: 24px 10px 8px; font: 11px var(--mono); color: var(--ink-soft); }
.guides-article-link { display:block; padding: 9px 10px; color:var(--ink-soft); text-decoration:none; font-size:13px; line-height:1.4; min-height:44px; border-left:2px solid transparent; }
.guides-article-link:hover { color:var(--safe); }
.guides-article-link[aria-current] { border-color:var(--safe); color:var(--safe); background:var(--safe-soft); }
.guides-docs-link { display:block; margin:28px 10px 0; color:var(--ink-soft); font-size:12px; text-underline-offset:4px; }
.guides-layout .page-head { padding-top:42px; }
.guides-layout .page-head h1 { max-width: 800px; }
.guides-search--hub { margin: 28px 0 36px; }
.guides-hero .page-lede { max-width: 62ch; }
.guides-intro { margin-top: 20px; max-width: 62ch; }
.guides-intro p { font-size: 15px; color: var(--ink-soft); font-weight: 300; line-height: 1.6; margin-bottom: 14px; }
.guides-intro p:last-child { margin-bottom: 0; }
.guides-intro a { color: var(--safe); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.guides-intro a:hover { border-color: var(--safe); }
.guides-section-intro { color: var(--ink-soft); font-size: 14px; margin-top: 10px; }
.guides-search--hub { max-width: 640px; }
.guides-search--hub label { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-bottom: 10px; }
.guides-search--hub input { font-family: var(--mono); font-size: 14px; }
.guides-search label { display:block; font-size:13px; font-weight:650; margin-bottom:8px; }
.guides-search-control { display:flex; border:1px solid var(--hairline); border-radius:8px; overflow:hidden; background:var(--paper); }
.guides-search-control:focus-within { outline:2px solid var(--safe); outline-offset:3px; }
.guides-search input { flex:1; min-width:0; border:0; background:transparent; padding:14px; color:var(--ink); font:15px var(--display); outline:none; }
.guides-search button { border:0; border-left:1px solid var(--hairline); color:var(--ink); background:var(--paper-deep); padding:0 18px; min-height:48px; font:12px var(--mono); cursor:pointer; }
.guides-search button:hover { background:var(--safe-soft); }
.search-status { color:var(--ink-soft); font-size:12px; margin-top:8px; }
.search-status:empty { display:none; }
.guides-search--compact { margin-bottom:28px; }
.guides-search--compact .guides-search-control { flex-wrap:wrap; }
.guides-search--compact input { width:100%; flex-basis:100%; font-size:13px; padding:12px; }
.guides-search--compact button { width:100%; border-left:0; border-top:1px solid var(--hairline); min-height:44px; }
#guides-quick-results { margin-top:10px; border:1px solid var(--hairline); background:var(--paper); border-radius:6px; }
#guides-quick-results a { display:block; padding:12px; font-size:12px; color:var(--ink); text-decoration:none; }
#guides-quick-results a:hover { background:var(--safe-soft); }
.guides-layout h2 { font-size:26px; letter-spacing:-.025em; line-height:1.2; }
.guides-start,.guides-topics,.guides-featured { margin-bottom:42px; }
.guides-problems { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; margin-top:16px; }
.guides-problems a { text-decoration:none; color:var(--ink); padding:20px 0; border-top:1px solid var(--hairline); }
.guides-problems a:first-child { grid-column:1 / -1; }
.guides-problems h3 { font-size:19px; letter-spacing:-.02em; }
.guides-problems h3 span { float:right; color:var(--safe); }
.guides-problems p { font-size:14px; color:var(--ink-soft); margin-top:6px; }
.guides-problems a:hover h3 { color:var(--safe); }
.guides-topic-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin-top:22px; }
.guides-topic-grid a { text-decoration:none; color:var(--ink); padding:10px 0; }
.guides-topic-grid h3 { font-size:18px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.guides-topic-grid h3 span { font:10px var(--mono); color:var(--safe); white-space:nowrap; }
.guides-topic-grid p { font-size:13px; color:var(--ink-soft); margin-top:5px; max-width:32ch; }
.guides-topic-grid a:hover h3 { color:var(--safe); }
.guides-layout .guide-list { grid-template-columns:repeat(2,minmax(0,1fr)); padding:20px 0 0; gap:18px; }
.guides-layout .guide-card { display:flex; flex-direction:column; padding:24px; min-height:250px; background:var(--paper); box-shadow:none; }
.guides-layout .guide-card:hover { transform:translateY(-2px); border-color:var(--safe); box-shadow:0 4px 12px rgb(22 19 14 / .04); }
.guides-layout .guide-card .tag { margin-bottom:16px; }
.guides-layout .guide-card h3,.guides-layout .guide-card h4 { font-size:21px; font-weight:750; letter-spacing:-.025em; line-height:1.2; margin:0 0 12px; overflow-wrap:anywhere; }
.guides-layout .guide-card p { font-size:14px; margin-bottom:24px; }
.guides-layout .guide-card .read { margin-top:auto; display:flex; justify-content:space-between; }
.guides-all-link { display:inline-flex; margin-top:22px; min-height:44px; align-items:center; color:var(--safe); text-underline-offset:4px; font-weight:650; }
.guides-library { margin: 24px 0 56px; scroll-margin-top:24px; }
#guides-results-count { color:var(--ink-soft); font:12px var(--mono); margin-top:12px; }
#guides-reset { margin-top:18px; background:var(--paper); color:var(--ink); border:1px solid var(--hairline); border-radius:5px; font:13px var(--display); padding:10px 14px; cursor:pointer; min-height:44px; }
#guides-empty { margin-top:24px; color:var(--ink-soft); }
.guides-topic-section { margin-top:30px; }
.guides-topic-section > h3 { font-size:18px; font-weight:650; }
.guides-toc { display:none; }
.guides-toc a,.guides-toc-inline a { display:block; color:var(--ink-soft); text-decoration:none; font-size:12px; line-height:1.5; padding:7px 0; }
.guides-toc a:hover,.guides-toc a[aria-current],.guides-toc-inline a:hover { color:var(--safe); }
.guides-toc-inline { margin-top:28px; padding:16px 20px; background:var(--paper); border:1px solid var(--hairline); border-radius:6px; }
.guides-toc-inline summary { cursor:pointer; font-size:14px; font-weight:650; min-height:24px; }
.guides-toc-inline nav { padding-top:14px; }
.guides-layout article.guide { max-width:none; }
.guides-layout article.guide h2 { scroll-margin-top:24px; }
.guides-layout article.guide h3 { scroll-margin-top:24px; }
.guides-skip { position:absolute; left:20px; top:-80px; background:var(--ink); color:var(--paper); padding:12px 20px; z-index:20; }
.guides-skip:focus { top:12px; }
.guides-layout :focus-visible, .guides-skip:focus-visible { outline:2px solid var(--safe); outline-offset:4px; }
#guides-results-title:focus { outline:none; }
@media (min-width:1280px) {
 .guides-layout--article { grid-template-columns:208px minmax(0,1fr) 168px; gap:36px; }
 .guides-toc { display:block; position:sticky; top:24px; max-height:calc(100dvh - 48px); overflow-y:auto; margin-top:42px; padding-left:16px; border-left:1px solid var(--hairline); }
 .guides-toc .guides-nav-label { margin:0 0 14px; }
 .guides-toc-inline { display:none; }
}
@media (max-width:899px) {
 .sheet--guides { padding:0 22px; }
 .guides-layout { display:block; }
 .guides-sidebar { position:static; border-right:0; padding:0; margin-top:22px; max-height:none; border:1px solid var(--hairline); background:var(--paper); border-radius:6px; }
 .guides-sidebar > summary { pointer-events:auto; cursor:pointer; padding:14px 16px; margin:0; min-height:48px; list-style:revert; }
 .guides-sidebar-content { padding:8px 16px 20px; }
 .guides-layout .page-head { padding-top:32px; }
 .guides-layout .guide-card { min-height:230px; }
 .guides-search--compact .guides-search-control { flex-wrap:nowrap; }
 .guides-search--compact input { flex-basis:auto; width:auto; }
 .guides-search--compact button { width:auto; border-top:0; border-left:1px solid var(--hairline); min-height:44px; }
}
@media (max-width:639px) {
 .guides-layout .guide-list,.guides-topic-grid,.guides-problems { grid-template-columns:minmax(0,1fr); }
 .guides-problems a:first-child { grid-column:auto; }
 .guides-layout .guide-card { min-height:220px; }
 .guides-layout .guide-card h3,.guides-layout .guide-card h4 { font-size:22px; }
 .guides-search input { padding:13px 12px; font-size:14px; }
 .guides-search button { padding:0 12px; }
 .guides-topic-grid { gap:10px; }
 .guides-layout .page-head h1 { font-size:34px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .guides-layout .guide-card { transition:none; }
 .guides-layout .guide-card:hover { transform:none; }
}
