/* Document library: shared reading layouts, examples and format choices. */
.doc-page { font-size:1rem; }
.doc-page [id] { scroll-margin-top:calc(var(--nav-h) + 24px); }
.doc-hero { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr); gap:48px; align-items:center; padding-top:calc(var(--nav-h) + 64px); padding-bottom:48px; }
.doc-eyebrow,.doc-label,.doc-file-label { font:600 .73rem/1.6 var(--mono); letter-spacing:.055em; }
.doc-eyebrow { color:var(--accent-ink); margin-bottom:16px; }
.doc-hero h1 { font-size:clamp(2.35rem,4.7vw,3.8rem); line-height:1.12; letter-spacing:-.045em; margin-bottom:24px; }
.doc-lead { color:var(--text-dim); font-size:1.05rem; line-height:1.85; max-width:64ch; }
.doc-hero .dg-actions { margin-top:28px; gap:16px 24px; }
.doc-hero .dg-actions>a:not(.btn) { color:var(--accent-ink); text-decoration:underline; text-underline-offset:4px; padding-block:10px; font-size:.9rem; }
.doc-start { border:1px solid var(--border); border-top:3px solid var(--accent-ink); border-radius:12px; padding:28px; background:var(--surface); }
.doc-file-label { display:inline-block; color:var(--accent-ink); padding:5px 10px; border:1px solid var(--text-faint); border-radius:5px; margin-bottom:20px; }
.doc-start h2 { font-size:1.4rem; line-height:1.3; }
.doc-start>p { color:var(--text-dim); line-height:1.8; }
.doc-start li { padding-left:4px; }
.doc-start li+li { margin-top:18px; }
.doc-start li::marker { color:var(--accent-ink); }
.doc-start li span { display:block; color:var(--text-dim); font-size:.88rem; margin-top:3px; }
.doc-nav { display:flex; flex-wrap:wrap; gap:4px 12px; border-bottom:1px solid var(--border); padding-block:10px 18px; }
.doc-nav a { min-height:44px; display:inline-flex; align-items:center; padding:8px 14px; border-bottom:3px solid transparent; color:var(--text-dim); }
.doc-nav a[aria-current=page] { border-color:var(--accent-ink); color:var(--accent-ink); font-weight:600; }
.doc-nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.doc-section { padding-block:44px; }
.doc-section h2,.doc-guide-body h2 { font-size:clamp(1.6rem,3vw,2rem); line-height:1.3; letter-spacing:-.025em; margin-bottom:16px; }
.doc-section h3 { font-size:1.18rem; line-height:1.4; margin-bottom:12px; }
.doc-intro { max-width:70ch; color:var(--text-dim); margin-bottom:28px; }
.doc-format-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.doc-format-card { min-width:0; padding:28px; border:1px solid var(--border); border-radius:12px; background:var(--surface); display:flex; flex-direction:column; align-items:flex-start; }
.doc-format-card .doc-file-label { margin-bottom:24px; }
.doc-format-card h3 { font-size:1.5rem; }
.doc-format-card p { color:var(--text-dim); margin-bottom:22px; font-size:.94rem; }
.doc-format-card>a { display:block; min-height:44px; padding-block:10px; margin-top:auto; }
.doc-format-card>a,.doc-callout>a,.doc-share>a { color:var(--accent-ink); text-decoration:underline; text-underline-offset:4px; font-weight:600; }
.doc-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; }
.doc-two p+p { margin-top:16px; }
.doc-callout { background:var(--surface); border-left:3px solid var(--accent-ink); padding:26px; }
.doc-callout>a { display:inline-block; margin-top:16px; min-height:44px; padding-block:8px; }
.doc-source,.doc-small { color:var(--text-dim); font-size:.81rem; line-height:1.75; margin-top:20px; }
.doc-example { margin-top:24px; padding:24px; border:1px solid var(--border); border-radius:10px; }
.doc-comparison { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.doc-comparison>div { min-width:0; padding:18px; background:var(--surface); border-left:2px solid var(--text-faint); }
.doc-comparison>div+div { border-color:var(--accent-ink); }
.doc-label { color:var(--text-dim); margin-bottom:8px; }
.doc-comparison>div+div>.doc-label { color:var(--accent-ink); }
.doc-example-why { color:var(--text-dim); font-size:.9rem; margin-top:16px; }
.doc-guide-layout { display:grid; grid-template-columns:245px minmax(0,1fr); gap:48px; align-items:start; padding-block:44px; }
.doc-toc { position:sticky; top:calc(var(--nav-h) + 24px); max-height:calc(100vh - var(--nav-h) - 48px); overflow-y:auto; padding:6px; font-size:.84rem; }
.doc-toc ol { list-style:none; padding:0!important; margin:0 0 16px!important; }
.doc-toc ol li+li { margin-top:0; }
.doc-toc a { display:block; padding:9px 10px; min-height:44px; line-height:1.6; color:var(--text-dim)!important; text-decoration:none!important; border-left:2px solid var(--border); }
.doc-toc a:hover,.doc-toc a:focus-visible { color:var(--accent-ink)!important; border-left-color:var(--accent-ink); background:var(--surface); }
.doc-toc>.doc-label { padding-left:10px; }
.doc-js { margin-top:22px; }
.doc-js button { width:100%; margin-bottom:10px; text-align:left; font-size:.8rem; }
.doc-guide-body { min-width:0; }
.doc-step { padding-block:30px; border-bottom:1px solid var(--border); }
.doc-step h3 { font-size:1.4rem; line-height:1.35; letter-spacing:-.015em; margin-bottom:16px; }
.doc-step .doc-eyebrow { margin-bottom:10px; }
.doc-why { color:var(--text-dim); }
.doc-step ol { margin-block:22px!important; }
.doc-step li { padding-left:4px; margin-top:14px!important; }
.doc-step li::marker { color:var(--accent-ink); font-weight:600; }
.doc-check { border-left:3px solid var(--accent-ink); background:var(--surface); padding:18px 20px; font-size:.94rem; }
.doc-check strong { display:block; margin-bottom:4px; }
.doc-guide-body .doc-section { padding-block:36px; }
.doc-page details { padding:0; }
.doc-page details summary { min-height:48px; padding:18px 22px; }
.doc-page details[open]>summary { margin-bottom:0; }
.doc-page details>p { padding:0 22px 20px; }
.doc-share { border-top:3px solid var(--accent-ink); }
.doc-final { margin-bottom:24px!important; }
.doc-final li { padding-left:4px; }
.doc-sources { border-top:1px solid var(--border); }
.doc-note { padding:20px; background:var(--surface); border-left:3px solid var(--text-faint); margin-block:12px 24px; color:var(--text-dim); font-size:.9rem; }
.doc-hub #ad-fields { border:0; padding:0; margin:0; }
.doc-hub #ad-review { border-top:1px solid var(--border); }
.doc-hub .ad-check h4 { font-size:1.07rem; line-height:1.4; margin-bottom:12px; }
.doc-hub .ad-checks { gap:24px; }
.doc-hub #ad-guide-link { display:inline-block; min-height:44px; padding-block:10px; color:var(--accent-ink); text-decoration:underline; text-underline-offset:4px; }
.doc-page dialog { inset:0; margin:auto; max-width:540px; width:calc(100% - 40px); max-height:calc(100vh - 40px); padding:30px; color:var(--text); background:var(--surface); border:1px solid var(--text-faint); border-radius:12px; overflow-y:auto; }
.doc-page dialog::backdrop { background:rgba(0,0,0,.75); }
.doc-page dialog h2 { font-size:1.4rem; margin-bottom:16px; }
.doc-page dialog p { color:var(--text-dim); }
@media(max-width:900px) {
  .doc-hero { gap:28px; grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr); }
  .doc-format-card { padding:22px; }
  .doc-guide-layout { grid-template-columns:205px minmax(0,1fr); gap:24px; }
}
@media(max-width:700px) {
  .doc-hero { display:block; padding-top:calc(var(--nav-h) + 38px); padding-bottom:32px; }
  .doc-start { margin-top:28px; padding:24px; }
  .doc-hero h1 br { display:none; }
  .doc-format-grid,.doc-two,.doc-comparison { grid-template-columns:1fr; }
  .doc-format-card { padding:26px; }
  .doc-section { padding-block:32px; }
  .doc-guide-layout { display:block; padding-block:28px; }
  .doc-toc { position:static; max-height:none; padding:16px; border:1px solid var(--border); border-radius:10px; margin-bottom:32px; }
  .doc-js { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  #doc-message { grid-column:1/-1; }
  .doc-example { padding:20px; }
  .doc-comparison { gap:14px; }
  .doc-nav { gap:4px; }
  .doc-nav a { padding-inline:10px; font-size:.9rem; }
}
@media print {
  .doc-guide { color:#111!important; background:#fff!important; font-size:10.5pt; }
  .doc-guide .doc-hero { display:block; padding:0 0 16pt; }
  .doc-guide .doc-hero h1 { font-size:25pt; }
  .doc-guide .doc-hero .dg-actions,.doc-guide .doc-toc,.doc-guide .doc-nav,.doc-guide .dg-subnav { display:none!important; }
  .doc-guide .doc-start { padding:12pt; margin-top:12pt; border:1px solid #555; }
  .doc-guide .container { width:100%; max-width:none; padding-inline:0; }
  .doc-guide .doc-guide-layout { display:block; padding:0; }
  .doc-guide .doc-section,.doc-guide .doc-step { padding-block:14pt; }
  .doc-guide h2,.doc-guide h3,.doc-guide summary { break-after:avoid; }
  .doc-guide .doc-eyebrow { color:#333!important; margin-bottom:4pt; }
  .doc-guide .doc-example,.doc-guide details,.doc-guide .doc-check { break-inside:avoid; }
  .doc-guide .doc-comparison { display:block; }
  .doc-guide .doc-comparison>div { margin-top:8pt; padding:10pt; }
  .doc-guide p,.doc-guide li,.doc-guide a,.doc-guide .doc-label,.doc-guide .doc-file-label { color:#111!important; }
  .doc-guide .doc-sources a:after,.doc-guide .doc-source a:after { content:" (" attr(href) ")"; font-size:8pt; overflow-wrap:anywhere; }
  .doc-guide .doc-sources,.doc-guide .doc-source { font-size:9pt; }
  .doc-guide .doc-hero--guide .doc-file-label { margin-bottom:8pt; }
  .doc-page dialog { display:none!important; }
}