/* What Design Titles Actually Mean — the four altitudes. Golden Hour re-skin of
   the source /titles tool. Scoped under .ti. Shared chrome (intro, seg tabs,
   panel type, facts, lists, footnote) comes from resources.css; this owns the
   chart, the four warm curve tints, the panel grid, and the no-JS-safe states.

   Golden Hour rules honored: honey/--teal is structural only (axis, guides,
   contours) and never text; --clay is the text-safe accent (eyebrow, question,
   tab-selected via res-seg); --brick carries red-flag emphasis. The four curves
   are warm ramp variants (honey / clay / brick / amber) so they stay in family
   while reading as four distinct roles. */

.ti {
  /* Behind the chart is the figure card (white). The unselected-label halo has
     to knock the column guide out against exactly this, so it references the
     same value. */
  --ti-chart-bg: var(--card);
  /* Structural ink for baselines / curve outlines — warm-neutral hairline. */
  --ti-contour: rgba(22, 20, 18, 0.30);
}

/* ─── The four curve tints (warm ramp) ─────────────────────────────────────
   --c is the fill; --on is the label color that reads on that fill. */
.ti-curve[data-curve="ui"]       { --c: var(--honey); --on: var(--paper); }
.ti-curve[data-curve="ux"]       { --c: var(--clay);  --on: var(--paper); }
.ti-curve[data-curve="product"]  { --c: var(--brick); --on: var(--paper); }
.ti-curve[data-curve="business"] { --c: var(--amber); --on: var(--ink); }

/* ─── Chart figure ────────────────────────────────────────────────────────── */
.ti-figure {
  margin: clamp(30px, 5vw, 44px) 0 0;
  padding: clamp(16px, 2.2vw, 26px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}

/* The wrap holds a fixed right-edge fade; the map inside it scrolls. */
.ti-map-wrap { position: relative; min-width: 0; }
.ti-map { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

.ti-map-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  background: linear-gradient(to left, var(--ti-chart-bg), transparent);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}
@media (max-width: 800px) { .ti-map-wrap::after { opacity: 1; } }

.ti-map svg { display: block; width: 100%; min-width: 720px; height: auto; }

/* Column guides — dotted, quiet, structural (honey). */
.ti-col-line {
  stroke: var(--honey);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
  opacity: 0.45;
}
.ti-col-name,
.ti-axis-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--muted);
}

/* Baseline + axis arrowhead — structural. */
.ti-baseline { stroke: var(--ti-contour); stroke-width: 1; }
.ti-axis-arrow { fill: var(--honey); }

/* Curve fills. Unselected keep their outline but drop the fill, so all four
   silhouettes stay comparable — the whole argument of the chart. */
.ti-area {
  fill: var(--c);
  stroke: var(--ti-contour);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  transition: fill-opacity 180ms ease;
}
.ti-curve[data-selected="false"] .ti-area { fill-opacity: 0.12; }
.ti-curve[data-selected="false"]:hover .ti-area { fill-opacity: 0.28; }
.ti-curve[data-selected="true"] .ti-area { fill-opacity: 1; }

/* The title sits inside its own curve at the peak, doubling as the peak marker.
   paint-order lays a fill-colored stroke behind the glyphs to knock out the
   column guide that runs straight through the word. */
.ti-rowname {
  font-family: var(--font-serif);
  font-size: 17px;
  fill: var(--on);
  paint-order: stroke;
  stroke: var(--c);
  stroke-width: 5;
  stroke-linejoin: round;
}
/* Unselected: label reads against the page, and its halo becomes the faint fill
   blended over the card so it still knocks out the guide. */
.ti-curve[data-selected="false"] .ti-rowname {
  fill: var(--muted);
  stroke: color-mix(in srgb, var(--c) 12%, var(--ti-chart-bg));
}

/* A click shortcut, not the control — never focusable (SVG is role="img"). */
.ti-curve { cursor: pointer; }
.ti-curve:hover .ti-rowname { text-decoration: underline; text-underline-offset: 4px; }

/* ─── Tab strip ─────────────────────────────────────────────────────────────
   Uses the shared .res-seg segmented look; selected state comes from
   resources.css [aria-selected="true"]. This only spaces it and, for the
   text-safe accent, tints the selected label clay. */
.ti-tabs {
  margin: clamp(20px, 3vw, 30px) 0 0;
}
.ti-tabs[role="tablist"] button[aria-selected="true"] { color: var(--clay); }
.ti-tabs[role="tablist"] button:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}

/* ─── Panels ────────────────────────────────────────────────────────────────
   Only the active panel is in layout (JS on); the card sizes to it. */
.ti-panels { margin-top: clamp(18px, 2.4vw, 26px); }
.ti-panel { display: none; container-type: inline-size; container-name: tipanel; }
.ti-panel[data-active="true"] {
  display: block;
  animation: ti-panel-in 200ms ease;
}
@keyframes ti-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ti-panel[data-active="true"] { animation: none; }
}

/* Three columns: who it is · what earns it · how you tell it's real. */
.ti-panel-inner {
  display: grid;
  grid-template-columns: minmax(190px, 240px) 1.15fr 1fr;
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
}
.ti-judge { display: flex; flex-direction: column; gap: 22px; }

@container tipanel (max-width: 860px) {
  .ti-panel-inner { grid-template-columns: 1.15fr 1fr; }
  .ti-panel-head { grid-column: 1 / -1; }
}
@container tipanel (max-width: 560px) {
  .ti-panel-inner { grid-template-columns: 1fr; }
  .ti-panel-head { grid-column: auto; }
}

/* Panel head bits. */
.ti-question {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--clay);
  margin-top: 6px;
}
.res-panel .ti-question + .res-panel-lead { margin-top: 8px; color: var(--muted); }
.ti-arc {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  gap: 12px;
}
.ti-arc dt.res-fact-label { color: var(--muted); }
.ti-arc dd.res-fact-body { color: var(--ink); }

/* Block labels above the look-for / red-flags lists. */
.ti-block-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.ti-block-label--flag { color: var(--brick); }

/* The tell — a third labelled block; clay marks it as the one that matters. */
.ti-tell h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay);
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.ti-tell p {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}

/* ─── Coda ──────────────────────────────────────────────────────────────── */
.ti-coda {
  max-width: 66ch;
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--border);
}
.ti-coda p {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--ink);
}