/* /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%; }
}

/* ─── what each section covers, and what each column is (3 Nov 2026) ───
   Item: "labelling it helps people know what price or years or metrics
   it covers". The covers line is the section's small print, set apart
   by a rule rather than a box. The heading row names each column once,
   so a bare "5.2" or "77" always has its unit above it. */
.mk-covers { font-size: 0.82rem; line-height: 1.5; color: var(--mc-muted); margin: 10px 0 4px;
             padding: 2px 0 2px 10px; border-left: 2px solid var(--line, #e8e8e8); max-width: 62ch; }
.mk-head { padding: 6px 0 4px; border-bottom: 1px solid var(--line, #e8e8e8); }
.mk-head .mk-label, .mk-head .mk-value, .mk-head-mid { font-family: inherit; font-size: 0.74rem; font-weight: 500;
                                                       color: var(--mc-muted); line-height: 1.3; }
.mk-head .mk-value { white-space: normal; }
@media (max-width: 640px) {
  .mk-head-mid { visibility: hidden; }
}

/* ─── one meaning per colour, and a scale on every bar list (3 Nov 2026) ───
   Item: "what does the blue bar represent? and what does low blue bar
   mean versus high blue bar? thats the confusion". Blue meant a price in
   two sections and a number of cars in two others, and a bar was only a
   fraction of the longest one beside it. Now blue is only ever a number
   of cars, orange only ever buyers, and prices are grey; and every list
   has this scale row, 0 to its top, on phones too. */
.mc { --mc-price: #5b5b5b; --mc-price-range: #898989; }
.mk-price { background: var(--mc-price); }
.mk-range { position: absolute; top: 0; bottom: 0; border-radius: 7px; background: var(--mc-price-range); }
.mk-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%);
          background: #1a1a1a; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.mk-range-key { background: var(--mc-price-range); width: 18px; height: 10px; border-radius: 5px; }
.mk-dot-key { background: #1a1a1a; border-radius: 50%; }
.mk-scale { padding: 2px 0 6px; border-bottom: 0; }
.mk-scale .mk-label { font-size: 0.72rem; color: var(--mc-muted); }
.mk-scale-line { display: flex; justify-content: space-between; align-items: flex-end; font-size: 0.72rem;
                 color: var(--mc-muted); border-bottom: 1px solid #cfcfcf; padding-bottom: 2px; position: relative;
                 font-variant-numeric: tabular-nums; }
.mk-scale-line::before, .mk-scale-line::after { content: ""; position: absolute; bottom: -1px; width: 1px; height: 6px;
                                                  background: #cfcfcf; }
.mk-scale-line::before { left: 0; }
.mk-scale-line::after { right: 0; }
.mk-head-mid:empty { display: block; }

/* Bars end in a 4px rounded edge and start square, so a short bar never
   reads as the usual price dot; the dot is smaller than the track. */
.mk-bar { border-radius: 0 4px 4px 0; }
.mk-range { border-radius: 4px; }
.mk-dot { width: 10px; height: 10px; }

/* The usual price, explained under the price legend (3 Nov 2026). */
.mk-help { font-size: 0.8rem; line-height: 1.5; color: var(--mc-muted); margin: 2px 0 8px; max-width: 62ch; }