/* tagave.app/docs. Tokens, type and footer match the landing page (site/index.html);
   the theme pill is the app's SegmentedControl with its sliding bubble. */

/* ============ fonts ============ */
@font-face{font-family:"Urbanist";font-style:normal;font-weight:200 400;font-display:swap;
  src:url(/fonts/urbanist-latin.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/figtree-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/jetbrains-mono-latin-400.woff2) format("woff2")}
@font-face{font-family:"Urbanist Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");
  size-adjust:98.32%;ascent-override:96.62%;descent-override:25.43%;line-gap-override:0%}
@font-face{font-family:"Figtree Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");
  size-adjust:101.53%;ascent-override:93.57%;descent-override:24.62%;line-gap-override:0%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New"),local("CourierNewPSMT"),local("Liberation Mono");
  size-adjust:99.98%;ascent-override:102.02%;descent-override:30%;line-gap-override:0%}

/* ============ tokens: Porcelain & Dew ============ */
:root{
  color-scheme:light;
  --font-display:"Urbanist","Urbanist Fallback",sans-serif;
  --font-body:"Figtree","Figtree Fallback",sans-serif;
  --font-mono:"JetBrains Mono","JetBrains Mono Fallback",monospace;

  --canvas:#F6F8FA; --surface:#FFFFFF; --mist:#EBEFF3; --line:#DCE2E8;
  --ink:#16202A; --ink-2:#46525E; --ink-3:#66717D;
  --dew-tint:#E3F0F5; --dew-hi:#5BA8C4; --dew:#276A82; --dew-lo:#1C556B; --dew-ink:#FFFFFF;
  --rim-a:rgba(255,255,255,.90); --rim-b:rgba(22,52,70,.28);
  --glass:rgba(255,255,255,.62); --glass-edge:rgba(22,32,42,.10);
  --spec:rgba(255,255,255,.85);
  --clear-hi:rgba(255,255,255,.9);
  --shadow-tint:22,52,70;
  --ring:#276A82; --warn:#9A6A12;
  --wash:radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--dew-tint) 70%, transparent), transparent 70%);

  --r-pill:999px; --r-card:28px; --r-inner:14px;
  --dur:180ms; --dur-indicator:300ms; --ease-out:cubic-bezier(.2,.8,.2,1);
  --measure:68ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#0D1115; --surface:#141A20; --mist:#1B232B; --line:#29333D;
    --ink:#E7EDF2; --ink-2:#A9B5C0; --ink-3:#8795A2;
    --dew-tint:#16303A; --dew-hi:#9AD3E6; --dew:#5FB0CC; --dew-lo:#2F7F9C; --dew-ink:#04202A;
    --rim-a:rgba(255,255,255,.35); --rim-b:rgba(0,0,0,.55);
    --glass:rgba(30,40,50,.55); --glass-edge:rgba(231,237,242,.10);
    --spec:rgba(255,255,255,.55);
    --clear-hi:rgba(255,255,255,.14);
    --shadow-tint:0,0,0;
    --ring:#8ACBE0; --warn:#D9A94A;
    --wash:radial-gradient(1200px 600px at 80% -10%, rgba(22,48,58,.55), transparent 70%);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0D1115; --surface:#141A20; --mist:#1B232B; --line:#29333D;
  --ink:#E7EDF2; --ink-2:#A9B5C0; --ink-3:#8795A2;
  --dew-tint:#16303A; --dew-hi:#9AD3E6; --dew:#5FB0CC; --dew-lo:#2F7F9C; --dew-ink:#04202A;
  --rim-a:rgba(255,255,255,.35); --rim-b:rgba(0,0,0,.55);
  --glass:rgba(30,40,50,.55); --glass-edge:rgba(231,237,242,.10);
  --spec:rgba(255,255,255,.55);
  --clear-hi:rgba(255,255,255,.14);
  --shadow-tint:0,0,0;
  --ring:#8ACBE0; --warn:#D9A94A;
  --wash:radial-gradient(1200px 600px at 80% -10%, rgba(22,48,58,.55), transparent 70%);
}

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
html,body{margin:0}
body{
  background:var(--canvas) var(--wash) no-repeat;
  color:var(--ink);
  font:400 16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--dew);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:6px}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
@media (max-width:600px){.wrap{padding:0 16px}}
.skip{position:absolute;left:16px;top:-60px;z-index:10;background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--line)}
.skip:focus{top:16px}
.label{display:block;font:500 12px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
.lede{font:400 18px/1.6 var(--font-body);color:var(--ink-2);margin:0}

/* ============ top bar ============ */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:28px 32px}
@media (max-width:600px){.nav{padding:20px 16px}}
.brandline{display:flex;align-items:center;gap:14px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;font:300 22px/1 var(--font-display);letter-spacing:.02em;color:var(--ink);text-decoration:none}
.mark{width:26px;height:26px;flex:none;filter:drop-shadow(0 2px 4px rgba(var(--shadow-tint),.28))}
.section{display:inline-flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid var(--line);
  font:500 13px/1 var(--font-body);color:var(--ink-3);white-space:nowrap}
.section .ver{font-variant-numeric:tabular-nums}
.navlinks{display:flex;gap:28px;align-items:center}
.navlinks > a{color:var(--ink-2);text-decoration:none;font-size:15px}
.navlinks > a:hover{color:var(--ink)}
@media (max-width:600px){.navlinks{gap:14px}.navlinks .hide-s{display:none}.brandline{gap:10px}.section{padding-left:10px}}
@media (max-width:600px){.section{display:none}}

/* ============ theme pill (SegmentedControl, small, icon options) ============ */
.theme-pill{
  position:relative;display:inline-flex;gap:2px;padding:3px;flex:none;
  border-radius:var(--r-pill);background:var(--mist);
  box-shadow:inset 0 1px 3px rgba(var(--shadow-tint),.1),inset 0 0 0 1px var(--glass-edge);
}
.theme-pill .opt{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-pill);color:var(--ink-3);cursor:pointer;
  transition:color var(--dur-indicator) var(--ease-out),background-color var(--dur) ease;
  -webkit-tap-highlight-color:transparent;
}
.theme-pill .opt svg{width:17px;height:17px}
.theme-pill .opt:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 45%,transparent)}
.theme-pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.theme-pill .opt:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:-2px}
/* The clear bubble: one part that only ever changes transform. Where it sits follows the
   theme in force, so it is right from the first paint and follows the system with no choice saved. */
.theme-pill .bubble{
  position:absolute;z-index:0;top:3px;left:3px;width:34px;height:34px;border-radius:var(--r-pill);pointer-events:none;
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--mist) 40%,var(--surface)));
  box-shadow:inset 0 1px 0 var(--clear-hi);
  filter:drop-shadow(0 0 1px rgba(var(--shadow-tint),.18)) drop-shadow(0 1px 2px rgba(var(--shadow-tint),.1));
  transform:translateX(0);
  transition:transform var(--dur-indicator) var(--ease-out);
}
.theme-pill .opt-light,.theme-pill .opt-light:hover{color:var(--ink);background:transparent}
:root[data-theme="dark"] .theme-pill .bubble{transform:translateX(36px)}
:root[data-theme="dark"] .theme-pill .opt-light{color:var(--ink-3)}
:root[data-theme="dark"] .theme-pill .opt-light:hover{color:var(--ink)}
:root[data-theme="dark"] .theme-pill .opt-dark,:root[data-theme="dark"] .theme-pill .opt-dark:hover{color:var(--ink);background:transparent}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-pill .bubble{transform:translateX(36px)}
  :root:not([data-theme="light"]) .theme-pill .opt-light{color:var(--ink-3)}
  :root:not([data-theme="light"]) .theme-pill .opt-light:hover{color:var(--ink)}
  :root:not([data-theme="light"]) .theme-pill .opt-dark,:root:not([data-theme="light"]) .theme-pill .opt-dark:hover{color:var(--ink);background:transparent}
}
/* The pill slides live while the rest of the page crossfades. */
.theme-pill{view-transition-name:theme-pill}
::view-transition-old(theme-pill){display:none}
::view-transition-new(theme-pill){animation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:280ms;animation-timing-function:ease}
.theme-fade,.theme-fade *,.theme-fade *::before,.theme-fade *::after{
  transition:background-color 280ms ease,color 280ms ease,border-color 280ms ease,fill 280ms ease,stroke 280ms ease!important}
.theme-fade .theme-pill .bubble{transition:transform var(--dur-indicator) var(--ease-out)!important}

/* ============ layout ============ */
.layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;align-items:start;padding-top:24px;padding-bottom:96px}
.content{min-width:0}

/* sidebar */
.side{position:sticky;top:24px;max-height:calc(100dvh - 48px);overflow:auto;padding:2px 4px 8px 2px;margin:-2px -4px 0 -2px}
.side > summary,.toc > summary{display:none}
.side .group + .group{margin-top:28px}
.side .label{padding:0 14px;margin-bottom:10px}
.side ul,.toc ul{list-style:none;margin:0;padding:0}
.side li + li{margin-top:2px}
.side a{display:block;padding:8px 14px;border-radius:var(--r-pill);color:var(--ink-2);text-decoration:none;font-size:15px;line-height:1.35;
  transition:color var(--dur) ease,background-color var(--dur) ease}
.side a:hover{color:var(--ink);background:color-mix(in srgb,var(--mist) 70%,transparent)}
/* the current page: the app's clear bubble */
.side a[aria-current="page"]{
  color:var(--ink);font-weight:500;
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--mist) 40%,var(--surface)));
  box-shadow:inset 0 1px 0 var(--clear-hi),0 0 1px rgba(var(--shadow-tint),.18),0 1px 2px rgba(var(--shadow-tint),.1);
}

/* phones: the sidebar folds into a Contents disclosure above the article */
@media (max-width:860px){
  .layout{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:4px;padding-bottom:72px}
  .side{position:static;max-height:none;overflow:visible;margin:0;padding:0;
    border:1px solid var(--line);border-radius:var(--r-inner);background:color-mix(in srgb,var(--surface) 70%,transparent)}
  .side > summary{display:flex}
  .side nav{padding:4px 8px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px 8px}
  .side .group + .group{margin-top:0}
  .side .label{padding:0 14px 0}
  .is-overview .side{display:none}
  .doc{max-width:none}
}
summary{list-style:none;cursor:pointer;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:0 18px;font:500 15px/1 var(--font-body);color:var(--ink);-webkit-tap-highlight-color:transparent}
summary::-webkit-details-marker{display:none}
summary svg{width:12px;height:12px;flex:none;color:var(--ink-3);transition:transform var(--dur) ease}
details[open] > summary svg{transform:rotate(180deg)}
summary:focus-visible{outline-offset:-2px;border-radius:var(--r-inner)}

/* ============ article ============ */
.doc{max-width:var(--measure)}
.doc-head .label{margin-bottom:14px}
.doc-head h1{font:200 clamp(40px,6vw,60px)/1.05 var(--font-display);letter-spacing:-.02em;margin:0}
.doc-head .lede{margin-top:18px}

/* on this page: a quiet list under the title; a right rail on wide screens */
.toc{margin:32px 0 8px;border:1px solid var(--line);border-radius:var(--r-inner);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.toc > summary{display:flex}
.toc nav{padding:0 18px 16px}
.toc nav .label{display:none}
.toc li a{display:block;padding:5px 0;color:var(--ink-2);text-decoration:none;font-size:14.5px;line-height:1.4}
.toc li a:hover{color:var(--dew)}
@media (min-width:1200px){
  .doc{display:grid;grid-template-columns:minmax(0,var(--measure)) 200px;column-gap:64px;max-width:none}
  .doc > *{grid-column:1}
  .doc > .toc{grid-column:2;grid-row:1 / span 4;align-self:start;position:sticky;top:24px;margin:6px 0 0;
    border:0;background:none;max-height:calc(100dvh - 48px);overflow:auto}
  .doc > .toc > summary{display:none}
  .toc nav{padding:0;border-left:1px solid var(--line)}
  .toc nav .label{display:block;padding:0 0 10px 18px}
  .toc li a{padding:5px 0 5px 18px;margin-left:-1px;border-left:1px solid transparent;font-size:14px}
  .toc li a:hover{border-left-color:var(--dew)}
}

/* prose */
.prose{font:400 16.5px/1.65 var(--font-body);color:var(--ink-2);overflow-wrap:break-word}
.prose > :first-child{margin-top:32px}
.prose h2{font:300 clamp(26px,3.4vw,34px)/1.2 var(--font-display);letter-spacing:-.01em;color:var(--ink);margin:64px 0 16px;scroll-margin-top:24px}
.prose h3{font:400 21px/1.3 var(--font-display);color:var(--ink);margin:40px 0 10px}
.prose h4{font:600 16px/1.4 var(--font-body);color:var(--ink);margin:28px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 18px}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin:6px 0}
.prose li > ul,.prose li > ol{margin:6px 0 0}
.prose li::marker{color:var(--ink-3)}
.prose strong{color:var(--ink);font-weight:600}
.prose hr{border:0;border-top:1px solid var(--line);margin:48px 0}
.prose img{border-radius:var(--r-inner);border:1px solid var(--line);margin:24px 0}
.hash{margin-left:.35em;color:var(--ink-3);text-decoration:none;opacity:0;font-weight:400;transition:opacity var(--dur) ease}
:is(h2,h3,h4):hover > .hash,.hash:focus-visible{opacity:1}
@media (hover:none){.hash{display:none}}

/* code */
.prose code{font-family:var(--font-mono);font-size:.86em;padding:1px 6px;border-radius:6px;background:var(--mist);color:var(--ink);overflow-wrap:anywhere}
.prose pre{margin:0 0 22px;padding:16px 20px;border-radius:var(--r-inner);background:var(--mist);
  box-shadow:inset 0 0 0 1px var(--glass-edge);overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose pre code{display:block;padding:0;background:none;font-size:13.5px;line-height:1.65;overflow-wrap:normal;white-space:pre;width:max-content;min-width:100%}
.prose h2 code,.prose h3 code{font-size:.8em}

/* tables: hairlines, scrolling inside their own wrapper */
.table-wrap{margin:0 0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.table-wrap:focus-visible{outline-offset:2px}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.5}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 16px 10px 0;border-bottom:1px solid var(--line)}
.prose tr:last-child td{border-bottom:0}
.prose th{font:500 12px/1.3 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.prose td code{overflow-wrap:anywhere}
@media (max-width:600px){.prose th,.prose td{min-width:10.5em}.prose :is(th,td):first-child{min-width:7em}}
.prose th:last-child,.prose td:last-child{padding-right:0}

/* notes */
.prose blockquote{margin:0 0 22px;padding:16px 20px;border-radius:var(--r-inner);
  background:color-mix(in srgb,var(--dew-tint) 55%,transparent);border:1px solid color-mix(in srgb,var(--dew) 14%,transparent);color:var(--ink-2)}
.prose blockquote > :last-child{margin-bottom:0}

/* changelog */
.changelog .prose h2.release{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:4px;padding-top:40px;border-top:1px solid var(--line)}
.changelog .prose h2.release time{font:500 13px/1 var(--font-body);letter-spacing:.06em;color:var(--ink-3)}
.changelog .prose h2.release .hash{margin-left:-8px}
.changelog .release-meta{margin:0 0 20px;font-size:14px}
.changelog .prose h3{font-size:19px}

.edit{margin:64px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
.edit a{color:var(--ink-3)}
.edit a:hover{color:var(--dew)}

/* overview */
.overview .guide-group{margin-top:48px}
.overview .guide-group .label{margin-bottom:12px}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 12px;align-items:center;gap:4px 24px;padding:18px 8px;
  color:var(--ink-2);text-decoration:none;border-radius:var(--r-inner);transition:background-color var(--dur) ease}
.row:hover{background:color-mix(in srgb,var(--mist) 60%,transparent)}
.row-title{font:400 21px/1.3 var(--font-display);color:var(--ink)}
.row-blurb{font-size:15px}
.row-arrow{width:12px;height:12px;color:var(--ink-3);transition:transform var(--dur) ease}
.row:hover .row-arrow{transform:translateX(2px);color:var(--dew)}
@media (max-width:600px){.row{grid-template-columns:minmax(0,1fr) 12px}.row-blurb{grid-column:1;grid-row:2}.row-arrow{grid-row:1 / span 2;grid-column:2}}

/* ============ footer ============ */
footer{border-top:1px solid var(--line);padding:48px 0 64px;color:var(--ink-3);font-size:13px}
footer .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
footer .links{display:flex;flex-wrap:wrap;gap:8px 24px}
footer .links a{color:var(--ink-2);text-decoration:none;font-size:14px}
footer .links a:hover{color:var(--ink)}
footer p{margin:0 0 8px;max-width:78ch}

/* ============ a11y ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media (forced-colors: active){
  .theme-pill{border:1px solid CanvasText}
  .theme-pill .bubble{display:none}
  .theme-pill .opt:has(input:checked){outline:2px solid Highlight;outline-offset:-2px}
  .side a[aria-current="page"]{outline:2px solid Highlight}
}