/* outskirts.dev: the one stylesheet of the home page and the documentation.
   Colors come from the brand kit (assets/brand/): navy #1E2A46 and amber #D08018 on light,
   #E8ECF4 and amber on dark. Colors are only written here, as custom properties. */
:root{
  --bg:#fff;--fg:#1E2A46;--muted:#4a5672;--accent:#9a5c0a;--line:#d5dbe8;--code:#eef1f7;--surface:#f6f8fb;
  --note:#2f5fb3;--tip:#2e7d4f;--warning:#9a5c0a;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text:1.0625rem;--text-small:.95rem;--text-tiny:.85rem;--leading:1.65;
  --space-1:.3rem;--space-2:.5rem;--space-3:1rem;--space-4:1.5rem;--space-5:2.5rem;--space-6:3rem;
  --radius-s:4px;--radius-m:8px;
  --measure:46rem;--sidebar:13.5rem;--wide:calc(var(--measure) + var(--sidebar) + var(--space-5) + 2rem);
  --focus:3px solid var(--accent)
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121826;--fg:#E8ECF4;--muted:#aab4c8;--accent:#D08018;--line:#2a3552;--code:#1b2438;--surface:#172033;
  --note:#7da7ef;--tip:#6cc492;--warning:#D08018
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--text)/var(--leading) var(--font-sans);overflow-wrap:break-word}
main,header,footer{max-width:var(--measure);margin:0 auto;padding:0 var(--space-3)}
header{padding-top:var(--space-6);padding-bottom:var(--space-3)}
header img{display:block;width:100%;max-width:22rem;height:auto}
.pitch{font-size:1.25rem;margin:var(--space-4) 0 var(--space-2)}
h1{margin:0}
h2{font-size:1.4rem;margin:var(--space-5) 0 var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--line)}
h3{font-size:1.15rem;margin:var(--space-4) 0 var(--space-2)}
a{color:var(--accent);text-underline-offset:.15em}
a:focus-visible,summary:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:2px}
pre,code{font-family:var(--font-mono);font-size:.92em}
code{background:var(--code);padding:.1em .3em;border-radius:var(--radius-s);overflow-wrap:break-word}
pre{background:var(--code);padding:var(--space-3);border-radius:var(--radius-m);margin:var(--space-3) 0;white-space:pre-wrap;overflow-wrap:break-word}
pre code{background:none;padding:0}
ul,ol{padding-left:1.25rem}
li{margin:var(--space-1) 0}
footer{padding-top:2rem;padding-bottom:var(--space-6);margin-top:var(--space-5);border-top:1px solid var(--line);color:var(--muted);font-size:var(--text-small)}
footer p{margin:.4rem 0}
.cta{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:1.25rem}
.button{display:inline-block;padding:.55rem var(--space-3);border-radius:var(--radius-m);background:var(--accent);color:var(--bg);font-weight:600;text-decoration:none}
.button:hover{opacity:.9}
.button:focus-visible{outline:var(--focus);outline-offset:3px}
.legal{font-size:var(--text-tiny)}
.topnav{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-end;font-size:var(--text-small)}
.topnav a{text-decoration:none;font-weight:600}
.topnav a:hover,.topnav a[aria-current]{text-decoration:underline}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--space-3);top:var(--space-3);background:var(--bg);padding:var(--space-2);z-index:1}

/* Documentation */
.docs header.topbar{max-width:var(--wide);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--line)}
.docs .brand img{width:9rem}
.layout{max-width:var(--wide);margin:0 auto;padding:0 var(--space-3)}
.docs main{padding:0;max-width:var(--measure);margin:0}
.docs footer{max-width:var(--wide)}
.sidebar{display:none}
.sidebar ul,.mobile-nav ul{list-style:none;padding:0;margin:0 0 var(--space-3)}
.sidebar li,.mobile-nav li{margin:0}
.sidebar a,.mobile-nav a{display:block;padding:.2rem var(--space-2);border-radius:var(--radius-s);text-decoration:none;color:var(--fg)}
.sidebar a:hover,.mobile-nav a:hover{color:var(--accent)}
.sidebar a[aria-current],.mobile-nav a[aria-current]{background:var(--code);color:var(--accent);font-weight:600}
.nav-group{margin:var(--space-3) 0 var(--space-1);padding:0 var(--space-2);font-size:var(--text-tiny);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mobile-nav{margin:var(--space-3) 0;border:1px solid var(--line);border-radius:var(--radius-m);padding:var(--space-2) var(--space-3)}
.mobile-nav summary,.toc summary{cursor:pointer;font-weight:600}
article h1{font-size:2.1rem;line-height:1.2;margin:var(--space-4) 0 var(--space-3)}
article h2,article h3{scroll-margin-top:var(--space-3)}
.anchor{margin-left:var(--space-2);text-decoration:none;color:var(--muted);opacity:0;font-weight:400}
h2:hover .anchor,h3:hover .anchor,.anchor:focus-visible{opacity:1}
.toc{margin:var(--space-4) 0;padding:var(--space-2) var(--space-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);font-size:var(--text-small)}
.toc ul{margin:var(--space-2) 0}
.toc li{margin:.15rem 0}
.toc code{background:none;padding:0}
.status{padding:var(--space-2) var(--space-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m)}
.callout{margin:var(--space-3) 0;padding:var(--space-2) var(--space-3);border-left:4px solid var(--note);background:var(--surface);border-radius:0 var(--radius-m) var(--radius-m) 0}
.callout-tip{border-left-color:var(--tip)}
.callout-warning,.callout-caution,.callout-important{border-left-color:var(--warning)}
.callout-title{margin:var(--space-1) 0;font-weight:700;color:var(--note)}
.callout-tip .callout-title{color:var(--tip)}
.callout-warning .callout-title,.callout-caution .callout-title,.callout-important .callout-title{color:var(--warning)}
blockquote{margin:var(--space-3) 0}
.table-scroll{margin:var(--space-3) 0;overflow-x:auto;background:linear-gradient(to right,var(--bg) 40%,transparent) left/1.5rem 100% no-repeat local,linear-gradient(to left,var(--bg) 40%,transparent) right/1.5rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,var(--line),transparent) left/.6rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,var(--line),transparent) right/.6rem 100% no-repeat scroll}
table{width:100%;border-collapse:collapse;font-size:var(--text-small)}
th,td{text-align:left;vertical-align:top;padding:var(--space-1) var(--space-2);border-bottom:1px solid var(--line);overflow-wrap:break-word}
th{border-bottom-width:2px}
td.prose code{overflow-wrap:anywhere}
@media (min-width:40.01rem){td:not(.prose) code{white-space:nowrap}}
@media (max-width:40rem){
  th,td{padding-left:var(--space-1);padding-right:var(--space-1)}
  table.stacked code{overflow-wrap:anywhere}
  table.stacked,table.stacked tbody,table.stacked tr,table.stacked td{display:block}
  table.stacked thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.stacked tr{padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
  table.stacked td{border:0;padding:.1rem 0}
  table.stacked td::before{content:attr(data-label);display:block;font-size:var(--text-tiny);font-weight:700;color:var(--muted)}
  table.stacked td:first-child::before{display:none}
  table.stacked td:first-child{font-weight:600}
}
article img{display:block;max-width:100%;height:auto;margin:var(--space-3) 0;border:1px solid var(--line);border-radius:var(--radius-m)}
.pager{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line)}
.pager a{text-decoration:none;font-weight:600}
.pager span{display:block;font-size:var(--text-tiny);font-weight:400;color:var(--muted)}
.pager .next{text-align:right;margin-left:auto}
.edit{font-size:var(--text-small);color:var(--muted)}
@media (min-width:62rem){
  .layout{display:grid;grid-template-columns:var(--sidebar) minmax(0,var(--measure));gap:var(--space-5)}
  .sidebar{display:block;position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;padding:var(--space-3) 0;font-size:var(--text-small)}
  .mobile-nav{display:none}
}
@media (max-width:40rem){pre{white-space:pre;overflow-wrap:normal;overflow-x:auto;background:linear-gradient(to right,var(--code) 40%,transparent) left/1.5rem 100% no-repeat local,linear-gradient(to left,var(--code) 40%,transparent) right/1.5rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,var(--line),transparent) left/.6rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,var(--line),transparent) right/.6rem 100% no-repeat scroll,var(--code)}}