/* assets/dcr-page-voices.css · The Desert Camel Report, Voices page (desert-camel-report/voices.html).
   Loaded after assets/dcr.css on that page only. Owned by the voices lane: this page's own charts and diagrams.
   Shared chart primitives and the report bar stay in assets/dcr.css.

   CHARTS  Drawn by assets/dcr-viz-voices.js into [data-vv-plot] from the table under "See the numbers"; one SVG
           unit is one CSS pixel, so type is the same size at every width. Panels are solid elev-1 (data ink never
           sits on glass). Bars start at zero. One magenta mark on the page: the top topic (--dv-highlight). The
           heatmap is one purple ramp; the months chart uses the entity colours (Egypt dv-1, Saudi Arabia dv-3,
           UAE dv-2, Region dv-6) with a legend and direct totals. Plots are dir="ltr": charts never mirror.
   GLASS   Only through classes liquid-glass.css already dresses: .dcr-tile (the filter bar, the quote cards) and
           .dcr-chip. No new glass selector.
   RTL     Logical properties throughout. */

/* ---------------------------------------------------------------- grid */
/* the page head already opens the page: the first section starts close under it */
main.dcr[data-dcr-page="voices"] .dcr-page > .dcr-sec{ padding-block-start:clamp(8px, 1.5vw, 20px); }
.vv-grid{ display:grid; gap:var(--dcr-gap); grid-template-columns:minmax(0,1fr); margin-block-start:clamp(18px, 2.4vw, 28px); }
@media (min-width:1024px){
  .vv-grid{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .vv-grid > .vv-w--topics{ grid-column:span 5; }
  .vv-grid > .vv-w--matrix{ grid-column:span 7; }
  .vv-grid > .vv-w--months{ grid-column:span 12; }
}
.vv-w{ position:relative; }

/* ---------------------------------------------------------------- figure */
.vv-fig{ display:flex; flex-direction:column; gap:14px; margin:0; min-inline-size:0; position:relative; }
.vv-plot{ display:block; inline-size:100%; min-inline-size:0; }
.vv-plot[hidden]{ display:none; }
.vv-cap{ order:2; margin:0; font:500 16px/1.6 var(--font-sans); color:var(--ink); text-wrap:pretty; }
.vv-fig .dcr-seedata{ order:3; margin:0; }
.vv-fig .dcr-seedata > summary{ font-size:14px; min-height:40px; color:var(--ink-muted); }
.vv-fig .dcr-seedata > summary:hover{ color:var(--ink); }
.vv-fig .dcr-seedata > summary:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:4px; }
.vv-fig .dcr-table-wrap{ margin-block-start:8px; }
.vv-table :is(th, td){ padding:8px 10px; }
.vv-table thead th{ white-space:normal; min-inline-size:7ch; }
.vv-table caption{ padding-block-end:6px; }
.vv-table tbody tr[data-dcr-insight] th{ color:var(--ink); }

.vv-svg{ display:block; inline-size:100%; block-size:auto; overflow:visible; font-family:var(--font-sans); direction:ltr; unicode-bidi:isolate; }
/* the svg dir attribute is not HTML's: the plot is held left to right by CSS, so the Arabic page never mirrors a chart */
.vv-svg text{ pointer-events:none; }
.vv-svg .vv-base{ stroke:var(--dv-grid); stroke-width:1; }
.vv-svg .vv-grid-l{ stroke:var(--dv-grid); stroke-width:1; stroke-dasharray:2 4; }
.vv-svg .vv-lab{ fill:var(--ink); font:500 14px/1 var(--font-sans); }
.vv-svg .vv-lab--mut{ fill:var(--ink-muted); }
.vv-svg .vv-val{ fill:var(--ink); font:500 14px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.vv-svg .vv-val--mut{ fill:var(--ink-muted); }
.vv-svg .vv-val--b{ font-weight:600; }
.vv-svg .vv-ax{ fill:var(--ink-muted); font:500 11px/1 var(--font-mono); letter-spacing:.04em; }
.vv-svg .vv-hit{ fill:transparent; }
.vv-svg .vv-mark{ cursor:pointer; outline:none; }
.vv-svg .vv-mark--still{ cursor:default; }
.vv-svg .vv-ring{ fill:none; stroke:transparent; stroke-width:2; }
.vv-svg .vv-mark:hover .vv-ring{ stroke:var(--ink-muted); }
.vv-svg .vv-mark.is-sel .vv-ring{ stroke:var(--ink); }
.vv-svg .vv-mark:focus-visible .vv-ring{ stroke:var(--focus-ring); stroke-width:3; }

/* ranked bars: context recedes, the top topic is the one insight */
.vv-svg .vv-bar{ fill:var(--dv-6); }
.vv-svg .vv-bar--hi{ fill:var(--dv-highlight); }
.vv-svg .vv-track{ fill:var(--dv-grid); }

/* the heatmap: one purple ramp, darkest = fewest; zero is an empty cell, never a colour */
.vv-svg .vv-h0{ fill:var(--elev-2); stroke:var(--hairline); stroke-width:1; }
.vv-svg .vv-h1, .vv-key .vv-h1{ fill:var(--purple-900); background:var(--purple-900); }
.vv-svg .vv-h2, .vv-key .vv-h2{ fill:var(--purple-800); background:var(--purple-800); }
.vv-svg .vv-h3, .vv-key .vv-h3{ fill:var(--purple-700); background:var(--purple-700); }
.vv-svg .vv-h4, .vv-key .vv-h4{ fill:var(--purple-600); background:var(--purple-600); }
.vv-svg .vv-h5, .vv-key .vv-h5{ fill:var(--purple-400); background:var(--purple-400); }
/* white passes AA on 900 to 600 (4.6:1 and up); black on 400 (8.7:1) */
.vv-svg .vv-ct{ fill:var(--white); font:600 14px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.vv-svg .vv-ct--dk{ fill:var(--black); }
.vv-svg .vv-ct--z{ fill:var(--ink-muted); font-weight:500; }
.vv-key{ order:1; direction:ltr; display:grid; grid-template-columns:auto auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:10px;
  justify-content:start; font:500 11px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.vv-key__z{ grid-row:1; display:inline-grid; place-items:center; inline-size:22px; block-size:14px; border-radius:3px;
  background:var(--elev-2); box-shadow:inset 0 0 0 1px var(--hairline); font-size:10px; }
.vv-key__ramp{ grid-row:1; display:inline-flex; gap:2px; direction:ltr; }
.vv-key__ramp i{ display:block; inline-size:28px; block-size:14px; border-radius:3px; }
.vv-key__l{ grid-row:2; grid-column:2; justify-self:start; }
.vv-key__l + .vv-key__l{ grid-column:2; justify-self:end; }

/* months: entity colours, fixed on every page */
.vv-svg .vv-m-eg, .vv-legend .vv-m-eg{ fill:var(--dv-1); background:var(--dv-1); }
.vv-svg .vv-m-sa, .vv-legend .vv-m-sa{ fill:var(--dv-3); background:var(--dv-3); }
.vv-svg .vv-m-ae, .vv-legend .vv-m-ae{ fill:var(--dv-2); background:var(--dv-2); }
.vv-svg .vv-m-region, .vv-legend .vv-m-region{ fill:var(--dv-6); background:var(--dv-6); }
.vv-svg .vv-seg{ stroke:var(--elev-1); stroke-width:2; }   /* the 2px surface gap between stacked parts */
.vv-legend{ order:-1; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px;
  font:500 14px/1.6 var(--font-sans); color:var(--ink); }
.vv-legend li{ display:inline-flex; align-items:center; gap:8px; }
.vv-sw{ display:inline-block; inline-size:12px; block-size:12px; border-radius:3px; }

/* one tooltip per figure, placed in the panel */
.vv-tip{ position:absolute; z-index:5; inset-block-start:0; inset-inline-start:0; min-inline-size:120px; max-inline-size:240px;
  padding:10px 12px; border-radius:10px; background:var(--elev-3); color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.5), inset 0 0 0 1px var(--elev-4);
  font:400 14px/1.6 var(--font-sans); pointer-events:none; opacity:0; transition:opacity var(--dur-instant) var(--ease-standard); }
.vv-tip[data-on]{ opacity:1; }
.vv-tip__t{ display:block; margin-block-end:4px; font-weight:600; }
.vv-tip__r{ display:flex; align-items:center; justify-content:space-between; gap:14px; color:var(--ink-muted); }
.vv-tip__r b{ font:600 14px/1.4 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.vv-tip__r .vv-sw{ margin-inline-end:6px; }
.vv-tip__r span{ display:inline-flex; align-items:center; }
.vv-tip__r--tot{ margin-block-start:4px; padding-block-start:4px; box-shadow:inset 0 1px 0 var(--elev-4); color:var(--ink); }

/* ---------------------------------------------------------------- every quote */
.vv-wall{ margin-block-start:clamp(48px, 6vw, 80px); scroll-margin-block-start:calc(var(--dcr-h, 64px) + 64px); }
.vv-wall__head .t-eyebrow{ margin:0 0 8px; }
.vv-wall__t{ margin:0; font:600 var(--fs-h3, 24px)/1.25 var(--font-sans); letter-spacing:-0.01em; }
/* the filters: a glass bar; on a phone it folds into one "Filters" disclosure (the script folds it; with no
   script it stays open) */
.vv-fdet{ margin-block-start:var(--dcr-gap); }
.vv-fdet__s{ display:none; }
.vv-fbar{ margin:0; padding:16px 18px; border-radius:20px; gap:12px; }
.vv-fbar .dcr-filter{ grid-template-columns:minmax(0, 9ch) minmax(0,1fr); align-items:center; gap:12px; }
.vv-fbar .dcr-count{ margin:0; }
@media (max-width:719.98px){
  .vv-fdet__s{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; cursor:pointer;
    list-style:none; background:var(--ground-alt); box-shadow:inset 0 0 0 1px var(--hairline); font:600 14px/1 var(--font-sans); color:var(--ink); }
  .vv-fdet__s::-webkit-details-marker{ display:none; }
  .vv-fdet__s::after{ content:"+"; font:400 18px/1 var(--font-mono); color:var(--ink-muted); }
  .vv-fdet[open] > .vv-fdet__s::after{ content:"\2212"; }
  .vv-fdet__s:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
  .vv-fdet[open] > .vv-fbar{ margin-block-start:12px; }
  .vv-fbar .dcr-filter{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .vv-fbar .dcr-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-block:4px; margin-block:-4px; }
  .vv-fbar .dcr-chips::-webkit-scrollbar{ display:none; }
}
.vv-fcount{ margin-block-start:10px; }
.vv-wall__list{ margin-block-start:var(--dcr-gap); }

/* the cards: glass (.dcr-tile), a market dot in the market's chart colour, so a card reads against the charts */
.vv-cards .dcr-voice{ border-radius:20px; gap:12px; }
.vv-cards .dcr-voice__q p{ font-size:16px; }
.vv-cards .dcr-badge--q::before{ content:""; inline-size:8px; block-size:8px; border-radius:50%; margin-inline-end:7px; background:var(--dv-6); }
.vv-cards [data-market="eg"] .dcr-badge--q::before{ background:var(--dv-1); }
.vv-cards [data-market="sa"] .dcr-badge--q::before{ background:var(--dv-3); }
.vv-cards [data-market="ae"] .dcr-badge--q::before{ background:var(--dv-2); }
/* on a phone the quotes are a row you swipe, so twelve cards do not stack into a wall; the next one peeks in */
@media (max-width:719.98px){
  .vv-cards{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(84%, 320px); align-items:stretch;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:thin;
    margin-inline:calc(-1 * var(--wrap-gutter, 16px)); padding-inline:var(--wrap-gutter, 16px); padding-block-end:10px;
    scroll-padding-inline:var(--wrap-gutter, 16px); }
  .vv-cards > *{ scroll-snap-align:start; min-inline-size:0; }
}
.vv-more{ margin:var(--dcr-gap) 0 0; display:flex; justify-content:center; }
.vv-more__b[hidden]{ display:none; }
main.dcr .vv-wall ~ .k-qa{ margin-block-start:clamp(40px, 5vw, 64px); }

@media (prefers-reduced-motion:reduce){ .vv-tip{ transition:none; } }
@media print{ .vv-plot, .vv-key, .vv-legend, .vv-fdet{ display:none !important; } .vv-fig .dcr-seedata{ display:block; } }