/* Token Horizon / Quiet precision
   Shared production overlay. The page-specific styles still own layout and data UI;
   this file supplies the shared type, semantic palette, geometry, and focus language. */
@font-face {
  font-family: "Hubot Sans";
  src: url("./fonts/HubotSansVF-Regular.ttf") format("truetype");
  font-weight: 200 900;
  font-stretch: 80% 120%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --th-mineral: #f3f4ef;
  --th-white: #fff;
  --th-titanium: #cdd3cc;
  --th-graphite: #121714;
  --th-void: #070a08;
  --th-signal: #b6f2cf;
  --th-forest: #235e43;
  --th-muted: #56635a;
  --th-rule: #cdd3cc;
  --th-control: #79867c;
  --th-display: "Hubot Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --th-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Semantic surfaces are overridden by theme.css. Brand pigments above
     remain fixed for artwork, provider marks and the graphite navigation. */
  --th-bg: var(--th-mineral);
  --th-surface: var(--th-white);
  --th-surface-2: #edf1ea;
  --th-surface-3: #e1e8e1;
  --th-text: var(--th-graphite);
  --th-faint: #627167;
  --th-rule-strong: #b7c5bc;
  --th-accent: var(--th-forest);
  --th-accent-ink: #fff;
  --th-selected: #e0efdf;
  --th-hover: #eef5ec;
  --th-success: #235e43;
  --th-warning: #89520e;
  --th-danger: #aa3939;
  --th-shadow: #07120c26;
  /* Inline the optical 24px mark so static file previews also render it. */
  --th-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 11a10.05 10.05 0 0 1 20 0H2Zm0 2h20A10.05 10.05 0 0 1 2 13Z'/%3E%3C/svg%3E");
}

/* Keep browser affordances in the same visual language as the controls. */
:is(body.landing, body.discovery, body.editorial, body[data-mode], body[data-surface]) {
  caret-color: var(--th-accent);
  scrollbar-color: var(--th-control) var(--th-bg);
}
:is(body.landing, body.discovery, body.editorial, body[data-mode], body[data-surface]) ::selection {
  background: var(--th-selected);
  color: var(--th-text);
}
:is(body.landing, body.discovery, body.editorial, body[data-mode], body[data-surface]) :is(button, a, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--th-accent);
  outline-offset: 3px;
}
:is(body.landing, body.discovery, body.editorial, body[data-mode], body[data-surface]) :is(input, textarea)::placeholder {
  color: var(--th-faint);
  opacity: 1;
}
:is(body.landing, body.discovery, body.editorial, body[data-mode], body[data-surface]) :is(.num, .kpi-value, .stat .value) {
  font-variant-numeric: tabular-nums;
}

/* Theme controls live next to the account/menu; source order stays useful
   without JavaScript, and menu panels keep their existing behavior. */
body.landing .nav-wrap > .brand { order: 0; }
body.landing .nav-wrap > #main-nav { order: 1; margin-left: auto; }
body.landing .nav-wrap > [data-theme-control] { order: 2; flex: none; }
body.landing .nav-wrap > .th-nav-signin { order: 3; }
body.landing .nav-wrap > .menu-toggle { order: 4; }
body.editorial .nav > .brand { order: 0; }
body.editorial .nav > .nav-links { order: 1; margin-left: auto; }
body.editorial .nav > [data-theme-control] { order: 2; flex: none; }
body.editorial .nav > .th-nav-signin { order: 3; }
body.editorial .nav > .nav-toggle { order: 4; }
body[data-mode] header > .brand { order: 0; }
body[data-mode] header > nav { order: 1; margin-left: auto; }
body[data-mode] header > [data-theme-control] { order: 2; flex: none; }
body[data-mode] header > .th-nav-signin { order: 3; }
body[data-mode] header { gap: 24px; }

/* Authentication stays visible when exploration navigation is collapsed. */
:is(body.landing .site-header .brand, body.editorial .nav .brand, body[data-mode] header .brand) {
  display: inline-flex; align-items: center; min-height: 44px;
}
.th-nav-signin {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 44px; padding: 9px 12px; gap: 8px;
  border: 1px solid var(--th-accent); border-radius: 6px;
  background: var(--th-accent); color: var(--th-accent-ink);
  font: 600 14px/1.4 var(--th-display); white-space: nowrap; text-decoration: none;
  touch-action: manipulation; transition: background .14s ease-out, color .14s ease-out;
}
.th-nav-signin > svg { width: 20px; height: 20px; flex: none; }
.th-nav-signin:hover { background: var(--th-text); color: var(--th-bg); text-decoration: none; }
.th-nav-signin:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 3px; }
:is(body.landing .site-header, body.editorial .nav) .th-nav-signin {
  background: #24392c; color: var(--th-signal); border-color: #56745e;
}
:is(body.landing .site-header, body.editorial .nav) .th-nav-signin:hover {
  background: var(--th-signal); color: var(--th-graphite); border-color: var(--th-signal);
}
:is(body.landing .site-header, body.editorial .nav) .th-nav-signin:focus-visible { outline-color: var(--th-signal); }
#connection-account { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .th-nav-signin { transition: none; } }

@media (max-width: 1080px) {
  body.landing .nav-wrap { flex-wrap: wrap; gap: 12px; }
  body.landing .nav-wrap > [data-theme-control] { margin-left: auto; }
  body.landing .nav-wrap > #main-nav {
    order: 5; flex-basis: 100%; width: 100%; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding-top: 12px;
  }
  html.js body.landing .nav-wrap > #main-nav { display: none; }
  html.js body.landing .nav-wrap > #main-nav.open { display: flex; }
  html.js body.landing .menu-toggle { display: inline-flex; align-items: center; gap: 14px; }
  body.landing #main-nav > a { padding: 14px 0; border-top: 1px solid #35423a; font-size: 14px; }
  body.landing #main-nav > .button { padding: 12px 18px; margin-top: 10px; }
}
@media (max-width: 1080px) {
  body.editorial .nav { flex-wrap: wrap; }
  body.editorial .nav > .nav-toggle { display: inline-grid; place-items: center; }
  body.editorial .nav > [data-theme-control] { margin-left: auto; }
  body.editorial .nav > .nav-links {
    display: none; order: 5; flex-basis: 100%; flex-direction: column; align-items: stretch;
    margin: 8px 0 0; padding: 8px 0 4px; gap: 2px; border-top: 1px solid #35423a;
  }
  body.editorial .nav.open > .nav-links { display: flex; }
  body.editorial .nav > .nav-links a { display: flex; align-items: center; min-height: 44px; padding: 10px 8px; font-size: 15px; }
}
@media (max-width: 600px) {
  body[data-mode] header { min-height: 108px; height: auto; padding: 18px 20px 14px; flex-wrap: wrap; gap: 12px; }
  body[data-mode] header > [data-theme-control] { margin-left: auto; }
  body[data-mode] header > nav { order: 5; flex-basis: 100%; margin: 0; gap: 24px; padding-top: 8px; }
  body[data-mode] header > nav a { white-space: nowrap; }
}
@media (max-width: 480px) {
  :is(body.landing .site-header .brand, body.editorial .nav .brand, body[data-mode] header .brand) {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-width: 44px; height: 44px; flex: none; gap: 0;
  }
  :is(body.landing .site-header, body.editorial .nav, body[data-mode] header) .th-nav-brand-name {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap;
  }
  body.landing .site-header .nav-wrap .brand::before,
  body.editorial .nav .brand::before { width: 24px; height: 24px; margin: 0; vertical-align: 0; }
  body.landing .nav-wrap { gap: 8px; padding-inline: 16px; }
  body.landing .nav-wrap .brand { font-size: 20px; }
  body.landing .nav-wrap .brand::before { width: 19px; height: 19px; margin-right: 7px; vertical-align: -4px; }
  body.landing .menu-toggle { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 0; }
  body.landing .menu-toggle span { font-size: 22px; line-height: 1; }
}
@media (max-width: 380px) {
  body.discovery .discovery-header { gap: 8px; padding-inline: 16px; }
  body.discovery .discovery-brand { font-size: 14px; }
  body.discovery .discovery-brand::before { width: 18px; height: 18px; margin-right: 4px; vertical-align: -4px; }
  body.discovery .discovery-actions { gap: 4px; }
  body.discovery .discovery-actions #auth-slot .pill { font-size: 11px; padding-inline: 9px; }
}

/* Shared icon action pattern. Help is a transient surface; the action remains native. */
.th-icon-action {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  flex:none; width:44px; height:44px; min-width:44px; min-height:44px; padding:0;
  border:1px solid var(--th-rule-strong); border-radius:6px;
  background:var(--th-surface); color:var(--th-text); cursor:pointer;
  text-decoration:none; list-style:none; touch-action:manipulation;
  transition:background .14s ease-out, color .14s ease-out, border-color .14s ease-out;
}
.th-icon-action::-webkit-details-marker { display:none; }
.th-icon-action>svg { width:24px; height:24px; flex:none; }
.th-icon-action:hover { background:var(--th-hover); border-color:var(--th-accent); }
.th-icon-action[aria-expanded=true], details[open]>.th-icon-action { background:var(--th-selected); color:var(--th-accent); border-color:var(--th-accent); }
.th-icon-action:focus-visible { outline:2px solid var(--th-accent); outline-offset:3px; }
.th-action-name { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; }
.th-action-tooltip[hidden] { display:none!important; }
body>.th-action-tooltip {
  position:fixed; z-index:2100; display:block; box-sizing:border-box;
  width:max-content; max-width:min(272px,calc(100vw - 24px)); padding:12px 14px;
  border:0; border-radius:8px; background:var(--th-text); color:var(--th-bg);
  box-shadow:0 6px 22px var(--th-shadow); text-align:left; white-space:normal;
  font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-wrap:anywhere; cursor:default;
}
body>.th-action-tooltip>strong { display:block; font-size:14px; font-weight:650; margin:0 0 3px; color:inherit; }
body>.th-action-tooltip>span { display:block; color:inherit; }
@media(prefers-reduced-motion:reduce) { .th-icon-action { transition:none; } }

/* Landing page */
body.landing {
  --bg: var(--th-mineral);
  --ink: var(--th-graphite);
  --muted: var(--th-muted);
  --line: var(--th-rule);
  --mint: var(--th-signal);
  --green: var(--th-forest);
  --dark: var(--th-graphite);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: var(--th-mono);
  background: var(--th-mineral);
  color: var(--th-graphite);
}
body.landing h1,
body.landing h2,
body.landing h3,
body.landing .brand,
body.landing .site-footer .brand {
  font-family: var(--th-display);
  font-stretch: 108%;
}
body.landing .site-header {
  background: var(--th-graphite);
  border-bottom: 1px solid #35423a;
}
body.landing .nav-wrap {
  min-height: 80px;
}
body.landing .brand {
  font-weight: 650;
  letter-spacing: -.045em;
}
body.landing .nav-wrap .brand::before,
body.landing .site-footer .brand::before,
body.discovery .discovery-brand::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 9px;
  background: currentColor;
  -webkit-mask: var(--th-mark) center / contain no-repeat;
  mask: var(--th-mark) center / contain no-repeat;
  vertical-align: -5px;
}
body.landing .hero h1 {
  font-weight: 650;
  letter-spacing: -.055em;
}
body.landing .hero-actions .button,
body.landing .nav-install {
  border-radius: 6px;
}
body.landing .hero-actions .dark {
  background: var(--th-graphite);
  color: var(--th-mineral);
}
body.landing .hero-actions .dark:hover {
  background: var(--th-forest);
}
body.landing .text-link,
body.landing .section a {
  text-decoration-thickness: 1px;
}
body.landing .device-screen,
body.landing .expanded-display {
  background-image: url("./assets/landing/event-horizon.webp");
  background-position: center;
}
body.landing .demo-surface,
body.landing .desktop-widget,
body.landing .small-widget,
body.landing .feature-card,
body.landing .install-card {
  border-radius: 10px;
}
body.landing .section-top .eyebrow,
body.landing .eyebrow,
body.landing .kicker {
  font-family: var(--th-mono);
  letter-spacing: .15em;
}
body.landing button:focus-visible,
body.landing a:focus-visible,
body.landing summary:focus-visible,
body.landing input:focus-visible {
  outline: 2px solid var(--th-forest);
  outline-offset: 4px;
}

/* Public discovery surfaces: keep the catalog and leaderboard flat and legible. */
body.discovery {
  --bg: var(--th-mineral);
  --panel: var(--th-white);
  --panel2: #f1f4ef;
  --panel3: #e1e8e1;
  --line: var(--th-rule);
  --line2: #b7c5bc;
  --text: var(--th-graphite);
  --muted: var(--th-muted);
  --faint: #627167;
  --blue: var(--th-forest);
  --cyan: var(--th-forest);
  --green: var(--th-forest);
  --purple: #65756a;
  --pink: #65756a;
  --orange: #89520e;
  --red: #aa3939;
  --gold: #89520e;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: var(--th-mono);
  background: var(--th-mineral);
  color: var(--th-graphite);
  background-image: none;
}
body.discovery,
body.discovery * {
  scrollbar-color: #9caf9f var(--th-mineral);
}
body.discovery .discovery-header {
  background: var(--th-graphite);
  border-bottom: 1px solid #35423a;
}
body.discovery .discovery-brand,
body.discovery .brand-title {
  font-family: var(--th-display);
  font-stretch: 108%;
  letter-spacing: -.045em;
}
body.discovery .discovery-brand {
  font-weight: 650;
}
body.discovery .discovery-install {
  background: var(--th-signal);
  border-color: var(--th-signal);
  border-radius: 6px;
  color: var(--th-graphite) !important;
}
body.discovery .discovery-install:hover {
  background: #d0f8dd;
  border-color: #d0f8dd;
}
body.discovery .content {
  padding-top: 56px;
}
body.discovery .discovery-title h1,
body.discovery .page-head h1,
body.discovery .mx-comparison-head h2,
body.discovery .community-join h2 {
  font-family: var(--th-display);
  font-stretch: 108%;
  letter-spacing: -.05em;
  font-weight: 650;
}
body.discovery .discovery-title h1 {
  font-size: clamp(36px, 4vw, 58px);
}
body.discovery .discovery-eyebrow,
body.discovery .catalog-stamp,
body.discovery .community-table th,
body.discovery .mx-head-cell {
  font-family: var(--th-mono);
  letter-spacing: .11em;
}
body.discovery .card,
body.discovery .mx-panel,
body.discovery .community-kpis,
body.discovery .community-join,
body.discovery #mx-comparison {
  border-radius: 10px;
}
body.discovery .community-kpis,
body.discovery .community-join,
body.discovery .mx-panel,
body.discovery .mx-drawer,
body.discovery .mx-plan-card {
  box-shadow: none;
}
body.discovery .community-table tr.you,
body.discovery .mx-row.active,
body.discovery .mx-filters .mx-chip.active {
  background: #e0efdf !important;
}
body.discovery #lb-table tbody tr:is(.selected, .you) td:nth-child(-n+2) {
  background: #e0efdf;
}
body.discovery .community-table tr:hover,
body.discovery .mx-row:hover {
  background: #eef5ec !important;
}
body.discovery :focus-visible {
  outline: 2px solid var(--th-forest);
  outline-offset: 3px;
}
body.discovery .community-link,
body.discovery .mx-clear,
body.discovery .mx-drawer a,
body.discovery .mx-plan-card a {
  color: var(--th-forest);
}
body.discovery .mx-tag.plan {
  color: #5e476a;
  background: #f1edf3;
  border-color: #d7cadc;
}
body.discovery .cta {
  background: linear-gradient(165deg, #e2f1e4, #f8faf6 72%);
  border-color: #9ab8a0;
  box-shadow: none;
  color: var(--th-graphite);
}
body.discovery .cta .progress {
  box-shadow: inset 0 1px 3px #253c2d33;
}
body.discovery .cta .progress i {
  background: var(--th-forest);
  box-shadow: none;
}

/* Connect is generated by the worker, so this overlay is also linked there. */
body[data-mode] {
  --th-display: "Hubot Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--th-mineral);
}
body[data-mode] header .brand,
body[data-mode] h1,
body[data-mode] h2,
body[data-mode] h3 {
  font-family: var(--th-display);
  font-stretch: 108%;
  letter-spacing: -.05em;
}
body[data-mode] header .brand {
  font-weight: 650;
}
body[data-mode] .brand-mark {
  display: block;
  width: 24px;
  height: 24px;
  font-size: 0;
  background: currentColor;
  -webkit-mask: var(--th-mark) center / contain no-repeat;
  mask: var(--th-mark) center / contain no-repeat;
}
body[data-mode] .universe {
  background: var(--th-graphite);
}
body[data-mode] h1 {
  font-weight: 600;
}
body[data-mode] .primary {
  background: var(--th-forest);
  border-color: var(--th-forest);
  border-radius: 6px;
}
body[data-mode] .primary:hover {
  background: #2d7553;
}
body[data-mode] .secondary,
body[data-mode] .endpoint,
body[data-mode] .app-symbol {
  border-radius: 6px;
}
body[data-mode] .connection {
  background: var(--th-mineral);
}
body[data-mode] button:focus-visible,
body[data-mode] a:focus-visible,
body[data-mode] input:focus-visible {
  outline: 2px solid var(--th-accent);
  outline-offset: 4px;
}

/* Dark surfaces use the same focus geometry with a high-contrast signal ring. */
body.landing :is(.site-header, .desktop-section, .terminal) :focus-visible,
body.discovery .discovery-header :focus-visible,
body[data-mode] .universe :focus-visible {
  outline-color: var(--th-signal);
}

@media (max-width: 860px) {
  body.discovery .content {
    padding-top: 38px;
  }
  body[data-mode] .hole-stage {
    opacity: .45;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
    mask-image: linear-gradient(90deg, transparent, #000 60%);
  }
  body[data-mode] .universe > :not(.hole-stage) {
    position: relative;
    z-index: 1;
  }
}
/* Content-shaped placeholders preserve orientation while each view loads. */
.discovery-loading { padding: 22px; overflow: hidden; }
.discovery-loading-label { display: flex; gap: 12px; align-items: center; font-size: 13px; margin-bottom: 24px; }
.loading-eclipse { width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; position: relative; animation: eclipse-breathe 1.6s ease-in-out infinite; }
.loading-eclipse::after { content: ""; position: absolute; left: -5px; right: -5px; top: 9px; border-top: 1px solid currentColor; transform: rotate(-22deg); }
.loading-table-head { display: grid; grid-template-columns: 1fr 100px 80px; gap: 28px; padding: 0 0 18px 48px; }
.loading-table-head i { height: 7px; max-width: 80px; }
.loading-table-row { display: grid; grid-template-columns: 32px 1fr 100px 80px; gap: 16px; align-items: center; min-height: 68px; border-top: 1px solid var(--line); }
.loading-table-row > i:not(.loading-avatar) { height: 9px; width: 70%; justify-self: end; }
.loading-avatar { width: 28px; height: 28px; border-radius: 7px; }
.loading-table-row span { display: grid; gap: 8px; }
.loading-table-row span i { height: 9px; }
.loading-table-row span i + i { height: 6px; width: 25%; }
body.discovery .discovery-loading .skeleton { background: linear-gradient(100deg, #e3e7df 15%, #f3f5ef 40%, #e3e7df 65%); background-size: 200% 100%; animation-delay: var(--delay, 0ms); }
@keyframes eclipse-breathe { 50% { opacity: .38; transform: scale(.87); } }
@media (max-width: 760px) {
  body.discovery .content { padding-top: 24px; }
  body.discovery .discovery-title { gap: 12px; }
  body.discovery .catalog-stamp { font: 12px/1.5 var(--th-display); letter-spacing: 0; }
}
@media (max-width: 600px) {
  .discovery-loading { padding: 16px; }
  .loading-table-head { grid-template-columns: 1fr 55px; }
  .loading-table-row { grid-template-columns: 28px 1fr 55px; gap: 12px; }
  .loading-table-row > i:last-child, .loading-table-head > i:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(body.landing, body.discovery, body[data-mode]) *,
  :is(body.landing, body.discovery, body[data-mode]) *::before,
  :is(body.landing, body.discovery, body[data-mode]) *::after {
    animation: none !important;
    transition: none !important;
  }
}