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

   1 layout · 2 words around the charts · 3 the svg charts (drawn by assets/dcr-viz-skills.js) · 4 the pipeline
   map · 5 trending and the skills check. Data ink sits on solid elev-1 panels, never on glass. Series colours:
   SDR/BDR dv-2, Account Executive dv-3, at or over the floor dv-1, context dv-6, the one insight per chart
   dv-highlight. Zones on the pipeline: Acquisition dv-1, Winning silver, Expansion dv-4 (the brand's zone colours). */

/* ---------------------------------------------------------------- 1 · layout */
.sk-sec{ padding-block-start:clamp(20px, 3vw, 32px); }
.sk-grid{ display:grid; gap:var(--dcr-gap); grid-template-columns:minmax(0, 1fr); }
@media (min-width:1024px){
  .sk-grid{ grid-template-columns:repeat(12, minmax(0, 1fr)); }
  .sk-w--wide{ grid-column:1 / -1; }
  .sk-w--map{ grid-column:span 7; }
  .sk-w--floor{ grid-column:span 5; }
  .sk-w--half{ grid-column:span 6; }
}
.sk-grid + .k-qa{ margin-block-start:clamp(28px, 4vw, 48px); }
/* the scatter is drawn from the table above it: with the script off the panel has nothing of its own to show */
html:not(.js) #sk-map{ display:none; }
@media (min-width:1024px){ html:not(.js) #sk-floor{ grid-column:1 / -1; } }

/* ---------------------------------------------------------------- 2 · words around the charts */
.sk-take{ margin:0; max-inline-size:72ch; font:500 16px/1.5 var(--font-sans); color:var(--ink); text-wrap:pretty; }
.sk-cap{ margin:12px 0 0; max-inline-size:72ch; font:400 13px/1.55 var(--font-sans); color:var(--ink-muted); }
.sk-fig{ margin:0; display:flex; flex-direction:column; min-inline-size:0; }
.sk-fig .dcr-seedata{ margin-block-start:14px; }
.sk-strs{ display:none; }
.sk-legend{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:8px 24px; }
.sk-fig--bfly .sk-legend{ justify-content:space-between; }
.sk-legend__i{ display:inline-flex; align-items:center; gap:8px; font:500 13px/1.4 var(--font-sans); color:var(--ink); }
.sk-legend__i b{ font-weight:600; }
.sk-legend__n{ color:var(--ink-muted); font-weight:400; }
.sk-legend__n .k-num{ color:var(--ink); }
.sk-sw{ flex:none; inline-size:12px; block-size:12px; border-radius:3px; }
.sk-sw--sdr{ background:var(--dv-2); }
.sk-sw--ae{ background:var(--dv-3); }
.sk-sw--ok{ background:var(--dv-1); }
.sk-sw--under{ background:repeating-linear-gradient(45deg, var(--dv-6) 0 2px, transparent 2px 5px); box-shadow:inset 0 0 0 1px var(--dv-6); }
.sk-srcs{ display:grid; gap:2px; min-inline-size:0; }
.sk-srcs .dcr-w__fine{ margin:0; }
.sk-srcs .dcr-cite{ margin:0; }
.sk-none{ margin:12px 0 0; font:400 14px/1.5 var(--font-sans); color:var(--ink-muted); scroll-margin-block-start:calc(var(--dcr-h, 64px) + 72px); }
.sk-none b{ color:var(--ink); font-weight:600; margin-inline-end:6px; }
.sk-legend__i[id]{ scroll-margin-block-start:calc(var(--dcr-h, 64px) + 72px); }
.sk-learn{ font-size:14px; }
.sk-table .sk-th__n{ color:var(--ink-muted); font-weight:400; }
.sk-table td .k-status{ white-space:nowrap; }

/* ---------------------------------------------------------------- 3 · the svg charts */
.sk-plot{ position:relative; inline-size:100%; min-inline-size:0; }
.sk-plot[hidden]{ display:none; }
.sk-svg{ display:block; inline-size:100%; block-size:auto; overflow:visible; }
.sk-svg text{ font-family:var(--font-sans); }
.sk-svg .sk-track{ fill:var(--dv-grid); }
.sk-svg .sk-bar--sdr{ fill:var(--dv-2); }
.sk-svg .sk-bar--ae{ fill:var(--dv-3); }
.sk-svg .sk-bar--hi{ fill:var(--dv-highlight); }
.sk-svg .sk-lbl{ fill:var(--ink); font-size:13px; font-weight:500; }
.sk-svg .sk-val{ fill:var(--ink-muted); font:500 12px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.sk-svg .sk-val--hi{ fill:var(--ink); font-weight:700; }
.sk-svg .sk-val--none{ fill:var(--ink-muted); }
.sk-svg .sk-spine{ stroke:var(--hairline); stroke-width:1; }
.sk-svg .sk-hit{ fill:transparent; }
.sk-svg .sk-row:hover .sk-track{ fill:var(--elev-4); }
.sk-svg .sk-grid{ stroke:var(--dv-grid); stroke-width:1; }
.sk-svg .sk-axis{ stroke:var(--slate); stroke-width:1; }
.sk-svg .sk-mid{ stroke:var(--slate-500); stroke-width:1; stroke-dasharray:4 4; }
.sk-svg .sk-tick{ fill:var(--ink-muted); font:500 11px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.sk-svg .sk-tick--floor{ fill:var(--ink); }
.sk-svg .sk-axt{ fill:var(--ink-muted); font-size:12px; }
.sk-svg .sk-midl{ fill:var(--ink-muted); font:500 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.sk-svg .sk-q{ fill:var(--purple-subtle); fill-opacity:.4; }
.sk-svg .sk-qlbl{ fill:var(--ink-muted); font:500 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.sk-svg .sk-qlbl--both{ fill:var(--ink); }
.sk-svg .sk-pt{ fill:var(--dv-1); stroke:var(--elev-1); stroke-width:2; }
.sk-svg .sk-pt--key{ fill:var(--ink); }
.sk-svg .sk-plbl{ fill:var(--ink-muted); font-size:12px;
  paint-order:stroke; stroke:var(--elev-1); stroke-width:3px; stroke-linejoin:round; }   /* a halo where a label crosses a half line */
.sk-svg .sk-plbl--key{ fill:var(--ink); font-weight:600; }
.sk-svg .sk-glbl{ fill:var(--ink); font-size:13px; font-weight:600; }
.sk-svg .sk-mlbl{ fill:var(--ink-muted); font-size:12px; }
.sk-svg .sk-fbar--ok{ fill:var(--dv-1); }
.sk-svg .sk-fbar--under{ stroke:var(--dv-6); stroke-width:1; }
.sk-svg .sk-fbar--hi{ stroke:var(--dv-highlight); stroke-width:1.5; }
.sk-svg .sk-hatch{ fill:var(--dv-6); }
.sk-svg .sk-hatch--hi{ fill:var(--dv-highlight); }
.sk-svg .sk-floorline{ stroke:var(--ink); stroke-width:1.5; stroke-dasharray:5 4; }
.sk-svg .sk-floorlbl{ fill:var(--ink); font:600 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.sk-tip{ position:absolute; z-index:5; pointer-events:none; display:grid; gap:2px; max-inline-size:260px; padding:8px 10px;
  border-radius:8px; background:var(--elev-3); color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.5); }
.sk-tip[hidden]{ display:none; }
.sk-tip__t{ font:600 13px/1.35 var(--font-sans); }
.sk-tip__v{ font:500 12px/1.4 var(--font-mono); color:var(--ink-muted); white-space:pre-wrap; }

/* ---------------------------------------------------------------- 4 · the pipeline map */
.sk-pipe{ margin:0; min-inline-size:0; }
.sk-pipe__grid{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:minmax(0, 1fr); }
.sk-pipe__mark{ min-inline-size:0; }
.sk-pipe__mark img{ display:block; inline-size:100%; max-inline-size:640px; block-size:auto; margin-inline:auto; }
.sk-blk{ position:relative; display:grid; gap:10px; align-content:start; min-inline-size:0; padding:14px 14px 16px;
  border-radius:12px; background:var(--elev-2); }
[dir="rtl"] .sk-blk{ direction:rtl; }
.sk-blk__edge{ display:none; }
.sk-blk__edge i{ display:block; flex:var(--g) 1 0; min-inline-size:0; }
.sk-ph--acq{ background:var(--dv-1); }
.sk-ph--win{ background:var(--silver); }
.sk-ph--exp{ background:var(--dv-4); }
.sk-blk__rooms{ margin:0; font:500 11px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.sk-blk__loc{ display:block; inline-size:148px; max-inline-size:100%; block-size:auto; }
.sk-blk__cs{ display:grid; gap:16px 28px; min-inline-size:0; }
.sk-blk__c{ display:grid; gap:10px; align-content:start; min-inline-size:0; }
.sk-blk__course{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.sk-blk__t{ margin:0; font:600 14px/1.3 var(--font-sans); }
.sk-blk__t .k-link{ font-size:14px; }
.sk-its{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sk-it{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:4px 10px; min-inline-size:0; }
.sk-it__l{ font:500 13px/1.35 var(--font-sans); color:var(--ink); min-inline-size:0; }
.sk-it__v{ font:500 12px/1.2 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap;
  direction:ltr; unicode-bidi:isolate; }   /* the pair reads in the legend's order, as the bars under it */
.sk-it__sep, .sk-it__of{ color:var(--ink-muted); }
.sk-mb{ grid-column:1 / -1; display:grid; gap:2px; direction:ltr; }
.sk-mb__b{ position:relative; display:block; block-size:4px; border-radius:2px; background:var(--dv-grid); overflow:hidden; }
.sk-mb__b::before{ content:""; position:absolute; inset-block:0; left:0; inline-size:var(--w, 0%); border-radius:2px; }
.sk-mb__b--sdr::before{ background:var(--dv-2); }
.sk-mb__b--ae::before{ background:var(--dv-3); }
.sk-pipe .sk-cap{ margin-block-start:14px; }
.sk-w--pipe .sk-legend{ margin:0; }
@media (min-width:720px) and (max-width:1023px){
  .sk-pipe__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sk-pipe__mark, .sk-blk--all{ grid-column:1 / -1; }
  .sk-blk--all .sk-blk__cs{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
}
/* desktop: the skills stand under the rooms of the authored mark. The columns are the mark's own room widths
   (--cols, from its file), so a block's edge sits under its rooms; nothing of the mark is redrawn. */
@media (min-width:1024px){
  .sk-pipe__grid{ grid-template-columns:var(--cols); column-gap:0; row-gap:8px; margin-inline:auto; }
  .sk-pipe__mark{ grid-column:1 / -1; grid-row:1; margin-block-end:-6px; }
  .sk-pipe__mark img{ max-inline-size:none; }
  .sk-blk{ grid-column:var(--c); grid-row:var(--r); margin-inline:3px; padding-block-start:0; overflow:hidden; }
  .sk-blk--free{ padding-block-start:14px; }
  .sk-blk__edge{ display:flex; gap:2px; block-size:4px; margin-inline:-14px; margin-block-end:4px; }
  .sk-blk__loc{ display:none; }
  .sk-blk--all .sk-blk__cs{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
  .sk-blk--free .sk-its{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px 28px; }
  /* the mark's room line and names, faded out where the room columns run on into the skills below */
  .sk-pipe__mark{ aspect-ratio:906 / 300; overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent); mask-image:linear-gradient(to bottom, #000 78%, transparent); }
}

/* ---------------------------------------------------------------- 5 · trending and the skills check */
.sk-trend{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.sk-trend__i{ display:grid; gap:12px; justify-items:start; align-content:start; }
.sk-trend__i > *{ margin:0; }
.sk-trend__t{ font:600 18px/1.3 var(--font-sans); color:var(--ink); text-wrap:balance; }
.sk-trend__roles{ font:500 11px/1.4 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.sk-its--trend{ inline-size:100%; max-inline-size:420px; }
.sk-ev{ margin:12px 0 0; font:400 14px/1.5 var(--font-sans); color:var(--ink-muted); }
.sk-ev b{ color:var(--ink); }
.sk-steps{ list-style:none; margin:0; padding:0; display:grid; gap:8px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:560px){ .sk-steps{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.sk-steps__i{ display:grid; gap:6px; align-content:start; padding:12px; border-radius:12px; background:var(--elev-2);
  font:600 13px/1.35 var(--font-sans); color:var(--ink); }
.sk-steps__n{ font:500 12px/1 var(--font-mono); color:var(--ink-muted); }
.sk-facts-row{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 16px;
  font:500 11px/1.5 var(--font-mono); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.sk-try__go{ margin:0; }
/* narrow screens: the block's authored locator beside its rooms, the courses under both */
@media (max-width:1023px){
  .sk-blk:not(.sk-blk--free){ grid-template-columns:104px minmax(0, 1fr); grid-template-areas:"loc rooms" "cs cs"; align-items:center; column-gap:14px; }
  .sk-blk__loc{ grid-area:loc; inline-size:104px; }
  .sk-blk__rooms{ grid-area:rooms; }
  .sk-blk__cs{ grid-area:cs; }
}
/* phones: the demand chart comes straight under its title, so the first screen shows it; its takeaway follows */
@media (max-width:719px){
  #sk-compare > .sk-fig{ order:1; }
  #sk-compare > .sk-take{ order:2; }
  #sk-compare > .dcr-w__foot{ order:3; }
}

/* ---------------------------------------------------------------- 0 · the WEF core-skills quadrant (#sk-2030)
   A scatter-quadrant redrawn in RIVET's system: eight WEF skill groups, each one brand hue (never magenta);
   magenta is kept for the single insight, AI and big data. Dark Command ground; AA on the panel; the dot colour
   is never the only signal (every dot is labelled or numbered, named in the legend and listed in the table). */
.sk-w--2030 .sk-take{ max-inline-size:68ch; }
.sk-fig--2030{ margin:0; display:flex; flex-direction:column; min-inline-size:0; }
.sk-2030__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 14px; min-inline-size:0; }
.sk-2030__barl{ color:var(--ink-muted); letter-spacing:var(--track-label); text-transform:uppercase; }
.sk-seg{ display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:16px; background:var(--elev-2); max-inline-size:100%; }
.sk-seg__b{ appearance:none; border:0; background:transparent; color:var(--ink-muted); cursor:pointer;
  font:600 13px/1 var(--font-sans); padding:8px 14px; border-radius:999px; }
.sk-seg__b:hover{ color:var(--ink); }
.sk-seg__b[aria-pressed="true"]{ background:var(--elev-4); color:var(--ink); }
.sk-seg__b:focus-visible{ outline:3px solid var(--purple-500); outline-offset:2px; }
@media (prefers-reduced-motion:no-preference){ .sk-seg__b{ transition:background .2s, color .2s; } }

/* the eight skill groups, each a RIVET hue, shared by the legend swatch, the table chip and the numbered list */
.sk-legend--cat{ gap:8px 18px; }
.sk-cat{ display:inline-flex; align-items:center; gap:7px; min-inline-size:0; }
.sk-cat__sw{ inline-size:10px; block-size:10px; border-radius:50%; flex:none; background:var(--sk-c, var(--dv-6)); }
.sk-cat--tech{ --sk-c:var(--cyan); }
.sk-cat--cog{ --sk-c:var(--purple-500); }
.sk-cat--eng{ --sk-c:var(--cyan-400); }
.sk-cat--eth{ --sk-c:var(--purple-600); }
.sk-cat--mgmt{ --sk-c:var(--orange); }
.sk-cat--self{ --sk-c:var(--gold); }
.sk-cat--team{ --sk-c:var(--green); }
.sk-cat--phys{ --sk-c:var(--green-500); }

/* the plot */
.sk-svg .sk-q--2030{ fill:var(--cyan); fill-opacity:.06; }
.sk-svg .sk-qlbl--core{ fill:var(--ink); }
.sk-svg .sk-qlbl__s{ fill:var(--ink-muted); font-size:11px; letter-spacing:0; text-transform:none; }
.sk-svg .sk-lead{ stroke:var(--slate-500); stroke-width:1; }
.sk-svg .sk-pt--tech{ fill:var(--cyan); }
.sk-svg .sk-pt--cog{ fill:var(--purple-500); }
.sk-svg .sk-pt--eng{ fill:var(--cyan-400); }
.sk-svg .sk-pt--eth{ fill:var(--purple-600); }
.sk-svg .sk-pt--mgmt{ fill:var(--orange); }
.sk-svg .sk-pt--self{ fill:var(--gold); }
.sk-svg .sk-pt--team{ fill:var(--green); }
.sk-svg .sk-pt--phys{ fill:var(--green-500); }
.sk-svg .sk-pt--hi{ fill:var(--dv-highlight); stroke:var(--ground); stroke-width:1.5; }   /* the one magenta insight */
.sk-svg .sk-plbl--hi{ fill:var(--ink); font-weight:600; }   /* the label beside the insight is ink, not magenta */
.sk-svg .sk-pnum{ fill:var(--ink); font:600 11px/1 var(--font-mono); font-variant-numeric:tabular-nums; }

/* the numbered fallback (overflow when a name will not fit; every dot on a phone) */
.sk-2030__nums{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:5px 18px;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); }
.sk-2030__num{ display:flex; align-items:center; gap:8px; min-inline-size:0;
  font:500 12px/1.35 var(--font-sans); color:var(--ink); }
.sk-2030__numn{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink-muted);
  inline-size:1.7em; text-align:end; flex:none; }
.sk-2030__num--hi .sk-2030__numn{ color:var(--ink); }
.sk-2030__miss{ margin:10px 0 0; }
.sk-cite{ margin:10px 0 0; }

@media (max-width:559px){
  .sk-2030__nums{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-block-size:264px; overflow:auto;
    padding-inline-end:4px; }
}