/* --------------------------------------------------------------------------
   1.1 Line charts: Total Reviews + Negative Trend
   -------------------------------------------------------------------------- */

/* Root + tokens */
.TTF-rc {
  --navy: #2B2D42;
  --muted: #5C5F77;
  --pos: #0ca30c;
  --neg: #d03b3b;
  --tint: #ECFDF5;
  --negtint: #FCEBEB;
  width: 100%;
  box-sizing: border-box;
  color: var(--navy);
  font: inherit;
}
.TTF-rc * { box-sizing: border-box; }

/* SVG canvas */
.TTF-rc svg { width: 100%; height: auto; display: block; }
.TTF-rc .g  { stroke: #e8e8e2; stroke-width: 1; }                  /* grid lines */
.TTF-rc .yl { fill: #898781; font-size: 11px; text-anchor: end; }  /* y labels */
.TTF-rc .xl { fill: #898781; font-size: 10px; text-anchor: middle; } /* x labels */
.TTF-rc .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* Hover points + value labels */
.TTF-rc .hit { fill: transparent; }
.TTF-rc .lbl { opacity: 0; transition: opacity .12s; pointer-events: none; }
.TTF-rc .pt:hover .lbl { opacity: 1; }
.TTF-rc .pt:hover .dot { r: 6; }
.TTF-rc .lbg { fill: #2B2D42; }
.TTF-rc .lt  { fill: #fff; font-size: 14px; font-weight: 500; text-anchor: middle; }

/* Stat cards above the chart */
.TTF-rc__stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.TTF-rc__stat  { background: var(--tint); border-radius: 8px; padding: 10px 14px; min-width: 120px; }
.TTF-rc__stat--n { background: var(--negtint); }
.TTF-rc__sl { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.TTF-rc__sv { font-size: 22px; font-weight: 500; line-height: 1.1; }
.TTF-rc__cap { font-size: 13px; color: var(--muted); text-align: center; padding: 8px 0 0; }

/* Data table (fallback) */
.TTF-rc table { width: 100%; border-collapse: collapse; font-size: 13px; }
.TTF-rc caption {
  caption-side: bottom;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0 0;
}

/* Once JS has drawn the chart, hide the table visually but keep it for screen readers */
.TTF-rc.TTF--ready table {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   1.2 Stars heat grid (no JS)
   -------------------------------------------------------------------------- */

/* Root + tokens (s1..s5 are RGB triplets for use in rgba()) */
.TTF-heat {
  --navy: #2B2D42;
  --muted: #5C5F77;
  --s5: 12, 163, 12;
  --s4: 27, 175, 122;
  --s3: 250, 178, 25;
  --s2: 235, 104, 52;
  --s1: 208, 59, 59;
  --empty: rgba(43, 45, 66, .05);
  width: 100%;
  box-sizing: border-box;
  color: var(--navy);
  font: inherit;
}
.TTF-heat * { box-sizing: border-box; }

/* Table */
.TTF-heat table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
}
.TTF-heat caption {
  caption-side: bottom;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 0 0;
}
.TTF-heat thead th {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  text-align: center;
}
.TTF-heat thead th:first-child { width: 34px; }
.TTF-heat tbody th {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

/* Cells */
.TTF-heat td {
  height: 34px;
  border-radius: 4px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}
.TTF-heat td.on { color: #fff; }
.TTF-heat td.z  { background: var(--empty); color: rgba(92, 95, 119, .45); }

/* Mobile */
@media (max-width: 600px) {
  .TTF-heat thead th {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: -1px;
    line-height: 1;
  }
  .TTF-heat td { height: 28px; font-size: 10px; }
}

/* Astra/Spectra overrides so the grid renders as designed
   (!important is required to beat theme table styles) */
.TTF-heat table {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.TTF-heat th,
.TTF-heat td { border: 0 !important; padding: 0 !important; }
.TTF-heat thead th { padding: 2px 0 !important; background: transparent !important; }
.TTF-heat tbody th { padding: 0 8px 0 0 !important; background: transparent !important; }
.TTF-heat tbody tr,
.TTF-heat tbody tr:nth-child(2n),
.TTF-heat tbody tr:nth-child(odd) { background: transparent !important; }
.TTF-heat td.z { background: var(--empty) !important; }


/* --------------------------------------------------------------------------
   1.3 Overall score donut
   -------------------------------------------------------------------------- */

/* Root + tokens */
figure.ca-score {
  --ca-green: #10B981;
  --ca-green-text: #047857;
  --ca-navy: #2B2D42;
  --ca-muted: #5C5F77;
  --ca-line: #A3A8BC;
  max-width: 1000px;
  margin: 0 auto 1.5em;
  padding: 0;
  color: var(--ca-navy);
  container-type: inline-size; /* enables cqi units on .ca-item */
}

.ca-score .ca-chart { position: relative; }

/* Donut SVG */
.ca-score .ca-donut {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  overflow: visible;
}
.ca-score .ca-donut text {
  font-weight: 700;
  font-size: 15px;
  text-anchor: middle;
  dominant-baseline: central;
}
.ca-score .ca-ring-base,
.ca-score .ca-ring-accent { fill: none; stroke-width: 80; }
.ca-score .ca-ring-base   { stroke: var(--ca-navy); }
.ca-score .ca-ring-accent { stroke: var(--ca-green); }

/* Percentage labels */
.ca-score .ca-pct-dark  { fill: var(--ca-navy); }
.ca-score .ca-pct-light { fill: #fff; }
.ca-score .ca-donut .ca-pct-sm { font-size: 13px; }

/* Center text */
.ca-score .ca-donut .ca-center-value {
  fill: var(--ca-navy);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -1.5px;
}
.ca-score .ca-donut .ca-center-label {
  fill: var(--ca-muted);
  font-size: 14px;
  letter-spacing: 1.7px;
}

/* Connector lines + dots */
.ca-score .ca-lines {
  fill: none;
  stroke: var(--ca-line);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.ca-score .ca-lines path,
.ca-score .ca-lines circle { vector-effect: non-scaling-stroke; }
.ca-score .ca-line-zero { stroke-dasharray: 3 4; }
.ca-score .ca-dot-green { fill: var(--ca-green); stroke: none; }
.ca-score .ca-dot-navy  { fill: var(--ca-navy);  stroke: none; }
.ca-score .ca-dot-zero  { fill: #fff; }

/* Side labels */
.ca-score .ca-list { margin: 0; padding: 0; list-style: none; }
.ca-score .ca-item {
  position: absolute;
  margin: 0;
  transform: translateY(-50%);
  font-size: 16px;   /* fallback for browsers without cqi support */
  font-size: 1.6cqi;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.ca-score .ca-left  { right: 75.2%; }
.ca-score .ca-right { left: 75.2%; }
.ca-score .ca-value { margin-left: .3em; color: var(--ca-navy); font-weight: 800; }
.ca-score .ca-zero,
.ca-score .ca-zero .ca-value { color: var(--ca-muted); }

/* Caption */
.ca-score .ca-caption {
  margin: 16px 0 0;
  color: var(--ca-muted);
  font-size: .875rem;
  line-height: 1.5;
  text-align: center;
}


/* ==========================================================================
   2. TABLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 Overall score range table
   -------------------------------------------------------------------------- */

/* Root + tokens */
.ca-score-table {
  --ca-good: #10B981;
  --ca-okay: #FBA919;
  --ca-bad: #FF0000;
  --ca-badge-text: #ffffff;
  --ca-surface: #f4f4f4;
  --ca-border: #2B2D42;
  --ca-text: #2B2D42;
  --ca-head-text: #ffffff;
  --ca-muted: #5C5F77;
  --ca-radius: 6px;
  margin: 0 0 20px;
}

/* Table + caption */
.ca-score-table .ca-score-table__table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ca-surface);
  border-radius: var(--ca-radius);
}
.ca-score-table .ca-score-table__caption {
  caption-side: bottom;
  padding: 12px 10px 0;
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: var(--ca-muted);
}

/* Header */
.ca-score-table thead th {
  padding: clamp(10px, 1.5vw, 12px) clamp(10px, 3vw, 20px);
  border: 0;
  background: var(--ca-text);
  color: var(--ca-head-text);
  font-size: clamp(14px, 2.2vw, 15px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
}
.ca-score-table thead th:first-child { border-top-left-radius: var(--ca-radius); }
.ca-score-table thead th:last-child  { border-top-right-radius: var(--ca-radius); }

/* Body */
.ca-score-table tbody th,
.ca-score-table tbody td {
  padding: clamp(8px, 1.5vw, 10px) clamp(10px, 3vw, 20px);
  vertical-align: middle;
  text-align: center;
  border: 0;
  background: none;
  color: var(--ca-text);
  font-size: clamp(15px, 2.5vw, 17px);
  font-weight: 400;
}
.ca-score-table tbody tr:not(:last-child) > * { border-bottom: 1px solid var(--ca-border); }
.ca-score-table tbody th { width: clamp(120px, 35%, 160px); }

/* Badges */
.ca-score-table .ca-score-table__badge {
  display: block;
  padding: clamp(8px, 1.5vw, 12px) 10px;
  border-radius: 4px;
  font-weight: 700;
  font-size: clamp(15px, 2.5vw, 17px);
  white-space: nowrap;
  color: var(--ca-badge-text);
}
.ca-score-table .ca-score-table__badge--good { background: var(--ca-good); }
.ca-score-table .ca-score-table__badge--okay { background: var(--ca-okay); }
.ca-score-table .ca-score-table__badge--bad  { background: var(--ca-bad); }


/* ==========================================================================
   3. UI ELEMENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 Info tooltip ("?" popover)
   Note: --c3 is defined here, so .ttf-trust (3.4) must sit inside .ttf-tip
   to pick up its colour.
   -------------------------------------------------------------------------- */

/* Root + tokens */
.ttf-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font: inherit;
  --navy: #2B2D42;
  --muted: #5C5F77;
  --e: #10B981;
  --line: #E2E2DB;
  --c1: #C026D3;
  --c2: #0284C7;
  --c3: #047857;
  color: var(--navy);
}
.ttf-tip * { box-sizing: border-box; }

/* "?" button */
.ttf-tip__btn {
  width: 15px;
  height: 15px;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  border: 1px solid var(--c3) !important;
  background: #fff !important;
  color: var(--c3) !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: none !important;
}
.ttf-tip__btn:hover,
.ttf-tip__btn:focus,
.ttf-tip__btn:focus-visible,
.ttf-tip__btn:active {
  border-color: var(--c3) !important;
  background: #fff !important;
  color: var(--c3) !important;
  box-shadow: none !important;
  outline: none;
}

/* Popover */
.ttf-tip__pop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 320px;
  max-width: 86vw;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(43, 45, 66, .12);
  padding: 16px 18px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity .15s, transform .15s;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ttf-tip:hover .ttf-tip__pop,
.ttf-tip:focus-within .ttf-tip__pop,
.ttf-tip.is-open .ttf-tip__pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Popover arrow */
.ttf-tip__pop::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}

/* Popover content */
.ttf-tip__pop h4 { margin: 0 0 2px; font-size: 14px; font-weight: 700; }
.ttf-tip__pop p  { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.ttf-tip__pop p:last-child { margin-bottom: 0; }
.ttf-tip__pop strong { font-weight: 600; }
.ttf-tip__pop a { color: var(--c3); text-decoration: none; }
.ttf-tip__pop a:hover { text-decoration: underline; }

/* Mobile: pin the popover to the screen so it always fits */
@media (max-width: 600px) {
  .ttf-tip__pop {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 16px;
    width: auto;
    max-width: none;
    transform: translateY(10px);
  }
  .ttf-tip.is-open .ttf-tip__pop,
  .ttf-tip:focus-within .ttf-tip__pop { transform: translateY(0); }
  .ttf-tip__pop::before { display: none; }
}


/* --------------------------------------------------------------------------
   3.2 Heading + tooltip on the same line
   -------------------------------------------------------------------------- */
.ttf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1;
  margin-bottom: 20px;
}
.ttf-head h2,
.ttf-head h3,
.ttf-head h4,
.ttf-head h5,
.ttf-head h6 { margin: 0; line-height: 1.1; }
.ttf-head .ttf-tip { position: relative; top: 1px; }


/* --------------------------------------------------------------------------
   3.3 Score badge (3 colours, outlined)
   -------------------------------------------------------------------------- */
.ttf-badge {
  --g: #09A96C;
  --o: #F9A42B;
  --r: #F91A1A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  border: 2px solid var(--g);
  border-radius: 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--g);
  background: #fff;
}
.ttf-badge--good { border-color: var(--g); color: var(--g); }
.ttf-badge--ok   { border-color: var(--o); color: var(--o); }
.ttf-badge--bad  { border-color: var(--r); color: var(--r); }


/* --------------------------------------------------------------------------
   3.4 Trust badge trigger
   -------------------------------------------------------------------------- */
.ttf-trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--c3);
  cursor: pointer;
}
.ttf-trust svg { width: 16px; height: 16px; flex: none; }
.ttf-trust:hover { text-decoration: underline; }