/* The alert box carries the page's message, so the title recedes to a label. */
.indicator-page__title {
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.indicator-page__lead {
  margin: 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

.indicator-page__charts {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.indicator-page__chart-toolbar {
  display: flex;
  justify-content: flex-end;
}

.indicator-page__chart .metric-chart {
  min-height: 0;
  border-radius: 8px;
  box-shadow: none;
}

.indicator-page__chart .metric-chart__header {
  padding: 0.3rem 0.45rem;
}

.indicator-page__chart .metric-chart__canvas-wrap {
  /* Give the wrap a definite height so the canvas can fill it.
     height: 100% on .metric-chart__canvas does not resolve against
     min-height alone, which collapses Lightweight Charts into a strip. */
  height: min(480px, 56vh);
  min-height: 300px;
}

.indicator-page__chart .metric-chart__canvas {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

.indicator-page__chart .metric-chart__level-labels {
  width: 7.25rem;
}

.indicator-page__chart .metric-chart__subscribe {
  padding: 0.75rem 0.85rem;
  border-top: 0;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 10%, transparent),
      var(--panel-inset)
    );
}

.indicator-page__chart .metric-chart__subscribe-empty {
  font-size: 0.85rem;
  color: var(--text);
}

.indicator-page__chart .metric-chart__subscribe-lead,
.indicator-page__chart .metric-chart__subscribe-when {
  font-size: 0.85rem;
}

.indicator-page__chart .metric-chart__email {
  flex: 1 1 14rem;
  min-width: 12rem;
  max-width: 22rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.indicator-page__chart .metric-chart__alert-chip {
  font-size: 0.8rem;
  padding: 0.2rem 0.2rem 0.2rem 0.55rem;
}

.indicator-page__chart .metric-chart__send {
  padding: 0.6rem 1.15rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 8px 20px color-mix(in srgb, var(--accent) 22%, transparent);
}

.indicator-page__chart .metric-chart__send:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    0 10px 24px color-mix(in srgb, var(--accent) 30%, transparent);
}

.indicator-page__copy,
.indicator-page__related,
.indicator-page__faq {
  max-width: 44rem;
}

.indicator-page__copy h2 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.indicator-page__copy h2:first-child {
  margin-top: 0;
}

.indicator-page__copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 42rem;
}

.indicator-page__section-lead {
  margin-bottom: 0.35rem !important;
}

.indicator-page__bands {
  display: grid;
  gap: 0.85rem;
  margin: 0.75rem 0 0;
}

.indicator-page__bands dt {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
}

.indicator-page__bands dd {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 42rem;
}

.indicator-page__related h2 {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
}

.indicator-page__related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.indicator-page__related li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-inset-deep);
}

.indicator-page__related a {
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
}

.indicator-page__related a:hover {
  color: var(--link-hover);
}

.indicator-page__related span {
  font-family: var(--mono);
  font-size: 0.82rem;
}

.indicator-page__all {
  margin: 0.85rem 0 0;
}

.indicator-page__all a {
  color: var(--link);
  text-decoration: none;
}

.indicator-page__all a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 640px) {
  .indicator-page {
    width: min(100% - 0.75rem, var(--shell-max));
    padding: 0.3rem 0 1.5rem;
  }

  .indicator-page__chart .metric-chart__canvas-wrap {
    height: min(320px, 48vw);
    min-height: 220px;
  }

  .indicator-page__chart .metric-chart__level-labels {
    width: 6.25rem;
  }
}

.auth {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
  display: grid;
  gap: 1rem;
}

.auth__header {
  display: grid;
  gap: 0.35rem;
}

.auth__home-link {
  color: inherit;
  text-decoration: none;
}

.auth__title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.auth__lead {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.auth__notice,
.auth__alert {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.auth__notice {
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.auth__alert {
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.auth__form {
  display: grid;
  gap: 0.4rem;
}

.auth__label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.auth__row {
  display: flex;
  gap: 0.45rem;
}

.auth__email {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.auth__email:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 1px;
}

.auth__submit {
  flex: 0 0 auto;
  padding: 0.45rem 0.85rem;
  border: 0;
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.auth__submit:hover {
  filter: brightness(1.08);
}

/* Split sign-up. A light "stage" in the brand's green-on-white palette, scoped
   to this page: the app chrome around it stays on the theme tokens, and the
   stage carries its own so it reads the same in any theme. Stacks (form
   first) on narrow screens so the email field is never below the fold. */
.signup {
  --su-bg: #f8faf7;
  --su-ink: #0b0f0c;
  --su-mute: #5b655d;
  --su-line: #e2e8e0;
  --su-green: #4a8f3f;
  --su-green-deep: #2f7a35;
  --su-green-wash: #e3eee0;

  position: relative;
  display: grid;
  gap: 2rem;
  max-width: 68rem;
  margin: 1.25rem auto 4rem;
  padding: 1.75rem 1.25rem 6rem;
  overflow: hidden;
  border-radius: 20px;
  background: var(--su-bg);
  color: var(--su-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px rgba(0, 0, 0, 0.35);
}

.signup > :not(.signup__wave) {
  position: relative;
  z-index: 1;
}

.signup__wave {
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  width: 100%;
  height: 7rem;
  fill: var(--su-green-wash);
  pointer-events: none;
}

.signup .metrics__domain,
.signup .auth__home-link {
  color: var(--su-mute);
}

.signup__intro {
  display: grid;
  align-content: start;
  gap: 1.5rem;
}

.signup__headline {
  margin: 0;
  color: var(--su-ink);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.signup__headline-accent {
  display: block;
  color: var(--su-green);
}

.signup__features {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signup__features li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.signup__features li > div {
  display: grid;
  gap: 0.15rem;
}

.signup__features strong {
  color: var(--su-ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.signup__features li span:not(.signup__icon) {
  color: var(--su-mute);
  font-size: 0.82rem;
  line-height: 1.45;
}

.signup__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--su-line);
  border-radius: 11px;
  background: #fff;
  color: var(--su-green);
  box-shadow: 0 2px 6px rgba(20, 40, 20, 0.06);
}

/* Example alert: a soft white card, with the rising arrow and bars from the
   brand artwork drawn inline. */
.signup__example {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 24rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 40, 20, 0.12);
}

.signup__example > div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.signup__example-bell {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--su-green-deep);
  color: #fff;
}

.signup__example-title {
  font-size: 0.88rem;
  font-weight: 600;
}

.signup__example-body {
  color: var(--su-ink);
  font-size: 0.82rem;
}

.signup__example-meta {
  color: var(--su-green);
  font-size: 0.72rem;
  font-weight: 500;
}

.signup__example-chart {
  flex: 0 0 auto;
  width: 4.5rem;
  height: auto;
  margin-left: auto;
}

.signup__example-chart rect {
  fill: var(--su-green);
}

.signup__example-arrow,
.signup__example-arrow-head {
  fill: none;
  stroke: var(--su-green-deep);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signup__panel {
  order: -1;
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.6rem;
  border: 1px solid var(--su-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(20, 40, 20, 0.12);
}

.signup__panel .auth__title {
  color: var(--su-ink);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.signup__panel .auth__lead,
.signup__panel .auth__label,
.signup__panel .auth__footnote {
  color: var(--su-mute);
}

.signup__panel .auth__footnote a {
  color: var(--su-green-deep);
  font-weight: 600;
}

.signup__email {
  flex: none;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--su-line);
  border-radius: 12px;
  background: var(--su-bg);
  color: var(--su-ink);
  font-size: 0.92rem;
}

.signup__email:focus {
  outline: 2px solid color-mix(in srgb, var(--su-green) 55%, transparent);
  outline-offset: 1px;
}

.signup__submit {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.8rem 0.85rem;
  border-radius: 12px;
  background: var(--su-ink);
  color: #fff;
  font-size: 0.92rem;
}

.signup__submit:hover {
  background: var(--su-green-deep);
  filter: none;
}

@media (min-width: 860px) {
  .signup {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: 3.5rem;
    margin-top: 2rem;
    padding: 3rem 3rem 8rem;
  }

  .signup__panel {
    order: 0;
    padding: 2rem;
  }

  .signup__headline {
    font-size: 3rem;
  }
}

/* Scout's positions table on /scout-portfolio. */
.scout-positions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.scout-positions__title {
  margin: 0;
  font-size: 1rem;
}

.scout-positions__summary,
.scout-positions__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.scout-positions__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.scout-positions__table th,
.scout-positions__table td {
  padding: 0.45rem 0.25rem;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

.scout-positions__table thead th {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.75rem;
}

.scout-positions__table th:first-child,
.scout-positions__table td:nth-child(2) {
  text-align: left;
}

.scout-positions__table tbody th a {
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
}

.scout-positions__closed {
  margin-left: 0.25rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 400;
}

.scout-positions__gain {
  color: var(--gain);
}

.scout-positions__loss {
  color: var(--loss);
}

.auth__footnote {
  margin: 0;
  font-size: 0.8rem;
}

.auth__footnote a {
  color: var(--link);
  text-decoration: none;
}

.auth__footnote a:hover {
  color: var(--link-hover);
}

.flash {
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.flash--notice {
  color: var(--success);
  background: color-mix(in srgb, var(--success-hover) 18%, var(--bg));
  border-bottom-color: color-mix(in srgb, var(--success-hover) 35%, var(--bg));
}

.flash--alert {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger-strong) 18%, var(--bg));
  border-bottom-color: color-mix(in srgb, var(--danger-strong) 35%, var(--bg));
}

.site-feedback {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.site-ai {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* The homepage's left pane is already the Scout chat (see scout-hero), so
   the sitewide Ask Scout rail/drawer would be a redundant second entry
   point there — hides the toggle and the fixed-position panel alike, since
   both are descendants of this one wrapper. */
body[data-hide-ask-scout] .site-ai {
  display: none;
}

/* Below 1080px: a right-side drawer, not a popover — fixed to the viewport
   edge and full height so it stays put (and keeps its transcript) as the
   user browses. The panel element itself is data-turbo-permanent across
   navigations. At 1080px+ this is overridden below into a persistent rail,
   mirroring shared/_site_rail on the opposite edge. */
.site-ai__panel {
  position: fixed;
  top: calc(var(--bar-height) + var(--rail-strip-height));
  right: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  width: min(var(--scout-drawer-width), 100vw);
  height: calc(100vh - var(--bar-height) - var(--rail-strip-height));
  height: calc(100dvh - var(--bar-height) - var(--rail-strip-height));
  padding: 0.85rem;
  border-left: 1px solid var(--border);
  background: var(--chrome-bg);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0.22s ease;
  overflow-y: auto;
}

.site-ai__panel.site-ai__panel--open {
  transform: translateX(0);
  visibility: visible;
}

.site-ai__collapsed-tab {
  display: none;
}

/* Persistent rail, same idea as shared/_site_rail but on the right edge and
   collapsed by default — Ask Scout is a secondary feature, so it opts in
   rather than claiming --scout-drawer-width of every page up front. The
   collapsed/expanded flag lives on <html> (see ai_interest_controller.js and
   the inline <head> script) so it applies before first paint. */
@media (min-width: 1080px) {
  html[data-scout-collapsed="true"] {
    --scout-drawer-width: 3.1rem;
  }

  .site-ai__panel {
    top: var(--bar-height);
    height: calc(100vh - var(--bar-height));
    height: calc(100dvh - var(--bar-height));
    box-shadow: none;
    backdrop-filter: blur(8px);
    transform: none;
    visibility: visible;
    transition: width 0.22s ease;
    overflow: hidden;
    /* Signals that empty panel space (not a link, button, or form field) is
       clickable — it toggles collapse/expand, same as shared/_site_rail.
       Elements with their own UA cursor (textarea, buttons, links) override
       this on themselves regardless of the inherited value here. */
    cursor: pointer;
  }

  html[data-scout-collapsed="true"] .site-ai__panel {
    padding: 0.5rem 0.4rem;
  }

  html[data-scout-collapsed="true"] .site-ai__collapsed-tab {
    display: flex;
  }

  html[data-scout-collapsed="true"] .site-ai__body {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

.site-ai__collapsed-tab {
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.55rem 0.4rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-ai__collapsed-tab:hover,
.site-ai__collapsed-tab:focus-visible {
  color: var(--ink-soft);
  background: var(--surface-overlay);
}

.site-ai__collapsed-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.site-ai__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.site-ai__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.site-ai__title {
  margin: 0;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.site-ai__close {
  margin: 0;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.site-ai__close:hover {
  color: var(--text);
}

.site-ai__copy {
  margin: 0 0 0.65rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Onboarding copy earns its space before the first message, not after — on
   a short laptop viewport that space is what pushes the question box and
   Ask button below the fold once a conversation is underway. */
.site-ai__body:has(.site-ai__log:not(:empty)) .site-ai__copy {
  display: none;
}

.site-ai__log {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.site-ai__log:empty {
  display: none;
}

.site-ai__msg {
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.site-ai__msg--user {
  justify-self: end;
  max-width: 85%;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg));
  color: var(--text);
}

.site-ai__msg--scout {
  justify-self: start;
  max-width: 100%;
  background: color-mix(in srgb, var(--border) 40%, transparent);
  color: var(--text);
}

/* Multi-round tool calls (checking indicators, news, earnings…) can take
   10-20s end to end — the label alone updates per round, but a round that's
   slow on its own left this bubble static long enough to read as frozen.
   The pulse is a cheap "still working" signal that doesn't depend on the
   label changing. */
.site-ai__msg--thinking {
  color: var(--muted);
  font-style: italic;
  animation: site-ai-thinking-pulse 1.4s ease-in-out infinite;
}

@keyframes site-ai-thinking-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-ai__msg--thinking {
    animation: none;
  }
}

.site-ai__msg-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

.site-ai__msg-images img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

.site-ai__proposal {
  justify-self: start;
  max-width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}

.site-ai__proposal-label {
  margin: 0 0 0.4rem;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.4;
}

.site-ai__proposal-actions {
  display: flex;
  gap: 0.4rem;
}

.site-ai__proposal-undo {
  margin: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.site-ai__proposal-undo:hover:not(:disabled) {
  color: var(--text);
}

.site-ai__proposal-undo:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Scout's own answers only (see scout_markdown.js) — .site-ai__msg's default
   pre-wrap exists so plain-text bubbles (user turns, thinking labels) keep
   their raw line breaks; real block elements here supply their own spacing,
   so pre-wrap would just double it up. */
.site-ai__msg--markdown {
  white-space: normal;
}

.site-ai__msg--markdown p {
  margin: 0 0 0.5rem;
}

.site-ai__msg--markdown ul {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
}

.site-ai__msg--markdown li {
  margin-bottom: 0.15rem;
}

.site-ai__msg--markdown p:last-child,
.site-ai__msg--markdown ul:last-child {
  margin-bottom: 0;
}

.site-ai__msg--markdown strong {
  font-weight: 700;
}

.site-ai__msg--markdown code {
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  font-family: var(--mono, monospace);
  font-size: 0.9em;
}

/* Contextual next steps after a ticker-grounded answer — see
   #appendFollowupChips. */
.site-ai__followups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-self: start;
}

.site-ai__followup {
  margin: 0;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.site-ai__followup:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.site-ai__followup:disabled {
  opacity: 0.55;
  cursor: default;
}

/* "[N]" markers scout_markdown.js renders inline in an answer — index N
   lines up with the matching card in .site-ai__sources below it. */
.site-ai__cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.28rem;
  margin-left: 0.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1;
}

/* One card per tool result the answer above actually cited — see
   ai_interest_controller.js#appendSources. */
.site-ai__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-self: start;
  margin-top: -0.1rem;
}

.site-ai__source {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 11rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}

.site-ai__source-num {
  flex: 0 0 auto;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
}

.site-ai__source-label {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-ai__question {
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--chrome-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.4;
  resize: vertical;
  box-sizing: border-box;
}

.site-ai__question:focus {
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.site-ai__fallback {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.site-ai__form {
  display: grid;
  gap: 0.5rem;
}

/* Drag an image over the drawer — dashed highlight on the whole form marks
   the drop target without a separate overlay element. */
.site-ai__form--drag .site-ai__question {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--chrome-bg));
}

.site-ai__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.site-ai__attachments[hidden] {
  display: none;
}

.site-ai__attachment {
  position: relative;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.site-ai__attachment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-ai__attachment-remove {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1.05rem;
  height: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

.site-ai__attachment-remove:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.site-ai__email {
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--chrome-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  box-sizing: border-box;
}

.site-ai__email:focus {
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.site-ai__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.site-ai__actions {
  display: flex;
  justify-content: flex-end;
}

.site-ai__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent, #061018);
  cursor: pointer;
}

.site-ai__send:hover:not(:disabled) {
  filter: brightness(1.06);
}

.site-ai__send:disabled {
  opacity: 0.6;
  cursor: wait;
}

.site-ai__disclaimer {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.site-ai__status {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.site-ai__status--error {
  color: var(--danger);
}

.site-feedback__toggle {
  /* Keep .site-signin sizing; only reset native <button> chrome. */
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.site-feedback__toggle[aria-expanded="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.site-feedback__panel {
  position: fixed;
  top: calc(var(--bar-height) + var(--rail-strip-height) + 0.55rem);
  right: 0.85rem;
  z-index: 50;
  display: grid;
  gap: 0.55rem;
  width: min(22rem, calc(100vw - 1.7rem));
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--chrome-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}

/* Class display:grid would otherwise override the HTML hidden attribute. */
.site-feedback__panel[hidden] {
  display: none !important;
}

.site-feedback__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.site-feedback__title {
  margin: 0;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.site-feedback__close {
  margin: 0;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.site-feedback__close:hover {
  color: var(--text);
}

.site-feedback__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0;
  width: 100%;
}

.site-feedback__message,
.site-feedback__email {
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--chrome-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  box-sizing: border-box;
  resize: vertical;
}

.site-feedback__message:focus,
.site-feedback__email:focus {
  outline: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.site-feedback__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.site-feedback__actions {
  display: flex;
  justify-content: flex-end;
}

.site-feedback__send {
  margin: 0;
  padding: 0.45rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg));
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.site-feedback__send:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 28%, var(--bg));
}

.site-feedback__send:disabled {
  opacity: 0.6;
  cursor: wait;
}

.site-feedback__status {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.site-feedback__status--error {
  color: var(--danger);
}

.site-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above the rail so the search dropdown is never clipped by it. */
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: var(--chrome-bg);
  backdrop-filter: blur(8px);
}

.site-bar__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  min-height: var(--bar-height);
  padding: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1rem;
  box-sizing: border-box;
}

/* Equal flex-basis (0) and flex-grow (1) on both sides of .stock-search
   claims equal leftover space regardless of how wide the brand vs. the
   feedback/sign-in/theme group actually are, centering the search box
   between them — unlike a single auto-margin on .stock-search alone, which
   only centers within the leftover space and drifts off-true whenever the
   two sides' content widths differ (as they do here). */
.site-bar__start,
.site-bar__end {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}

.site-bar__start {
  gap: 0.4rem;
}

.site-bar__end {
  justify-content: flex-end;
  gap: 1rem;
}

.site-bar__brand {
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.site-bar__brand:hover {
  color: var(--accent);
}

.site-bar__beta {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Phones: the brand keeps its natural width and the right-hand group takes
   what's left, wrapping onto a second right-aligned row when it runs out.
   Both sides at flex: 1 1 0 / min-width: 0 let the brand collapse to nothing
   and the buttons spill left over "SCOUT BETA". */
@media (max-width: 640px) {
  .site-bar__start {
    flex: 0 0 auto;
  }

  .site-bar__end {
    flex: 1 1 auto;
    flex-wrap: wrap;
    row-gap: 0.35rem;
    column-gap: 0.75rem;
  }
}

/* /check-email after a trade-alert signup. */
.check-email__address {
  color: var(--text);
  word-break: break-all;
}

.check-email__details {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.85rem;
}

.check-email__details div {
  display: flex;
  gap: 0.75rem;
}

.check-email__details dt {
  flex: 0 0 4rem;
  color: var(--muted);
}

.check-email__details dd {
  margin: 0;
  word-break: break-word;
}