/* Hand-written companion to triage.css.
 *
 * triage.css is generated from the source artifact and carries a "do not
 * hand-edit" banner, because every regeneration overwrites it. Everything the
 * report needs that the artifact did not ship lives here instead: the page
 * chrome around it, the chart's interaction layer, and the narrow-screen
 * adjustments the original never needed.
 */

/* ── breadcrumb above the report ────────────────────────────────────── */
.tri-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 2.2rem 0 0;
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--dim);
}
.tri-crumbs a { color: var(--muted); }
.tri-crumbs a:hover { color: var(--accent); }
.tri-crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--dim); }
.tri-crumbs [aria-current] { color: var(--fg); }

/* ── section jump links ─────────────────────────────────────────────── */
/* The site header is fixed, so an anchor scrolled to the top of the viewport
   lands underneath it. WCAG 2.4.11. */
.triage section[id] { scroll-margin-top: 6.5rem; }

/* ── chart sizing ───────────────────────────────────────────────────── */
/* The host was sized for a canvas renderer that filled it exactly. An SVG
   scales to its own aspect ratio, so a fixed height leaves it overflowing
   onto the note beneath. */
.triage #tschart { height: auto; min-height: 0; position: relative; }
.triage .tsvg { display: block; width: 100%; height: auto; overflow: visible; }

/* ── chart interaction ──────────────────────────────────────────────── */
/* Lines draw in on first paint and again whenever the reader changes interval
   or category, so a redraw reads as a transition rather than a swap.
   `is-drawn` is toggled by the script. */
.triage .tsvg .tsline { stroke-dasharray: 3000; stroke-dashoffset: 3000; }
.triage .tsvg.is-drawn .tsline {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.triage .tsvg .tsarea { opacity: 0; }
.triage .tsvg.is-drawn .tsarea { opacity: 1; transition: opacity 0.7s ease 0.35s; }

.triage .tshover { opacity: 0; transition: opacity 0.12s ease; pointer-events: none; }
.triage .tsvg.is-hovering .tshover { opacity: 1; }
.triage .tshair { stroke: var(--border-hi); stroke-width: 1; }
.triage .tsmk { fill: var(--bg); stroke-width: 2.2; }
.triage .tsmk-v { stroke: var(--at-blue); }
.triage .tsmk-r { stroke: var(--at-yellow); }
.triage .tsmk-c { stroke: var(--at-cyan); }
.triage .tsvg { cursor: crosshair; }

/* The readout. A positioned DOM node rather than an SVG label: it needs to
   wrap, and text wrapping inside foreignObject is not dependable. */
.triage .tstip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  min-width: 168px;
  background: var(--bg-raised-2);
  border: 1px solid var(--border-hi);
  padding: 0.6rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.75;
  color: var(--fg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.triage .tstip .tskey-label { color: var(--accent); display: block; margin-bottom: 0.3rem; }
.triage .tstip b { color: var(--fg-hi); font-weight: 500; }
.triage .tstip .up { color: var(--good); }
.triage .tstip .down { color: var(--crit); }
.triage .tstip-first { color: var(--dim); margin-top: 0.2rem; }

/* ── search demand table ────────────────────────────────────────────── */
.triage .kwdemand { white-space: nowrap; }
.triage .kwbar {
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 8px;
  margin-right: 0.5rem;
  background: var(--bg-raised-3);
  border: 1px solid var(--border);
}
.triage .kwbar-fill { display: block; height: 100%; background: var(--at-yellow); }

/* ── narrow screens ─────────────────────────────────────────────────── */
/* The report was authored for a desktop viewport. Long URLs inside <code> and
   the series toggles both run past 320px otherwise.

   Breaking mid-word is a last resort, not the default: the artifact keeps its
   data tables on one line per row and lets `.scroll` carry the overflow
   sideways, which is far easier to scan. Only below the breakpoint, where
   there is no horizontal room to give, do words break. */
.triage .scroll code { white-space: nowrap; }
.triage .tri-data td, .triage .tri-data th { white-space: nowrap; }
/* The search column is prose and may wrap; everything else is a value. */
.triage #kwtable td:first-child, .triage #kwtable th:first-child { white-space: normal; }

@media (max-width: 560px) {
  .triage code { overflow-wrap: anywhere; }
  .triage .scroll code { white-space: normal; }
  .triage .tri-data td, .triage .tri-data th { white-space: normal; }
  .triage .tsbar { gap: 0.5rem 0.6rem; }
  .triage .tslegend { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .triage .tsmetric { flex: 0 1 auto; }
  .triage .tssel { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .triage .tsvg .tsline { stroke-dashoffset: 0; }
  .triage .tsvg .tsarea { opacity: 1; }
  .triage .tsvg.is-drawn .tsline,
  .triage .tsvg.is-drawn .tsarea { transition: none; }
}

/* ── chart range control ────────────────────────────────────────────── */
/* Only shown for day-by-day across all categories, where 390 points do not
   fit legibly. A sparkline of the whole series, a lit window over the part
   being plotted, and two draggable handles. */
.tszoom {
  position: relative;
  height: 46px;
  margin: 0.7rem 0 0.2rem;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  touch-action: none;
}
.tszoom-svg { display: block; width: 100%; height: 100%; cursor: grab; }
.tszoom-svg:active { cursor: grabbing; }
.tszoom-spark { fill: var(--border); }
.tszoom-win {
  fill: rgba(47, 129, 249, 0.16);
  stroke: var(--at-blue);
  stroke-width: 1;
}
.tszoom-h {
  position: absolute;
  top: -3px;
  width: 11px;
  height: calc(100% + 6px);
  margin-left: -5px;
  padding: 0;
  background: var(--bg-raised-2);
  border: 1px solid var(--at-blue);
  cursor: ew-resize;
  touch-action: none;
}
.tszoom-h::before {
  /* Grip marks, so the handle reads as draggable rather than decorative. */
  content: "";
  position: absolute;
  inset: 35% 3px;
  border-left: 1px solid var(--at-blue);
  border-right: 1px solid var(--at-blue);
}
.tszoom-h:hover { background: var(--bg-raised-3); }
.tszoom-h:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── search demand table: room for the demand bar ───────────────────── */
/* The column holds the bar plus the largest value, right-aligned as one group.
   This client's largest is 1,113 -- five characters where the source report's
   was three -- so at the artifact's 70px bar the group filled the column and
   sat flush against the previous one.

   The fix is width, not a smaller bar alone: this page is 1220px where the
   standalone artifact had 1300, so the columns are already tighter. A narrower
   bar buys the gutter back, and a floor on the search column stops the space
   being taken from the one column holding prose.

   Kept deliberately tight: the table has to finish inside its container, or
   the last column ("Cited in AI answers") falls off the edge behind a
   horizontal scrollbar, which is worse than a narrow bar. */
.triage .kwd-pair {
  display: flex;
  /* Without this the flex box shrinks to its content and the cell's
     text-align:right pushes the whole pair over, which is the behavior being
     fixed. Filling the cell is what pins the two edges. */
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}
.triage .kwd-val { font-variant-numeric: tabular-nums; }
.triage .kwbar { width: 52px; flex: 0 0 auto; }
.triage #kwtable th:nth-child(2),
.triage #kwtable td:nth-child(2) { min-width: 132px; }

/* ── competing pages: position column ───────────────────────────────── */
/* A rank is a label, not a quantity, so it reads better centered under its
   heading than right-aligned against the page URL beside it. */
.triage #s6 table td:first-child,
.triage #s6 table th:first-child { text-align: center; }