/* /analysis/ — hand-rolled inline SVG, no charting library.
 *
 * Colour discipline, from the dataviz method and non-negotiable here:
 *   - 23 sectors and 60 tags are NEVER encoded by colour. Position and length
 *     only. The categorical cliff sits between 5 and 6 categories; we have ten
 *     times that, so hue would be decoration pretending to be information.
 *   - Hue is reserved for the six focus industries in the sector chart. Every
 *     other bar is one neutral tone.
 *   - The matrix is ONE hue, light to dark, quantile-binned. Never a rainbow.
 *
 * Label text scales through --an-fs, driven by a single ResizeObserver, so the
 * SVG never re-renders on resize. SVG is resolution-independent: no DPR maths. */

.an-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: var(--rule) solid var(--line);
  margin: 0 0 1.2rem;
}
.an-tile { background: var(--paper); padding: 0.85rem 0.95rem 0.95rem; }
.an-k {
  margin: 0 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.an-v {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink);
}
.an-s { margin: 0.3rem 0 0; font-size: 0.74rem; color: var(--muted); line-height: 1.4; }

.an-window {
  margin: 0 0 1.6rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--lede);
  border-left: 2px solid var(--line);
  padding-left: 0.8rem;
}

/* ---- filters: one row above the charts -------------------------------- */
.an-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.1rem;
  padding: 0.85rem 0 1rem;
  border-top: var(--rule) solid var(--line);
  border-bottom: var(--rule) solid var(--line);
  margin-bottom: 1.1rem;
}
.an-f { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.an-f label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.an-f select {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.25rem 0.35rem;
  border: var(--rule) solid var(--line);
  background: var(--panel);
  color: var(--ink);
  max-width: 13rem;
}
.an-f-window { flex: 1 1 17rem; }
.an-f-window input[type="range"] { width: 100%; accent-color: var(--rust); }
.an-f-window output {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--lede);
}
.an-clear {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
  border: var(--rule) solid var(--rust);
  background: none;
  color: var(--rust);
  cursor: pointer;
}
.an-clear[hidden] { display: none; }

.an-result {
  margin: 0 0 1.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--lede);
}

/* ---- charts ------------------------------------------------------------ */
.an-chart { margin: 0 0 2.2rem; }
.an-chart h2 {
  margin: 0 0 0.15rem;
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking);
  font-size: 1.2rem;
}
.an-note { margin: 0 0 0.7rem; font-size: 0.76rem; color: var(--muted); line-height: 1.5; }
.an-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.an-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Charts with an intrinsic size keep it. Stretching one to the column width
   scales its type by the same factor, which is how the calendar's month markers
   ended up bigger than the page heading. */
.an-chart svg.an-svg-fixed { width: auto; height: auto; max-width: 100%; }
#an-matrix-plot { overflow-x: auto; }

/* One custom property, one ResizeObserver. Re-rendering the SVG on every resize
   frame to restyle text would be the expensive way to do this. */
.an-chart { --an-fs: 10.5px; }
.an-chart svg text {
  font-family: var(--mono);
  font-size: var(--an-fs);
  fill: var(--muted);
}
.an-chart svg text.an-val { fill: var(--lede); }
.an-chart svg text.an-cap {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.an-chart svg .an-bar { fill: var(--muted); }
.an-chart svg .an-bar.is-focus { fill: var(--rust); }
.an-chart svg .an-hit { fill: transparent; cursor: pointer; }
.an-chart svg .an-row { transition: opacity 150ms ease; }
.an-chart svg .an-row.is-dim { opacity: 0.22; }
.an-chart svg .an-rule { stroke: var(--line); stroke-width: 1; }
.an-chart svg .an-cell { transition: opacity 150ms ease; }
.an-chart svg .an-cell.is-dim { opacity: 0.22; }
/* Structurally impossible is not the palest step: a dashed hairline says "this
   pair cannot exist", where a pale fill says "this pair happens to be zero". */
.an-chart svg .an-void {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
.an-chart svg .an-focusable:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .an-chart svg .an-row, .an-chart svg .an-cell { transition: none; }
}

.an-legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.55rem 0 0;
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--muted);
}
.an-legend i { width: 15px; height: 10px; display: inline-block; }

.an-matrix-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}
.an-seg { display: inline-flex; border: var(--rule) solid var(--line); }
.an-seg button {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 0.22rem 0.55rem;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.an-seg button.is-on { background: var(--rust); color: var(--paper); }

/* Shown only below the breakpoint, by CSS alone: an [hidden] attribute here
   could not be undone by the media query that is supposed to reveal it. */
.an-matrix-list { margin-top: 0.4rem; display: none; }

.an-tip {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  padding: 0.35rem 0.5rem;
  border: var(--rule) solid var(--line);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
}
.an-tip[hidden] { display: none; }

/* ---- tables: always present, with or without JS ------------------------ */
.an-toggle-wrap { margin: 0 0 1rem; }
.an-toggle {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
  border: var(--rule) solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.an-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.an-table caption { text-align: left; }
.an-table th, .an-table td {
  text-align: right;
  padding: 0.3rem 0.5rem;
  border-bottom: var(--rule) solid var(--line);
}
.an-table th[scope="row"], .an-table thead th:first-child { text-align: left; }
.an-table thead th {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.an-table td { font-family: var(--mono); font-size: 0.78rem; color: var(--lede); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Below the tablet breakpoint the matrix is REPLACED by a sorted sector list.
   A 400-cell grid scrolled sideways has touch targets far under 44px and is
   unreadable; a list of the same numbers is not a downgrade, it is the same
   data in a form that fits. */
@media (max-width: 860px) {
  .an-pair { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 760px) {
  #an-matrix-plot { display: none; }
  .an-matrix-list { display: block; }
  .an-f select { max-width: none; width: 100%; }
  .an-f { flex: 1 1 100%; }
}