/* assets/dcr-page-signals.css · The Desert Camel Report, Chapter 6 · Signals (Issue 01, 11 Nov 2026).
   Loaded after assets/dcr.css and before assets/dcr-light.css on desert-camel-report/signals.html only.
   Owned by the signals lane: this chapter's own figures and the sign-up card. The shell (the chapter bar, the Lens, the
   cover band, the metric strip, the sticky-step and reveal states, the hatch, .is-lit / .is-dim) is in
   assets/dcr-light.css and is not repeated here.

   COLOUR  Build spec §2: markets Egypt dv-1 · Saudi dv-2 · UAE dv-3; seats SDR dv-1 · AE dv-2 · RevOps dv-3 · every
           other seat dv-5, the Founder included; panels moves and job posts dv-1, rounds dv-1 and new leaders dv-2
           (the issue's kind map); context dv-6. Every mark reads its colour from --c, which the Lens turns to dv-6 on
           the series that recede (.is-dim). Magenta is drawn twice on the page and no more: the busiest moves week
           (the insight; its value label is ink) and the sign-up's Submit (the action; white text, 14px semibold).
   TYPE    Plex Sans SemiBold sentence case for headings under Mono eyebrows; Mono for every numeral (tabular), the axes
           (micro 11) and the chips; Square Peg for the one hand note, hand-ink purple.
   MOTION  UI tier. The multiples draw week by week (bars grow from zero, 320ms, 20ms a week) once the figure is
           revealed; the step captions light their panel (200ms); everything is final under prefers-reduced-motion.
   RTL     Logical properties; the plots carry dir="ltr" (charts, dates and numerals do not mirror). */

/* ---------------------------------------------------------------- section heads, captions, footers */
.sg-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 24px; margin-block-end:clamp(14px, 1.8vw, 20px); }
.sg-head__t{ display:grid; gap:6px; min-inline-size:0; }
.sg-head__t .t-eyebrow{ margin:0; }
main.dcr.hubr .sg-h{ margin:0; font:600 var(--fs-h3, 24px)/1.2 var(--font-sans); letter-spacing:-.01em; text-wrap:balance; color:var(--ink); }
.sg-lead{ margin:0; font:400 var(--fs-body, 16px)/1.6 var(--font-sans); color:var(--ink-muted); max-inline-size:60ch; }
/* the Lens chip every panel carries: Mono meta, "UAE · Account Executive" (the script writes the choice in) */
.sg-lens{ display:inline-flex; align-items:center; gap:6px; margin:0; padding:5px 10px; border-radius:999px; background:var(--ghost-white, #F8F8FA);
  box-shadow:inset 0 0 0 1px var(--hairline); font:500 var(--fs-micro, 11px)/1 var(--font-mono); letter-spacing:var(--track-label, .08em);
  text-transform:uppercase; color:var(--ink-muted); white-space:nowrap; max-inline-size:100%; overflow:hidden; text-overflow:ellipsis; }
.sg-lens span + span::before{ content:"·"; margin-inline-end:6px; }
.sg-lens.is-set{ background:var(--ink); color:var(--white); box-shadow:none; }
main.dcr.hubr .sg-cap{ margin:0; font:400 var(--fs-small, 14px)/1.5 var(--font-sans); color:var(--ink-muted); max-inline-size:72ch; }
main.dcr.hubr .sg-p{ margin:0; font:400 var(--fs-body, 16px)/1.6 var(--font-sans); color:var(--ink-muted); max-inline-size:56ch; }
main.dcr.hubr .sg-w{ gap:14px; border-radius:var(--radius-card, 12px); }
main.dcr.hubr .sg-w .sg-head{ margin-block-end:0; }
main.dcr.hubr .sg-w .sg-h{ font-size:var(--fs-h4, 20px); }
.sg-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; margin-block-start:14px; }
main.dcr.hubr .sg-foot .dcr-stamp{ margin:0; }
.sg-source{ margin:0; font:400 var(--fs-small, 14px)/1.4 var(--font-sans); }
main.dcr.hubr .dcr-sec--strip + .dcr-sec{ padding-block-start:clamp(24px, 3vw, 40px); }
.sg-strip__note{ margin:10px 4px 0; font:500 var(--fs-micro, 11px)/1.4 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); }
main.dcr.hubr .sg-strip__note{ margin:10px 4px 0; }   /* the report's p reset took the 10px: the note touched the metric card (Market moves and the back cover keep theirs) */
/* the strip names its week on the eyebrow line above it: the last complete week */
main.dcr.hubr .sg-strip__k{ margin:0 4px 10px; color:var(--ink-muted); }
main.dcr.hubr .sg-strip__k time{ color:var(--ink); white-space:nowrap; }   /* a date never splits across lines ("2 / Nov 2026" at 768) */
.sg-duo{ display:grid; gap:var(--dcr-gap, 20px); grid-template-columns:minmax(0, 1fr); align-items:start; }
@media (min-width:1024px){ .sg-duo{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------------------------------------------------------------- 1 · the spread: four small multiples (CSS bars) */
/* the legacy .dcr-steps (assets/dcr.css: an ordered list, 72ch) is reset here: this one is the sticky spread */
main.dcr.hubr .sg-steps.dcr-steps{ margin:4px 0 0; padding:0; list-style:none; max-inline-size:none; }
main.dcr.hubr .sg-fig{ margin:0; padding:clamp(16px, 2vw, 24px); border-radius:var(--radius-card, 12px); background:var(--white); box-shadow:var(--shadow-card);
  display:grid; gap:14px; transform:none; }
.sg-multi{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 14px; }
.sg-panel{ display:grid; gap:6px; align-content:start; min-inline-size:0; }
.sg-panel__head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 8px; }
/* room for the share button in the figure's top end corner (assets/dcr-share.css keeps 36px on a card's first row):
   here the first row is the panels' heads, and the button sat on the second panel's total. Under 480px the total
   already wraps under its title, clear of the button, and the title needs the full width to stay on one line. */
@media (min-width:480px){ .sg-fig.dcr-share-host .sg-panel:nth-child(2) > .sg-panel__head{ padding-inline-end:36px; } }
.sg-panel__h{ margin:0; display:inline-flex; align-items:center; gap:6px; font:600 var(--fs-small, 14px)/1.3 var(--font-sans); color:var(--ink); }
.sg-ico{ flex:none; inline-size:16px; block-size:16px; color:var(--ink-muted); }
.sg-panel__tot{ margin:0; font:400 var(--fs-meta, 12px)/1.3 var(--font-sans); color:var(--ink-muted); }
.sg-panel__tot b{ font:600 var(--fs-data, 16px)/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.sg-panel__lit{ margin:0; font:500 var(--fs-micro, 11px)/1.4 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); }
.sg-panel__lit b{ color:var(--ink); font-weight:600; }
.sg-panel__lit[hidden]{ display:none; }
.sg-plot{ position:relative; direction:ltr; padding-block-start:46px; border-block-end:1px solid var(--hairline); }
.sg-bars{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--sg-n, 15), minmax(0, 1fr)); gap:2px;
  align-items:end; block-size:120px; }
.sg-bar{ position:relative; display:grid; grid-template-rows:auto minmax(0, 1fr); block-size:100%; min-inline-size:0; }
/* every value is in the DOM for a screen reader; the latest and the busiest are shown */
.sg-bar__v{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sg-bar--last .sg-bar__v, .sg-bar--max .sg-bar__v{ position:absolute; inset-block-end:calc(var(--h, 0%) + 4px); inset-inline-start:50%; transform:translateX(-50%);
  inline-size:auto; block-size:auto; overflow:visible; clip-path:none; margin:0;
  font:600 var(--fs-meta, 12px)/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.sg-bar--last .sg-bar__v{ inset-inline-start:auto; inset-inline-end:0; transform:none; }
.sg-bar--part .sg-bar__v{ inset-block-end:calc(100% + 4px); z-index:1; }   /* above its hatched track, never on it */
.sg-bar--lift .sg-bar__v{ inset-block-end:calc(100% + 20px); z-index:1; }
.sg-bar--max:not(.sg-bar--hi) .sg-bar__v{ font-weight:500; color:var(--ink-muted); }
main.dcr.hubr .sg-bar > p{ margin:0; }
.sg-bar__t{ position:relative; grid-row:2; display:block; block-size:100%; border-radius:2px 2px 0 0; }
.sg-bar__f{ position:absolute; inset-inline:0; inset-block-end:0; display:block; block-size:var(--h, 0%); border-radius:2px 2px 0 0;
  background:linear-gradient(to top, var(--c, var(--dv-6)) calc(var(--lit, 1) * 100%), var(--dv-6) 0); transform-origin:50% 100%; }
.sg-bar__f[data-n="0"]{ display:none; }
.sg-bar:not(.sg-bar--part):not(.sg-bar--none) .sg-bar__t{ background:transparent; }
/* the one magenta insight: the busiest moves week; its value label stays ink */
main.dcr.hubr .sg-bar--hi{ --c:var(--dv-highlight); }
/* hatched: for moves, the weeks the sweep has not reached; for job posts, the weeks before they were coded and the
   week the edition date cuts short */
.sg-bar--part .sg-bar__t, .sg-bar--none .sg-bar__t{ border-radius:2px 2px 0 0; }
.sg-bar__x{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sg-bar:first-child .sg-bar__x, .sg-bar--last .sg-bar__x{ position:absolute; inset-block-start:calc(100% + 6px); inline-size:auto; block-size:auto;
  overflow:visible; clip-path:none; font:500 var(--fs-micro, 11px)/1 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); }
.sg-bar:first-child .sg-bar__x{ inset-inline-start:0; }
.sg-bar--last .sg-bar__x{ inset-inline-end:0; }
.sg-panel{ padding-block-end:18px; }   /* room for the axis labels under the plot */
/* the Square Peg note: the one hand annotation of the page, pointing at the insight (never data) */
.sg-hand{ position:absolute; inset-block-end:calc(var(--h, 0%) + 22px); inset-inline-start:50%; z-index:2; margin:0; transform:translateX(-20%) rotate(-6deg);
  font:400 var(--fs-hand, 24px)/1 var(--font-hand, "Square Peg", cursive); color:var(--hand-ink, var(--purple)); white-space:nowrap; pointer-events:none; }
@media (max-width:719px){ .sg-hand{ font-size:20px; } }
:lang(ar) .sg-hand{ font-family:var(--font-arabic, "Almarai", sans-serif); font-size:12px; font-weight:700; }
/* the key, the caption */
.sg-key{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font:400 var(--fs-meta, 12px)/1.4 var(--font-sans); color:var(--ink-muted); }
.sg-key li{ display:inline-flex; align-items:center; gap:7px; }
.sg-sw{ display:inline-block; flex:none; inline-size:12px; block-size:12px; border-radius:2px; box-shadow:inset 0 0 0 1px var(--hairline); }
main.dcr.hubr .sg-fig .dcr-seedata{ margin:0; }
/* the step captions light their panel: the others recede while a step is current */
.sg-steps[data-step-active] .sg-panel{ opacity:.4; }
.sg-steps[data-step-active] .sg-panel.is-step{ opacity:1; }
@media (prefers-reduced-motion:no-preference){ .sg-panel{ transition:opacity var(--dur-quick, 200ms) var(--ease-standard, ease); } }
@media (prefers-reduced-motion:reduce){ .sg-steps[data-step-active] .sg-panel{ opacity:1; } }
@media (max-width:1023px){ .sg-steps[data-step-active] .sg-panel{ opacity:1; } }   /* phones read figure above steps: nothing recedes */
/* the step captions are margin notes (as on the cover): as tall as their copy, a hairline rule that turns ink on the
   current note, no card and no box; on desktop they run the figure's length beside it, so no column stands empty and
   the figure needs no sticky scroll */
main.dcr.hubr .sg-step{ display:grid; gap:4px; align-content:start; min-block-size:0; padding:4px 0 4px 20px; border-radius:0; background:none;
  box-shadow:none; border-inline-start:2px solid var(--hairline, #D1D1D9); }
main.dcr.hubr .sg-step[aria-current="step"]{ box-shadow:none; border-inline-start-color:var(--ink); color:var(--ink); }
@media (min-width:1024px){
  main.dcr.hubr .sg-steps.dcr-steps{ grid-template-columns:minmax(0, 8fr) minmax(0, 4fr); column-gap:clamp(24px, 3vw, 48px); align-items:stretch; }
  /* not sticky, and still the share button's frame: `static` here outranked the button's own frame class, so the
     button left the card for the page margin, outside the column (review, 12 Nov 2026) */
  main.dcr.hubr .sg-steps .dcr-steps__figure{ position:relative; top:auto; }
  main.dcr.hubr .sg-steps__list{ display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding-block:16px; }
}
@media (max-width:1023px){ main.dcr.hubr .sg-steps__list{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px 24px; } }
.sg-step > p{ margin:0; }
.sg-step__n{ font:600 var(--fs-display-m, 40px)/1.05 var(--font-mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.sg-step__t{ font:400 var(--fs-body, 16px)/1.6 var(--font-sans); }
@media (max-width:719px){ .sg-step__n{ font-size:var(--fs-h2, 32px); } }
/* the dual ruler under the spread: the cover's component (assets/dcr-ruler.css) on its own white card */
main.dcr.hubr .sg-ruler{ display:grid; gap:12px; margin-block-start:var(--dcr-gap, 20px); padding:clamp(16px, 2vw, 24px); }
main.dcr.hubr .sg-ruler .cv-ruler{ margin-block-start:0; }
.sg-founder{ margin:14px 0 0; padding:10px 14px; border-radius:8px; background:var(--ghost-white, #F8F8FA); font:400 var(--fs-small, 14px)/1.5 var(--font-sans); color:var(--ink); }
.sg-founder[hidden]{ display:none; }
/* the multiples draw week by week once the figure is in view; final under reduced motion and with the script off */
@media (prefers-reduced-motion:no-preference){
  html.js .sg-fig[data-reveal]:not(.is-in) .sg-bar__f{ transform:scaleY(0); }
  html.js .sg-fig[data-reveal] .sg-bar__f{ transition:transform var(--dur-base, 320ms) var(--ease-standard, ease); transition-delay:calc(var(--i, 0) * 20ms); }
}
main.dcr.hubr .sg-fig[data-reveal]{ transform:none; }   /* the figure itself does not slide: only its bars grow */
@media (min-width:720px) and (max-width:1023px){ .sg-bars{ block-size:150px; } }
@media (min-width:1280px){ .sg-bars{ block-size:140px; } }

/* ---------------------------------------------------------------- 2 · by market: three sparklines on one scale */
.sg-sparks{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sg-spark{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:2px 12px; padding:10px 12px; border-radius:var(--radius-button, 8px); background:var(--ghost-white, #F8F8FA); }
.sg-spark > p{ margin:0; }
.sg-spark__m{ font:600 var(--fs-small, 14px)/1.3 var(--font-sans); color:var(--ink); min-inline-size:0; }
.sg-spark__v{ font:400 var(--fs-meta, 12px)/1.3 var(--font-sans); color:var(--ink-muted); white-space:nowrap; }
.sg-spark__v b{ font:600 var(--fs-data, 16px)/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.sg-spark__plot{ grid-column:1 / -1; direction:ltr; }
.sg-spark__svg{ display:block; inline-size:100%; block-size:44px; overflow:visible; }
.sg-spark__base{ stroke:var(--hairline); stroke-width:1; vector-effect:non-scaling-stroke; }
.sg-spark__line{ stroke:var(--c, var(--dv-6)); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.sg-spark__line--part{ stroke-dasharray:3 3; }
.sg-spark__dot{ fill:var(--c, var(--dv-6)); }
.sg-spark__n{ grid-column:1 / -1; font:400 var(--fs-meta, 12px)/1.4 var(--font-sans); color:var(--ink-muted); }
/* the city beside its line: a bounded Depth thumbnail (the wash is the shell's .dcr-photo--depth), never a background */
.sg-spark--city{ grid-template-columns:96px minmax(0, 1fr) auto; column-gap:14px; }
.sg-spark--city .sg-spark__plot, .sg-spark--city .sg-spark__n{ grid-column:2 / -1; }
.sg-spark__city{ grid-column:1; grid-row:1 / span 3; align-self:stretch; inline-size:96px; min-block-size:96px; border-radius:8px; }
.sg-spark__pic{ position:absolute; inset:0; display:block; }
.sg-spark__pic img{ inline-size:100%; block-size:100%; object-fit:cover; object-position:50% 60%; }
@media (max-width:479px){ .sg-spark--city{ grid-template-columns:72px minmax(0, 1fr) auto; column-gap:12px; } .sg-spark__city{ inline-size:72px; min-block-size:88px; } }
main.dcr.hubr .sg-spark.is-dim .sg-spark__city{ opacity:1; color:var(--ink-muted); }
.sg-spark__n b{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; }
/* the lensed market in full ink; the rest recede to dv-6 (the shell's .is-dim sets --c) */
main.dcr.hubr .sg-spark.is-lit{ --c:var(--ink); background:var(--white); }
main.dcr.hubr .sg-spark.is-lit .sg-spark__line{ stroke-width:2.5; }
main.dcr.hubr .sg-spark.is-dim .sg-spark__line, main.dcr.hubr .sg-spark.is-dim .sg-spark__dot{ fill:none; stroke:var(--dv-6); }
main.dcr.hubr .sg-spark.is-dim .sg-spark__dot{ fill:var(--dv-6); }
.sg-spark--none{ grid-template-columns:minmax(0, 1fr); background:transparent; padding:0; }
.sg-spark--none .sg-spark__m{ font-weight:400; color:var(--ink-muted); }
.sg-spark__hatch{ padding:10px 12px; border-radius:8px; font:500 var(--fs-micro, 11px)/1.3 var(--font-mono) !important; letter-spacing:var(--track-label, .08em);
  text-transform:uppercase; color:var(--ink) !important; }

/* ---------------------------------------------------------------- 2 · by seat: the Lens split, week squares */
.sg-seats{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.sg-seat{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:6px 12px; border-radius:8px; }
.sg-seat > p{ margin:0; }
.sg-seat__l{ font:600 var(--fs-small, 14px)/1.4 var(--font-sans); color:var(--ink); min-inline-size:0; }
.sg-seat__v{ font:400 var(--fs-meta, 12px)/1.4 var(--font-sans); color:var(--ink-muted); white-space:nowrap; }
.sg-seat__v b{ font:600 var(--fs-data, 16px)/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); margin-inline-end:2px; }
.sg-seat__weeks{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(var(--sg-n, 15), minmax(0, 1fr)); gap:3px; direction:ltr; }
.sg-wk{ display:block; block-size:14px; border-radius:2px; background:var(--dv-grid, #E8E8EE); }
.sg-wk--on{ background:var(--c, var(--dv-6)); }
.sg-seat__weeks--none{ display:block; block-size:14px; border-radius:2px; }
.sg-seat__note{ grid-column:1 / -1; font:400 var(--fs-meta, 12px)/1.5 var(--font-sans); color:var(--ink-muted); }
main.dcr.hubr .sg-seat.is-lit{ padding:8px; margin:-8px; }
.sg-seat-none{ margin:0; padding:10px 14px; border-radius:8px; font:400 var(--fs-small, 14px)/1.5 var(--font-sans); color:var(--ink); }
.sg-seat-none[hidden]{ display:none; }

/* ---------------------------------------------------------------- 3 · the sign-up card: the page's one magenta action */
main.dcr.hubr .sg-sub__card{ display:grid; gap:clamp(20px, 3vw, 40px); padding:clamp(18px, 3vw, 40px); }
@media (min-width:1024px){ main.dcr.hubr .sg-sub__card{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:start; } }
.sg-sub__copy{ display:grid; gap:14px; align-content:start; }
.sg-sub__copy .t-eyebrow{ margin:0; }
main.dcr.hubr .sg-fine{ margin:0; font:400 var(--fs-small, 14px)/1.5 var(--font-sans); color:var(--ink-muted); max-inline-size:56ch; }
.sg-sub__form{ min-inline-size:0; }
main.dcr.hubr .sg-sub__form .rf{ margin:0; }
/* the Submit is the page's one magenta action: white on magenta at 14px semibold or more, hover included */
main.dcr.hubr .sg-sub__form .btn--magenta{ font-size:max(14px, var(--fs-small, 14px)); font-weight:600; color:var(--on-accent, #fff); }
main.dcr.hubr .sg-sub__form .btn--magenta:hover{ color:var(--on-accent, #fff); }
main.dcr.hubr .sg-sub__form .btn--magenta:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; }
@media (max-width:719px){ main.dcr.hubr .sg-sub__form .btn--magenta{ inline-size:100%; justify-content:center; } }

/* ---------------------------------------------------------------- 4 · a move we missed, sources */
main.dcr.hubr .sg-missed{ max-inline-size:760px; }
main.dcr.hubr .sg-missed > p{ margin:0; }
.sg-pubs{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:4px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.sg-pubs li{ display:flex; justify-content:space-between; gap:12px; padding:6px 10px; border-radius:var(--radius-button, 8px); background:var(--ghost-white, #F8F8FA);
  font:400 var(--fs-small, 14px)/1.4 var(--font-sans); color:var(--ink); }
.sg-pubs .k-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink-muted); }
main.dcr.hubr .sg-sources .dcr-seedata > .sg-p{ margin-block-start:10px; }

/* a week wholly after the moves sweep carries words, not a 0: read by a screen reader, never drawn over the hatch */
main.dcr.hubr .sg-bar--open .sg-bar__v{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }