/* Search Trend Analysis. Every class here starts with st- so it never collides with the shared stylesheets. */
.st-app .panel { margin-top: 14px; }
.st-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; min-width: 0; }
.st-row:first-child { margin-top: 0; }
.st-row[hidden] { display: none; }
.st-row .field { min-width: 0; }
.st-grow { flex: 1 1 260px; }
.st-filterrow { align-items: center; }
.st-filterlabel { font-weight: 600; color: var(--ink-soft, var(--ink)); }
.st-fval input, .st-fval select { min-width: 220px; max-width: 100%; }
.st-row select, .st-row input[type="text"], .st-row input[type="number"], .st-row input[type="date"] { max-width: 100%; }
.st-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; }
.st-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.st-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; }
.st-chip b { font-weight: 700; }
.st-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.st-chip.dropped b { color: var(--can-fg); }
.st-chip.improved b, .st-chip.new b { color: var(--cov-fg); }
.st-tools { align-items: center; }
.st-tools .pd-export { margin: 0; }
.st-scroll { margin-top: 12px; max-height: 70vh; max-height: max(70vh, 520px); }
.st-table { width: 100%; border-collapse: collapse; }
.st-table th, .st-table td { white-space: nowrap; vertical-align: middle; }
.st-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.st-table td.first { white-space: normal; min-width: 220px; max-width: 420px; overflow-wrap: anywhere; font-weight: 500; }
.st-table td svg { vertical-align: middle; }
.st-spark { overflow: visible; }
.st-line { stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.st-dot { fill: var(--accent); }
.st-more { display: flex; gap: 10px; margin-top: 12px; }
.st-more:empty { display: none; }

@media (max-width: 1100px) {
  .st-scroll { max-height: none; overflow: visible; }
  .st-table thead th { position: static; }
  .st-table td { white-space: normal; }
}

/* A one-column grid must be minmax(0, 1fr), or the wide table would widen the whole page. */
.st-app .panel { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.st-app .panel > * { min-width: 0; }
#st-table { min-width: 0; max-width: 100%; }

/* What to show */
.st-shows { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.st-show { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; }

/* The reading of the drop, and the totals */
.st-verdict { --bar: var(--line); background: var(--surface); border-radius: 12px; padding: 12px 16px; margin-top: 14px; }
.st-verdict.bad { --bar: var(--can-fg); }
.st-verdict.good { --bar: var(--cov-fg); }
.st-verdict p { margin: 4px 0 0; max-width: 110ch; }
.st-vtitle { font-weight: 700; font-size: 1.05rem; }
.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; margin-top: 10px; }
.st-tile { display: grid; gap: 2px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 14px; }
.st-tile span { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.st-tile b { font-size: 1.5rem; }
.st-tile small { color: var(--muted); }

/* Presentation style: the look of a slide, centred numbers with a visible grid */
.st-pres .st-table { font-size: .95rem; }
.st-pres .st-table th { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--ink); text-align: center; white-space: normal; min-width: 84px; background: var(--surface-2); border: 1px solid var(--line); }
.st-pres .st-table th .th-sort { text-align: center; width: 100%; font-weight: 700; }
.st-pres .st-table td { text-align: center; border: 1px solid var(--line); padding: 10px 8px; }
.st-pres .st-table td.num { text-align: center; }
.st-pres .st-table td.first { text-align: center; font-weight: 600; }
.st-pres .st-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.st-pres .st-table td svg { display: block; margin: 0 auto; }
@media (max-width: 1100px) { .st-pres .st-table td { text-align: left; border: 0; border-bottom: 1px solid var(--line); } .st-pres .st-table th { border: 0; } }
.st-scroll.st-pres { max-height: none; }
.st-pres .st-table th { min-width: 104px; }
.st-pres .st-table th:first-child { min-width: 200px; }
.wrap.st-app { max-width: 1800px; }
.st-pres .st-table th { min-width: 86px; padding: 10px 6px; }
.st-pres .st-table td { padding: 10px 6px; }
.st-pres .st-table th:first-child { min-width: 190px; }

.st-cause { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--surface-2); }
.st-cause.demand { background: var(--gap-bg); color: var(--gap-fg); }
.st-cause.ranking { background: var(--can-bg); color: var(--can-fg); }
.st-cause.ctr { background: var(--mis-bg); color: var(--mis-fg); }
.st-cause.lost { background: var(--can-bg); color: var(--can-fg); }
.st-cause.new, .st-cause.none { background: var(--cov-bg); color: var(--cov-fg); }
.st-source { margin-top: 12px; max-width: 120ch; }

@media (max-width: 1100px) {
  .st-table td svg { max-width: 100%; height: auto; }
  .st-table td { min-width: 0; overflow-wrap: anywhere; }
  .st-show { font-size: .85rem; }
  .st-tools .pd-export { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .st-row > .field, .st-row > .btn { flex: 1 1 100%; }
  .st-fval input, .st-fval select { min-width: 0; width: 100%; }
  .st-filterrow > * { max-width: 100%; }
}

@media (max-width: 1100px) {
  .st-table td.first, .st-table td.st-trendcell { grid-column: 1 / -1; }
  .st-table td.first { font-size: 1.05rem; text-align: left; }
  .st-table td.first::before { display: none; }
  .st-pres .st-table td.first { text-align: left; }
}

/* Sections of the form */
.st-sub { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.st-switch { align-self: flex-end; }
.st-app .combo { width: 100%; }