/* SSS DocGen documentation. Extracted from the single-page docs so the
 * seven document pages share one cached stylesheet rather than embedding
 * ~15 KB each. Generated by tools/docs-split/split.py. */
/* Design system: Simple Smooth Safe (simplesmoothsafe.com) */
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
  :root{
    --bg:#ffffff; --panel:#ffffff; --panel2:#f8fafc; --line:#e2e8f0;
    --text:#1e293b; --muted:#334155; --dim:#64748b;
    /* #0891b2 is 3.68:1 on white and this page is 12,000 words of body text
       and inline links. #0e7490 is 5.36:1; #155e75 for hover. */
    --accent:#0e7490; --accent-dark:#155e75; --green:#22c55e; --amber:#b45309; --red:#dc2626;
    --shadow-sm:0 1px 3px rgba(15,23,42,.08); --shadow-md:0 4px 12px rgba(15,23,42,.08);
    --mono:'SFMono-Regular',ui-monospace,'JetBrains Mono',Consolas,'Liberation Mono',monospace;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --sidebar-w:270px;
    --topbar-bg:rgba(255,255,255,.92);
    color-scheme:light dark;
  }

  /* Dark theme. This page had no dark tokens at all, so it stayed white while
     the product page it documents went dark — the single worst place for that
     to happen, because this is 12,000 words of reading. Values mirror the
     product pages' dark palette so the two feel like one site. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0f172a; --panel:#1e293b; --panel2:#0f172a; --line:#334155;
      --text:#f8fafc; --muted:#cbd5e1; --dim:#94a3b8;
      --accent:#22d3ee; --accent-dark:#ecfeff;
      --green:#4ade80; --amber:#fbbf24; --red:#f87171;
      --shadow-sm:0 1px 3px rgba(0,0,0,.40); --shadow-md:0 4px 12px rgba(0,0,0,.45);
      --topbar-bg:rgba(15,23,42,.92);
    }
  }
  [data-theme="dark"]{
    --bg:#0f172a; --panel:#1e293b; --panel2:#0f172a; --line:#334155;
    --text:#f8fafc; --muted:#cbd5e1; --dim:#94a3b8;
    --accent:#22d3ee; --accent-dark:#ecfeff;
    --green:#4ade80; --amber:#fbbf24; --red:#f87171;
    --shadow-sm:0 1px 3px rgba(0,0,0,.40); --shadow-md:0 4px 12px rgba(0,0,0,.45);
    --topbar-bg:rgba(15,23,42,.92);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--muted);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline}
  code,.mono{font-family:var(--mono)}

  /* TOP BAR */
  .topbar{position:sticky;top:0;z-index:20;background:var(--topbar-bg);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);padding:14px 24px;display:flex;align-items:center;gap:16px}
  .topbar .brand{font-weight:700;color:var(--text);font-size:15px}
  .topbar .brand b{color:var(--accent)}
  .topbar .crumbs{font-family:var(--mono);font-size:12px;color:var(--dim)}
  .topbar .spacer{flex:1}
  .topbar .tlink{font-size:13px;font-weight:600;color:var(--muted)}
  .topbar .tlink:hover{color:var(--accent);text-decoration:none}

  /* LAYOUT */
  .layout{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);max-width:1240px;margin:0 auto}
  .sidebar{position:sticky;top:57px;align-self:start;height:calc(100vh - 57px);overflow-y:auto;
    padding:28px 18px 60px;border-right:1px solid var(--line)}
  .sidebar .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--dim);margin:0 0 14px 8px}
  .toc-group{margin-bottom:16px}
  .toc-top{display:block;font-weight:700;color:var(--text);font-size:14px;padding:6px 8px;border-radius:7px}
  .toc-top:hover{background:var(--panel2);text-decoration:none;color:var(--accent)}
  .toc-sub{display:block;font-size:12.5px;color:var(--muted);padding:4px 8px 4px 18px;border-left:2px solid var(--line);margin-left:8px}
  .toc-sub:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}

  /* CONTENT */
  .content{padding:36px 48px 100px;min-width:0}
  .page-head{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:8px}
  .page-head .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
  .page-head h1{font-size:34px;line-height:1.15;letter-spacing:-.02em;color:var(--text);margin:0 0 12px}
  .page-head p{font-size:16px;color:var(--muted);max-width:720px;margin:0}
  .callout{margin-top:20px;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:8px;padding:12px 16px;font-size:13.5px;color:var(--muted)}
  .callout b{color:var(--text)}

  /* PROSE */
  .doc{padding:34px 0;border-bottom:1px solid var(--line)}
  .doc:last-child{border-bottom:0}
  /* One <h1> per page — the page title in .page-head. Each doc section starts at
     <h2>, so the sizes below are one level down from where they used to be; the
     rendering is unchanged, only the outline is now valid. */
  .doc h2{font-size:26px;letter-spacing:-.02em;color:var(--text);margin:8px 0 14px;scroll-margin-top:72px}
  .doc h3{font-size:20px;letter-spacing:-.01em;color:var(--text);margin:34px 0 12px;padding-top:6px;scroll-margin-top:72px}
  .doc h4{font-size:16px;color:var(--text);margin:24px 0 8px;scroll-margin-top:72px}
  .doc h5{font-size:14px;color:var(--text);margin:18px 0 6px;text-transform:none}
  .doc p{font-size:14.5px;color:var(--muted);margin:0 0 14px}
  .doc ul,.doc ol{font-size:14.5px;color:var(--muted);padding-left:22px;margin:0 0 14px}
  .doc li{margin-bottom:6px}
  .doc li>ul,.doc li>ol{margin-top:6px}
  .doc strong{color:var(--text);font-weight:700}
  .doc hr{border:0;border-top:1px solid var(--line);margin:28px 0}
  .doc a{font-weight:500}

  /* inline code */
  .doc :not(pre)>code{font-family:var(--mono);font-size:.86em;background:var(--panel2);border:1px solid var(--line);
    border-radius:5px;padding:1px 6px;color:var(--accent-dark);white-space:nowrap}
  /* code blocks */
  .doc pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-sm);
    padding:16px 18px;overflow-x:auto;margin:0 0 18px}
  .doc pre code{font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--muted);background:none;border:0;padding:0;white-space:pre}

  /* tables */
  .doc .table-wrap{overflow-x:auto;margin:0 0 18px}
  .doc table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:440px}
  .doc th,.doc td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
  .doc th{background:var(--panel2);color:var(--text);font-weight:700;white-space:nowrap}
  .doc td{color:var(--muted)}
  .doc td code,.doc th code{white-space:normal}

  /* blockquote (docs use > for notes) */
  .doc blockquote{margin:0 0 18px;padding:12px 16px;background:var(--panel2);border:1px solid var(--line);
    border-left:3px solid var(--amber);border-radius:8px}
  .doc blockquote p{margin:0;font-size:13.5px}

  footer{padding:40px 48px 70px;color:var(--dim);font-size:13px;border-top:1px solid var(--line);max-width:1240px;margin:0 auto}
  footer a{font-family:var(--mono)}

  /* mobile */
  .menu-btn{display:none}
  @media(max-width:900px){
    .layout{grid-template-columns:1fr}
    .sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);
      display:none;padding:18px 24px}
    .sidebar.open{display:block}
    .content{padding:26px 22px 80px}
    .menu-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);
      background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}
    .page-head h1{font-size:27px}
    footer{padding:34px 22px 70px}
    /* Inline code is nowrap so a token like sss_documenttemplate does not break
       mid-word in prose. On a phone that turns one long path into horizontal
       scroll for the whole page — a 368px token on a 360px screen — so below
       this width let it wrap instead. Code blocks are unaffected: <pre> has its
       own overflow-x and is meant to scroll. */
    .doc :not(pre)>code{white-space:normal;overflow-wrap:anywhere}
  }