/*
 * CRM Guest 360 — analytics surfaces, in the Ledger/Ivory theme.
 *
 * Every colour on these surfaces is pinned here rather than resolved through
 * the Portal's theme tokens. The data series are the Ledger ink set and the
 * slot order is what the colourblind separation was checked against: the worst
 * adjacent pair still parts by ΔE 13.6 under deuteranopia, and every mark
 * clears 3:1 against the card it is drawn on. The ground family — ivory pane,
 * near-white card, the hairlines and rules between them — is pinned for the
 * same reason the series are. It is the identity of the analytics surfaces,
 * not a coat theme.js should be able to repaint underneath them. A deliberate
 * departure from token resolution, and a safe one: the Portal is light-only.
 *
 * One deliberate exception: the KPI delta capsules take their tints from the
 * shared `--crm-sem-*` good/bad/neutral pairs, so a movement reads the same
 * here as it does on every other CRM surface.
 */

:root {
  --crm-analytics-series-1: #a67c1e;   /* ochre */
  --crm-analytics-series-2: #833a49;   /* oxblood */
  --crm-analytics-series-3: #35619c;   /* prussian */
  --crm-analytics-series-4: #2f8351;   /* laurel */
  --crm-analytics-good: #4a6b34;
  --crm-analytics-bad: #9c3a2e;
  --crm-analytics-ground: #f6f4ee;
  --crm-analytics-card: #fffdf9;
  --crm-analytics-hair: #e9e4d6;
  --crm-analytics-hair-strong: #e6e1d4;
  --crm-analytics-rule: #c6bfa9;
  --crm-analytics-ink: #221f18;
  --crm-analytics-ink-soft: #6d6552;
  --crm-analytics-ink-faint: #7d7460;
}

.crm-analytics {
  display: grid;
  gap: 18px;
}

/* The ivory pane the whole module sits on. Padding and the narrow-width
   climbdown stay with the shared directory panel; only the ground, the
   hairline and the corner are the module's own. */
.crm-analytics .crm-directory-panel {
  display: grid;
  gap: 18px;
  border: 1px solid var(--crm-analytics-hair-strong);
  border-radius: 14px;
  background: var(--crm-analytics-ground);
}

/* The shell's panel heading asks for a colour the Portal never defines, so it
   arrives as body grey in the interface sans. Inside the pane it is restated
   in the house serif — scoped here, not fixed globally, because the shell
   heading is shared with directories this restyle does not touch. */
.crm-analytics .crm-directory-heading h3 {
  color: var(--crm-analytics-ink);
  font-family: Marcellus, Georgia, serif;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* The blurb under it speaks in the italic the notes and deltas also use. */
.crm-analytics .crm-directory-heading p:last-child {
  color: var(--crm-analytics-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
}

/* Refetch holds the previous render instead of flashing a skeleton, so the
   page never jumps while a filter is being explored. */
.crm-analytics.is-refreshing .crm-analytics-kpis,
.crm-analytics.is-refreshing .crm-analytics-section {
  opacity: 0.55;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}

.crm-analytics-inline-error {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--error) 35%, var(--line));
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--error-soft);
  color: var(--error);
  font-size: 0.8rem;
  font-weight: 650;
}

/* ---------------------------------------------------------------- filters */

.crm-analytics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: flex-end;
  padding: 14px 16px;
  border: 1px solid var(--crm-analytics-hair);
  border-radius: 12px;
  background: var(--crm-analytics-card);
}

.crm-analytics-chips,
.crm-analytics-segmented {
  display: grid;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}

.crm-analytics-chips legend,
.crm-analytics-segmented legend,
.crm-analytics-dropdown-caption {
  padding: 0;
  color: var(--crm-analytics-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.crm-analytics-chip-row,
.crm-analytics-segment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-analytics-chip,
.crm-analytics-segment {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--crm-analytics-hair);
  border-radius: 999px;
  padding: 0 13px;
  background: var(--crm-analytics-card);
  color: var(--crm-analytics-ink);
  cursor: pointer;
  font-size: 0.79rem;
  font-weight: 650;
  white-space: nowrap;
}

.crm-analytics-chip input,
.crm-analytics-segment input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.crm-analytics-chip:hover,
.crm-analytics-segment:hover {
  border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--crm-analytics-hair));
}

.crm-analytics-chip.is-on,
.crm-analytics-segment.is-on {
  border-color: var(--brand-gold);
  background: var(--accent-soft);
  color: var(--crm-analytics-ink);
  font-weight: 750;
}

.crm-analytics-chip.is-on::before {
  content: "✓";
  margin-right: 6px;
  color: var(--brand-gold);
  font-size: 0.8rem;
  font-weight: 850;
}

.crm-analytics-chip.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.crm-analytics-chip:focus-within,
.crm-analytics-segment:focus-within {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

.crm-analytics-segment-row {
  gap: 0;
  width: max-content;
  border: 1px solid var(--crm-analytics-hair);
  border-radius: 999px;
  padding: 3px;
  background: var(--crm-analytics-card);
}

.crm-analytics-segment {
  min-height: 28px;
  border: 0;
  background: transparent;
}

.crm-analytics-segment.is-on {
  background: var(--crm-analytics-ground);
  box-shadow: var(--shadow);
}

/* Travel agent, nationality and board are multi-select slicers rather than
 * selects: the button carries the summary, the panel below it carries a
 * checkbox per option and a search box, because the agent list runs to
 * hundreds of names. */

.crm-analytics-dropdown {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 172px;
}

.crm-analytics-dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid var(--crm-analytics-hair);
  border-radius: 7px;
  padding: 0.55rem 0.6rem;
  background: var(--crm-analytics-card);
  color: var(--crm-analytics-ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.crm-analytics-dropdown-button:hover {
  border-color: color-mix(in srgb, var(--brand-gold) 45%, var(--crm-analytics-hair));
}

.crm-analytics-dropdown-button:focus-visible,
.crm-analytics-dropdown-button.is-open {
  border-color: var(--brand-gold);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.crm-analytics-dropdown-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-analytics-dropdown-caret {
  flex: none;
  color: var(--crm-analytics-ink-soft);
  font-size: 0.7rem;
}

.crm-analytics-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  display: grid;
  min-width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  border: 1px solid var(--crm-analytics-hair);
  border-radius: 10px;
  background: var(--crm-analytics-card);
  box-shadow: var(--shadow);
}

.crm-analytics-panel-search {
  border-bottom: 1px solid var(--crm-analytics-hair);
  padding: 8px;
}

.crm-analytics-panel-search input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--crm-analytics-hair);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  background: var(--crm-analytics-card);
  color: var(--crm-analytics-ink);
  font: inherit;
  font-size: 0.8rem;
}

.crm-analytics-panel-search input:focus {
  border-color: var(--brand-gold);
  outline: none;
}

.crm-analytics-panel-rows {
  max-height: 264px;
  overflow-y: auto;
  padding: 4px;
}

.crm-analytics-panel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--crm-analytics-ink);
  cursor: pointer;
  font-size: 0.8rem;
}

.crm-analytics-panel-row input {
  flex: none;
  margin: 0;
  accent-color: var(--brand-gold);
}

.crm-analytics-panel-row:hover {
  background: var(--crm-analytics-ground);
}

.crm-analytics-panel-row.is-on {
  color: var(--crm-analytics-ink);
  font-weight: 700;
}

/* The All row is the way back out of a selection, so it is pinned above the
 * options and separated from them by a hairline. */
.crm-analytics-panel-row.is-all {
  border-bottom: 1px solid var(--crm-analytics-hair);
  border-radius: 0;
  margin-bottom: 4px;
}

.crm-analytics-panel-row.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.crm-analytics-panel-row:focus-within {
  outline: 2px solid var(--brand-gold);
  outline-offset: -2px;
}

.crm-analytics-panel-empty {
  margin: 0;
  padding: 10px 8px;
  color: var(--crm-analytics-ink-soft);
  font-size: 0.78rem;
}

.crm-analytics-reset {
  margin-left: auto;
}

/* The shared secondary button is the one control that still arrived as a
   visitor: a cool grey slab with no border of its own. Only its surface,
   border and ink are restated — the size and radius stay with the Portal
   rule, which declares `border: 0`, so the hairline is named explicitly. */
.crm-analytics .secondary-button {
  border: 1px solid var(--crm-analytics-hair);
  background: var(--crm-analytics-ground);
  color: var(--crm-analytics-ink-soft);
}

.crm-analytics .secondary-button:hover,
.crm-analytics .secondary-button:focus-visible {
  background: var(--accent-soft);
  color: var(--crm-analytics-ink);
}

/* Modifier-click is the whole difference between narrowing to one hotel and
 * building a set, and nothing else on the page teaches it. */
.crm-analytics-hint {
  flex: 1 0 100%;
  margin: 0;
  color: var(--crm-analytics-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.88rem;
  font-style: italic;
}

/* ------------------------------------------------------------- stat tiles */

.crm-analytics-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

/* A card floats on the ivory ground; the gold hairline along its top edge is
   the only ornament the tile carries. The named areas put the delta capsule
   on the figure's own line without the markup knowing: the value takes the
   width it needs and the capsule starts in the rest of the row. */
.crm-analytics-tile {
  display: grid;
  align-content: start;
  gap: 6px 10px;
  grid-template-areas:
    "label label"
    "value delta"
    "note note";
  grid-template-columns: auto minmax(0, 1fr);
  border: 1px solid var(--crm-analytics-hair);
  border-top: 2px solid var(--brand-gold-light);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--crm-analytics-card);
}

.crm-analytics-tile-label {
  grid-area: label;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--crm-analytics-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The category drawing is a landmark, not a label: it sits at the weight of
   the muted caption beside it and never competes with the figure below. */
.crm-analytics-icon {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--crm-analytics-ink-soft);
}

/* The six survey questions read as one block under a quiet heading rather than
   as a second KPI row competing with the page's own headline numbers. */
.crm-analytics-tile-row {
  display: grid;
  gap: 10px;
}

.crm-analytics-row-heading {
  margin: 0;
  color: var(--crm-analytics-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-weight: 400;
}

/* Three across a full-width panel, two on a narrow one: a question tile is
   read against its five neighbours, so the row never falls to one column. */
.crm-analytics-kpis.is-ratings {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Proportional figures: tabular-nums makes a headline number look gappy. */
.crm-analytics-tile-value {
  grid-area: value;
  align-self: baseline;
  margin: 0;
  color: var(--crm-analytics-ink);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 2.05rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.crm-analytics-tile-note {
  grid-area: note;
  margin: 0;
  color: var(--crm-analytics-ink-faint);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* A tinted capsule on the value's own line: sign and figure, no word. The
   characters carry the direction, so the tint is a second reading of it and
   never the only one. The three tints are the shared semantic pairs, not
   analytics colours — see the header note. */
.crm-analytics-delta {
  grid-area: delta;
  justify-self: start;
  align-self: baseline;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 0.28em 0.8em;
  color: var(--crm-analytics-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  white-space: nowrap;
}

.crm-analytics-delta.is-good {
  background: var(--crm-sem-good-soft);
  color: var(--crm-analytics-good);
}

.crm-analytics-delta.is-bad {
  background: var(--crm-sem-bad-soft);
  color: var(--crm-analytics-bad);
}

.crm-analytics-delta.is-flat {
  background: var(--crm-sem-neutral-soft);
  color: var(--crm-analytics-ink-soft);
}

/* The absolute move rides behind the figure, quieter than it but still a
   number a reader has to be able to read: the faint ink measures 3.8:1 on
   these tints, so the trailing part takes the soft ink, which clears 4.7:1 on
   all three. */
.crm-analytics-delta small {
  color: var(--crm-analytics-ink-soft);
  font-size: 0.72em;
  font-weight: 400;
}

/* ---------------------------------------------------------------- section */

.crm-analytics-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--crm-analytics-hair);
  border-radius: 10px;
  padding: 16px;
  background: var(--crm-analytics-card);
}

.crm-analytics-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  justify-content: space-between;
}

.crm-analytics-section-head h4 {
  margin: 0;
  color: var(--crm-analytics-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 400;
}

.crm-analytics-note {
  margin: -4px 0 0;
  color: var(--crm-analytics-ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
}

/* What the section is aggregated over, said once above the note rather than
   repeated as a caption on every facet inside it. */
.crm-analytics-scope {
  margin: -4px 0 0;
  color: var(--crm-analytics-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.crm-analytics-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-analytics-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--crm-analytics-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.crm-analytics-key {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--crm-analytics-series-1);
}

.crm-analytics-legend.is-bar .crm-analytics-key {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- the plot */

.crm-analytics-body {
  display: grid;
  gap: 14px;
}

.crm-analytics-body.is-facets {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.crm-analytics-body.is-facets > .crm-analytics-chart:first-child {
  grid-column: 1 / -1;
}

/* Two across, never three: at a third of the panel the movement between 4 and
   5 was too small to read, and the pair still lets a question be compared
   against its neighbour without scrolling the whole card. */
.crm-analytics-body.is-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

/* Sized to the box a chart would have filled, so an unanswered question leaves
   a hole in the grid rather than a short tile the row has to close up. */
.crm-analytics-facet-empty {
  display: grid;
  place-content: center;
  aspect-ratio: 470 / 280;
  min-height: 208px;
  margin: 0;
  border: 1px dashed var(--crm-analytics-hair);
  border-radius: 8px;
  padding: 12px;
  background: var(--crm-analytics-ground);
  color: var(--crm-analytics-ink-soft);
  font-size: 0.76rem;
  text-align: center;
}

.crm-analytics-chart {
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.crm-analytics-chart figcaption {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--crm-analytics-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
}

.crm-analytics-plot {
  position: relative;
  min-width: 0;
}

.crm-analytics-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

/* The ruled grid is gone. A chart carries one dotted baseline and the few
   figures worth reading off it; the rest of the height is the shape. */
.crm-analytics-grid {
  stroke: none;
}

.crm-analytics-grid.is-zero,
.crm-analytics-baseline {
  stroke: var(--crm-analytics-rule);
  stroke-width: 1;
  stroke-dasharray: 1 4;
  stroke-linecap: round;
}

.crm-analytics-axis {
  fill: var(--crm-analytics-ink-faint);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.crm-analytics-category {
  font-variant-numeric: normal;
}

.crm-analytics-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The 2px card ring keeps a dot legible where two years cross. */
.crm-analytics-dot {
  stroke: var(--crm-analytics-card);
  stroke-width: 2;
}

.crm-analytics-crosshair {
  stroke: color-mix(in srgb, var(--crm-analytics-ink) 30%, var(--crm-analytics-card));
  stroke-width: 1;
  pointer-events: none;
}

.crm-analytics-end-label {
  fill: var(--crm-analytics-ink);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* The peak, the trough and where the line ends up — the three readings a
   gridline was being kept around to serve. */
.crm-analytics-value-label {
  fill: var(--crm-analytics-ink);
  font-size: 11px;
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
}

.crm-analytics-leader {
  fill: none;
  stroke: var(--crm-analytics-rule);
  stroke-width: 1;
}

.crm-analytics-bar-value {
  fill: var(--crm-analytics-ink-faint);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.crm-analytics-hit {
  fill: transparent;
  cursor: crosshair;
}

.crm-analytics-hit.is-active {
  fill: color-mix(in srgb, var(--crm-analytics-ink) 5%, transparent);
}

.crm-analytics-line[data-crm-analytics-slot="1"],
.crm-analytics-leader[data-crm-analytics-slot="1"] {
  stroke: var(--crm-analytics-series-1);
}

.crm-analytics-line[data-crm-analytics-slot="2"] {
  stroke: var(--crm-analytics-series-2);
}

.crm-analytics-line[data-crm-analytics-slot="3"] {
  stroke: var(--crm-analytics-series-3);
}

.crm-analytics-line[data-crm-analytics-slot="4"] {
  stroke: var(--crm-analytics-series-4);
}

.crm-analytics-dot[data-crm-analytics-slot="1"],
.crm-analytics-column[data-crm-analytics-slot="1"],
.crm-analytics-bar[data-crm-analytics-slot="1"],
.crm-analytics-key[data-crm-analytics-slot="1"] {
  fill: var(--crm-analytics-series-1);
  background: var(--crm-analytics-series-1);
}

.crm-analytics-dot[data-crm-analytics-slot="2"],
.crm-analytics-column[data-crm-analytics-slot="2"],
.crm-analytics-bar[data-crm-analytics-slot="2"],
.crm-analytics-key[data-crm-analytics-slot="2"] {
  fill: var(--crm-analytics-series-2);
  background: var(--crm-analytics-series-2);
}

.crm-analytics-dot[data-crm-analytics-slot="3"],
.crm-analytics-column[data-crm-analytics-slot="3"],
.crm-analytics-bar[data-crm-analytics-slot="3"],
.crm-analytics-key[data-crm-analytics-slot="3"] {
  fill: var(--crm-analytics-series-3);
  background: var(--crm-analytics-series-3);
}

.crm-analytics-dot[data-crm-analytics-slot="4"],
.crm-analytics-column[data-crm-analytics-slot="4"],
.crm-analytics-bar[data-crm-analytics-slot="4"],
.crm-analytics-key[data-crm-analytics-slot="4"] {
  fill: var(--crm-analytics-series-4);
  background: var(--crm-analytics-series-4);
}

/* --------------------------------------------------------------- tooltip */

.crm-analytics-tooltip {
  position: absolute;
  z-index: 4;
  min-width: 148px;
  max-width: 260px;
  border: 1px solid var(--crm-analytics-hair);
  border-radius: 8px;
  padding: 9px 11px;
  background: var(--crm-analytics-card);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.crm-analytics-tooltip[hidden] {
  display: none;
}

.crm-analytics-tooltip-title {
  margin: 0 0 6px;
  color: var(--crm-analytics-ink-soft);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.crm-analytics-tooltip ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-analytics-tooltip li {
  display: grid;
  grid-template-columns: 14px auto 1fr;
  gap: 3px 7px;
  align-items: baseline;
}

/* Value leads, series name follows — the reader already knows the series. */
.crm-analytics-tooltip strong {
  color: var(--crm-analytics-ink);
  font-family: "Tenor Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.crm-analytics-tooltip-name {
  color: var(--crm-analytics-ink-soft);
  font-size: 0.76rem;
}

.crm-analytics-tooltip small {
  grid-column: 2 / -1;
  color: var(--crm-analytics-ink-soft);
  font-size: 0.68rem;
  line-height: 1.4;
}

.crm-analytics-tooltip .crm-analytics-key {
  align-self: center;
  width: 12px;
  height: 3px;
}

/* ------------------------------------------------------------ table view */

.crm-analytics-table {
  border-top: 1px solid var(--crm-analytics-hair);
  padding-top: 8px;
}

.crm-analytics-table > summary {
  color: var(--crm-analytics-ink-soft);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  list-style: none;
}

.crm-analytics-table > summary::-webkit-details-marker {
  display: none;
}

.crm-analytics-table > summary::before {
  content: "▸ ";
  color: var(--brand-gold);
}

.crm-analytics-table[open] > summary::before {
  content: "▾ ";
}

.crm-analytics-table > summary:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

.crm-analytics-table-wrap {
  overflow-x: auto;
  margin-top: 10px;
  border: 1px solid var(--crm-analytics-hair);
  border-radius: 8px;
}

.crm-analytics-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.crm-analytics-table th,
.crm-analytics-table td {
  border-bottom: 1px solid var(--crm-analytics-hair);
  padding: 7px 11px;
  text-align: right;
  white-space: nowrap;
}

.crm-analytics-table thead th {
  background: var(--crm-analytics-ground);
  color: var(--crm-analytics-ink-soft);
  font-size: 0.72rem;
}

.crm-analytics-table thead th:first-child,
.crm-analytics-table tbody th {
  color: var(--crm-analytics-ink-soft);
  text-align: left;
}

/* The Portal's bare `th` rule paints every header cell a cool near-white. It
   was invisible while these tables sat on a white card; on ivory it reads as a
   cold column, so the row headers are put back on the card behind them. */
.crm-analytics-table tbody th {
  background: var(--crm-analytics-card);
}

.crm-analytics-table tbody tr:last-child th,
.crm-analytics-table tbody tr:last-child td {
  border-bottom: 0;
}

/* -------------------------------------------------------------- footnote */

.crm-analytics-footnote {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--crm-analytics-hair);
  padding-top: 12px;
}

.crm-analytics-footnote p {
  margin: 0;
  color: var(--crm-analytics-ink-soft);
  font-size: 0.73rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .crm-analytics-filters {
    gap: 12px;
  }

  .crm-analytics-reset {
    margin-left: 0;
  }

  .crm-analytics-body.is-facets,
  .crm-analytics-body.is-grid {
    grid-template-columns: 1fr;
  }

  .crm-analytics-kpis.is-ratings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-analytics-tile-value {
    font-size: 1.65rem;
  }

  /* The capsule shrinks with the figure it annotates, so the pair keeps its
     proportion on a narrow pane. */
  .crm-analytics-delta {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-analytics.is-refreshing .crm-analytics-kpis,
  .crm-analytics.is-refreshing .crm-analytics-section {
    transition: none;
  }
}