/* dubtc-gear.css — the gear, for pages that deliberately do NOT load
   dubtc-ui.css. Load this INSTEAD of the house sheet, never alongside it.

   Why it exists (2026-08-10, Luke's ruling on the last two exceptions): the
   compliance/ legal documents are dubTC's own pages — footer-linked, live for
   the Stripe application — so §2/§2a say they carry the gear like every other
   page. But they are standalone Tailwind documents whose look must not move a
   pixel, and the house sheet restyles a page (body font, background, ink,
   control fonts). So this file carries ONLY what the gear itself needs:

     - the design tokens the gear's rules read (and nothing else reads),
       declared on :root. Custom properties paint nothing on their own, so on
       a page that uses no var() they are completely inert.
     - the .themes host / #uset-btn / #uset-panel / .sp-* rules, copied
       verbatim from dubtc-ui.css so the gear looks identical everywhere.
     - the house body zoom, so these pages render at the same size as the
       rest of the site (Luke 2026-08-11 made the old "Large" the default).
       The gear's Appearance themes must also be real here, never decorative
       — a control that did nothing is exactly what §3 forbids.

   KEEP IN SYNC with the "user settings panel" block of dubtc-ui.css. If the
   gear changes there, it changes here; bump ?v= on both. */

/* Roboto for the gear only — the host page's own body font is untouched,
   because nothing here restyles an element the page already owns. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ---- tokens (subset: only what the gear's own rules read) ----
   The ring/line/ink-soft values are the high-contrast set: Luke folded the
   old high-contrast override into the base themes 2026-08-11 ("make the high
   contrast layouts the version we use"). KEEP IN SYNC with dubtc-ui.css. */
:root {
  --bg:        #e6e7e9;
  --ink:       #0b0f0c;
  --ink-soft:  #3a4040;
  --neon:      #00e676;
  --line:      rgba(20,26,23,.38);
  --ring:      rgba(20,26,23,.6);
  --chip-on:   rgba(0,200,102,.18);
  --chip-on-ink:#0a6b3c;
  --radius:    2px;
  --seg-bg:    rgba(255,255,255,.65);
  --dlg-grad:  linear-gradient(135deg, rgba(255,255,255,.97), rgba(248,249,250,.95) 45%, rgba(242,243,244,.96));
  --dlg-shadow: 0 18px 60px rgba(25,30,28,.28);
  --hover:     rgba(20,26,23,.05);
}
html[data-theme="dark"] {
  --bg:        #15171a;
  --ink:       #dfe5ea;
  --ink-soft:  #c2cad2;
  --line:      rgba(255,255,255,.3);
  --ring:      rgba(255,255,255,.5);
  --chip-on:   rgba(148,163,184,.28);
  --chip-on-ink:#d3dbe3;
  --seg-bg:    rgba(255,255,255,.07);
  --dlg-grad:  linear-gradient(135deg, rgba(36,39,43,.98), rgba(27,30,34,.97));
  --dlg-shadow: 0 18px 60px rgba(0,0,0,.65);
  --hover:     rgba(255,255,255,.06);
}
html[data-theme="dubtc"] {
  --bg:        #050706;
  --ink:       #f2fbf6;
  --ink-soft:  #bdd6c9;
  --line:      rgba(0,230,118,.32);
  --ring:      rgba(0,230,118,.55);
  --chip-on:   rgba(0,230,118,.18);
  --chip-on-ink:#6fe8ac;
  --seg-bg:    rgba(0,230,118,.035);
  --dlg-grad:  linear-gradient(135deg, rgba(12,21,16,.98), rgba(8,14,10,.97));
  --dlg-shadow: 0 0 40px rgba(0,230,118,.05), 0 18px 60px rgba(0,0,0,.75);
  --hover:     rgba(0,230,118,.06);
}

/* ---- the host + the gear (verbatim from dubtc-ui.css) ---- */
.themes { display: flex; border: 1px solid var(--ring); border-radius: var(--radius); overflow: hidden; flex: 0 0 auto; }
.themes button { padding: 6px 10px; font: 500 11px 'Roboto',sans-serif; cursor: pointer; border: 0;
                 background: var(--seg-bg); color: var(--ink-soft); border-left: 1px solid var(--line); }
#themes.uset { position: relative; overflow: visible; }
/* pages with no .topbar at all (core mounts its own host) — pin top-right */
#themes.uset-float { position: fixed; top: 10px; right: 12px; z-index: 401;
  background: var(--seg-bg); }
#uset-btn { display: inline-flex; align-items: center; gap: 6px; }
#uset-btn:hover { background: var(--hover); color: var(--ink); }
#uset-btn img { width: 16px; height: 16px; border-radius: 50%; display: block; }
#uset-btn svg { display: block; }
#uset-btn.is-in { color: var(--ink); }
/* no Discord avatar? the display name's initial still says "that's you" */
.uset-ini { display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--chip-on);
  color: var(--chip-on-ink); font: 700 9px 'Roboto',sans-serif; flex: 0 0 auto; }
.sp-user .uset-ini { width: 22px; height: 22px; font-size: 11px; }
/* dev is a different login realm — the gear wears a mark so you never wonder */
#uset-btn.is-dev::after { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon); flex: 0 0 auto; }
#uset-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 400;
  width: 252px; padding: 10px 12px 12px; text-align: left;
  background: var(--dlg-grad); border: 1px solid var(--ring);
  border-radius: var(--radius); box-shadow: var(--dlg-shadow);
  font: 500 12px 'Roboto', sans-serif; color: var(--ink);
}
#uset-panel[hidden] { display: none; }
.sp-h { font: 700 10px 'Roboto',sans-serif; letter-spacing: .14em; text-transform: uppercase;
        color: var(--ink-soft); margin: 12px 0 6px; }
#uset-panel .sp-h:first-child { margin-top: 0; }
.sp-seg { display: flex; border: 1px solid var(--ring); border-radius: var(--radius); overflow: hidden; }
.sp-seg button { flex: 1; padding: 7px 4px; font: 500 11px 'Roboto',sans-serif; cursor: pointer;
  border: 0; background: var(--seg-bg); color: var(--ink-soft); border-left: 1px solid var(--line); }
.sp-seg button:first-child { border-left: 0; }
.sp-seg button.on { background: var(--chip-on); color: var(--chip-on-ink); font-weight: 700; }
.sp-user { display: flex; align-items: center; gap: 8px; padding: 2px 0 6px;
  font: 700 12px 'Roboto',sans-serif; min-width: 0; }
.sp-user img { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.sp-user span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-user .tier { font: 700 9px 'Roboto',sans-serif; text-transform: uppercase; overflow: visible;
  padding: 1px 5px; border-radius: 8px; background: var(--chip-on); color: var(--chip-on-ink); }
.sp-link { display: block; width: 100%; text-align: left; padding: 8px; margin: 0; border: 0;
  background: transparent; color: var(--ink); font: 500 12px 'Roboto',sans-serif;
  cursor: pointer; text-decoration: none; border-radius: var(--radius); box-sizing: border-box; }
.sp-link:hover { background: var(--hover); }
/* signed-out: the one sign-in button on the page, so it reads as an action */
.sp-cta { border: 1px solid var(--ring); text-align: center; font-weight: 700; }
/* env honesty line (#dev = a separate Supabase project, separate sessions) */
.sp-env { font: 400 10px 'Roboto',sans-serif; line-height: 1.5; color: var(--ink-soft);
  border: 1px dashed var(--ring); border-radius: var(--radius);
  padding: 6px 8px; margin: 0 0 8px; }
.sp-env b { color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* ---- house text size (the former "Large", now unconditional — Luke
   2026-08-11 "use large as the default"). Type is px-based, so a zoom is
   what actually scales the page; framed tools (html.embed / html.framed)
   are excluded so an iframe inside a zoomed parent doesn't double-scale. */
html:not(.embed):not(.framed) body { zoom: 1.1; }

/* ---- standalone Tailwind documents opt in with <body class="… tw-doc"> ----
   The gear's Appearance section must not be decorative (§3: no control that
   no-ops), so the three themes are real on these pages too. Only the eight
   colour utilities the compliance documents actually use are remapped, and
   every rule is keyed on a NON-EMPTY [data-theme] — the default render is
   the page exactly as it shipped, untouched. */
html[data-theme]:not([data-theme=""]) body.tw-doc { background-color: var(--bg); color: var(--ink); }
html[data-theme]:not([data-theme=""]) body.tw-doc .text-gray-900 { color: var(--ink); }
html[data-theme]:not([data-theme=""]) body.tw-doc .text-gray-700,
html[data-theme]:not([data-theme=""]) body.tw-doc .text-gray-600,
html[data-theme]:not([data-theme=""]) body.tw-doc .text-gray-500 { color: var(--ink-soft); }
html[data-theme]:not([data-theme=""]) body.tw-doc .border-gray-200 { border-color: var(--line); }
html[data-theme]:not([data-theme=""]) body.tw-doc .text-blue-700 { color: var(--neon); }
html[data-theme]:not([data-theme=""]) body.tw-doc .hover\:text-gray-900:hover { color: var(--ink); }

/* ---- mobile (≤600px): the panel becomes a full-width bottom sheet ---- */
@media (max-width: 600px) {
  /* phones cap the house zoom at 1 (KEEP IN SYNC with dubtc-ui.css: the 1.1
     zoom shrinks a phone's effective viewport ~9%); the gear's own tiny text
     tiers get +1px back so nothing reads smaller net */
  html:not(.embed):not(.framed) body { zoom: 1; }
  .themes button { padding: 9px 12px; font-size: 12px; }
  .sp-h { font-size: 11px; }
  .sp-env { font-size: 11px; }
  .sp-seg button { font-size: 12px; }
  .uset-ini { font-size: 10px; }
  .sp-user .tier { font-size: 10px; }
  #uset-panel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto;
    max-height: 76vh; overflow-y: auto; border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .sp-seg button { padding: 10px 4px; }
  .sp-link { padding: 11px 8px; }
}