/* ============================================================
   Trash Tribes - shared chart styles
   ------------------------------------------------------------
   Used by the public landing page, the map panel, My Patch and
   the road record. Kept out of app.css so the marketing page
   does not have to pull in the whole application stylesheet.
   ============================================================ */

/* ---------- panel charts ---------- */
.tt-section {
  margin-top: 16px; padding-top: 12px; border-top: 1.5px solid var(--line-soft);
}
.tt-section h4 {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px;
}
.tt-chart { width: 100%; height: auto; display: block; }
.tt-bar { fill: var(--seg-historical); }
.tt-base { fill: var(--line); }
.tt-axis { font-family: var(--sans); font-size: 8.5px; fill: var(--ink-faint); }
.tt-empty { font-family: var(--sans); font-size: 10px; fill: var(--ink-faint); }
.tt-empty-line { font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); }
.tt-donut { width: 108px; height: 108px; margin: 0 auto; }
.tt-ring-others { stroke: var(--line); }
.tt-ring-mine { stroke: var(--seg-historical); }
.tt-donut-v { font-family: var(--sans); font-size: 17px; font-weight: 700; fill: var(--ink); }
.tt-donut-l { font-family: var(--sans); font-size: 8.5px; fill: var(--ink-faint); }

.year-bar { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; }
.year-bar button {
  font-family: var(--sans); font-size: .74rem; padding: 3px 9px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-soft);
}
.year-bar button.on { background: var(--green); border-color: var(--green); color: var(--paper-warm); }

.tt-meter { margin-top: 10px; }
.tt-meter-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--sans); font-size: .78rem; color: var(--ink-soft);
}
.tt-meter-top b { font-family: var(--serif); font-size: .95rem; color: var(--ink); }
.tt-meter-track { height: 7px; border-radius: 4px; background: var(--line-soft); overflow: hidden; margin-top: 4px; }
.tt-meter-track i { display: block; height: 100%; background: var(--seg-historical); border-radius: 4px; }
.tt-meter-note { font-family: var(--sans); font-size: .72rem; color: var(--ink-faint); margin-top: 4px; }

.tt-stack { display: flex; height: 9px; border-radius: 5px; overflow: hidden; background: var(--line-soft); }
.tt-stack i { display: block; height: 100%; }
.tt-keys { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 7px; }
.tt-key { font-family: var(--sans); font-size: .72rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 5px; }
.tt-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.tt-depth-surface { background: color-mix(in srgb, var(--seg-historical) 35%, var(--paper-deep)); }
.tt-depth-medium  { background: color-mix(in srgb, var(--seg-historical) 68%, var(--paper-deep)); }
.tt-depth-deep    { background: var(--seg-historical); }

/* year stripes */
.tt-stripes { width: 100%; height: 72px; display: block; }
.tt-stripe { fill: var(--seg-historical); }
.tt-stripe-empty { fill: var(--line); }
.tt-stripe-axis {
  font-family: var(--sans); font-size: 9px; fill: var(--ink-faint);
  /* the SVG is stretched to fit, so the text must not stretch with it */
  transform-box: fill-box; text-anchor: middle;
}
.tt-stripes-key {
  display: flex; align-items: center; gap: 9px; margin-top: 8px;
  font-family: var(--sans); font-size: .74rem; color: var(--ink-faint);
}
.tt-ramp { display: inline-block; width: 78px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--seg-historical) 30%, transparent),
    var(--seg-historical)); }

/* horizontal labelled bars */
.tt-hbars { display: flex; flex-direction: column; gap: 11px; }
.tt-hbar-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--sans); font-size: .82rem; color: var(--ink-soft);
}
.tt-hbar-top b { font-family: var(--serif); color: var(--ink); flex: none; }
.tt-hbar-track { height: 7px; border-radius: 4px; background: var(--line-soft); overflow: hidden; margin-top: 4px; }
.tt-hbar-track i { display: block; height: 100%; background: var(--seg-historical); border-radius: 4px; }
.tt-hbar-note { font-family: var(--sans); font-size: .72rem; color: var(--ink-faint); margin-top: 3px; }

.tt-figs { display: flex; gap: 14px; margin-top: 4px; }
.tt-fig { flex: 1; }
.tt-fig-v { font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
.tt-fig-l { font-family: var(--sans); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }

/* ---------- cumulative area ---------- */
.tt-cume { height: auto; }
.tt-cume-area { fill: var(--seg-historical); opacity: .16; }
.tt-cume-line { stroke: var(--seg-historical); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tt-cume-dot { fill: var(--seg-recent); stroke: var(--card); stroke-width: 2.5; }

/* ---------- headline figures ---------- */
.tt-bigs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px 24px;
}
.tt-big-v { font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 700; line-height: 1.02; letter-spacing: -.02em; }
.tt-big-l {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 5px;
}
.tt-big-n { font-family: var(--sans); font-size: .78rem; color: var(--ink-soft); margin-top: 4px; }
/* on the ink band the muted tones need lifting off the dark ground */
.band-ink .tt-big-l { color: color-mix(in srgb, var(--paper) 55%, var(--ink)); }
.band-ink .tt-big-n { color: color-mix(in srgb, var(--paper) 72%, var(--ink)); }
.band-ink .tt-axis, .band-ink .tt-empty { fill: color-mix(in srgb, var(--paper) 55%, var(--ink)); }
.band-ink .tt-cume-line { stroke: var(--seg-recent); }
.band-ink .tt-cume-area { fill: var(--seg-recent); opacity: .14; }
.band-ink .tt-cume-dot { stroke: var(--ink); }
.band-ink .tt-bar { fill: var(--seg-recent); }
.band-ink .tt-base { fill: color-mix(in srgb, var(--paper) 25%, var(--ink)); }

/* ---------- elevation profile ---------- */
.tt-prof-area { fill: color-mix(in srgb, var(--gold) 22%, transparent); }
.tt-prof-line { stroke: var(--gold-soft); stroke-width: 1.8; stroke-linejoin: round; }
.band-ink .tt-prof-area { fill: color-mix(in srgb, var(--gold) 30%, transparent); }

/* ---------- two series, never added together ---------- */
.tt-pm-a { fill: var(--seg-recent); }
.tt-pm-b { fill: var(--gold-soft); }
.tt-key { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 7px;
  font-family: var(--sans); font-size: .74rem; color: var(--ink-soft); }
.tt-key-i { display: inline-flex; align-items: center; gap: 6px; }
.tt-key-i i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.tt-sw-a { background: var(--seg-recent); }
.tt-sw-b { background: var(--gold-soft); }

/* ---------- effort tiles ---------- */
.tt-effort { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; }
.tt-effort div { text-align: center; padding: 10px 6px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.tt-effort b { display: block; font-size: 1.02rem; }
.tt-effort span { font-family: var(--sans); font-size: .68rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); }