/* Hallmark · guide layout · preserves Cobalt tokens and existing typography.
 * Pre-emit critique: P4 H5 E4 S5 R5 V4 */
.docs-layout { display:grid; grid-template-columns:14rem minmax(0,1fr); gap:var(--space-8); padding-block:var(--space-8); align-items:start; }
.docs-sidebar { position:sticky; top:6rem; }
.docs-sidebar nav { display:grid; gap:var(--space-1); }
.docs-sidebar nav a { display:flex; gap:var(--space-3); padding:var(--space-2); text-decoration:none; border-radius:var(--radius-sm); white-space:nowrap; }
.docs-sidebar nav span { color:var(--color-text-muted); font-family:var(--font-code); font-size:var(--text-sm); }
.docs-sidebar [aria-current=page] { background:var(--color-primary-soft); color:var(--color-primary); font-weight:600; }
.download-source { display:inline-block; margin-top:var(--space-6); font-size:var(--text-sm); white-space:nowrap; }
.docs-article { min-width:0; max-width:54rem; background:var(--color-surface); padding:var(--space-8); border:1px solid var(--color-line); border-radius:var(--radius-md); }
.docs-article h1 { font-size:clamp(1.7rem,3vw,2.65rem); line-height:1.16; letter-spacing:-.035em; margin:var(--space-6) 0; overflow-wrap:anywhere; min-width:0; }
.docs-article h2 { font-size:1.35rem; margin-top:var(--space-8); border-top:1px solid var(--color-line); padding-top:var(--space-6); }
.docs-article h3 { font-size:1.1rem; margin-top:var(--space-6); }
.docs-article :is(h1,h2,h3) { scroll-margin-top:7rem; font-style:normal; }
.docs-article :is(p,li,td,th) { overflow-wrap:anywhere; }
.docs-article li { margin-block:var(--space-2); }
.docs-article :not(pre)>code { font-family:var(--font-code); font-size:.85em; background:var(--color-surface-muted); padding:.1em .3em; border-radius:var(--radius-sm); }
.docs-article pre { background:var(--color-code-surface); color:var(--color-code-text); padding:var(--space-4); overflow:auto; max-width:100%; border-radius:var(--radius-sm); font-size:.78rem; line-height:1.65; }
.docs-article pre code { font-family:var(--font-code); }
.docs-table-wrap { overflow:auto; margin-block:var(--space-6); }
.docs-article table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.docs-article :is(th,td) { text-align:left; border-bottom:1px solid var(--color-line); padding:var(--space-3); vertical-align:top; }
.docs-article th { background:var(--color-surface-muted); }
.docs-toc { padding:var(--space-3); border:1px solid var(--color-line); border-radius:var(--radius-sm); }
.docs-toc summary { cursor:pointer; font-weight:600; }
.docs-toc nav { display:grid; gap:var(--space-2); margin-top:var(--space-4); }
.docs-toc a { font-size:var(--text-sm); }
.doc-copy { display:block; margin-left:auto; margin-bottom:var(--space-2); padding:.3rem .6rem; border:1px solid var(--color-line); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-primary); font-size:var(--text-sm); white-space:nowrap; }
.next-steps { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-8); border-top:1px solid var(--color-line); padding-top:var(--space-6); }
.next-steps a { white-space:nowrap; font-size:var(--text-sm); }
.journey { padding-block:var(--space-8); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--space-8); align-items:start; }
.journey h1 { font-size:clamp(2.1rem,4vw,3.5rem); line-height:1.05; letter-spacing:-.045em; margin-bottom:var(--space-5); overflow-wrap:anywhere; }
.journey-lead { color:var(--color-text-muted); max-width:36rem; }
.journey-route { list-style:none; padding:0; margin:0; border-top:1px solid var(--color-line); }
.journey-route li { border-bottom:1px solid var(--color-line); }
.journey-route a { display:grid; grid-template-columns:2rem minmax(0,1fr) auto; align-items:center; gap:var(--space-3); padding:var(--space-4) 0; text-decoration:none; color:var(--color-text); }
.journey-route a:hover { color:var(--color-primary); }
.journey-route small { display:block; font-size:var(--text-sm); color:var(--color-text-muted); font-weight:400; }
.journey-route .route-num { color:var(--color-primary); font-family:var(--font-code); }
.journey-note { padding:var(--space-4); border-left:3px solid var(--color-warning); background:var(--color-warning-soft); font-size:var(--text-sm); }
.builder-help { padding:var(--space-4); border:1px solid var(--color-line); background:var(--color-surface); margin-bottom:var(--space-6); }
.builder-help p:last-child { margin:0; }
.compatibility-notes { font-size:var(--text-sm); margin-block:var(--space-4); color:var(--color-warning); }
.warp-layout { padding-block:var(--space-8); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-8); }
.warp-layout h1 { font-size:clamp(1.8rem,3vw,2.8rem); line-height:1.12; overflow-wrap:anywhere; }
.warp-services { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin-block:var(--space-4); }
.warp-services label { display:flex; gap:var(--space-2); align-items:center; padding:var(--space-3); border:1px solid var(--color-line); border-radius:var(--radius-sm); }
.warp-layout textarea { width:100%; resize:vertical; border:1px solid var(--color-line); padding:var(--space-3); background:var(--color-surface); color:var(--color-text); border-radius:var(--radius-sm); font-family:var(--font-code); font-size:var(--text-sm); }
.warp-layout fieldset { border:0; padding:0; margin-block:var(--space-6); }
.warp-layout legend { font-weight:600; }
.warp-result { min-width:0; }
.warp-result pre { max-height:38rem; overflow:auto; background:var(--color-code-surface); color:var(--color-code-text); padding:var(--space-4); font-family:var(--font-code); font-size:.75rem; border-radius:var(--radius-sm); }
.warp-status { min-height:3rem; margin-block:var(--space-4); overflow-wrap:anywhere; }
.warp-status[data-error=true] { color:var(--color-danger); }
@media(max-width:900px) { .docs-layout { grid-template-columns:minmax(0,1fr); } .docs-sidebar { position:static; } .docs-sidebar nav { grid-template-columns:repeat(2,minmax(0,1fr)); } .journey,.warp-layout { grid-template-columns:minmax(0,1fr); } }
@media(max-width:540px) { .docs-article { padding:var(--space-4); } .docs-layout { padding-block:var(--space-4); gap:var(--space-4); } .docs-sidebar nav a { font-size:.8rem; gap:var(--space-2); padding:var(--space-2) 0; } .warp-services { grid-template-columns:minmax(0,1fr); } .nav { flex-wrap:wrap; gap:var(--space-3); } .nav-links { flex-wrap:wrap; gap:var(--space-3); } .journey-route a { grid-template-columns:1.5rem minmax(0,1fr); } .journey-route .route-arrow { display:none; } }
@media print { .site-header,.docs-sidebar,.docs-toc,.doc-copy,.site-footer { display:none; } .docs-layout { display:block; } .docs-article { max-width:none; border:0; padding:0; } .docs-article pre { white-space:pre-wrap; color:var(--color-text); background:var(--color-surface); } }