/* SignoutCrib docs — same light theme as the marketing page (see DESIGN.md). */
:root{
  --ink:#16191C; --muted:#545C65; --paper:#FFFFFF; --paper-2:#F8F9FA;
  --line:#E4E7EB; --accent:#1F4B7A; --accent-hover:#17395D;
  --display:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{ font:17px/1.65 var(--body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
.wrap{ max-width:1160px; margin:0 auto; padding-left:24px; padding-right:24px; }

.topnav{ position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); }
.topnav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:64px; }
.topnav .brand{ font:600 15px var(--body); letter-spacing:.04em; text-decoration:none; }
.topnav-links{ display:flex; align-items:center; gap:32px; }
.topnav-links a{ font-size:15px; text-decoration:none; color:var(--muted); }
.topnav-links a:hover, .topnav-links a.current{ color:var(--ink); }
.btn{ display:inline-block; background:var(--accent); color:#fff !important; text-decoration:none;
      font:600 15px var(--body); padding:10px 20px; }
.btn:hover{ background:var(--accent-hover); }
.topnav-links .btn-ghost{
  background:transparent; border:1px solid var(--accent); color:var(--accent) !important;
  padding:9px 19px;
}
.topnav-links .btn-ghost:hover{ background:var(--paper-2); }

.layout{ display:grid; grid-template-columns:220px 1fr; gap:64px; padding-top:48px; padding-bottom:96px; }
aside nav{ position:sticky; top:96px; display:flex; flex-direction:column; gap:2px; }
aside nav a{ font-size:15px; color:var(--muted); text-decoration:none; padding:6px 12px; border-left:2px solid transparent; }
aside nav a:hover{ color:var(--ink); }
aside nav a.active{ color:var(--ink); border-left-color:var(--accent); background:var(--paper-2); }

main{ max-width:68ch; min-width:0; }
main h1{ font-family:var(--display); font-weight:600; font-size:clamp(32px,4vw,40px); line-height:1.15; letter-spacing:-.005em; }
main .lede{ margin-top:12px; color:var(--muted); font-size:19px; }
main h2{ font-family:var(--display); font-weight:600; font-size:24px; line-height:1.2; margin-top:48px; }
main p, main ul, main ol{ margin-top:16px; }
main ul, main ol{ padding-left:24px; }
main li{ margin-top:8px; }
main li::marker{ color:var(--muted); }
main code{ font:14px var(--mono); background:var(--paper-2); border:1px solid var(--line); padding:1px 5px; }
main table{ width:100%; margin-top:16px; border-collapse:collapse; font-size:15px; }
main th{ text-align:left; font:500 13px var(--mono); text-transform:uppercase; letter-spacing:.04em;
         color:var(--muted); padding:8px 12px 8px 0; border-bottom:1px solid var(--ink); }
main td{ padding:8px 12px 8px 0; border-bottom:1px solid var(--line); vertical-align:top; }
main .yes{ color:var(--accent); font-weight:600; }
main .no{ color:var(--muted); }
.note{ margin-top:24px; padding:16px 20px; background:var(--paper-2); border-left:2px solid var(--accent); font-size:15px; }
.next{ margin-top:64px; padding-top:24px; border-top:1px solid var(--line); font-size:15px; color:var(--muted); }
.next a{ color:var(--ink); }
.toc{ margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0; list-style:none; }
.toc li{ margin:0; }
.toc a{ display:block; padding:20px; border:1px solid var(--line); text-decoration:none; height:100%; }
.toc a:hover{ border-color:var(--accent); }
.toc strong{ display:block; font-family:var(--display); font-weight:600; font-size:19px; }
.toc span{ display:block; margin-top:6px; font-size:14px; color:var(--muted); }
footer{ padding:48px 0; text-align:center; font-size:13px; color:var(--muted); border-top:1px solid var(--line); }

@media (max-width:800px){
  .layout{ grid-template-columns:1fr; gap:32px; }
  aside nav{ position:static; flex-direction:row; flex-wrap:wrap; gap:4px; }
  aside nav a{ border-left:none; border:1px solid var(--line); padding:6px 12px; }
  aside nav a.active{ border-color:var(--accent); }
  .toc{ grid-template-columns:1fr; }
  .topnav-links a:not(.btn){ display:none; }
}