/* breadstick.io: the one stylesheet for every page (home, docs, blog, catalog, tools, legal).
   Colors, type sizes, radii and spacing come from tokens.css (generated from
   AutoBuild/design/tokens.json; never edit it). The components are the app's kit
   (Android/docs/3.0/ui/BRIEF.md section 7, mockups/kit.css): header bar, boxed lists and rows,
   pill buttons, a neutral badge, cards only where they carry content. Light and dark follow the
   device through tokens.css. Hand-written; pages link it as /css/site.css?v=<hash>, stamped by
   build-docs.py.

   Web additions to the app's scale: long-form prose reads at 16/26 (the app's body is 15/20),
   and the home page's one headline uses a 40 px display step. Radii stay 6, 12, 16 and pill. */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-sans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600 700;font-display:swap;src:url(/fonts/plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/plex-mono-500.woff2) format("woff2")}

:root{
  color-scheme:light;
  --bg:var(--bsl-bg); --surface:var(--bsl-surface); --card:var(--bsl-card); --field:var(--bsl-field);
  --text:var(--bsl-text); --dim:var(--bsl-text-dim); --faint:var(--bsl-text-faint);
  --border:var(--bsl-border); --hover:var(--bsl-hover); --press:var(--bsl-press); --glyph:var(--bsl-glyph);
  --accent:var(--bsl-accent); --on-accent:var(--bsl-on-accent);
  --accent-soft:var(--bsl-accent-soft); --accent-text:var(--bsl-accent-text);
  --neutral:var(--bsl-neutral-container); --on-neutral:var(--bsl-on-neutral-container);
  --error:var(--bsl-error); --on-error:var(--bsl-on-error);
  --error-soft:var(--bsl-error-container); --on-error-soft:var(--bsl-on-error-container);
  --term-bg:var(--bsl-brand-log-bg); --term-fg:var(--bsl-brand-log-fg);
  --r-s:var(--bsl-radius-small); --r-l:var(--bsl-radius-list); --r-w:var(--bsl-radius-window); --r-p:var(--bsl-radius-pill);
  --s1:var(--bsl-space-xs); --s2:var(--bsl-space-s); --s3:var(--bsl-space-m); --s4:var(--bsl-space-l);
  --s5:var(--bsl-space-xl); --s6:var(--bsl-space-xxl);
  --gutter:var(--bsl-layout-gutter-wide);
  --sans:var(--bsl-font-ui); --mono:var(--bsl-font-mono);
  --maxw:1200px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
[data-theme="dark"]{color-scheme:dark}
@media (max-width:600px){:root{--gutter:var(--bsl-layout-gutter-phone)}}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:var(--bsl-type-body-size);line-height:var(--bsl-type-body-line);letter-spacing:var(--bsl-letter-spacing);
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
body>main,body>.shell,body>.bwrap,body>.cmain{flex:1 0 auto}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-weight:600;letter-spacing:0;color:var(--text);text-wrap:balance}
h1{font-size:var(--bsl-type-large-title-size);line-height:var(--bsl-type-large-title-line);margin:0 0 var(--s3)}
h2{font-size:var(--bsl-type-title-size);line-height:var(--bsl-type-title-line);margin:var(--s6) 0 var(--s3)}
h3{font-size:17px;line-height:24px;margin:var(--s5) 0 var(--s2)}
h4{font-size:var(--bsl-type-heading-size);line-height:var(--bsl-type-heading-line);margin:var(--s4) 0 var(--s2)}
p{margin:0 0 var(--s4)}
img{max-width:100%;height:auto}
strong,b{font-weight:600}
code,kbd,pre,samp{font-family:var(--mono)}
code{font-size:.9em;background:var(--neutral);color:var(--on-neutral);border-radius:var(--r-s);padding:1px 6px;overflow-wrap:anywhere}
pre{background:var(--term-bg);color:var(--term-fg);border-radius:var(--r-l);padding:var(--s4);overflow-x:auto;
  font-size:14px;line-height:22px;max-width:100%;margin:var(--s4) 0}
pre code{background:none;color:inherit;padding:0;font-size:inherit;border-radius:0;overflow-wrap:normal}
hr{border:0;border-top:1px solid var(--border);margin:var(--s6) 0}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.dim{color:var(--dim)}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:var(--s4);top:-48px;z-index:100;background:var(--card);color:var(--text);padding:var(--s2) var(--s4);border-radius:var(--r-p)}
.skip:focus{top:var(--s2)}

/* ------------------------------------------------------------------ header bar (every page) */
.site{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.site .bar{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:var(--bsl-layout-header-height);
  display:flex;align-items:center;gap:var(--s4)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:600;font-size:17px;flex:none}
.brand svg{width:28px;height:28px;border-radius:7px;display:block}
.brand:hover{text-decoration:none}
.nav{display:flex;align-items:center;gap:var(--s1);margin-left:auto}
.nav a{display:inline-flex;align-items:center;height:36px;padding:0 var(--s3);border-radius:var(--r-p);
  color:var(--dim);font-weight:500;text-decoration:none;white-space:nowrap}
.nav a:hover{background:var(--hover);color:var(--text)}
.nav a[aria-current]{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.site .getit{margin-left:var(--s2)}
@media (max-width:760px){.site .getit{display:none}}
@media (max-width:440px){
  .brand{font-size:16px;gap:8px}.brand svg{width:26px;height:26px}
  .nav a{padding:0 9px;font-size:14px;height:34px}
  .site .bar{gap:var(--s2)}
}
@media (max-width:350px){.brand span{display:none}}

/* ------------------------------------------------------------------ footer (every page) */
.foot{border-top:1px solid var(--border);margin-top:var(--s6);background:var(--bg)}
.foot .in{max-width:var(--maxw);margin:0 auto;padding:var(--s5) var(--gutter) var(--s6);display:flex;flex-wrap:wrap;
  gap:var(--s3) var(--s5);align-items:baseline;justify-content:space-between;color:var(--dim);
  font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line)}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--text);text-decoration:underline}
.foot .fine{flex-basis:100%;margin:0}

/* ------------------------------------------------------------------ pill buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:var(--bsl-layout-button-height);
  padding:0 var(--s5);border-radius:var(--r-p);border:0;font:inherit;font-size:15px;font-weight:600;line-height:1;
  white-space:nowrap;text-decoration:none;cursor:pointer;background:var(--neutral);color:var(--on-neutral)}
.btn:hover{text-decoration:none;filter:brightness(.97)}
[data-theme="dark"] .btn:hover{filter:brightness(1.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn:hover{filter:brightness(1.08)}}
.btn.suggested{background:var(--accent);color:var(--on-accent)}
.btn.destructive{background:var(--error);color:var(--on-error)}
.btn.flat{background:transparent;color:var(--accent);padding:0 var(--s3)}
.btn.flat:hover{background:var(--hover);filter:none}
.btn.sm{height:var(--bsl-layout-button-small-height);padding:0 var(--s4);font-size:13px}
.btn.block{display:flex;width:100%;height:var(--bsl-layout-button-block-height)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;filter:none}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s4) 0 0}

/* ------------------------------------------------------------------ badge (neutral, rare) */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--bsl-type-small-size);line-height:var(--bsl-type-small-line);
  font-weight:var(--bsl-type-small-weight);padding:var(--bsl-layout-badge-pad-y) var(--bsl-layout-badge-pad-x);
  border-radius:var(--r-s);background:var(--neutral);color:var(--on-neutral);white-space:nowrap;flex:none;text-decoration:none}
.badge.check::before{content:"";width:8px;height:4px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(-45deg);flex:none}

/* ------------------------------------------------------------------ boxed lists and rows */
.group{margin:0 0 var(--s5)}
.heading{font-size:var(--bsl-type-heading-size);line-height:var(--bsl-type-heading-line);font-weight:600;color:var(--dim);margin:0 var(--s1) var(--s2)}
.boxed{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden}
.boxed>li{margin:0}
.boxed.group{margin-bottom:var(--s5)}
.row{display:flex;align-items:center;gap:var(--s4);min-height:var(--bsl-layout-row-min);padding:var(--s3) var(--s4);color:var(--text);text-decoration:none}
.boxed>li+li,.boxed>.row+.row,.boxed>details+details{border-top:1px solid var(--border)}
.row .text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row .t{font-weight:500}
.row .s{font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim)}
.row .end{flex:none;display:flex;align-items:center;gap:var(--s2);color:var(--dim);font-size:var(--bsl-type-caption-size)}
a.row:hover{background:var(--hover);text-decoration:none}
a.row::after,.chev::after{content:"";width:8px;height:8px;border-top:2px solid var(--glyph);border-right:2px solid var(--glyph);
  transform:rotate(45deg);margin-right:4px;flex:none}

/* expander rows (FAQ) */
.boxed details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s4);
  min-height:var(--bsl-layout-row-min);padding:var(--s3) var(--s4);font-weight:500}
.boxed details>summary::-webkit-details-marker{display:none}
.boxed details>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--glyph);
  border-bottom:2px solid var(--glyph);transform:rotate(45deg) translate(-2px,-2px);flex:none;transition:transform .2s}
.boxed details[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.boxed details>summary:hover{background:var(--hover)}
.boxed details .ans{padding:0 var(--s4) var(--s4);color:var(--dim)}
.boxed details .ans p{margin:0 0 var(--s3)}
.boxed details .ans>:last-child{margin-bottom:0}
.boxed details .ans strong{color:var(--text)}

/* ------------------------------------------------------------------ cards (only where they carry content) */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s4) var(--s5)}
.card>:last-child{margin-bottom:0}
.card h2,.card h3{margin-top:0}
.banner{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-l);
  background:var(--neutral);color:var(--on-neutral);margin:var(--s4) 0}
.banner>:last-child{margin-bottom:0}
.banner.error{background:var(--error-soft);color:var(--on-error-soft)}

/* ------------------------------------------------------------------ figures and screenshots */
figure{margin:var(--s5) 0}
.shot img,figure.shot img{display:block;width:100%;height:auto;border-radius:var(--r-l);border:1px solid var(--border);background:var(--surface)}
figcaption{font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim);margin-top:var(--s2)}

/* ------------------------------------------------------------------ prose (docs, blog, legal) */
.prose{font-size:16px;line-height:26px}
.prose p,.prose li{max-width:72ch}
.prose h2{margin:40px 0 var(--s3);scroll-margin-top:72px}
.prose h3{scroll-margin-top:72px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 var(--s4)}
.prose li{margin:4px 0}
.prose li>ul,.prose li>ol{margin:4px 0 0}
.prose img{display:block;border-radius:var(--r-l);border:1px solid var(--border);margin:var(--s5) 0 var(--s2)}
.prose figure img{margin:0}
.prose blockquote,.prose .note{margin:var(--s5) 0;padding:var(--s3) var(--s4);background:var(--neutral);color:var(--on-neutral);border-radius:var(--r-l)}
.prose blockquote p{color:inherit}
.prose blockquote>:last-child{margin-bottom:0}
.prose table,.table table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px;line-height:22px}
.prose>table,.prose .table{display:block;overflow-x:auto;margin:var(--s5) 0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-l)}
.prose>table{width:auto;max-width:100%}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px var(--s4);border-bottom:1px solid var(--border)}
.prose th{font-size:var(--bsl-type-caption-size);font-weight:600;color:var(--dim);white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
.prose td a{overflow-wrap:anywhere}

/* ------------------------------------------------------------------ page heads */
.crumbs{font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim);margin:0 0 var(--s3);overflow-wrap:anywhere}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--text);text-decoration:underline}
.crumbs span[aria-hidden]{margin:0 6px}
.lede{font-size:17px;line-height:26px;color:var(--dim);margin:0 0 var(--s5);max-width:64ch}

/* ------------------------------------------------------------------ plain pages (legal, 404) */
.page{width:100%;max-width:760px;margin:0 auto;padding:var(--s6) var(--gutter) var(--s6)}
.page .date{color:var(--dim);font-size:var(--bsl-type-caption-size);margin:0 0 var(--s5)}
.page .summary{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s4) var(--s5);margin:0 0 var(--s5)}
.page .summary>:last-child{margin-bottom:0}
.search-form{display:flex;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s4)}
.search-form input,.csearch input,.csearch select{font:inherit;font-size:15px;color:var(--text);background:var(--neutral);border:1px solid transparent;
  border-radius:var(--r-p);height:44px;padding:0 var(--s4);min-width:0}
.search-form input{flex:1 1 220px}
.search-form input::placeholder,.csearch input::placeholder{color:var(--dim);opacity:1}
.search-form input:focus,.csearch input:focus,.csearch select:focus{outline:2px solid var(--accent);outline-offset:0;background:var(--field)}

/* ------------------------------------------------------------------ home */
.home section{padding:var(--s6) 0}
.home h2{margin:0 0 var(--s2)}
.home .sechead{max-width:720px;margin:0 0 var(--s5)}
.home .sechead p{color:var(--dim);margin:0}
.hero{padding:48px 0 var(--s6)}
.hero h1{font-size:40px;line-height:48px;max-width:20ch;margin:0 0 var(--s4)}
.hero .lede{font-size:18px;line-height:28px;max-width:56ch}
.hero .price{color:var(--dim);font-size:var(--bsl-type-caption-size);margin:var(--s3) 0 0}
.hero .shot{margin:var(--s6) 0 0}
@media (max-width:600px){.hero{padding:var(--s5) 0 var(--s5)}.hero h1{font-size:30px;line-height:38px}.hero .lede{font-size:16px;line-height:26px}}
.modes{display:grid;gap:var(--s5);grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.modes figure{margin:0}
.modes h3{margin:var(--s3) 0 var(--s1);font-size:var(--bsl-type-heading-size);line-height:var(--bsl-type-heading-line);display:flex;gap:var(--s2);align-items:center}
.modes p{color:var(--dim);margin:0;font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line)}
@media (max-width:900px){.modes{grid-template-columns:1fr}}
.shots{display:grid;gap:var(--s5);grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0}
@media (max-width:760px){.shots{grid-template-columns:1fr}}
.cols{display:grid;gap:var(--s5);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
@media (max-width:900px){.cols{grid-template-columns:1fr}}
.compare{max-width:760px}
.compare .row .end{min-width:120px;justify-content:flex-end;gap:0}
.compare .cell{width:60px;text-align:center;color:var(--text);font-variant-numeric:tabular-nums}
.compare .hd{min-height:44px;font-weight:600;color:var(--dim);font-size:var(--bsl-type-caption-size)}
.compare .hd .cell{color:var(--dim)}
.yes,.no{display:inline-block;vertical-align:middle}
.yes{width:12px;height:7px;border-left:2px solid var(--text);border-bottom:2px solid var(--text);transform:translateY(-2px) rotate(-45deg)}
.no{width:12px;height:0;border-top:2px solid var(--faint)}
.priceline{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);margin:0 0 var(--s5)}
.priceline .amt{font-size:var(--bsl-type-large-title-size);line-height:var(--bsl-type-large-title-line);font-weight:600}
.priceline .dim{font-size:15px}
.faq{max-width:760px}

/* ------------------------------------------------------------------ docs */
.shell{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:grid;
  grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start;align-content:start}
.side{position:sticky;top:var(--bsl-layout-header-height);padding:var(--s5) 0;max-height:calc(100vh - var(--bsl-layout-header-height));overflow-y:auto}
.side ol{list-style:none;margin:0;padding:0}
.side li{margin:0 0 2px}
.side a{display:flex;align-items:center;min-height:var(--bsl-layout-sidebar-row-pointer);padding:6px var(--s3);border-radius:var(--r-s);
  color:var(--text);text-decoration:none;font-size:15px;line-height:20px}
.side a:hover{background:var(--hover)}
.side a[aria-current]{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.docmain{padding:var(--s5) 0 var(--s6);min-width:0;max-width:800px}
.docmain>h1{margin-bottom:var(--s2)}
.contents-btn{display:none;justify-self:start}
.cards{list-style:none;margin:var(--s5) 0;padding:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;max-width:800px}
.dcard{display:flex;flex-direction:column;justify-content:center;position:relative;min-height:var(--bsl-layout-row-min);
  padding:var(--s3) 48px var(--s3) var(--s4);color:var(--text);text-decoration:none}
.dcard+.dcard{border-top:1px solid var(--border)}
.dcard:hover{background:var(--hover);text-decoration:none}
.dcard::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-top:2px solid var(--glyph);border-right:2px solid var(--glyph);transform:translateY(-50%) rotate(45deg)}
.prose .dcard h3,.dcard h3{margin:0;font-size:15px;line-height:20px;font-weight:500}
.prose .dcard p,.dcard p{margin:2px 0 0;font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim);max-width:none}
.pager{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--border)}
.pager a{text-decoration:none;font-weight:600;max-width:48%}
.pager a:last-child{text-align:right}
.pager span{display:block;font-size:var(--bsl-type-caption-size);font-weight:400;color:var(--dim)}
@media (max-width:900px){
  .shell{grid-template-columns:1fr;gap:0}
  .side{position:static;max-height:none;padding:0 0 var(--s4);display:none;border-bottom:1px solid var(--border);margin-bottom:var(--s3)}
  .side.open{display:block}
  .contents-btn{display:inline-flex;margin:var(--s4) 0 0}
  .docmain{padding-top:var(--s4)}
}

/* ------------------------------------------------------------------ blog */
.bwrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:grid;
  grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;align-content:start}
.bmain{padding:var(--s5) 0 var(--s6);min-width:0}
.bmain.post{max-width:760px}
.bside{position:sticky;top:calc(var(--bsl-layout-header-height) + var(--s5));padding:var(--s5) 0}
.bmain h1,.bmain h2,.bmain h3{scroll-margin-top:72px}
.bhead h1{margin-bottom:var(--s3)}
.meta{font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim);display:flex;flex-wrap:wrap;gap:0 8px;margin:0}
.meta span+span::before{content:"\00b7";margin-right:8px}
.byline{display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0 var(--s5)}
.bl-pic{flex:none;display:block;line-height:0;border-radius:50%}
.bl-pic img,.bl-pic svg{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block}
.bl-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.bl-name{font-weight:600;color:var(--text);text-decoration:none}
a.bl-name:hover{text-decoration:underline}
.entry .bl-pic img,.entry .bl-pic svg{width:36px;height:36px}
.reel{display:flex;flex-direction:column;gap:var(--s5)}
.entry{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden}
.entry .cover{display:block;aspect-ratio:2/1;background:var(--surface);border-bottom:1px solid var(--border)}
.entry .cover img{width:100%;height:100%;object-fit:cover;display:block}
.entry .ebody{padding:var(--s4) var(--s5) var(--s5)}
.entry h2{margin:0 0 var(--s2)}
.entry h2 a{color:var(--text);text-decoration:none}
.entry h2 a:hover{text-decoration:underline}
.entry p{margin:0;color:var(--dim)}
.efoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3) var(--s4);margin-top:var(--s4)}
.efoot .byline{margin:0}
.more{font-weight:600;text-decoration:none}
.more:hover{text-decoration:underline}
.hero-img{margin:0 0 var(--s5)}
.hero-img img{width:100%;height:auto;border-radius:var(--r-l);border:1px solid var(--border);display:block}
.prose figure{margin:var(--s5) 0}
.prose figure img{margin:0 auto}
.prose figcaption{text-align:left}
.prose em:only-child{color:var(--dim)}
.prose .nw{white-space:nowrap}
.prose .table table{min-width:640px}
.prose .table td:first-child{white-space:nowrap}
@media (max-width:640px){
  .prose .table{overflow:visible;border:0;background:none;border-radius:0}
  .prose .table table{display:block;min-width:0}
  .prose .table thead{display:none}
  .prose .table tbody,.prose .table tr,.prose .table td{display:block}
  .prose .table tr{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s2) var(--s4);margin:0 0 var(--s3)}
  .prose .table td{border:0;padding:4px 0;white-space:normal}
  .prose .table td:first-child{font-weight:600;padding-top:var(--s2)}
  .prose .table td+td::before{content:attr(data-label);display:block;font-size:var(--bsl-type-small-size);font-weight:500;color:var(--dim)}
}
.tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s5) 0 0;padding:0;list-style:none}
.tags li{margin:0}
.cta{margin:var(--s6) 0 0}
.cta h2{margin:0 0 var(--s1)}
.cta p{margin:0;color:var(--dim)}
.related{margin-top:var(--s6)}
.related h2{margin:0 0 var(--s2)}
.related ul{list-style:none;padding:0;margin:0}
.related li{display:flex;flex-direction:column;margin:0 0 var(--s3)}
.related a{font-weight:600;text-decoration:none;color:var(--text)}
.related a:hover{text-decoration:underline}
.related time{font-size:var(--bsl-type-caption-size);color:var(--dim)}
.side-group{margin:0 0 var(--s5)}
.side-group .boxed{font-size:15px}
.side-group .row{min-height:48px;padding:var(--s2) var(--s4)}
.side-group p{color:var(--dim);margin:0 0 var(--s3);font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line)}
.pages{display:flex;justify-content:space-between;margin-top:var(--s5)}
.pages a{font-weight:600;text-decoration:none}
.postnav{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--border)}
.postnav a{text-decoration:none;font-weight:600;max-width:48%}
.postnav span{display:block;font-size:var(--bsl-type-caption-size);color:var(--dim);font-weight:400}
.authorbox{display:flex;gap:var(--s4);align-items:flex-start;margin:var(--s6) 0 0}
.authorbox img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.authorbox p{margin:0;max-width:none}
.ab-name{font-weight:600}
.ab-name a{color:var(--text);text-decoration:none}
.ab-name a:hover{text-decoration:underline}
.ab-role{font-size:var(--bsl-type-caption-size);color:var(--dim);margin:2px 0 var(--s2)!important}
.ab-bio{color:var(--dim);margin-bottom:var(--s2)!important}
.profile{display:flex;gap:var(--s5);align-items:center;margin:var(--s2) 0 var(--s5)}
.ppic{width:160px;height:160px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex:none}
.profile h1{margin:0 0 var(--s1)}
.role{color:var(--dim);margin:0}
.plinks{list-style:none;padding:0;margin:var(--s4) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.plinks li{margin:0}
.plinks a{display:inline-flex;align-items:center;gap:var(--s2);height:32px;padding:0 var(--s4);border-radius:var(--r-p);
  background:var(--neutral);color:var(--on-neutral);text-decoration:none;font-family:var(--mono);font-size:13px}
.plinks a:hover{filter:brightness(.97)}
.plinks svg{width:16px;height:16px;flex:none}
@media (max-width:600px){.profile{flex-direction:column;align-items:flex-start}.ppic{width:120px;height:120px}}
@media (max-width:960px){.bwrap{grid-template-columns:1fr;gap:0}.bside{position:static;padding:0 0 var(--s5)}}

/* ------------------------------------------------------------------ app catalog (/apps/) */
.cwrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.cmain{width:100%;max-width:var(--maxw);margin:0 auto;padding:var(--s5) var(--gutter) var(--s6)}
.cmain h1{margin:0 0 var(--s3)}
.cmain h2{margin:48px 0 var(--s3)}
.cmain p{max-width:74ch}
.ccrumb{font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim);margin:0 0 var(--s3);overflow-wrap:anywhere}
.ccrumb a{color:var(--dim);text-decoration:none}
.ccrumb a:hover{color:var(--text);text-decoration:underline}
.ccrumb span[aria-hidden]{margin:0 6px}
.clede{font-size:17px;line-height:26px;color:var(--dim);margin:0 0 var(--s5);max-width:66ch}
.sub{color:var(--dim);margin:-4px 0 var(--s4)}
.more{margin:var(--s4) 0 0}
.chero{padding:0}
.chero h1{max-width:22ch}
.csearch{display:flex;gap:var(--s2);max-width:680px;margin:0 0 var(--s2);flex-wrap:wrap}
.csearch input{flex:1 1 260px}
.csearch select{flex:0 1 200px;padding-right:var(--s3)}
.csearch.big{max-width:1040px}
.csearch.big select{flex:0 1 auto}
.csearch button{font:inherit;font-weight:600;font-size:15px;border:0;border-radius:var(--r-p);height:44px;padding:0 var(--s5);
  background:var(--accent);color:var(--on-accent);cursor:pointer}
.snote{color:var(--dim);margin:var(--s2) 0 var(--s4)}
.smore{margin:var(--s4) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}
.scount{color:var(--dim);margin:0}
.smore .btn{margin:0}
/* App cards. The card is the list item; the link fills it (its ::after covers the card) and the
   badges sit in the flow under the text, so a long name or two badges can never overlap the
   summary (the old absolutely placed chips did, in 12 of the 13 "Tested on a device" cards). */
.agrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s3)}
.agrid li{margin:0;min-width:0;position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-l)}
.agrid li:hover{background:var(--hover)}
.acard{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;gap:2px var(--s3);align-items:start;align-content:start;
  padding:var(--s4);color:var(--text);text-decoration:none;flex:1 0 auto;border-radius:var(--r-l)}
.acard::after{content:"";position:absolute;inset:0;border-radius:var(--r-l)}
.acard:hover{text-decoration:none}
.acard:focus-visible{outline:none}
.acard:focus-visible::after{outline:2px solid var(--accent);outline-offset:2px}
.acard img,.acard .noicon{grid-row:1 / span 2;width:48px;height:48px}
.acard .nm{font-weight:600;overflow-wrap:anywhere}
.acard .sm{font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim);display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.agrid li>.cchips{display:flex;flex-wrap:wrap;gap:6px;padding:0 var(--s4) var(--s4) calc(var(--s4) + 48px + var(--s3));margin-top:calc(-1 * var(--s2))}
.alist{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden}
.alist li{margin:0;border-top:1px solid var(--border);display:flex;align-items:center;min-width:0}
.alist li:first-child{border-top:0}
.alist li:hover{background:var(--hover)}
.alist li>.rchips{display:flex;gap:6px;margin:0 var(--s4) 0 var(--s1);flex:none}
.arow{flex:1;display:flex;align-items:center;gap:var(--s3);min-height:var(--bsl-layout-row-min);padding:var(--s2) var(--s4);color:var(--text);text-decoration:none;min-width:0}
.arow:hover{text-decoration:none}
.arow:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.arow img,.arow .noicon{width:40px;height:40px;flex:none}
.arow .an{flex:1;min-width:0;display:flex;flex-direction:column}
.arow .nm{font-weight:500;overflow-wrap:anywhere}
.arow .sm{font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noicon{display:grid;place-items:center;border-radius:var(--r-l);background:var(--neutral);color:var(--on-neutral);font-weight:600;font-size:18px;flex:none}
.noicon.t{background:var(--term-bg);color:var(--term-fg);font-family:var(--mono);font-weight:500}
/* One badge for every chip the catalog had: neutral, radius 6. "Tested" carries a check. */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--bsl-type-small-size);line-height:var(--bsl-type-small-line);font-weight:500;
  padding:2px 8px;border-radius:var(--r-s);background:var(--neutral);color:var(--on-neutral);white-space:nowrap;text-decoration:none;flex:none}
a.chip:hover{text-decoration:underline}
.chip.ok::before{content:"";width:8px;height:4px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0}
/* Link lists (terminal groups, other categories): small neutral pills, the kit's normal button. */
.tgroups{margin:0 0 var(--s4)}
.tgroups ul,.othercats ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.tgroups li,.othercats li{margin:0;max-width:100%}
.tgroups a,.othercats a{display:inline-flex;align-items:center;min-height:32px;padding:4px var(--s4);border-radius:var(--r-p);background:var(--neutral);
  color:var(--on-neutral);text-decoration:none;font-weight:500;font-size:13px;overflow-wrap:anywhere}
.tgroups a:hover,.othercats a:hover{background:var(--press)}
.tgroups .n,.catterm h3 .n{color:var(--dim);margin-left:4px;font-weight:400}
.tgroup h2,.catterm h2,.catterm h3{scroll-margin-top:72px}
.tgroup .gtext{margin:0 0 var(--s4)}
.catterm h3{margin:var(--s5) 0 var(--s2)}
.catterm h3 a,.hubcat h2 a{color:var(--text);text-decoration:none}
.catterm h3 a:hover,.hubcat h2 a:hover{text-decoration:underline}
.makers .agrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ctiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s3)}
.ctiles li{margin:0}
.ctile{display:flex;flex-direction:column;gap:var(--s1);height:100%;background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);
  padding:var(--s4);color:var(--text);text-decoration:none}
.ctile:hover{background:var(--hover);text-decoration:none}
.ct-icons{display:flex;gap:var(--s2);margin-bottom:var(--s2);min-height:32px}
.ct-icons img{width:32px;height:32px}
.ct-name{font-weight:600;font-size:17px}
.ct-desc{font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim)}
.ct-count{font-size:var(--bsl-type-caption-size);color:var(--dim);margin-top:auto;padding-top:var(--s2)}
.statuses dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s3);margin:0 0 var(--s4)}
.statuses dl div,.defs div{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s3) var(--s4)}
.statuses dt,.defs dt{font-weight:600;margin:0 0 2px}
.statuses dd,.defs dd{margin:0;color:var(--dim)}
.defs{display:grid;gap:var(--s3);margin:var(--s4) 0}
.cmain .cta{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s4) var(--s5);margin:48px 0 0}
.cmain .cta h2{margin:0 0 var(--s1)}
.cmain .cta p{margin:0 0 var(--s3);color:var(--dim)}
.cmain .btn{margin:0 var(--s2) var(--s2) 0}
.btn.ghost{background:var(--neutral);color:var(--on-neutral)}
.cmain .btn:not(.ghost){background:var(--accent);color:var(--on-accent)}
.pages .nums{display:flex;gap:6px;flex-wrap:wrap}
.pages{align-items:center;gap:var(--s3);flex-wrap:wrap}
.pages .nums a,.pages .nums>span{display:inline-grid;place-items:center;min-width:36px;height:36px;border-radius:var(--r-p);background:var(--neutral);color:var(--on-neutral);font-weight:500}
.pages .nums>span{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.catnote-short{color:var(--dim)}
.othercats h2{font-size:var(--bsl-type-heading-size);line-height:var(--bsl-type-heading-line);color:var(--dim);margin:48px 0 0}
.hubcat h2{margin:var(--s6) 0 var(--s1)}
.hubcat p{margin:0 0 var(--s1)}
.hubcat .count,.hubcat .known{color:var(--dim)}
.plist{padding-left:22px}
.plist li{margin:4px 0}
.app{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto auto 1fr;column-gap:48px;align-items:start}
.app>.ccrumb,.app>.apphead,.app>.status,.app>.limits,.app>.appbody{grid-column:1}
.app>.aside{grid-column:2;grid-row:1 / span 4;padding-top:var(--s5)}
.apphead{display:flex;gap:var(--s5);align-items:center;margin:var(--s1) 0 var(--s5)}
.apphead>div{min-width:0}
.apphead img,.apphead .noicon{flex:none}
.apphead h1{margin:0 0 var(--s1);overflow-wrap:anywhere}
.apphead .aka{color:var(--dim);margin:0 0 var(--s1);overflow-wrap:anywhere}
.apphead .summary{font-size:17px;line-height:26px;color:var(--dim);margin:0 0 var(--s3);overflow-wrap:anywhere}
.stline{font-size:var(--bsl-type-caption-size);color:var(--dim);margin:var(--s2) 0 0}
/* The Install button (3.0): one suggested pill under the chips; install.js adds the note below it. */
.apphead .install{margin:var(--s4) 0 0}
.apphead .install .btn{margin:0;min-width:120px}
.apphead .inote{font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim);margin:var(--s2) 0 0;overflow-wrap:anywhere}
.apphead .inote:empty{display:none}
/* Status, limits and the Breadstick note: neutral boxes with a heading; no colored edges. */
.status,.limits,.bnote,.upstream .owntext{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s4) var(--s5);overflow-wrap:anywhere}
.cmain .status h2,.cmain .limits h2{font-size:var(--bsl-type-heading-size);line-height:var(--bsl-type-heading-line);margin:0 0 var(--s2)}
.status p,.limits p{margin:0 0 var(--s2)}
.status p:last-child,.limits p:last-child{margin-bottom:0}
.status .ev{list-style:none;padding:0;margin:var(--s1) 0 0}
.status .ev li{margin:0;padding:var(--s3) 0 0}
.status .ev li+li{border-top:1px solid var(--border);margin-top:var(--s3)}
.evm{display:block;font-size:var(--bsl-type-caption-size);color:var(--dim);font-weight:500;margin-bottom:2px}
.app>.status{margin-bottom:var(--s2)}
.app>.status+.limits{margin-top:var(--s3)}
.limits{margin:0 0 var(--s2)}
.appbody h2{margin:40px 0 var(--s3)}
.appbody>section:first-child>h2{margin-top:var(--s3)}
.app>.status+.appbody>section:first-child>h2,.app>.limits+.appbody>section:first-child>h2{margin-top:var(--s6)}
.cmds{margin:0 0 var(--s4)}
.cmdlist{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.cmdlist li{margin:0;max-width:100%}
.cmdlist code{display:inline-block;max-width:100%;font-size:13px;padding:3px 8px;overflow-wrap:anywhere}
.cmds .fine{font-size:var(--bsl-type-caption-size);color:var(--dim);margin:var(--s2) 0 0}
.owntext p{margin:0 0 var(--s2);max-width:none}
.owntext>:last-child{margin-bottom:0}
.qlabel{font-weight:600;color:var(--dim);margin:0 0 var(--s2)}
.appbody .qlabel{font-size:var(--bsl-type-caption-size)}
.bnote{margin:0 0 var(--s4)}
.bnote p{margin:0;max-width:none}
.bnote .qlabel{margin:0 0 var(--s1)}
.upstream blockquote{margin:0;padding:var(--s4) var(--s5);background:var(--neutral);color:var(--on-neutral);border-radius:var(--r-l);overflow-wrap:anywhere}
.upstream blockquote p,.upstream blockquote li{margin:0 0 var(--s2);max-width:none}
.upstream blockquote>:last-child{margin-bottom:0}
.upstream blockquote ul,.upstream blockquote ol{padding-left:22px;margin:0 0 var(--s2)}
.src{color:var(--dim);margin:var(--s2) 0 0;overflow-wrap:anywhere}
.appbody .src{font-size:var(--bsl-type-caption-size)}
.glance{margin:var(--s4) 0 0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden}
.glance div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s3);padding:10px var(--s4);border-top:1px solid var(--border)}
.glance div:first-child{border-top:0}
.glance dt{color:var(--dim)}
.glance dd{margin:0;overflow-wrap:anywhere}
.agrid.small{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.relapps .more a{text-decoration:none}
.sources ul{padding-left:20px;margin:0 0 var(--s2)}
.sources li,.sources p{font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim);margin:0 0 6px;overflow-wrap:anywhere}
.side-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s4);margin:0 0 var(--s4)}
.cmain .side-card .sc-title{font-size:var(--bsl-type-heading-size);line-height:var(--bsl-type-heading-line);font-weight:600;color:var(--dim);margin:0 0 var(--s2)}
.side-card p{font-size:var(--bsl-type-caption-size);line-height:var(--bsl-type-caption-line);color:var(--dim);margin:0 0 var(--s3)}
.side-card p:last-child{margin-bottom:0}
.side-card .btn{margin:0;display:flex;width:100%;font-size:14px;padding:0 var(--s3)}
.facts dl{margin:0;font-size:14px;line-height:20px}
.facts dl div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;padding:var(--s2) 0;border-top:1px solid var(--border)}
.facts dl div:first-child{border-top:0;padding-top:0}
.facts dt{color:var(--dim)}
.facts dd{margin:0;overflow-wrap:anywhere}
.facts code{font-size:12px}
.facts .dim{color:var(--dim);font-size:var(--bsl-type-caption-size)}
.facts .fine{font-size:var(--bsl-type-small-size);color:var(--dim);margin:var(--s2) 0}
.facts .links{list-style:none;padding:0;margin:0}
.facts .links li{margin:0;font-weight:500}
.facts .links a{display:inline-block;padding:var(--s1) 0;text-decoration:none}
.prosewrap .prose{max-width:760px}
.inline-list{list-style:none;padding:0!important;display:flex;flex-wrap:wrap;gap:6px var(--s4);margin:var(--s2) 0 0}
.inline-list li{margin:0;font-size:14px!important}
.foot .tm{flex-basis:100%;margin:0;color:var(--dim)}
@media (max-width:960px){
  /* One column: the app's own text first, then the details, the related apps and the cards. */
  .app{display:flex;flex-direction:column;align-items:stretch}
  .app>*{min-width:0}
  .app>.aside,.app>.appbody{display:contents}
  .app>.ccrumb{order:1}
  .app>.apphead{order:2}
  .app>.status,.app>.limits{order:3}
  .appbody>section{order:4}
  .appbody>.upstream{order:5}
  .app .facts{order:6;margin-top:var(--s6)}
  .appbody>.relapps{order:7}
  .app .cta-side{order:8;margin-top:var(--s6)}
  .app .report{order:9}
  .appbody>.sources{order:10}
}
@media (max-width:600px){
  .apphead{gap:var(--s4);align-items:flex-start}
  .apphead img,.apphead .noicon{width:64px;height:64px}
  .apphead .summary{font-size:16px;line-height:24px}
  .alist li{flex-wrap:wrap}
  .alist li>.rchips{flex:1 0 100%;margin:-6px 0 0;padding:0 var(--s4) var(--s3) 68px}
  .csearch input{flex:1 1 0}
  .csearch button{flex:none;padding:0 var(--s4)}
  .csearch select,.csearch.big select{flex:1 1 100%;order:3}
  .agrid{grid-template-columns:minmax(0,1fr)}
  .glance div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* ------------------------------------------------------------------ Breadstick Tools (/breadstick-tools/) */
.tools{width:100%;max-width:860px;margin:0 auto;padding:var(--s5) var(--gutter) var(--s6);min-width:0}
.tools h2{scroll-margin-top:72px}
.tools h3{margin:0 0 var(--s2);font-size:var(--bsl-type-title-size);line-height:var(--bsl-type-title-line)}
.tools p,.tools li,.tools dd{max-width:72ch}
.tools ul,.tools ol{padding-left:22px}
.tools li{margin:4px 0}
.tools pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:20px;margin:var(--s2) 0}
.tools pre.output,.tools pre.log{max-height:320px;overflow:auto}
.callout{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s3) var(--s4);margin:var(--s4) 0}
.callout.ok,.tool .state.ok{background:var(--accent-soft);color:var(--accent-text);border-color:transparent}
.callout.warn,.tool .state.warn{background:var(--error-soft);color:var(--on-error-soft);border-color:transparent}
.callout p:last-child{margin-bottom:0}
.callout a,.tool .state a{color:inherit}
.tool{background:var(--card);border:1px solid var(--border);border-radius:var(--r-l);padding:var(--s5);margin:var(--s4) 0}
.tool .state{border-radius:var(--r-l);padding:var(--s3) var(--s4);margin:var(--s4) 0;background:var(--neutral);color:var(--on-neutral)}
.tool .state dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px var(--s4)}
.tool .state dt{font-weight:600;margin:0}
.tool .state dd{margin:0;max-width:none}
.tool h4{font-size:var(--bsl-type-heading-size);color:var(--dim);margin:var(--s4) 0 var(--s1)}
.tool p{margin:var(--s2) 0}
.tools .actions{margin:var(--s4) 0 var(--s1)}
.tools button{font:inherit;font-weight:600;font-size:15px;height:40px;padding:0 var(--s5);border-radius:var(--r-p);border:0;
  background:var(--accent);color:var(--on-accent);cursor:pointer}
.tools button.ghost{background:var(--neutral);color:var(--on-neutral)}
.tools button.danger{background:var(--error);color:var(--on-error)}
.tools button:hover:not(:disabled){filter:brightness(.95)}
.tools button:disabled{opacity:.45;cursor:not-allowed}
.tools .note{color:var(--on-neutral);background:var(--neutral);border-radius:var(--r-l);padding:var(--s3) var(--s4);margin:var(--s3) 0}
.tools details{margin:var(--s3) 0}
.tools summary{cursor:pointer;font-weight:600;color:var(--dim)}
.tools summary:hover{color:var(--text)}
.plain{color:var(--dim)}
.gate{display:flex;align-items:flex-start;gap:var(--s3);margin:var(--s4) 0 var(--s2);font-weight:600}
.gate input{width:22px;height:22px;margin:0;accent-color:var(--accent);flex:none}
.conn{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin:var(--s4) 0}
.tools #connect{height:48px;font-size:16px}
.brands dt{font-weight:600;margin-top:var(--s3)}
.brands dd{margin:2px 0 0}
html:not(.js) .needs-js{display:none}
@media (max-width:480px){.tool{padding:var(--s4)}.tool .state dl{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}