/* Fanout's own styles (spec §12).
 *
 * main.css is a read-only copy of the site's stylesheet and provides the
 * chrome, the type scale and the colours; everything here is what this tool
 * adds and nothing the site already has. Phone width is a hard requirement:
 * no horizontal page scroll, and the two wide tables scroll inside their own
 * container instead.
 */

:root {
  --fanout-accent: #f05a28;
  --fanout-ink-faint: rgba(23, 19, 15, 0.62);
  --fanout-line: rgba(23, 19, 15, 0.14);
  --fanout-line-soft: rgba(23, 19, 15, 0.08);
  --fanout-surface: #fffaf5;
  --fanout-gap: #b3261e;

  /* One hue per sub-query type, used by the pills, the chips and the bar so
     a reader learns the colour once. */
  --t-reformulation: #3f6cd6;
  --t-related: #1f9d72;
  --t-implicit: #8a63d2;
  --t-comparative: #d2762b;
  --t-entity_expansion: #0f8fa8;
  --t-personalized: #c0417a;
}

/* --- banners -------------------------------------------------------------- */
.fanout-banner {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.6rem;
  background: var(--fanout-surface);
  border: 1px solid var(--fanout-line);
  font-size: 0.95rem;
}
.fanout-banner.is-error {
  border-color: rgba(179, 38, 30, 0.35);
  background: rgba(179, 38, 30, 0.06);
}
.fanout-example {
  margin: 0 0 1.25rem;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--fanout-accent);
  background: var(--fanout-surface);
  font-size: 0.95rem;
}

/* --- run bar -------------------------------------------------------------- */
/* The Run bar (revised 2026-11-08).
 *
 * Was six fixed columns - the five inputs plus Turnstile plus the button -
 * which never wrapped above the phone breakpoint. At 1500px that left the
 * market select about 110px wide, so "United States" rendered as "United
 * Stat", the context placeholder was clipped, and the surface buttons were
 * narrow enough that BOTH their lines wrapped: "AI Overview" broke after "AI"
 * and "10-14 queries" after "10-", which is what read as "Overview10-".
 *
 * Now: the inputs share a wrapping track and the submit row spans the full
 * width on a line of its own, so nothing competes with the inputs for space.
 */
.fanout-runbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 1.2rem;
  align-items: end;
  margin: 2rem 0 0.75rem;
}
/* The two that need more than a thirteenth of the row to read properly: the
   query is the main input, and the surface holds two stacked labels. */
.fanout-runbar-query,
.fanout-runbar-surface {
  grid-column: span 2;
}
/* Turnstile and the button, together, on their own line. Together because as
   two grid children they each took a column away from the inputs. */
.fanout-runbar-submit {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
/* At the widest sizes, name the five columns rather than letting auto-fit
   decide: it would fit six 13rem tracks and leave the query input sharing a
   line with an empty one. */
@media (min-width: 1180px) {
  .fanout-runbar {
    grid-template-columns: 1.8fr 1.6fr 1fr 1.1fr 1.4fr;
  }
  .fanout-runbar-query,
  .fanout-runbar-surface {
    grid-column: auto;
  }
}
/* A select sized by its longest option, not by its share of the row.
   "United States" is the longest in MARKETS and it has to fit. */
.fanout-runbar-market select {
  min-width: 9rem;
}
/* Grid children default to min-width:auto, which lets a long placeholder push
   a column wider than its track instead of being clipped inside it. */
.fanout-runbar .form-row {
  min-width: 0;
}
.fanout-runbar > * {
  min-width: 0;
}
.fanout-runbar .form-row {
  margin: 0;
}
.fanout-runbar label,
.fanout-runbar legend {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}
.fanout-runbar input[type='text'],
.fanout-runbar input[type='number'],
.fanout-runbar select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--fanout-line);
  border-radius: 0.6rem;
  font: inherit;
  background: #fff;
}
.fanout-runbar fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.fanout-hint {
  font-weight: 400;
  color: var(--fanout-ink-faint);
  font-size: 0.86rem;
}

/* The surface switch: two radios that look like one control. */
.fanout-segmented {
  display: flex;
  gap: 0.4rem;
  /* Stack the two buttons rather than squeeze them when the column is narrow:
     two unreadable segments side by side is worse than two readable ones
     above each other. */
  flex-wrap: wrap;
}
/* Descendant selector, not `.fanout-segment` alone, and this is load-bearing.
 *
 * A segment IS a <label>, and main.css carries TWO rules that blockify it:
 * `.form-row label` at (0,1,1) and `body.light-page .form-row label` at
 * (0,2,2). The second is the one that matters - it beat both `.fanout-segment`
 * (0,1,0) and `.fanout-segmented .fanout-segment` (0,2,0), so `display: grid`
 * never applied and the two spans stayed inline siblings in a block. That is
 * why "AI Overview" and "10-14 queries" sat on one line and read as
 * "AI Overview10-14 queries". Three classes (0,3,0) clears (0,2,2).
 *
 * Checked against the live page with getComputedStyle, not inferred: the rule
 * was present and losing, which no amount of reading the file reveals.
 */
.fanout-runbar .fanout-segmented .fanout-segment {
  /* 7rem basis: enough for "10-14 queries" plus padding, and narrow enough
     that both segments fit side by side in the Surface column at 1500px. */
  flex: 1 1 7rem;
  display: grid;
  /* Named explicitly so the range is on its own line by construction, not by
     the accident of being the second grid child. */
  grid-template-rows: auto auto;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--fanout-line);
  border-radius: 0.6rem;
  cursor: pointer;
  background: #fff;
  margin: 0;
}
.fanout-runbar .fanout-segmented .fanout-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fanout-runbar .fanout-segmented .fanout-segment:has(input:checked) {
  border-color: var(--fanout-accent);
  box-shadow: inset 0 0 0 1px var(--fanout-accent);
}
/* Neither line may wrap. "AI Overview" breaking after "AI" and "10-14
   queries" breaking after "10-" is what produced "Overview10-" on the run
   that prompted this. If there is not room for the words, the control stacks
   (see flex-wrap above) rather than breaking them. */
.fanout-segment-label {
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}
.fanout-segment-range {
  font-size: 0.8rem;
  color: var(--fanout-ink-faint);
  white-space: nowrap;
}
.fanout-runbar .fanout-segmented .fanout-segment:has(input:focus-visible) {
  outline: 2px solid var(--fanout-accent);
  outline-offset: 2px;
}

.fanout-run,
.fanout-btn {
  display: inline-block;
  background: var(--fanout-accent);
  color: #fff;
  border: none;
  border-radius: 0.7rem;
  padding: 0.8rem 1.4rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
}
.fanout-btn {
  background: #fff;
  color: inherit;
  border: 1px solid var(--fanout-line);
  font-weight: 600;
  padding: 0.6rem 1rem;
}
.fanout-run:hover {
  background: #e2551f;
}
.fanout-btn:hover {
  border-color: var(--fanout-accent);
}

/* --- steps ---------------------------------------------------------------- */
.fanout-h2 {
  font-size: 1.6rem;
  margin: 2rem 0 0.75rem;
}
.fanout-h3 {
  font-size: 1.1rem;
  margin: 0 0 0.25rem;
}
.fanout-sub,
.fanout-note,
.fanout-small {
  color: var(--fanout-ink-faint);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}
.fanout-steps {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.fanout-step {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.6rem;
  align-items: start;
}
.fanout-step-mark {
  font-weight: 700;
  color: var(--fanout-ink-faint);
}
.fanout-step.is-done .fanout-step-mark {
  color: #1f9d72;
}
.fanout-step.is-warning .fanout-step-mark {
  color: #d2762b;
}
.fanout-step.is-error .fanout-step-mark {
  color: var(--fanout-gap);
}
.fanout-step.is-running .fanout-step-mark {
  color: var(--fanout-accent);
}
.fanout-step-body {
  display: grid;
  gap: 0.15rem;
}
.fanout-step-label {
  font-weight: 600;
}
.fanout-step-detail,
.fanout-step-msg {
  font-size: 0.88rem;
  color: var(--fanout-ink-faint);
}
.fanout-step-msg {
  color: #a8571a;
}
.fanout-working {
  color: var(--fanout-ink-faint);
  font-size: 0.9rem;
}

/* --- tiles ---------------------------------------------------------------- */
.fanout-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.fanout-tile {
  background: var(--fanout-surface);
  border: 1px solid var(--fanout-line-soft);
  border-radius: 0.8rem;
  padding: 1rem;
  display: grid;
  gap: 0.2rem;
}
.fanout-tile strong {
  font-size: 1.5rem;
  line-height: 1.1;
  word-break: break-word;
}
.fanout-tile span {
  font-size: 0.85rem;
  color: var(--fanout-ink-faint);
}
.fanout-why {
  margin: 0 0 1rem;
  font-size: 0.95rem;
}
.fanout-norank {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  border-radius: 0.6rem;
  background: rgba(63, 108, 214, 0.08);
  font-size: 0.95rem;
}

/* --- type distribution and filters ---------------------------------------- */
.fanout-bar {
  display: flex;
  height: 0.6rem;
  border-radius: 0.3rem;
  overflow: hidden;
  background: var(--fanout-line-soft);
  margin-bottom: 0.75rem;
}
.fanout-bar-part {
  display: block;
  height: 100%;
}
.fanout-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 1rem;
}
.fanout-chip {
  border: 1px solid var(--fanout-line);
  background: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.fanout-chip:disabled {
  opacity: 0.45;
  cursor: default;
}
.fanout-chip.is-on {
  border-color: var(--fanout-accent);
  background: rgba(240, 90, 40, 0.08);
  font-weight: 600;
}
.fanout-chip-n {
  color: var(--fanout-ink-faint);
}
.fanout-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--fanout-ink-faint);
}
.fanout-toggle input[type='number'] {
  width: 5.5rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--fanout-line);
  border-radius: 0.4rem;
  font: inherit;
}

/* Colour per type, shared by bar, chip and pill. */
.fanout-bar-part.is-reformulation,
.fanout-pill.is-reformulation {
  background: var(--t-reformulation);
}
.fanout-bar-part.is-related,
.fanout-pill.is-related {
  background: var(--t-related);
}
.fanout-bar-part.is-implicit,
.fanout-pill.is-implicit {
  background: var(--t-implicit);
}
.fanout-bar-part.is-comparative,
.fanout-pill.is-comparative {
  background: var(--t-comparative);
}
.fanout-bar-part.is-entity_expansion,
.fanout-pill.is-entity_expansion {
  background: var(--t-entity_expansion);
}
.fanout-bar-part.is-personalized,
.fanout-pill.is-personalized {
  background: var(--t-personalized);
}
.fanout-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.fanout-pill.is-seed {
  background: #55504b;
}

/* --- tables --------------------------------------------------------------- */
.fanout-tablewrap {
  overflow-x: auto;
  margin-bottom: 2rem;
}
.fanout-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.fanout-table th,
.fanout-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--fanout-line-soft);
  vertical-align: top;
}
.fanout-table th {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fanout-ink-faint);
  white-space: nowrap;
}
.fanout-num {
  text-align: right;
  white-space: nowrap;
}
.fanout-row.is-seed {
  background: var(--fanout-surface);
}
.fanout-qbtn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px dotted var(--fanout-line);
}
/* The head term under a query: what its volume figure belongs to (§3). */
.fanout-head {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--fanout-ink-faint);
}
/* Added 2026-11-08: a personalized row built on a context nobody gave (§3). */
.fanout-tag {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.05rem 0.34rem;
  border: 1px solid var(--fanout-line);
  border-radius: 3px;
  font-size: 0.7rem;
  color: var(--fanout-ink-faint);
  cursor: help;
}
/* The top result: text, not a link (§12, revised 2026-11-08). The title
   carries the result's own title, so no underline and no link colour - both
   of which previously came from main.css and brought a focus ring with
   them. text-decoration is stated rather than assumed because some browsers
   underline any element carrying a title. */
.fanout-top {
  color: inherit;
  text-decoration: none;
  cursor: help;
}
/* Both attempts at this search failed - distinct from "--", which means there
   was simply nothing to show (§8). */
.fanout-failed {
  color: var(--fanout-ink-faint);
  font-style: italic;
  white-space: nowrap;
  cursor: help;
}
/* "No clear winner" is a sentence, not a domain, so it does not take the
   tile's oversized domain treatment. */
.fanout-tile-flat {
  font-size: 1rem;
  font-weight: 600;
}
/* Links inside the report tables.
 *
 * fanout.css defined NO anchor rules at all, so every link in these tables
 * inherited main.css's link colour and whatever focus ring the browser chose
 * to draw over it - which on Firefox is `1px dotted currentColor`, i.e. a red
 * dotted box in the link's own orange. That is the "red dotted outline".
 *
 * Replaced with the site's own focus idiom, the one the Run bar's segmented
 * control and coreaex.com's /tools/ page both use: a solid accent outline with
 * an offset. :focus-visible only, so a mouse click does not leave a ring
 * behind, and the bare :focus rule clears the browser default underneath.
 */
.fanout-table a:focus,
.fanout-url a:focus {
  outline: none;
}
.fanout-table a:focus-visible,
.fanout-url a:focus-visible {
  outline: 2px solid var(--fanout-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* The hosts behind a grouped site in "Who wins" (§5, added 2026-11-08).
   Grouping must not hide which property ranked: support.google.com and
   sites.google.com are both Google and are not the same thing. */
.fanout-hosts {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.74rem;
  color: var(--fanout-ink-faint);
}
/* A page in the top-pages table whose URL Google withheld: the title is the
   row, not a stand-in for a link (§5, revised 2026-11-08). */
.fanout-pagetitle {
  display: block;
}
.fanout-pagesite {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.74rem;
  color: var(--fanout-ink-faint);
}
/* The brand line above the H1 (revised 2026-11-08). The brand and the "Free
   tool" chip sit on one row, so demoting "Fanout" out of the H1 does not cost
   a line of vertical space. */
.fanout-brandline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.4rem;
}
.fanout-brand {
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--fanout-accent);
}
/* The denominator under a tile figure: how much of the table it came from
   (§12, revised 2026-11-08). */
.fanout-tile-note {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  color: var(--fanout-ink-faint);
}
.fanout-th-note {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.fanout-reasoning {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--fanout-ink-faint);
  max-width: 44ch;
}
.fanout-intent {
  color: var(--fanout-ink-faint);
  font-size: 0.88rem;
}
.fanout-gap {
  color: var(--fanout-gap);
  font-weight: 600;
}
.fanout-url a {
  word-break: break-all;
  font-size: 0.85rem;
}
.fanout-standings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

/* --- actions and the email box -------------------------------------------- */
/* Copy queries, Download CSV and Simulate again on one row, with Simulate
   again's Turnstile widget on the line below it (revised 2026-11-08).
 *
 * align-items: start, not center: the Simulate again form is two rows tall
 * because it carries the widget, and centring made the other two buttons
 * drift down to its middle. */
.fanout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
/* The Simulate again form: button on the row, widget underneath.
 *
 * Grid areas rather than DOM order, so the widget can stay before the button
 * in the markup - a challenge precedes the submit it guards, and that is the
 * tab order. Grid moves boxes, not focus.
 *
 * This replaced `display: inline`, which could not contain the widget at all:
 * a 300x65 block inside an inline box is what made it float above the button. */
.fanout-resim {
  display: grid;
  grid-template-areas: 'button' 'widget';
  justify-items: start;
  gap: 0.6rem;
}
.fanout-resim > .fanout-btn {
  grid-area: button;
}
.fanout-resim > .cf-turnstile {
  grid-area: widget;
}
.fanout-copied {
  color: #1f9d72;
  font-size: 0.9rem;
}
.fanout-email {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem;
  max-width: 34rem;
}
.fanout-email label {
  font-weight: 600;
}
.fanout-email input {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--fanout-line);
  border-radius: 0.6rem;
  font: inherit;
}
.fanout-email .fanout-btn {
  justify-self: start;
}
.fanout-credit {
  margin-top: 2rem;
  font-size: 0.86rem;
  color: var(--fanout-ink-faint);
}

/* --- phone ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .fanout-runbar {
    grid-template-columns: 1fr;
  }
  /* `span 2` in a one-column grid does not clamp - it creates a second,
     implicit column and the row goes back to being too narrow. Reset both. */
  .fanout-runbar-query,
  .fanout-runbar-surface {
    grid-column: 1;
  }
  .fanout-runbar-submit {
    /* Stacked, and the button full width: at this size it is the only thing
       on its line anyway. */
    flex-direction: column;
    align-items: stretch;
  }
  .fanout-runbar-submit .fanout-run {
    width: 100%;
  }
  .fanout-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fanout-standings {
    grid-template-columns: 1fr;
  }
  .fanout-h2 {
    font-size: 1.35rem;
  }
}

@media (max-width: 520px) {
  .fanout-tiles {
    grid-template-columns: 1fr;
  }
}