/* Completion layer: shared modules, states, and narrow-screen safeguards. */
:root{--state-surface:oklch(96% .012 90);--state-ink:oklch(25% .035 245)}
html{overflow-x:hidden}
main{min-width:0}
section{scroll-margin-top:2rem}
.completion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.completion-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.completion-card,.completion-state,.completion-panel{min-width:0;padding:clamp(1.2rem,3vw,2rem);border:1px solid var(--border);background:var(--surface)}
.completion-card h3,.completion-panel h3{margin-top:0}
.completion-state{border-left:4px solid var(--accent);background:var(--state-surface)}
.completion-state[data-state="success"]{border-left-color:var(--success)}
.completion-state[data-state="unavailable"]{border-left-color:var(--warn)}
.completion-state[data-state="error"]{border-left-color:var(--danger)}
.completion-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.25rem}
.completion-actions a,.completion-actions button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:.65rem .95rem;border:1px solid var(--fg);background:transparent;color:inherit;font:600 .75rem/1 var(--font-body);letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.completion-actions a:hover,.completion-actions button:hover{background:var(--fg);color:var(--bg)}
.completion-meta{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1rem;padding:0;list-style:none;font-size:.78rem;color:var(--muted)}
.completion-meta li{padding:.3rem .55rem;border:1px solid var(--border)}
.completion-nav{display:flex;flex-wrap:wrap;gap:.65rem;margin:0 0 1.5rem;padding:0;list-style:none}
.completion-nav a{padding:.45rem .65rem;border:1px solid var(--border);text-decoration:none;font-size:.82rem}
.completion-nav a:hover,.completion-nav a[aria-current="page"]{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.completion-stack{display:grid;gap:1rem}
.completion-note{color:var(--muted);font-size:.9rem}
@media (max-width:48rem){.completion-grid,.completion-grid--two{grid-template-columns:1fr}.nav,.header .container{align-items:flex-start}.nav{padding:.9rem 0}.nav-links{gap:.65rem}.completion-actions>*{flex:1 1 12rem}.links{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}.side{max-width:100%;overflow:visible!important;flex-wrap:wrap;gap:.45rem;padding-bottom:.35rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}