/* /car-prices-in-kenya and /weekly. Item, 2 Nov 2026: "numbers are
   overlapping... can we really simplify it? such that a 10 year old can
   read and understand?"

   ONE ROW SHAPE: a name, a bar, and the number in a column of its own.
   The number never sits at the end of a bar and there are no axes, which
   is where all eleven overlaps measured at 360 pixels came from.

   Orange is buyers and blue is cars on sale, everywhere on the page; the
   pair passed the dataviz palette validator on white. */
.mc {
  --mc-buyers: #eb6834;
  --mc-cars: #2a78d6;
  --mc-cars-light: #86b6ef;
  --mc-cars-dark: #184f95;
  --mc-track: #f1f1f1;
  --mc-ink: var(--ink, #1a1a1a);
  --mc-muted: var(--grey, #6b6b6b);
}

.mc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
           margin: 0 0 36px; max-width: 760px; }
.mc-kpi { border: 1px solid var(--line, #e8e8e8); border-radius: 12px; padding: 14px 16px; background: #fff; }
.mc-kpi dt { font-size: 0.82rem; color: var(--mc-muted); margin: 0 0 6px; }
.mc-kpi dd { margin: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.45rem; color: var(--mc-ink); }

/* ─── the row ─── */
.mk-rows { margin: 16px 0 6px; }
.mk-row { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr) 4.8rem;
          align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f4f4f4; }
.mk-rows .mk-row:last-child { border-bottom: 0; }
.mk-label { font-size: 0.92rem; color: var(--mc-ink); line-height: 1.3; overflow-wrap: anywhere; }
.mk-label a { color: inherit; }
.mk-label small { display: block; font-size: 0.76rem; color: var(--mc-muted); margin-top: 2px; }
.mk-track { position: relative; height: 14px; border-radius: 7px; background: var(--mc-track); }
.mk-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; cursor: default; }
.mk-buyers { background: var(--mc-buyers); }
.mk-cars { background: var(--mc-cars); }
.mk-value { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.92rem; color: var(--mc-ink);
            text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ─── two bars for one thing: buyers against cars ─── */
.mk-pair { padding: 10px 0 8px; border-bottom: 1px solid #f4f4f4; }
.mk-pair-label { font-weight: 600; font-size: 0.92rem; margin-bottom: 4px; }
.mk-row-sub { padding: 3px 0; border-bottom: 0; }
.mk-row-sub .mk-label { font-size: 0.8rem; color: var(--mc-muted); }
.mk-row-sub .mk-track { height: 10px; }
.mk-row-sub .mk-value { font-size: 0.86rem; }
.mk-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 0.84rem;
             color: var(--mc-muted); margin: 10px 0 4px; }
.mk-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mk-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

.mk-list { list-style: none; padding: 0; margin: 14px 0 6px; }
.mk-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 9px 0;
              border-bottom: 1px solid #f4f4f4; font-size: 0.92rem; }
.mk-list li span { color: var(--mc-muted); }

.mk-terms summary { cursor: pointer; font-size: 0.86rem; color: var(--mc-muted); padding: 4px 0; }
.mk-terms p { font-size: 0.86rem; }

.mk [tabindex]:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 2px; }

/* ─── the views, the filters and the week list ─── */
.mc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; max-width: 760px; }
.mc-tabs a { padding: 8px 14px; border: 1px solid var(--line, #e8e8e8); border-radius: 999px; font-size: 0.88rem;
             color: var(--ink, #1a1a1a); text-decoration: none; background: #fff; }
.mc-tabs a[aria-current="page"] { background: var(--ink, #1a1a1a); color: #fff; border-color: var(--ink, #1a1a1a); }
.mc-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 22px; max-width: 760px; }
.mc-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--grey, #6b6b6b); }
.mc-filters select { min-width: 9.5rem; padding: 9px 10px; border: 1px solid var(--line, #e8e8e8); border-radius: 8px;
                     font: inherit; font-size: 0.9rem; color: var(--ink, #1a1a1a); background: #fff; }
.mc-apply { padding: 10px 16px; border-radius: 8px; border: 0; background: var(--ink, #1a1a1a); color: #fff;
            font: inherit; font-size: 0.9rem; cursor: pointer; }
.mc-clear { font-size: 0.86rem; color: var(--grey, #6b6b6b); padding: 9px 4px; }

.mc-weeks { list-style: none; padding: 0; margin: 0; }
.mc-weeks li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0;
               border-bottom: 1px solid var(--line-soft, #f2f2f2); font-size: 0.9rem; }
.mc-weeks li span { color: var(--grey, #6b6b6b); font-size: 0.84rem; }
.mc-share { margin-top: 14px; }

.mc-tooltip { position: fixed; z-index: 50; pointer-events: none; max-width: 240px; padding: 8px 10px;
              background: #1a1a1a; color: #fff; border-radius: 8px; font-size: 0.8rem; line-height: 1.45;
              white-space: pre-line; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.mc-tooltip::first-line { font-weight: 600; }

@media (max-width: 640px) {
  .mc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-kpi dd { font-size: 1.2rem; }
  .mk-row { grid-template-columns: minmax(5.6rem, 7.5rem) minmax(0, 1fr) 4.4rem; gap: 10px; }
  .mc-filters label { flex: 1 1 45%; }
  .mc-filters select { min-width: 0; width: 100%; }
}