/* Gem Finder — design tokens and shared components.
   Visual system observed on gemini.com (Oct 11, 2026): Geist, ink #010304, white,
   secondary #676868, surface #F7F7F7, divider #E6E6E6, blue #005FF9 with tint #C9E0FF,
   pill controls at 14px/600. The dark theme follows gemini.com/predictions: #010304
   canvas, cyan #2CBCFC accents, red #FC4848 for live markets. */

@font-face{font-family:Geist;src:url('/fonts/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --font-sans:Geist,-apple-system,"system-ui","Segoe UI",Helvetica,Arial,sans-serif;

  /* Primitives */
  --g-ink:#010304;--g-white:#ffffff;--g-gray-700:#373d44;--g-gray-500:#676868;--g-gray-300:#c7c9ca;--g-gray-200:#e6e6e6;--g-gray-100:#f7f7f7;
  --g-blue:#005ff9;--g-blue-deep:#0047c2;--g-blue-tint:#c9e0ff;--g-cyan:#2cbcfc;--g-red:#fc4848;--g-red-deep:#cf2a2f;

  /* Semantic (light) */
  --bg:var(--g-white);--panel:var(--g-white);--surface:var(--g-gray-100);--surface-2:#ededed;
  --ink:var(--g-ink);--text:var(--g-ink);--muted:var(--g-gray-500);--faint:#9a9c9d;
  --line:var(--g-gray-200);--line-strong:var(--g-gray-300);
  --accent:var(--g-blue);--accent-hover:#0052d6;--accent-on-tint:var(--g-blue-deep);--accent-tint:var(--g-blue-tint);--accent-ring:rgba(0,95,249,.28);
  --live:var(--g-red);--live-text:var(--g-red-deep);--danger:#c8281f;
  --btn-bg:var(--g-ink);--btn-fg:var(--g-white);--btn-hover:#1d2226;
  --chart-bg:var(--g-ink);--chart-panel:#0e1114;--chart-line:rgba(255,255,255,.12);--chart-text:#ffffff;--chart-muted:rgba(255,255,255,.62);--chart-accent:var(--g-cyan);
  --gauge-track:#e6e6e6;--gauge-fill:#010304;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23676868' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* Shape and rhythm */
  --radius-pill:999px;--radius-panel:16px;--radius-field:12px;--radius-sm:8px;
  --control-h:40px;--control-h-sm:34px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;

  /* Shareable PNG card (always light) */
  --card-surface:#ffffff;--card-ink:#010304;--card-accent:#005ff9;--card-tint:#c9e0ff;--card-line:#e6e6e6;--card-muted:#676868;--font-family:var(--font-sans);

  font-family:var(--font-sans);color:var(--text);background:var(--bg);font-synthesis:none;color-scheme:light;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
:root[data-theme=dark]{
  --bg:#010304;--panel:#0b0e11;--surface:#15191d;--surface-2:#1f2429;
  --ink:#ffffff;--text:#ffffff;--muted:rgba(255,255,255,.64);--faint:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.26);
  --accent:var(--g-cyan);--accent-hover:#5bcbfd;--accent-on-tint:#8fdcff;--accent-tint:rgba(44,188,252,.16);--accent-ring:rgba(44,188,252,.35);
  --live:var(--g-red);--live-text:#ff6b6b;--danger:#ff6b6b;
  --btn-bg:#ffffff;--btn-fg:#010304;--btn-hover:#e6e6e6;
  --chart-panel:#0b0e11;
  --gauge-track:rgba(255,255,255,.14);--gauge-fill:#ffffff;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a6a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:dark;
}

*{box-sizing:border-box}
body{margin:0;font-size:14px;line-height:1.5;background:var(--bg);color:var(--text)}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em;color:var(--ink)}
button,input,textarea,select{font:inherit;color:inherit}
button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}
button,a,summary{touch-action:manipulation}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{opacity:.45;cursor:not-allowed}
a{color:inherit;text-decoration:none}
strong{font-weight:500}
[hidden]{display:none!important}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ui-icon{width:18px;height:18px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:12px;left:12px;transform:translateY(-200%);z-index:100;background:var(--btn-bg);color:var(--btn-fg);padding:10px 16px;border-radius:var(--radius-pill);font-weight:600}
.skip-link:focus{transform:none}

/* Brand */
.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.gem-mark{width:26px;height:26px;stroke-width:1.5}

/* Buttons — Gemini pills */
.primary,.secondary,.market-link,.workspace-primary,.workspace-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-h);padding:0 18px;font-size:14px;font-weight:600;line-height:1;border-radius:var(--radius-pill);border:1px solid transparent;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.primary,.workspace-primary{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.primary:hover:not(:disabled),.workspace-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.secondary,.market-link,.workspace-secondary{background:var(--panel);color:var(--ink);border-color:var(--line-strong)}
.secondary:hover:not(:disabled),.market-link:hover,.workspace-secondary:hover{background:var(--surface);border-color:var(--ink)}
.primary .ui-icon,.secondary .ui-icon,.workspace-primary .ui-icon,.workspace-secondary .ui-icon,.market-link .ui-icon{width:16px;height:16px}
.quiet-button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px;font-size:13px;font-weight:500;color:var(--muted);border-radius:var(--radius-sm);transition:color .15s ease}
.quiet-button:hover:not(:disabled){color:var(--ink)}
.icon-button{display:inline-grid;place-items:center;flex-shrink:0;width:var(--control-h);height:var(--control-h);border-radius:var(--radius-pill);color:var(--muted);border:1px solid transparent;transition:background-color .15s ease,color .15s ease}
.icon-button:hover:not(:disabled){background:var(--surface);color:var(--ink)}

/* Chips — Gemini outcome pills */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--surface);color:var(--ink)}
.chip-accent{background:var(--accent-tint);color:var(--accent-on-tint)}
.chip-solid{background:var(--accent);color:#fff}
:root[data-theme=dark] .chip-solid{color:#010304}
.chip-muted{color:var(--muted)}

/* Fields */
textarea,input[type=url],input[type=text],input[type=search],select{width:100%;max-width:100%;min-height:var(--control-h);border:1px solid var(--line);border-radius:var(--radius-field);background:var(--surface);color:var(--ink);padding:10px 14px;font-size:14px;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
textarea{display:block;resize:vertical;line-height:1.6}
textarea::placeholder,input::placeholder{color:var(--faint)}
textarea:focus-visible,input:focus-visible,select:focus-visible{outline:none;border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 3px var(--accent-ring)}
select{appearance:none;-webkit-appearance:none;background-image:var(--chevron);background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}
label{font-size:13px;font-weight:500;color:var(--ink)}

/* Disclosure */
details>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink);min-height:36px;user-select:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:'';width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform .15s ease;flex-shrink:0}
details[open]>summary::before{transform:rotate(45deg)}

/* Text roles */
.eyebrow,.small-tag,.timestamp{font-size:12px;color:var(--muted);font-weight:400;letter-spacing:0}
.notice,.result-explanation{font-size:13px;color:var(--muted);line-height:1.6}
.notice{border-left:2px solid var(--line-strong);padding-left:12px}
.status{font-size:13px;line-height:1.6;margin:12px 0;color:var(--muted)}
.status:empty{display:none}
.loading{opacity:.6}

/* Crypto model result */
.result-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.result-meta h2{font-size:16px;margin:0}
.state-title{font-size:22px;line-height:1.3;margin:16px 0 8px}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.verdict-stamp{font-size:32px;line-height:1.15;letter-spacing:-.02em;margin:20px 0 10px}
.normalized-claim{padding:16px 0;border-top:1px solid var(--line);margin-top:16px}
.normalized-claim p{font-size:15px;line-height:1.5;margin:6px 0 0}
.stat-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:16px 0;border-top:1px solid var(--line)}
.stat-meta{min-width:160px;flex:1}
.stat-label{font-size:14px;font-weight:500}
.stat-meta small{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:3px}
.stat-value{font-size:24px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-track{height:4px;width:100%;background:var(--surface-2);border-radius:var(--radius-pill);overflow:hidden}
.stat-track span{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill)}
.quote-distinction{display:block;font-size:12px;margin-top:6px;color:var(--muted)}
.touch-note{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:16px 0;border-top:1px solid var(--line)}
.touch-note strong{font-variant-numeric:tabular-nums}
.method{border-top:1px solid var(--line);margin:8px 0 0;padding:4px 0}
.method-content{font-size:13px;line-height:1.65;color:var(--muted);padding:4px 0 8px}
.method-content p{margin:0 0 8px}
.assumptions{padding-left:18px;margin:8px 0 0}
.assumptions li{margin:4px 0}
.match{border-top:1px solid var(--line);padding:16px 0}
.match h3{font-size:15px;margin:0 0 4px}

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

/* Shared frame for the existing sharing and account pages. */
:root{--paper:var(--text)}
.shell{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:80px;border-bottom:1px solid var(--line)}
.topbar nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.topbar nav a{font-size:13px;color:var(--muted)}
.topbar nav a:hover{color:var(--ink)}
.brand-mark{width:32px;height:32px;border:1px solid var(--line-strong);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:19px;letter-spacing:-3px;padding-right:3px}
.brand-mark span{color:var(--accent)}
.footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding:24px 0;margin-top:32px;font-size:11px;color:var(--muted)}
.muted{color:var(--muted)}
@media(max-width:760px){.shell{padding:0 18px}.topbar{gap:14px;min-height:72px;flex-wrap:wrap;padding:14px 0}.topbar nav{gap:14px}.brand{font-size:15px}.footer{gap:12px;line-height:1.7}}

:root[data-theme=dark] img.ui-icon{filter:invert(1);opacity:.72}
