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

   CHARTS  Data ink sits on solid elev-1 panels, never on glass. Glass (liquid-glass.css) dresses only the filter
           bar (.dcr-tile), its chips (.dcr-chip) and the three open-roles cards (.dcr-tile).
           Heat grid: one hue, five steps (purple 900 -> 500); 0 is a hatch and a word, never a colour.
           Range charts: bars from zero, the market's colour (Egypt dv-1, Saudi Arabia dv-3, UAE dv-2), the typical
           figure as an ink dot, and one magenta dot per cell (the largest stated sample).
           Pipeline: the role colours (SDR/BDR dv-1, Account Executive dv-2, RevOps dv-3) on the authored mark.
   RTL     Logical properties. Plot areas carry dir="ltr" (charts and numerals do not mirror). */

/* ---------------------------------------------------------------- the explorer */
.rx-w{ gap:20px; }
.rx{ display:grid; gap:20px; min-inline-size:0; }

/* filter bar: market, role, workplace type */
.rx-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 28px; padding:14px 18px 16px; border-radius:16px; }
.rx-bar[hidden]{ display:none; }
.rx-bar__g{ display:grid; gap:8px; min-inline-size:0; }
.rx-bar__g[hidden]{ display:none; }
.rx-bar__k{ margin:0; font:500 11px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.rx-bar .dcr-chips{ gap:6px; }
.rx-bar .dcr-pex__wp{ padding:0; box-shadow:none; }
.rx-bar .dcr-chip:disabled{ opacity:.45; cursor:not-allowed; }
.rx-bar .dcr-chip:focus-visible{ outline:3px solid var(--purple-500); outline-offset:2px; }

/* map left, chart right; the map stays in view while the chart scrolls */
.rx-split{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:1024px){
  .rx-split{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:36px; }
  .rx-heat{ position:sticky; top:calc(var(--dcr-h, 64px) + 64px); }
}

/* heat grid: public figures per role and market */
.rx-heat{ margin:0; display:grid; gap:12px; min-inline-size:0; }
.rx-heat__cap{ font:400 14px/1.5 var(--font-sans); color:var(--ink-muted); }
.rx-heat__grid{ display:grid; grid-template-columns:minmax(72px, auto) repeat(3, minmax(0,1fr)); gap:4px; }
.rx-heat__corner{ display:block; }
.rx-heat__col{ align-self:end; padding:0 4px 6px; font:500 11px/1.3 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); text-align:center; overflow-wrap:anywhere; }
.rx-heat__row{ align-self:center; padding-inline-end:8px; font:600 13px/1.3 var(--font-sans); color:var(--ink); overflow-wrap:anywhere; }
.rx-cell{ position:relative; display:grid; align-content:center; justify-items:center; gap:2px; min-block-size:84px; padding:8px 4px;
  border-radius:10px; text-decoration:none; color:var(--white); background:var(--purple-900);
  transition:box-shadow var(--dur-instant) var(--ease-standard), translate var(--dur-instant) var(--ease-standard); }
.rx-cell[data-step="1"]{ background:var(--purple-900); }
.rx-cell[data-step="2"]{ background:var(--purple-800); }
.rx-cell[data-step="3"]{ background:var(--purple-700); }
.rx-cell[data-step="4"]{ background:var(--purple-600); }
.rx-cell[data-step="5"]{ background:var(--purple-500); color:var(--black); }
.rx-cell[data-step="0"]{ color:var(--warning-text);
  background:repeating-linear-gradient(135deg, var(--elev-3) 0 6px, var(--elev-1) 6px 12px); box-shadow:inset 0 0 0 1px var(--elev-4); }
.rx-cell__n{ font:500 clamp(22px, 2.4vw, 30px)/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.rx-cell__u{ font:500 11px/1.25 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; text-align:center; }
.rx-cell[data-step="0"] .rx-cell__u{ color:var(--warning-text); }
.rx-cell:hover{ translate:0 -1px; box-shadow:inset 0 0 0 1px var(--silver, #D1D1D9); }
.rx-cell[aria-current="true"]{ box-shadow:inset 0 0 0 3px var(--ink), 0 0 0 2px var(--elev-1); }
.rx-cell[aria-current="true"]::after{ content:""; position:absolute; inset-block-end:-7px; inset-inline-start:calc(50% - 6px);
  inline-size:12px; block-size:3px; border-radius:2px; background:var(--ink); }
.rx-cell:focus-visible{ outline:3px solid var(--purple-500); outline-offset:2px; }
.rx-heat__legend{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font:500 11px/1.4 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); }
.rx-heat__ramp{ display:inline-flex; align-items:center; gap:3px; direction:ltr; }
.rx-heat__ramp .k-num{ margin-inline:4px; }
.rx-heat__ramp i, .rx-heat__gap i{ display:inline-block; inline-size:18px; block-size:12px; border-radius:3px; }
.rx-heat__ramp i[data-step="1"]{ background:var(--purple-900); }
.rx-heat__ramp i[data-step="2"]{ background:var(--purple-800); }
.rx-heat__ramp i[data-step="3"]{ background:var(--purple-700); }
.rx-heat__ramp i[data-step="4"]{ background:var(--purple-600); }
.rx-heat__ramp i[data-step="5"]{ background:var(--purple-500); }
.rx-heat__gap{ display:inline-flex; align-items:center; gap:8px; color:var(--warning-text); }
.rx-heat__gap i{ background:repeating-linear-gradient(135deg, var(--elev-4) 0 3px, var(--elev-1) 3px 6px); box-shadow:inset 0 0 0 1px var(--elev-4); }

/* the panes: one cell's figures */
.rx-panes{ display:grid; gap:16px; min-inline-size:0; }
.rx-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0; font:500 11px/1.4 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); }
.rx-legend__bar{ display:inline-block; inline-size:22px; block-size:6px; border-radius:3px; background:var(--dv-6); }
.rx-legend__i{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; margin-inline-end:14px; }
.rx-legend__dot{ display:inline-block; inline-size:11px; block-size:11px; border-radius:50%; background:var(--ink); }
.rx-pane[data-rx-mk="eg"] .rx-legend__bar{ background:var(--dv-1); }
.rx-pane[data-rx-mk="sa"] .rx-legend__bar{ background:var(--dv-3); }
.rx-pane[data-rx-mk="ae"] .rx-legend__bar{ background:var(--dv-2); }
.rx-pane{ display:grid; gap:4px; min-inline-size:0; scroll-margin-block-start:calc(var(--dcr-h, 64px) + 64px); }
.rx-pane[hidden]{ display:none; }
.rx-ph{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; padding-block-end:4px; }
.rx-pt{ margin:0; font:600 var(--fs-h3, 24px)/1.25 var(--font-sans); letter-spacing:-0.01em; }
.rx-pt span{ color:var(--ink-muted); font-weight:400; }
.rx-pn{ font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.rx-held{ margin-block-start:8px; font:400 13px/1.55 var(--font-sans); color:var(--ink-muted); }
.rx-none{ position:relative; display:grid; gap:6px; padding:28px 22px; border-radius:16px; overflow:hidden; background:var(--elev-2); }
.rx-none__hatch{ position:absolute; inset:0; background:repeating-linear-gradient(135deg, var(--elev-3) 0 8px, transparent 8px 16px); opacity:.7; }
.rx-none__t, .rx-none__p{ position:relative; }
.rx-none__t{ font:600 var(--fs-h4, 20px)/1.3 var(--font-sans); color:var(--warning-text); }
.rx-none__p{ max-inline-size:52ch; font:400 14px/1.55 var(--font-sans); color:var(--ink-muted); }

/* one chart per figure type and period */
.rx-g{ margin:0; display:grid; gap:10px; min-inline-size:0; padding-block-start:16px; box-shadow:inset 0 1px 0 var(--hairline); }
.rx-g[hidden]{ display:none; }
.rx-g__cap{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.rx-g__k{ font:500 12px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink); }
.rx-g__ax{ font:500 11px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.rx-g__plot{ position:relative; inline-size:100%; min-inline-size:0; direction:ltr; }
.rx-g__plot[hidden]{ display:none; }
.rx-key{ display:inline-flex; align-items:center; gap:8px; margin:0; font:500 12px/1.4 var(--font-sans); color:var(--ink); }
.rx-key__dot{ inline-size:12px; block-size:12px; border-radius:50%; background:var(--dv-highlight); box-shadow:0 0 0 2px var(--elev-1); }
.rx-g__data{ margin:0; }
.rx-g__data > summary{ min-height:36px; font-size:13px; }
.rx-g--drawn .rx-g__data > summary{ color:var(--ink-muted); }

/* the drawn chart (assets/dcr-viz-roles.js): one user unit is one CSS pixel */
.rx-svg{ display:block; inline-size:100%; block-size:auto; overflow:visible; }
.rx-svg .rx-grid{ stroke:var(--dv-grid); stroke-width:1; }
.rx-svg .rx-zero{ stroke:var(--ink-muted); stroke-width:1; }
.rx-svg .rx-tick{ fill:var(--ink-muted); font:500 11px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.rx-svg .rx-pubt{ fill:var(--ink); font:600 13px/1 var(--font-sans); }
.rx-svg .rx-subt{ fill:var(--ink-muted); font:400 11px/1 var(--font-sans); }
.rx-svg .rx-ttlt{ fill:var(--ink-muted); font:500 11px/1 var(--font-sans); }
.rx-svg .rx-flagt{ fill:var(--warning-text); font:500 10px/1 var(--font-mono); letter-spacing:.06em; }
.rx-svg .rx-valt{ fill:var(--ink); font:500 13px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.rx-svg .rx-rngt{ fill:var(--ink-muted); font:500 11px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.rx-svg .rx-bar{ fill:var(--dv-6); }
.rx-g[data-rx-mk="eg"] .rx-svg .rx-bar{ fill:var(--dv-1); }
.rx-g[data-rx-mk="sa"] .rx-svg .rx-bar{ fill:var(--dv-3); }
.rx-g[data-rx-mk="ae"] .rx-svg .rx-bar{ fill:var(--dv-2); }
.rx-svg .rx-dot{ fill:var(--ink); stroke:var(--elev-1); stroke-width:2; }
.rx-svg .rx-dot--hi{ fill:var(--dv-highlight); }
.rx-svg .rx-hit{ fill:transparent; }
.rx-svg .rx-r{ cursor:default; outline:none; }
.rx-svg .rx-r:hover .rx-hit, .rx-svg .rx-r:focus .rx-hit{ fill:var(--elev-2); }
.rx-svg .rx-r:focus-visible .rx-hit{ stroke:var(--purple-500); stroke-width:2; }

/* the tooltip: the row's own text, cloned from the list below the chart */
.rx-tip{ position:absolute; z-index:5; inline-size:max-content; max-inline-size:min(320px, 92%); padding:10px 12px; border-radius:10px;
  background:var(--elev-3); color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.5); pointer-events:none; direction:ltr; text-align:left; }
.rx-tip[hidden]{ display:none; }
.rx-tip p{ margin:0; font:400 12px/1.5 var(--font-sans); color:var(--ink-muted); }
.rx-tip .rx-pub{ font:600 13px/1.4 var(--font-sans); color:var(--ink); }
.rx-tip .dcr-range__v{ font:500 13px/1.4 var(--font-mono); color:var(--ink); }
.rx-tip .dcr-range__t{ font:500 10px/1.5 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; }
.rx-tip .dcr-cite{ margin:2px 0 0; font-size:11px; }
.rx-tip .dcr-src__a, .rx-tip .sr-only{ display:none; }

/* the rows: the chart's data, and the chart itself with the script off (bars from zero, CSS) */
.rx .dcr-range{ grid-template-columns:minmax(0,1fr); }
.rx-pub{ font:600 14px/1.4 var(--font-sans); color:var(--ink); }
.rx-ins{ display:inline-block; margin-inline-start:8px; padding:1px 8px; border-radius:999px; background:var(--ground-alt);
  box-shadow:inset 0 0 0 1px var(--dv-highlight); font:600 11px/1.6 var(--font-sans); color:var(--ink); }
@media (min-width:720px){
  .rx .dcr-range{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); }
  .rx .dcr-range > :not(.dcr-range__plot){ grid-column:1; }
  .rx .dcr-range__plot{ grid-column:2; grid-row:1 / span 6; }
}
.rx .dcr-range__bar{ background:var(--dv-6); }
.rx [data-rx-mk="eg"] .dcr-range__bar{ background:var(--dv-1); }
.rx [data-rx-mk="sa"] .dcr-range__bar{ background:var(--dv-3); }
.rx [data-rx-mk="ae"] .dcr-range__bar{ background:var(--dv-2); }
.rx .dcr-range__dot{ background:var(--ink); }
.rx [data-dcr-insight] .dcr-range__dot{ background:var(--dv-highlight); }

/* workplace type: how many figures state one, as a bar from zero */
.rx-wp{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0; font:400 13px/1.5 var(--font-sans); color:var(--ink-muted); }
.rx-wp b{ color:var(--ink); font-weight:500; }
.rx-wp__bar{ position:relative; display:inline-block; inline-size:120px; block-size:6px; border-radius:3px; background:var(--elev-3); box-shadow:inset 2px 0 0 var(--ink-muted); }
.rx-wp__bar span{ position:absolute; inset-block:0; inset-inline-start:0; inline-size:var(--w); border-radius:3px; background:var(--dv-1); }

/* ---------------------------------------------------------------- the INFINITE Pipeline */
.rx-pipe{ margin:0; display:grid; gap:20px; }
.rx-pipe__map{ display:none; }
.rx-pipe__mark{ display:block; inline-size:100%; block-size:auto; }
.rx-pipe__lanes{ display:grid; grid-template-columns:var(--rx-cols, repeat(8, minmax(0,1fr))); row-gap:6px; }
.rx-lane{ display:flex; align-items:baseline; justify-content:space-between; gap:4px 10px; flex-wrap:wrap; min-inline-size:0;
  margin-inline:2px; padding:9px 12px; border-radius:10px; color:var(--black); }
.rx-lane--sdr{ background:var(--dv-1); }
.rx-lane--ae{ background:var(--dv-2); }
.rx-lane--revops{ background:var(--dv-3); }
.rx-lane__n{ font:600 14px/1.25 var(--font-sans); }
.rx-lane__r{ font:500 11px/1.25 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.rx-pipe__cap{ font:400 14px/1.55 var(--font-sans); color:var(--ink-muted); max-inline-size:72ch; }
.rx-roles{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rx-role{ display:grid; gap:12px; align-content:start; padding:18px; border-radius:16px; background:var(--elev-2); min-inline-size:0;
  scroll-margin-block-start:calc(var(--dcr-h, 64px) + 64px); }
.rx-role__loc{ display:block; inline-size:100%; max-inline-size:360px; block-size:auto; }
/* from 900px the authored mark carries every role's stretch, so the cards drop their own locator; from 1180px the
   cards stack beside the mark */
@media (min-width:900px){
  .rx-pipe__map{ display:grid; gap:10px; direction:ltr; align-content:start; }
  .rx-role__loc{ display:none; }
}
@media (min-width:1180px){
  .rx-pipe{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); grid-template-rows:auto 1fr; column-gap:32px; align-items:start; }
  .rx-pipe__map{ grid-column:1; grid-row:1; }
  .rx-pipe__cap{ grid-column:1; grid-row:2; }
  .rx-roles{ grid-column:2; grid-row:1 / span 2; grid-template-columns:minmax(0,1fr); }
  .rx-role{ padding:16px 18px; gap:8px; }
}
.rx-role__b{ display:grid; gap:6px; align-content:start; }
.rx-role__t{ display:flex; align-items:center; gap:8px; margin:0; font:600 18px/1.3 var(--font-sans); }
.rx-role__t::before{ content:""; flex:none; inline-size:10px; block-size:10px; border-radius:3px; background:var(--dv-6); }
.rx-role--sdr .rx-role__t::before{ background:var(--dv-1); }
.rx-role--ae .rx-role__t::before{ background:var(--dv-2); }
.rx-role--revops .rx-role__t::before{ background:var(--dv-3); }
.rx-role__rooms{ font:500 11px/1.45 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); }
.rx-role__p{ font:400 14px/1.55 var(--font-sans); color:var(--ink-muted); }
.rx-role__n{ font:400 13px/1.5 var(--font-sans); color:var(--ink-muted); }
.rx-role__n b{ font-size:18px; color:var(--ink); margin-inline-end:4px; }
.rx-role .dcr-w__more{ justify-self:start; }

/* ---------------------------------------------------------------- every figure */
.rx-all > summary{ font-size:15px; }
.rx-all .dcr-paygrid{ margin-block-start:8px; }
.rx-all .dcr-pay{ background:var(--elev-2); border-radius:16px; }

/* ---------------------------------------------------------------- rules and open roles */
.rx-foot{ display:grid; gap:var(--dcr-gap); margin-block-start:clamp(28px, 4vw, 48px); }
.rx-rules{ list-style:none; margin:0; padding:0; display:grid; gap:10px 24px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.rx-rules li{ padding-inline-start:14px; box-shadow:inset 2px 0 0 var(--hairline); font:400 14px/1.55 var(--font-sans); color:var(--ink-muted); }
.rx-rules b{ color:var(--ink); font-weight:600; }
.rx-open{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.rx-open__c{ display:grid; gap:6px; align-content:start; block-size:100%; padding:20px; border-radius:16px; text-decoration:none; color:var(--ink); }
.rx-open__c:focus-visible{ outline:3px solid var(--purple-500); outline-offset:2px; }
.rx-open__i svg{ inline-size:24px; block-size:24px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rx-open__k{ font:500 11px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.rx-open__t{ font:600 17px/1.35 var(--font-sans); text-wrap:balance; }
.rx-open__a{ margin-block-start:6px; font:600 13px/1.3 var(--font-sans); text-decoration:underline; text-underline-offset:3px; }
.rx-open__c:hover .rx-open__a{ text-decoration-thickness:2px; }
main.dcr[data-dcr-page="roles"] .k-qa{ margin-block-start:clamp(28px, 4vw, 48px); }

/* the page head sits right above the explorer: the section's own top padding would double the gap */
main.dcr[data-dcr-page="roles"] .dcr-page > .dcr-sec{ padding-block-start:clamp(20px, 3vw, 36px); }

@media (max-width:600px){
  /* one row per filter: its label, then its chips, which scroll inside the bar (never the page) */
  .rx-bar{ display:grid; padding:10px 0 10px 12px; gap:6px; }
  .rx-bar__g{ grid-template-columns:72px minmax(0,1fr); align-items:center; gap:8px; }
  .rx-bar .dcr-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:3px 12px 3px 3px; scroll-padding-inline:3px; }
  .rx-bar .dcr-chips::-webkit-scrollbar{ display:none; }
  .rx-bar .dcr-chip{ flex:none; }
  .rx-open__c{ grid-template-columns:auto minmax(0,1fr); column-gap:14px; padding:16px; }
  .rx-open__c > :not(.rx-open__i){ grid-column:2; }
  .rx-open__i{ grid-row:1 / span 3; }
  .rx-w .dcr-w__head .dcr-w__more{ display:none; }
  .rx-heat__grid{ grid-template-columns:minmax(64px, auto) repeat(3, minmax(0,1fr)); }
  .rx-cell{ min-block-size:72px; }
  .rx-heat__row{ font-size:12px; }
  .rx-heat__col{ font-size:10px; padding-inline:0; }
}
@media (prefers-reduced-motion:reduce){
  .rx-cell{ transition:none; }
  .rx-cell:hover{ translate:none; }
}