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

   #numbers-flow    the path of a contribution: HTML nodes in a grid; assets/dcr-viz-numbers.js draws the curved
                    connectors (pipeline language: béziers and rounded nodes, never elbows or funnels).
   #numbers-floors  the progress matrix, drawn by the script from the table under "See the numbers".
   Panels are solid elev-1 (data ink never sits on glass); nodes are elev-2. Magenta: one insight, the pooled
   compensation column in the matrix. Logical properties only, so the Arabic twin mirrors the layout;
   plot areas carry dir="ltr" and do not mirror. */

.dcr-nviz{ padding-block-start:clamp(20px, 3vw, 32px); }
.dcr-nviz .dcr-dash{ margin-block-start:0; }
.dcr-takeaway{ font:600 15px/1.5 var(--font-sans); color:var(--ink); }
.dcr-w--nfloors .dcr-takeaway{ margin-block-start:-6px; }

/* ---------------------------------------------------------------- the flow */
.dcr-flow{ margin:0; display:grid; gap:14px; }
.dcr-flow__grid{ position:relative; display:grid; gap:22px; grid-template-columns:minmax(0, 1fr);
  /* room on the inline-end side for the curves that skip past a node on a phone */
  padding-inline-end:26px; }
.dcr-flow__svg{ position:absolute; inset:0; inline-size:100%; block-size:100%; overflow:visible; pointer-events:none; z-index:0; }
.dcr-flow__svg path{ fill:none; stroke:var(--slate-500); stroke-width:2; stroke-linecap:round; }
.dcr-flow__svg path.is-exit{ stroke:var(--dv-6); stroke-dasharray:2 6; }
.dcr-flow__svg circle{ fill:var(--slate-500); }
.dcr-flow__svg circle.is-exit{ fill:var(--dv-6); }
.dcr-flow__n{ position:relative; z-index:1; display:grid; gap:10px; align-content:start; min-inline-size:0;
  padding:16px 18px; border-radius:16px; background:var(--elev-2); }
.dcr-flow__n--exit{ background:var(--elev-1); box-shadow:inset 0 0 0 1px var(--elev-4); }
.dcr-flow__k{ display:flex; align-items:baseline; gap:10px; font:500 12px/1.4 var(--font-mono);
  letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:var(--ink); }
.dcr-flow__k .k-num{ color:var(--ink-muted); }
.dcr-flow__s{ font:400 13px/1.5 var(--font-sans); color:var(--ink-muted); }
.dcr-flow__s .k-num{ color:var(--ink); }
.dcr-flow__big{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; font:500 15px/1.3 var(--font-sans); color:var(--ink-muted); }
.dcr-flow__st{ white-space:nowrap; }
.dcr-flow__big .k-num{ font:500 clamp(28px, 2.6vw, 36px)/1 var(--font-mono); letter-spacing:-0.03em; color:var(--ink); margin-inline-end:4px; }
.dcr-flow__ico svg{ display:block; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dcr-flow__chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.dcr-flow__chips li{ display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px;
  background:var(--elev-3); font:500 12px/1.3 var(--font-sans); color:var(--ink); }
.dcr-flow__chips a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; min-height:32px; }
.dcr-flow__chips a::after{ content:"\2193"; margin-inline-start:6px; color:var(--ink-muted); }
.dcr-flow__chips a:hover{ text-decoration:underline; text-underline-offset:3px; }
.dcr-flow__chips a:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:999px; }
.dcr-flow__chips--q li{ background:transparent; box-shadow:inset 0 0 0 1px var(--elev-4); color:var(--ink-muted); }
.dcr-flow__chips--no li{ background:transparent; box-shadow:inset 0 0 0 1px var(--elev-4); color:var(--ink-muted);
  text-decoration:line-through; text-decoration-color:var(--slate-500); }

/* the floor gauge: 0 to the benchmark, the early-signal mark where the data puts it */
.dcr-flow__gauge{ position:relative; block-size:10px; border-radius:5px; background:var(--dv-grid); }
.dcr-flow__gtick{ position:absolute; inset-block:-4px; left:var(--at); inline-size:2px; margin-left:-1px; border-radius:1px; background:var(--ink); }
/* labels hang under their marks: 0 at the start, the early signal under its tick, the benchmark at the end */
.dcr-flow__gl{ position:relative; block-size:34px; font:400 12px/1.4 var(--font-sans); color:var(--ink-muted); }
.dcr-flow__gl > span{ position:absolute; top:0; white-space:nowrap; }
.dcr-flow__g0{ left:0; }
.dcr-flow__g1{ left:var(--at); translate:-50% 0; }
.dcr-flow__gl > .dcr-flow__g2{ top:auto; bottom:0; right:0; }
.dcr-flow__gl b{ font-weight:500; color:var(--ink); margin-right:4px; }

/* the published range: a picture of the shape, not of any figure */
.dcr-flow__range{ position:relative; display:block; block-size:14px; }
.dcr-flow__range::before{ content:""; position:absolute; left:0; right:0; top:50%; block-size:1px; background:var(--elev-4); }
.dcr-flow__range span{ position:absolute; top:50%; left:25%; inline-size:50%; block-size:8px; translate:0 -50%; border-radius:4px; background:var(--dv-1); }
.dcr-flow__range i{ position:absolute; top:50%; left:50%; inline-size:12px; block-size:12px; translate:-50% -50%; border-radius:50%;
  background:var(--ink); box-shadow:0 0 0 3px var(--elev-2); }

@media (min-width:720px){
  .dcr-flow__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 40px; padding-inline-end:0; }
  .dcr-flow__n--in{ grid-column:1; grid-row:1; }
  [data-flow-node="seal"]{ grid-column:2; grid-row:1; }
  .dcr-flow__n--floor{ grid-column:1; grid-row:2; }
  .dcr-flow__n--out{ grid-column:2; grid-row:2; }
  .dcr-flow__n--low{ grid-column:1; grid-row:3; }
  .dcr-flow__n--never{ grid-column:2; grid-row:3; }
}
@media (min-width:1024px){
  .dcr-flow__grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px 48px; }
  .dcr-flow__n--in{ grid-column:1; grid-row:1; }
  [data-flow-node="seal"]{ grid-column:2; grid-row:1; }
  .dcr-flow__n--floor{ grid-column:3; grid-row:1; }
  .dcr-flow__n--out{ grid-column:4; grid-row:1; }
  .dcr-flow__n--low{ grid-column:3; grid-row:2; }
  .dcr-flow__n--never{ grid-column:4; grid-row:2; }
}

/* ---------------------------------------------------------------- the floors matrix */
.dcr-floors{ margin:0; min-inline-size:0; }
.dcr-floors > *{ min-inline-size:0; max-inline-size:100%; }
.dcr-floors__plot{ position:relative; border-radius:12px; }
.dcr-floors__plot:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:4px; }
.dcr-floors .dcr-chartsvg text{ font-family:var(--font-sans); }
.dcr-floors .f-col{ fill:var(--ink); font:500 12px/1 var(--font-sans); }
.dcr-floors .f-grp{ fill:var(--ink); font:600 14px/1 var(--font-sans); }
.dcr-floors .f-role{ fill:var(--ink); font:500 13px/1 var(--font-sans); }
.dcr-floors .f-ax{ fill:var(--ink-muted); font:500 11px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.dcr-floors .f-v{ fill:var(--ink); font:500 12px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.dcr-floors .f-first{ fill:var(--ink); font:600 12px/1 var(--font-sans); }
.dcr-floors .f-track{ fill:var(--dv-grid); }
.dcr-floors .f-open{ fill:var(--ink); }
.dcr-floors .f-bench{ fill:var(--ink-muted); }
.dcr-floors .f-gap{ fill:url(#dcr-floors-hatch); }
.dcr-floors .f-hatch{ stroke:var(--slate-700); stroke-width:1.5; }
.dcr-floors .f-rule{ stroke:var(--elev-4); stroke-width:1; }
.dcr-floors .f-hi{ fill:none; stroke:var(--dv-highlight); stroke-width:2; }
.dcr-floors .f-dot{ stroke:none; }
.dcr-floors .f-sel{ fill:none; stroke:var(--focus-ring); stroke-width:2; }
.dcr-floors .f-hit{ fill:transparent; cursor:default; }
.dcr-floors .f-n{ rx:3; }
.dcr-floors .dv-1{ fill:var(--dv-1); } .dcr-floors .dv-2{ fill:var(--dv-2); } .dcr-floors .dv-3{ fill:var(--dv-3); }
.dcr-floors .dv-6{ fill:var(--dv-6); }

.dcr-floors__key{ order:2; list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px;
  font:400 13px/1.4 var(--font-sans); color:var(--ink-muted); }
.dcr-floors__key li{ display:inline-flex; align-items:center; gap:8px; }
.dcr-floors__sw{ display:inline-block; inline-size:18px; block-size:10px; border-radius:3px; flex:none; }
.dcr-floors__sw--n{ background:var(--dv-1); }
.dcr-floors__sw--open{ inline-size:3px; block-size:16px; border-radius:1px; background:var(--ink); }
.dcr-floors__sw--bench{ inline-size:3px; block-size:12px; border-radius:1px; background:var(--ink-muted); }
.dcr-floors__sw--gap{ background:repeating-linear-gradient(135deg, var(--slate-700) 0 1.5px, transparent 1.5px 5px); box-shadow:inset 0 0 0 1px var(--elev-4); }
.dcr-floors__sw--first{ background:transparent; box-shadow:inset 0 0 0 2px var(--dv-highlight); border-radius:4px; }
.dcr-floors .dcr-chart__cap{ order:3; }
.dcr-floors .dcr-seedata{ order:4; }
.dcr-floors__data thead th{ white-space:normal; }

/* the hover and keyboard read-out, positioned in the panel by the script */
.dcr-ntip{ position:absolute; z-index:3; max-inline-size:260px; padding:10px 12px; border-radius:10px; background:var(--elev-3);
  color:var(--ink); font:400 13px/1.45 var(--font-sans); pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.dcr-ntip[hidden]{ display:none; }
.dcr-ntip b{ display:block; margin-block-end:4px; font-weight:600; }
.dcr-ntip span{ display:flex; justify-content:space-between; gap:14px; color:var(--ink-muted); }
.dcr-ntip span i{ font-style:normal; font-family:var(--font-mono); color:var(--ink); }

@media (prefers-reduced-motion:no-preference){
  .dcr-flow__svg path{ transition:opacity var(--dur-base, 320ms) var(--ease-standard, ease); }
}
@media print{ .dcr-flow__svg{ display:none; } }