/* Shared by the public docs and legal pages, loaded after each page's own
   <style>. Dark mode follows the console: light by default, dark when the
   browser has opted in (ion_theme, applied pre-paint in each page's head).
   Dark tokens match css/app.css. */
:root[data-theme="dark"]{
  --bg:#09090b;--s1:#111114;--s2:#17171c;--s3:#1f1f26;
  --b1:rgba(255,255,255,0.07);--b2:rgba(255,255,255,0.12);--b3:rgba(255,255,255,0.20);
  --tx:#f4f4f5;--tm:#a1a1aa;--td:#8b8b96;
  --ac:#5b8cff;--ac2:#7fa4ff;--ac3:#8fb0ff;
  --green:#34d399;--red:#fb7185;--amber:#fbbf24;--teal:#2dd4bf;
  color-scheme:dark;
}
:root[data-theme="dark"] body{background:
  radial-gradient(900px 500px at -10% -20%,rgba(91,140,255,.12),transparent 60%),
  var(--bg)}
:root[data-theme="dark"] .nav-logo img{filter:invert(1) hue-rotate(180deg)}

/* Readable in both themes: these were hard-coded for an old dark palette. */
h3{color:var(--tx)}
pre{background:var(--s2);border-color:var(--b2)}
pre code{color:var(--tx)}

/* Long code lines scroll inside the block instead of widening the page. */
article,.content,main{min-width:0}
pre{max-width:100%}

/* Tables: base style for pages that do not define one, and sideways
   scrolling on narrow screens. */
.price-table{width:100%;border-collapse:collapse;margin:12px 0 16px;font-size:13px}
.price-table th,.price-table td{border:1px solid var(--b2);padding:8px 12px;text-align:left;vertical-align:top}
.price-table th{background:var(--s2);color:var(--tx);font-weight:600}

/* .nav-links a outranks .nav-btn, which left the button's label dark on blue. */
.nav-links a.nav-btn{color:#fff}

.theme-toggle{background:none;border:1px solid var(--b2);border-radius:7px;cursor:pointer;color:var(--tm);font-size:14px;line-height:1;padding:6px 8px;font-family:inherit}
.theme-toggle:hover{color:var(--tx);border-color:var(--b3)}

@media(max-width:600px){
  .nav{padding:0 16px;gap:10px}
  .nav-logo img{height:22px!important}
  .nav-links{gap:12px}
  .nav-links a{font-size:12px;white-space:nowrap}
  .nav-btn{padding:6px 10px}
  table{display:block;overflow-x:auto;max-width:100%}
}
/* Terms is also in every footer; drop it from the bar on phones. */
@media(max-width:480px){
  .nav-links a[href="/terms.html"]{display:none}
}