/* Page-level styles for the standalone Moat Map page (/moat/<ticker>/).

   The moat component itself is styled by companies/css/moat_map.css; this file
   covers the page chrome around it — the hero, the analyst controls, the
   per-industry explainer and the FAQ.

   Everything here uses the same custom-property tokens as the component, so the
   page follows the viewer's light/dark preference without a [data-bs-theme]
   patch. It also uses the --moat-band property the component defines: the hero
   carries a moat-band-* class, so the page's accent is the company's own score
   band rather than a fixed brand colour.

   The saturated indigo gradient that used to open this page is gone. It was the
   loudest element on a page about a colour-coded score while carrying no data
   itself, it was the page's only hardcoded-colour block, and it forced white
   text that had to be styled separately from every other surface. What replaced
   it says something: a hero tinted by the band the company actually scored in. */

/* ── Page layout ──────────────────────────────────────────────────────────── */

.moat-detail-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.moat-hero {
  position: relative;
  overflow: hidden;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid color-mix(in oklch, var(--moat-band, var(--border)) 25%, var(--border));
  border-radius: 1rem;
  background:
    linear-gradient(160deg, color-mix(in oklch, var(--moat-band, var(--primary)) 9%, transparent), transparent 60%),
    var(--bg-light);
  box-shadow: var(--shadow-s);
}

/* A band-coloured rule along the top edge. One line of colour does the work the
   whole gradient slab used to, and unlike the slab it tracks the score. */
.moat-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--moat-band, var(--primary));
}

@media (max-width: 575.98px) {
  .moat-hero {
    padding: 1.25rem;
  }
}

.moat-hero-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.875rem;
}

.moat-hero-crumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.moat-hero-crumb a:hover {
  color: var(--text);
  text-decoration: underline;
}

.moat-hero-crumb [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.moat-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.moat-hero-identity {
  flex: 1 1 20rem;
  min-width: 0;
}

.moat-hero-title {
  font-family: 'Cabin', system-ui, -apple-system, sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 0.35rem;
}

/* The ticker is the identifier a reader scans for, but it is not the headline —
   it sits beside the name as a monospaced chip rather than competing with it. */
.moat-hero-ticker {
  display: inline-block;
  vertical-align: 0.15em;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: color-mix(in oklch, var(--border) 22%, transparent);
  border-radius: 0.4rem;
}

.moat-hero-meta {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 0.875rem;
}

.moat-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.moat-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
  border-radius: 0.4rem;
}

.moat-hero-chip i {
  font-size: 0.8125rem;
  opacity: 0.75;
}

/* ── Hero score ───────────────────────────────────────────────────────────── */

.moat-hero-score {
  flex: 0 0 auto;
  text-align: right;
}

@media (max-width: 575.98px) {
  .moat-hero-score {
    text-align: left;
  }
}

.moat-hero-score-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.moat-hero-score-value {
  font-family: 'Cabin', system-ui, -apple-system, sans-serif;
  font-size: 3.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--moat-band, var(--text));
}

.moat-hero-score-max {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.moat-hero-score-na {
  color: var(--moat-na);
}

.moat-hero-rating {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--moat-band, var(--text));
  background: color-mix(in oklch, var(--moat-band, var(--border)) 14%, transparent);
  border-radius: 0.4rem;
}

/* ── Band scale ───────────────────────────────────────────────────────────── */

/* The strip that gives the number a frame of reference. Four segments matching
   the rating thresholds, a dashed tick at the peer median, and a marker at the
   company's own score. */
.moat-hero-scale {
  margin-top: 1.5rem;
}

.moat-scale-track {
  position: relative;
  display: grid;
  grid-template-columns: 25fr 25fr 25fr 25fr;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--border) 25%, transparent);
}

.moat-scale-seg {
  height: 100%;
}

.moat-scale-seg:first-child {
  border-radius: 999px 0 0 999px;
}

.moat-scale-seg:last-child {
  border-radius: 0 999px 999px 0;
}

/* Low alpha on purpose: the strip is a backdrop for the marker, not four
   competing blocks of colour. */
.moat-scale-seg--weak {
  background: color-mix(in oklch, var(--moat-weak) 30%, transparent);
}

.moat-scale-seg--developing {
  background: color-mix(in oklch, var(--moat-developing) 30%, transparent);
}

.moat-scale-seg--moderate {
  background: color-mix(in oklch, var(--moat-moderate) 30%, transparent);
}

.moat-scale-seg--strong {
  background: color-mix(in oklch, var(--moat-strong) 30%, transparent);
}

.moat-scale-median {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 0;
  border-left: 2px dashed var(--text-muted);
  opacity: 0.65;
}

.moat-scale-marker {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--moat-band, var(--primary));
  box-shadow: 0 0 0 3px var(--bg-light), 0 1px 3px #0000004d;
}

.moat-scale-ticks {
  display: grid;
  grid-template-columns: 25fr 25fr 25fr 25fr;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The peer-median caption hangs off the left edge of the "Moderate" column,
   which begins at 50 — the same place the dashed tick sits. */
.moat-scale-ticks span {
  position: relative;
  padding-left: 0.25rem;
  border-left: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
}

.moat-scale-ticks em {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}

/* "DEVELOPING" is the longest label and does not fit a quarter of a phone-width
   track at the desktop size. Drop the uppercasing and the tracking rather than
   truncating, so all four bands stay readable. */
@media (max-width: 575.98px) {
  .moat-scale-ticks {
    font-size: 0.625rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .moat-scale-ticks em {
    font-size: 0.5625rem;
  }
}

/* ── Hero footer: peer context + actions ──────────────────────────────────── */

.moat-hero-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
}

.moat-hero-footer:empty {
  display: none;
}

.moat-peer-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

.moat-peer-context strong {
  color: var(--text);
  font-weight: 600;
}

.moat-peer-fallback {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--moat-developing);
  background: color-mix(in oklch, var(--moat-developing) 14%, transparent);
  border-radius: 0.35rem;
}

/* Outline, not solid. The page's one primary action is the upgrade CTA in the
   dimensions column; a filled button here would compete with it. */
.moat-hero-action {
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-weight: 500;
  white-space: nowrap;
}

.moat-hero-action:hover {
  color: var(--text);
  border-color: var(--moat-band, var(--primary));
  background: color-mix(in oklch, var(--moat-band, var(--primary)) 8%, var(--bg));
}

/* ── Analyst controls ─────────────────────────────────────────────────────── */

/* Authenticated-only, and secondary to everything above it: a quiet toolbar
   rather than a card with a full-width primary button in it. */
.moat-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  background: color-mix(in oklch, var(--bg-light) 60%, var(--bg));
  border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
  border-radius: 0.75rem;
}

.moat-controls-field {
  flex: 1 1 9rem;
  min-width: 0;
}

.moat-controls label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.moat-controls select {
  font-size: 0.8125rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.moat-controls-action {
  flex: 0 0 auto;
}

.moat-controls-hint {
  flex: 1 1 100%;
  order: -1;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.moat-alert {
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

/* ── Per-industry explainer ───────────────────────────────────────────────── */

.moat-explainer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.moat-explainer-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.moat-explainer-intro {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 72ch;
  margin-bottom: 2rem;
}

.moat-explainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.moat-explainer-item {
  display: flex;
  flex-direction: column;
  background: var(--bg-light);
  border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
  border-radius: 0.75rem;
  padding: 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.moat-explainer-item:hover {
  border-color: color-mix(in oklch, var(--moat-band, var(--border)) 45%, var(--border));
  box-shadow: var(--shadow-s);
}

.moat-explainer-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.moat-explainer-meta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--moat-band, var(--text-muted));
  margin-bottom: 0.75rem;
}

/* How much of the overall score this defense carries, as a bar rather than only
   as a percentage buried in the meta line. The weights differ per template and
   are the reason two companies with the same six scores can land in different
   places, so they are worth being able to compare at a glance. */
.moat-explainer-weight {
  height: 3px;
  margin-bottom: 0.875rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--border) 35%, transparent);
  overflow: hidden;
}

.moat-explainer-weight span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--moat-band, var(--text-muted));
}

.moat-explainer-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.moat-faq {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.moat-faq-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.5rem;
}

/* A rule down the left of each entry groups the question with its own answer.
   As an undifferentiated stack of headings and paragraphs the Q and the A below
   it read as one block of prose. */
.moat-faq-item {
  padding-left: 1rem;
  border-left: 2px solid color-mix(in oklch, var(--border) 45%, transparent);
}

.moat-faq-item + .moat-faq-item {
  margin-top: 1.25rem;
}

.moat-faq-question {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.moat-faq-answer {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 72ch;
  margin-bottom: 0;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .moat-explainer-item {
    transition: none;
  }
}

/* ── Page footer ──────────────────────────────────────────────────────────── */

.moat-page-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.moat-page-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.moat-page-disclaimer {
  max-width: 72ch;
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
}