/* ============================================================
   Pass 4. Form controls.
   Measured on /tokens: #q, #sort and #minHolders rendered as raw OS
   widgets — white (255,255,255), Arial, 0px radius, 19-21px tall next
   to 50px pills. The explorer stylesheet only set flex sizing, never
   surface, so the browser default won. This styles them properly.
   ============================================================ */

.explorer-form input,
.explorer-form select,
select,
input[type="number"],
input[type="text"],
input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--panel, #0d1512);
  color: var(--ink, #e8ede8);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.2;
  border: 1px solid var(--rule, #1d2a24);
  border-radius: var(--radius, 10px);
  padding: 12px 14px;
  min-height: 44px;           /* matches the pill row, and is a real tap target */
}

/* Custom caret so the select loses the OS chevron. */
.explorer-form select,
select {
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted, #8a958f) 50%),
    linear-gradient(135deg, var(--muted, #8a958f) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% + 2px),
    calc(100% - 13px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* The dropdown list itself is OS-drawn; at least keep it dark. */
.explorer-form select option,
select option { background: #0d1512; color: #e8ede8; }

.explorer-form input:hover,
.explorer-form select:hover { border-color: var(--rule-strong, #2a3b33); }

.explorer-form input:focus-visible,
.explorer-form select:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: none;
  border-color: var(--accent, #4fe69a);
  box-shadow: 0 0 0 3px rgba(79,230,154,.16);
}

/* Number spinners are noise here. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Labels in the filter row read as instrument chrome, not sentences. */
.explorer-form label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow, 11px);
  letter-spacing: var(--track-eyebrow, .14em);
  text-transform: uppercase;
  color: var(--muted, #8a958f);
}

/* Caption: labelled stat pairs, so it can never orphan a trailing dot. */
.hero-stage figcaption { gap: 4px 18px; }
.cap-stat { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.cap-stat i { font-style: normal; color: var(--muted, #8a958f); }
.cap-stat b { font-weight: 500; color: var(--ink, #e8ede8); font-variant-numeric: tabular-nums; }

/* ============================================================
   Exit-risk flags.
   These carry real weight: they tell a user a headline number is not
   reachable. Styled as warning chips, never as decoration.
   ============================================================ */

.flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
  border: 1px solid currentColor;
}

/* A cap with an empty pool: nobody can sell. Strongest signal. */
.flag-no_exit { color: #ff8484; background: rgba(255,80,80,.10); }

/* Liquidity under 1% of cap: the number is technically true, practically not. */
.flag-paper_value { color: #ffc46b; background: rgba(255,180,80,.10); }

/* Only one wallet holds it. */
.flag-one_holder { color: #9fb2aa; background: rgba(160,190,175,.08); }

/* Dossier: the flag becomes a full-width notice rather than a chip. */
.risk-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid currentColor;
  border-radius: var(--radius, 10px);
  font-family: var(--font-mono);
  font-size: 12px;
}
.risk-notice[hidden] { display: none; }
.risk-notice b { font-size: var(--fs-eyebrow, 11px); letter-spacing: .14em; text-transform: uppercase; }
.risk-notice span { color: var(--muted, #8a958f); }
.risk-no_exit { color: #ff8484; background: rgba(255,80,80,.08); }
.risk-paper_value { color: #ffc46b; background: rgba(255,180,80,.08); }
.risk-one_holder { color: #9fb2aa; background: rgba(160,190,175,.06); }

/* Creator track-record link on the dossier. Deliberately quieter than the
   risk notice: it is a lead to follow, not a warning. */
.creator-link {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-dim, #9fb3a8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.creator-link code {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink, #e8f5ee);
}

.creator-link a {
  color: var(--accent, #7ee3b8);
  text-decoration: none;
  border-bottom: 1px solid rgba(126, 227, 184, 0.4);
  padding-bottom: 1px;
}

.creator-link a:hover,
.creator-link a:focus-visible {
  border-bottom-color: var(--accent, #7ee3b8);
}

/* Address line on the creator page. */
.mono-addr {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-dim, #9fb3a8);
  word-break: break-all;
  margin: 6px 0 0;
}

.fineprint {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim, #9fb3a8);
  margin-top: 14px;
  max-width: 68ch;
}

/* The creator verdict needs its own colour. .risk-notice takes its colour
   from a .risk-<flag> modifier that only the dossier sets, so on the creator
   page the verdict rendered in the default body colour rgb(232,245,238) —
   measured live — which reads as neutral text rather than a warning. */
.risk-notice.verdict-dead {
  color: #ff8484;
  border-color: rgba(255, 132, 132, 0.38);
  background: rgba(255, 132, 132, 0.07);
}