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

   PANELS  .dcr-w is solid elev-1, so chart ink never sits on glass; the move cards stay .dcr-tile (glass, dressed
           by assets/liquid-glass.css). No new glass selectors here.
   COLOUR  The entity keeps its colour on every chart: Funding / Egypt dv-1, New sales leader / Saudi Arabia dv-3,
           Launch / UAE dv-2, Expansion dv-5, Other dv-6. Magnitude (the heat table) is one hue, purple, five steps.
           Magenta (--dv-highlight) marks one thing per chart: the busiest week, the largest round. The heat table's
           largest cell and the leading role take ink emphasis instead, so a screen never shows two insights.
           A week the edition date cuts short is drawn at half fill and labelled with that date.
   RTL     Logical properties throughout; the SVG plots carry dir="ltr" (charts and numerals do not mirror). */

/* ---------------------------------------------------------------- series colours */
.mv-s--funding, .mv-s--eg{ --c:var(--dv-1); }
.mv-s--new_leader, .mv-s--sa{ --c:var(--dv-3); }
.mv-s--launch, .mv-s--ae{ --c:var(--dv-2); }
.mv-s--expansion{ --c:var(--dv-5); }
.mv-s--other{ --c:var(--dv-6); }
.mv-sw{ display:inline-block; flex:none; inline-size:10px; block-size:10px; border-radius:3px; background:var(--c, var(--dv-6)); }

/* ---------------------------------------------------------------- layout */
/* the head sits close to the first chart: the page opens on data */
.dcr-phead + .dcr-sec{ padding-block-start:clamp(8px, 1.5vw, 16px); }
.dcr-phead + .dcr-sec .dcr-stamp{ margin-block-start:0; }
.mv-dash{ margin-block-start:clamp(12px, 1.6vw, 18px); }
@media (min-width:1024px){
  .dcr-dash > .mv-w--full{ grid-column:span 12; }
  .dcr-dash > .mv-w--7{ grid-column:span 7; }
  .dcr-dash > .mv-w--5{ grid-column:span 5; }
}
.mv-w .dcr-chart{ margin:0; }
.mv-fig{ min-inline-size:0; }
.mv-cap{ max-inline-size:none; font-size:13px; }
.mv-take{ display:block; margin-block-end:2px; font:600 15px/1.45 var(--font-sans); color:var(--ink); }

/* the tools row: the switch, then the legend (the legend is always there for two or more series) */
.mv-tools{ order:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-block-end:14px; }
.mv-legend{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px;
  font:500 12px/1.4 var(--font-sans); color:var(--ink-muted); }
.mv-legend[hidden]{ display:none; }
.mv-legend li{ display:inline-flex; align-items:center; gap:7px; }
.mv-switch{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--elev-2); }
.mv-switch[hidden]{ display:none; }
.mv-switch button{ min-block-size:34px; padding:0 14px; border:0; border-radius:999px; cursor:pointer; background:transparent;
  color:var(--ink-muted); font:500 13px/1 var(--font-sans);
  transition:background-color var(--dur-instant) var(--ease-standard), color var(--dur-instant) var(--ease-standard); }
.mv-switch button:hover{ color:var(--ink); }
.mv-switch button[aria-pressed="true"]{ background:var(--ink); color:var(--ground); }
.mv-switch button:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
@media (pointer:coarse){ .mv-switch button{ min-block-size:44px; } }

/* ---------------------------------------------------------------- the plots (SVG drawn by assets/dcr-viz-moves.js) */
.mv-plot{ order:1; position:relative; inline-size:100%; min-inline-size:0; }
.mv-plot[hidden]{ display:none; }
.mv-svg{ display:block; inline-size:100%; block-size:auto; overflow:visible; direction:ltr; border-radius:8px; }
.mv-svg:focus{ outline:none; }
.mv-svg:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:4px; }
.mv-base{ stroke:var(--hairline); stroke-width:1; }
.mv-grid{ stroke:var(--dv-grid); stroke-width:1; }
.mv-grid--x{ stroke-dasharray:2 4; }
.mv-seg{ fill:var(--c); }
.mv-col{ transition:opacity var(--dur-instant) var(--ease-standard); }
.mv-col.is-off{ opacity:.45; }
.mv-col--part .mv-seg{ fill-opacity:.5; }
.mv-x--part{ fill:var(--ink-muted); font-size:10px; }
.mv-val{ fill:var(--ink-muted); font:500 12px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.mv-val--hi{ fill:var(--ink); font-weight:600; }
.mv-x, .mv-y{ fill:var(--ink-muted); font:500 11px/1 var(--font-mono); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.mv-x--hi{ fill:var(--ink); }
.mv-hi{ fill:var(--ink); font:600 12px/1 var(--font-sans); }
.mv-caret{ fill:var(--dv-highlight); }
.mv-band{ stroke:var(--hairline); stroke-width:1; }
.mv-hatch{ stroke:var(--elev-4); stroke-width:2; }
.mv-band__t{ fill:var(--ink-muted); font:500 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.mv-dot{ fill:var(--c); stroke:var(--elev-1); stroke-width:2; transition:opacity var(--dur-instant) var(--ease-standard); }
.mv-dot--none{ fill:var(--elev-1); stroke:var(--c); stroke-width:2; }
.mv-dot--hi{ fill:var(--dv-highlight); }
.mv-svg.is-hover .mv-dot:not(.is-on):not(.mv-dot--hi){ opacity:.4; }
.mv-dot.is-on{ stroke:var(--ink); }

/* the first draw rises from the baseline; redraws (switch, resize) do not move */
@media (prefers-reduced-motion:no-preference){
  .mv-anim .mv-col{ transform-box:fill-box; transform-origin:50% 100%; animation:mv-rise var(--dur-slow, 560ms) var(--ease-emphasized, ease-out) both;
    animation-delay:calc(var(--i, 0) * 24ms); }
  .mv-anim .mv-dot{ animation:mv-in var(--dur-base, 320ms) var(--ease-standard, ease-out) both; animation-delay:calc(var(--i, 0) * 8ms); }
}
@keyframes mv-rise{ from{ transform:scaleY(0); } to{ transform:none; } }
@keyframes mv-in{ from{ opacity:0; } to{ opacity:1; } }

/* the tooltip: elev-3, ink text, never on the data */
.mv-tip{ position:absolute; z-index:3; inset-block-start:0; inset-inline-start:0; min-inline-size:150px; max-inline-size:240px;
  padding:10px 12px; border-radius:10px; background:var(--elev-3); box-shadow:0 8px 24px rgba(0,0,0,.5), inset 0 0 0 1px var(--elev-4);
  pointer-events:none; display:grid; gap:4px; }
.mv-tip[hidden]{ display:none; }
/* positioned from the plot's left edge in both directions: the plot itself does not mirror */
[dir="rtl"] .mv-tip{ inset-inline-start:auto; }
.mv-tip__h{ font:600 13px/1.35 var(--font-sans); color:var(--ink); }
.mv-tip__r{ display:flex; align-items:center; gap:8px; font:400 12px/1.4 var(--font-sans); color:var(--ink-muted); }
.mv-tip__r .mv-tip__l{ flex:1 1 auto; }
.mv-tip__r b{ font:500 12px/1.4 var(--font-mono); color:var(--ink); }
.mv-tip__r--b .mv-tip__l, .mv-tip__r--b b{ color:var(--ink); font-weight:600; }

/* no script: the plot stays hidden, so open the figures straight away where the browser allows it */
html:not(.js) .mv-seedata::details-content{ content-visibility:visible; block-size:auto; }

/* ---------------------------------------------------------------- the heat table (kind x market) */
.mv-heatwrap{ order:1; min-inline-size:0; }
.mv-heat{ inline-size:100%; border-collapse:separate; border-spacing:4px; table-layout:fixed; margin-inline:-4px; inline-size:calc(100% + 8px); }
.mv-heat th, .mv-heat td{ padding:0; }
.mv-heat__corner{ inline-size:24%; }
.mv-heat__all{ inline-size:22%; vertical-align:bottom; text-align:start; padding-inline-start:6px !important; }
.mv-heat__col{ vertical-align:bottom; text-align:center; }
.mv-colbar{ display:flex; align-items:flex-end; justify-content:center; block-size:56px; margin-block-end:6px; }
.mv-colbar__f{ display:block; inline-size:min(28px, 46%); block-size:var(--h, 0%); min-block-size:2px; border-radius:4px 4px 0 0; background:var(--dv-6); }
.mv-heat__n{ display:block; font:500 15px/1.2 var(--font-mono); color:var(--ink); }
.mv-heat__mk{ display:block; margin-block-start:2px; font:500 11px/1.3 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.mv-heat__row{ text-align:start; font:600 13px/1.3 var(--font-sans); color:var(--ink); padding-inline-end:8px !important; overflow-wrap:anywhere; }
.mv-heat__sub{ display:block; margin-block-start:2px; font:400 11px/1.35 var(--font-sans); color:var(--ink-muted); }
.mv-cell{ block-size:56px; border-radius:8px; text-align:center; vertical-align:middle; background:var(--elev-2); color:var(--ink-muted);
  font:500 17px/1 var(--font-mono); }
.mv-cell[data-step="1"]{ background:var(--purple-900); color:var(--white); }
.mv-cell[data-step="2"]{ background:var(--purple-800); color:var(--white); }
.mv-cell[data-step="3"]{ background:var(--purple-700); color:var(--white); }
.mv-cell[data-step="4"]{ background:var(--purple-600); color:var(--white); }
.mv-cell[data-step="5"]{ background:var(--purple-500); color:var(--black); }
.mv-cell[data-mv-top]{ box-shadow:inset 0 0 0 2px var(--ink); font-weight:600; }
.mv-cell__a{ display:grid; place-items:center; block-size:100%; min-block-size:56px; border-radius:8px; color:inherit; text-decoration:none;
  transition:box-shadow var(--dur-instant) var(--ease-standard); }
.mv-cell__a:hover{ box-shadow:inset 0 0 0 2px var(--ink); }
.mv-cell__a:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.mv-heat__tot{ vertical-align:middle; padding-inline-start:6px !important; }
.mv-heat__tot{ font:500 14px/1 var(--font-mono); color:var(--ink); }
.mv-heat__tot .k-num{ display:inline-block; margin-block-start:6px; }
.mv-rowbar{ display:block; block-size:8px; border-radius:4px; background:var(--dv-grid); overflow:hidden; direction:ltr; }
.mv-rowbar__f{ display:block; inline-size:var(--w, 0%); min-inline-size:2px; block-size:100%; border-radius:4px; background:var(--dv-6); }
.mv-heatkey{ order:1; display:flex; align-items:center; gap:4px; margin:12px 0 0; font:500 11px/1 var(--font-mono); letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-muted); }
.mv-heatkey span:first-child{ margin-inline-end:6px; }
.mv-heatkey span:last-child{ margin-inline-start:6px; }
.mv-heatkey__s{ display:block; inline-size:22px; block-size:10px; border-radius:3px; }
.mv-heatkey__s[data-step="1"]{ background:var(--purple-900); }
.mv-heatkey__s[data-step="2"]{ background:var(--purple-800); }
.mv-heatkey__s[data-step="3"]{ background:var(--purple-700); }
.mv-heatkey__s[data-step="4"]{ background:var(--purple-600); }
.mv-heatkey__s[data-step="5"]{ background:var(--purple-500); }
@media (max-width:479px){
  .mv-heat{ border-spacing:3px; }
  .mv-heat__corner{ inline-size:30%; }
  .mv-heat__all{ inline-size:20%; }
  .mv-heat__row{ font-size:12px; }
  .mv-cell{ block-size:48px; font-size:15px; }
  .mv-cell__a{ min-block-size:48px; }
  .mv-heat__mk{ font-size:10px; letter-spacing:.04em; }
}

/* ---------------------------------------------------------------- roles on the INFINITE Pipeline
   The diagram: the authored quiet mark is the axis (its own room names), each role's lane is laid on the mark's
   room boundaries (--mv-cols, read from the file), and beside each lane a bar of all moves, from zero. The lead
   role takes ink; the other lanes and bars recede. The mark and the lanes carry dir="ltr": the pipeline never
   mirrors; the words inside a lane follow their own script. */
.mv-pipe{ display:grid; gap:12px; }
.mv-pipe__rows{ order:1; list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.mv-pipe__row{ display:grid; grid-template-columns:minmax(0, 1fr); gap:6px; align-items:center; min-inline-size:0; }
.mv-pipe__row--head{ order:0; align-items:end; }
.mv-pipe__map{ min-inline-size:0; }
.mv-pipe__mark{ display:block; inline-size:100%; block-size:auto; }
.mv-pipe__k{ display:none; margin:0; font:500 11px/1.3 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.mv-pipe__lanes{ display:grid; grid-template-columns:var(--mv-cols, repeat(10, minmax(0, 1fr))); min-inline-size:0; }
.mv-lane{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; min-inline-size:0; margin:0;
  padding:8px 10px; border-radius:8px; background:var(--elev-3); color:var(--ink); }
.mv-lane__n{ min-inline-size:0; font:600 14px/1.25 var(--font-sans); unicode-bidi:plaintext; }
.mv-lane__r{ font:500 11px/1.25 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted); unicode-bidi:plaintext; }
.mv-pipe__row--lead .mv-lane{ background:var(--ink); color:var(--ground); }
.mv-pipe__row--lead .mv-lane__r{ color:var(--ground); }
.mv-pipe__bar{ display:flex; align-items:center; gap:12px; margin:0; min-inline-size:0; }
.mv-pipe__track{ flex:1 1 auto; display:block; block-size:10px; border-radius:5px; background:var(--dv-grid); overflow:hidden; direction:ltr; }
.mv-pipe__f{ display:block; inline-size:var(--w, 0%); min-inline-size:2px; block-size:100%; border-radius:5px; background:var(--dv-6); }
.mv-pipe__row--lead .mv-pipe__f{ background:var(--ink); }
.mv-pipe__v{ flex:none; min-inline-size:72px; white-space:nowrap; font:400 12px/1 var(--font-sans); color:var(--ink-muted); }
.mv-pipe__v b{ font:500 20px/1 var(--font-mono); letter-spacing:-0.02em; color:var(--ink); margin-inline-end:4px; }
.mv-pipe__row--lead .mv-pipe__v b{ font-weight:600; }
/* phones: the lane spans its rooms on the mark's own grid, the bar sits under it */
@media (max-width:479px){
  .mv-lane{ padding:7px 8px; }
  .mv-lane__n{ font-size:13px; }
  .mv-lane__r{ font-size:10px; }
}
/* wider: one row per role, the lane on the mark's grid and its bar beside it */
@media (min-width:720px){
  .mv-pipe{ grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); column-gap:28px; row-gap:10px; }
  .mv-pipe__row--head{ display:contents; }
  .mv-pipe__map{ grid-column:1; grid-row:1 / 3; }
  .mv-pipe > .mv-cap{ grid-column:2; grid-row:1; align-self:start; margin:0; }
  .mv-pipe__k{ display:block; grid-column:2; grid-row:2; align-self:end; }
  .mv-pipe__rows{ grid-column:1 / -1; grid-row:3; gap:10px; }
  .mv-pipe__row{ grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); column-gap:28px; }
}

/* ---------------------------------------------------------------- the feed */
.mv-feed{ margin-block-start:clamp(40px, 5vw, 64px); scroll-margin-block-start:calc(var(--dcr-h, 64px) + 64px); }
.mv-feed__head .t-eyebrow{ margin:0 0 6px; }
.mv-feed__t{ font-size:var(--fs-h3, 24px); }
.mv-feed__t:focus{ outline:none; }
.mv-filters{ grid-template-columns:minmax(0, 1fr); align-items:start; }
@media (min-width:1024px){ .mv-filters{ grid-template-columns:auto minmax(0, 1fr) auto; column-gap:32px; } }
.mv-card{ --c:var(--dv-6); }
.mv-card[data-series="funding"]{ --c:var(--dv-1); }
.mv-card[data-series="new_leader"]{ --c:var(--dv-3); }
.mv-card[data-series="launch"]{ --c:var(--dv-2); }
.mv-card[data-series="expansion"]{ --c:var(--dv-5); }
.mv-card .dcr-row__meta .dcr-badge:not(.dcr-badge--q)::before{ content:""; inline-size:8px; block-size:8px; margin-inline-end:7px;
  border-radius:2px; background:var(--c); }
/* the card is a record line: the headline, the figure, the source; the source's own note stays, cut to two lines */
.mv-card .dcr-row__p{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; font-size:13px; }
.mv-card .dcr-row__t{ font-size:16px; }
/* phones: the cards are one swiped row inside the gutter, so the page stays short; the page never scrolls sideways */
@media (max-width:719px){
  .mv-rows{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); padding-inline:var(--gutter); margin-inline:calc(-1 * var(--gutter));
    padding-block-end:8px; scrollbar-width:thin; align-items:stretch; }
  .mv-rows > .mv-card{ scroll-snap-align:start; }
}
main.dcr .mv-more{ display:flex; justify-content:center; margin-block-start:var(--dcr-gap); }
.mv-more [hidden]{ display:none; }
.mv-qa{ margin-block-start:clamp(32px, 4vw, 48px); max-inline-size:860px; }