/* assets/dcr-benchmark.css · the Personal Skills Benchmark (/desert-camel-report/benchmark, R16).
   The report's own look: light, white cards on the card shadow with no border, the Skills chapter's band, IBM Plex
   with Mono for the meta. Radius tokens only (8 controls, 12 cards, 999 pills, 2 data marks, 50% dots). One magenta
   action on the page: the free sign-up's button (the chapter bar's button is ink-outline here). Logical properties, so
   the Arabic twin mirrors. Selected options are solid ink, as in the Lens. */
.bm{ --bm-gap:clamp(16px, 2vw, 24px); }
.bm-sec .k-wrap > .hubr-card + .hubr-card{ margin-block-start:var(--bm-gap); }
.bm .t-eyebrow, .bm-eye{ margin:0; color:var(--ink-muted); }
.bm-h{ margin:0; font:600 var(--fs-h4, 20px)/1.25 var(--font-sans); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.bm-p{ margin:0; font:400 var(--fs-body, 16px)/1.6 var(--font-sans); color:var(--ink-muted); max-inline-size:62ch; }
.bm-ico{ flex:none; }
[dir="rtl"] .bm-ico--go{ transform:scaleX(-1); }

/* ---------------------------------------------------------------- the form: three steps */
.bm-form{ display:grid; gap:clamp(24px, 3vw, 36px); padding:clamp(20px, 3vw, 36px); }
.bm-step{ display:grid; grid-template-columns:40px minmax(0, 1fr); gap:16px; }
.bm-step + .bm-step{ padding-block-start:clamp(20px, 3vw, 32px); box-shadow:inset 0 1px 0 var(--hairline); }
.bm-step__n{ display:grid; place-items:center; inline-size:36px; block-size:36px; margin:0; border-radius:50%; background:var(--ink); color:#fff;
  font:600 15px/1 var(--font-mono); }
.bm-step__b{ display:grid; gap:14px; min-inline-size:0; }
.bm-step__h{ margin:0; font:600 var(--fs-h3, 24px)/1.2 var(--font-sans); letter-spacing:-.01em; color:var(--ink); }
.bm-step__p{ margin:0; font:400 var(--fs-small, 14px)/1.55 var(--font-sans); color:var(--ink-muted); max-inline-size:64ch; }
.bm-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:16px 24px; }
.bm-field{ display:grid; gap:8px; margin:0; padding:0; border:0; min-inline-size:0; }
.bm-field--wide{ grid-column:1 / -1; }
.bm-lab{ padding:0; font:600 var(--fs-small, 14px)/1.3 var(--font-sans); color:var(--ink); }
.bm-select{ min-block-size:48px; padding:0 40px 0 14px; border:0; border-radius:var(--radius-button, 8px); background-color:var(--ghost-white, #F8F8FA);
  box-shadow:inset 0 0 0 1px var(--hairline); font:500 16px/1.3 var(--font-sans); color:var(--ink); max-inline-size:100%; }
.bm-select:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; }
.bm-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.bm-chip{ position:relative; display:inline-flex; cursor:pointer; }
.bm-chip span{ display:inline-flex; align-items:center; min-block-size:40px; padding:0 14px; border-radius:999px; background:var(--ghost-white, #F8F8FA);
  box-shadow:inset 0 0 0 1px var(--hairline); font:500 var(--fs-small, 14px)/1 var(--font-sans); color:var(--ink);
  transition:background-color var(--dur-instant, 120ms) var(--ease-standard, ease), color var(--dur-instant, 120ms) var(--ease-standard, ease); }
.bm-chip:hover span{ box-shadow:inset 0 0 0 1px var(--ink); }
.bm-chip input:checked + span{ background:var(--ink); color:#fff; box-shadow:none; }
.bm-chip input:focus-visible + span{ outline:3px solid var(--purple); outline-offset:2px; }
.bm-goals{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.bm-goal{ position:relative; display:grid; align-content:start; gap:6px; padding:16px 18px; border-radius:var(--radius-card, 12px);
  background:var(--ghost-white, #F8F8FA); cursor:pointer; transition:box-shadow var(--dur-instant, 120ms) var(--ease-standard, ease); }
.bm-goal:hover{ box-shadow:inset 0 0 0 1px var(--ink); }
.bm-goal:has(input:checked){ background:var(--ink); }
.bm-goal:has(input:checked) .bm-goal__t, .bm-goal:has(input:checked) .bm-goal__p{ color:#fff; }
.bm-goal:has(input:focus-visible){ outline:3px solid var(--purple); outline-offset:2px; }
.bm-goal__t{ font:600 var(--fs-body, 16px)/1.25 var(--font-sans); color:var(--ink); }
.bm-goal__p{ font:400 13px/1.5 var(--font-sans); color:var(--ink-muted); }
.bm-scale{ border-radius:var(--radius-card, 12px); background:var(--ghost-white, #F8F8FA); }
.bm-scale > summary{ padding:12px 16px; font:600 var(--fs-small, 14px)/1.3 var(--font-sans); color:var(--ink); cursor:pointer; }
.bm-scale > summary:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; border-radius:var(--radius-card, 12px); }
.bm-scale__list{ display:grid; gap:10px; margin:0; padding:0 16px 16px; list-style:none; }
.bm-scale__list li{ display:grid; grid-template-columns:36px minmax(0, 11em) minmax(0, 1fr); gap:4px 12px; align-items:baseline; }
.bm-scale__n{ font:600 13px/1.4 var(--font-mono); color:var(--purple); }
.bm-scale__t{ font:600 var(--fs-small, 14px)/1.4 var(--font-sans); color:var(--ink); }
.bm-scale__p{ font:400 var(--fs-small, 14px)/1.5 var(--font-sans); color:var(--ink-muted); }
.bm-wait{ margin:0; padding:16px; border-radius:var(--radius-card, 12px); background:var(--ghost-white, #F8F8FA);
  font:400 var(--fs-small, 14px)/1.5 var(--font-sans); color:var(--ink-muted); }
.bm-rates{ display:grid; gap:8px; }
.bm-rate{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr); align-items:center; gap:10px 20px; margin:0; padding:12px 14px;
  border:0; border-radius:var(--radius-card, 12px); background:var(--ghost-white, #F8F8FA); min-inline-size:0; }
.bm-rate:has(input:checked){ background:#fff; box-shadow:inset 0 0 0 1px var(--hairline); }
.bm-rate__h{ display:grid; grid-template-columns:24px minmax(0, 1fr); gap:2px 8px; float:left; inline-size:100%; padding:0; }
[dir="rtl"] .bm-rate__h{ float:right; }
.bm-rate__h + *{ clear:both; }
.bm-rate__i{ grid-row:1 / span 2; font:600 13px/1.5 var(--font-mono); color:var(--ink-muted); }
.bm-rate__t{ font:600 var(--fs-small, 14px)/1.4 var(--font-sans); color:var(--ink); }
.bm-rate__d{ font:400 12px/1.4 var(--font-mono); color:var(--ink-muted); letter-spacing:.02em; }
.bm-rate__opts{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px; }
.bm-lv{ position:relative; display:grid; cursor:pointer; }
.bm-lv > span:not(.sr-only){ pointer-events:none; }
.bm-lv{ grid-template-rows:auto auto; justify-items:center; gap:2px; min-block-size:48px; padding:8px 4px; border-radius:var(--radius-button, 8px);
  background:#fff; box-shadow:inset 0 0 0 1px var(--hairline); text-align:center; }
.bm-lv:hover{ box-shadow:inset 0 0 0 1px var(--ink); }
.bm-lv:has(input:checked){ background:var(--ink); box-shadow:none; }
.bm-lv:has(input:checked) .bm-lv__n, .bm-lv:has(input:checked) .bm-lv__t{ color:#fff; }
.bm-lv:has(input:focus-visible){ outline:3px solid var(--purple); outline-offset:2px; }
.bm-lv__n{ font:600 13px/1.2 var(--font-mono); color:var(--ink); }
.bm-lv__t{ font:400 11px/1.25 var(--font-sans); color:var(--ink-muted); }
.bm-go{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px 20px; padding-block-start:8px; }
.bm-go__p{ margin:0; margin-inline-end:auto; font:500 13px/1.4 var(--font-mono); color:var(--ink-muted); }
.bm-err{ margin:0; font:600 var(--fs-small, 14px)/1.4 var(--font-sans); color:var(--ink); }
.bm-err:empty{ display:none; }
.bm-btn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-block-size:52px; padding:0 26px; border:0;
  border-radius:var(--radius-button, 8px); font:600 var(--fs-body, 16px)/1 var(--font-sans); cursor:pointer; text-decoration:none;
  transition:background-color var(--dur-instant, 120ms) var(--ease-standard, ease); }
.bm-btn:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; }
.bm-btn:disabled{ opacity:.5; cursor:default; }
.bm-btn--ink{ background:var(--ink); color:#fff; }
.bm-btn--ink:hover{ background:var(--ink-muted); }
.bm-btn--action{ background:var(--decision, #FF00D4); color:var(--on-decision, #fff); }
.bm-btn--action:hover{ background:var(--magenta-600, #D700B3); }

/* ---------------------------------------------------------------- the result */
.bm-res[hidden]{ display:none; }
.bm-res{ scroll-margin-block-start:120px; }
.bm-opened{ display:flex; align-items:center; gap:8px; margin:0 0 var(--bm-gap); font:600 var(--fs-small, 14px)/1.4 var(--font-sans); color:var(--ink); }
.bm-sum{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:16px 40px; padding:clamp(20px, 3vw, 36px); }
.bm-sum__copy{ display:grid; gap:10px; }
.bm-sum__h{ margin:0; font:600 var(--fs-h2, 32px)/1.12 var(--font-sans); letter-spacing:-.02em; color:var(--ink); max-inline-size:22ch; text-wrap:balance; }
main[data-m] .bm-sum__h:focus, main[data-m] .bm-sum__h:focus-visible{ outline:none; }   /* a script's landing point, not a control */
.bm-sum__p{ margin:0; font:500 13px/1.5 var(--font-mono); color:var(--ink); letter-spacing:.02em; }
.bm-sum__band{ margin:0; font:400 var(--fs-small, 14px)/1.5 var(--font-sans); color:var(--ink-muted); }
.bm-sum__score{ display:grid; justify-items:end; gap:12px; }
.bm-sum__big{ margin:0; font:600 clamp(56px, 7vw, 88px)/.9 var(--font-sans); letter-spacing:-.04em; color:var(--ink); }
.bm-sum__big span{ font-size:.42em; letter-spacing:0; color:var(--ink-muted); }
.bm-meter{ display:flex; gap:4px; margin:0; }
.bm-meter i{ inline-size:14px; block-size:22px; border-radius:2px; background:var(--purple); }
.bm-meter i.is-gap{ background:var(--ghost-white, #F8F8FA); box-shadow:inset 0 0 0 1px var(--hairline); }
.bm-again{ grid-column:1 / -1; justify-self:start; appearance:none; border:0; padding:0; background:none; color:var(--ink);
  font:600 var(--fs-small, 14px)/1.4 var(--font-sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.bm-again:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; border-radius:var(--radius-button, 8px); }
.bm-card{ display:grid; gap:14px; padding:clamp(20px, 2.6vw, 32px); }
.bm-rows, .bm-mrows{ display:grid; gap:0; margin:0; padding:0; list-style:none; }
.bm-row{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items:center; gap:10px 24px;
  padding-block:14px; box-shadow:inset 0 -1px 0 var(--hairline); }
.bm-row:last-child{ box-shadow:none; }
.bm-row__n{ display:grid; gap:2px; min-inline-size:0; }
.bm-row__n b{ font:600 var(--fs-small, 14px)/1.4 var(--font-sans); color:var(--ink); }
.bm-row__n span{ font:400 12px/1.4 var(--font-mono); color:var(--ink-muted); }
.bm-row__lv{ display:grid; gap:6px; }
.bm-tr{ display:grid; grid-template-columns:repeat(5, 1fr); gap:3px; max-inline-size:200px; }
.bm-tr__c{ position:relative; block-size:10px; border-radius:2px; background:var(--ghost-white, #F8F8FA); box-shadow:inset 0 0 0 1px var(--hairline); }
.bm-tr__c.is-gap{ background:repeating-linear-gradient(45deg, var(--hairline) 0 2px, transparent 2px 5px); }
.bm-tr__c.is-above{ background:color-mix(in srgb, var(--purple) 18%, #fff); }
.bm-tr__c.is-seat{ box-shadow:inset 0 0 0 2px var(--purple); }
.bm-tr__c.is-you{ background:var(--ink); box-shadow:none; }
.bm-row__lvt{ display:flex; gap:12px; font:400 12px/1.3 var(--font-mono); color:var(--ink-muted); }
.bm-row__lvt b{ font-weight:600; color:var(--ink); }
.bm-mk{ display:grid; gap:6px; min-inline-size:0; }
.bm-mk__t{ font:400 12px/1.4 var(--font-sans); color:var(--ink-muted); }
.bm-bar{ display:block; block-size:6px; border-radius:2px; background:var(--ghost-white, #F8F8FA); overflow:hidden; }
.bm-bar i{ display:block; block-size:100%; border-radius:2px; background:var(--purple); }
.bm-tag{ justify-self:end; display:inline-flex; align-items:center; min-block-size:24px; padding:0 10px; border-radius:999px;
  font:600 11px/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.bm-tag--gap{ background:var(--ink); color:#fff; }
.bm-tag--met, .bm-tag--above{ background:var(--ghost-white, #F8F8FA); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline); }
.bm-tag--off{ background:transparent; color:var(--ink-muted); box-shadow:inset 0 0 0 1px var(--hairline); }
.bm-note{ margin:0; font:400 var(--fs-small, 14px)/1.5 var(--font-sans); color:var(--ink-muted); }
.bm-mrow{ display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) 64px auto; align-items:center; gap:10px 18px; padding-block:10px;
  box-shadow:inset 0 -1px 0 var(--hairline); }
.bm-mrow:last-child{ box-shadow:none; }
.bm-mrow__n{ font:500 var(--fs-small, 14px)/1.4 var(--font-sans); color:var(--ink); }
.bm-mrow--off .bm-mrow__n{ color:var(--ink-muted); }
.bm-mrow--off .bm-bar i{ background:var(--hairline); }
.bm-mrow__v{ font:600 13px/1 var(--font-mono); color:var(--ink); text-align:end; }
.bm-mrow__v span{ font-weight:400; color:var(--ink-muted); }
.bm-cover{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:0; padding:14px 16px; border-radius:var(--radius-card, 12px);
  background:var(--ghost-white, #F8F8FA); }
.bm-cover__t{ font:600 var(--fs-body, 16px)/1.45 var(--font-sans); color:var(--ink); }
.bm-cover__k{ font:400 12px/1.4 var(--font-mono); color:var(--ink-muted); }

/* the locked part: the free sign-up */
.bm-lock{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:24px clamp(24px, 4vw, 56px); padding:clamp(20px, 3vw, 36px); }
.bm-lock__copy{ display:grid; align-content:start; gap:12px; }
.bm-eye--lock{ display:inline-flex; align-items:center; gap:8px; color:var(--purple); }
.bm-lock__list{ display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.bm-lock__list li{ position:relative; padding-inline-start:20px; font:500 var(--fs-small, 14px)/1.45 var(--font-sans); color:var(--ink); }
.bm-lock__list li::before{ content:""; position:absolute; inset-inline-start:2px; inset-block-start:.45em; inline-size:8px; block-size:8px;
  border-radius:2px; background:var(--purple); }
.bm-signup{ display:grid; gap:12px; }
.bm-signup__grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.bm-signup__wide{ grid-column:1 / -1; }
.bm-signup .rf-field{ display:grid; gap:6px; }
.bm-signup .rf-field label{ font:600 var(--fs-small, 14px)/1.3 var(--font-sans); color:var(--ink); }
.bm-signup .rf-opt{ font-weight:400; color:var(--ink-muted); }
.bm-signup input[type="text"], .bm-signup input[type="email"], .bm-signup input[type="url"]{ min-block-size:48px; padding:0 14px; border:0;
  border-radius:var(--radius-button, 8px); background:var(--ghost-white, #F8F8FA); box-shadow:inset 0 0 0 1px var(--hairline);
  font:400 16px/1.3 var(--font-sans); color:var(--ink); inline-size:100%; }
.bm-signup input:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; }
.bm-check{ display:grid; grid-template-columns:20px minmax(0, 1fr); gap:10px; align-items:start; font:400 var(--fs-small, 14px)/1.5 var(--font-sans); color:var(--ink); cursor:pointer; }
.bm-check input{ inline-size:18px; block-size:18px; margin:2px 0 0; accent-color:var(--ink); }
.bm-check__err{ grid-column:2; margin:0; font:600 13px/1.4 var(--font-sans); color:var(--ink); }
.bm-signup .bm-btn{ justify-self:start; }
.bm-fine{ margin:0; font:400 12px/1.5 var(--font-sans); color:var(--ink-muted); }
.bm-signup .form-note{ margin:0; font:600 var(--fs-small, 14px)/1.5 var(--font-sans); color:var(--ink); }

/* the learning path */
.bm-path{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.bm-step2{ display:grid; align-content:start; gap:12px; padding:16px; border-radius:var(--radius-card, 12px); background:var(--ghost-white, #F8F8FA); }
.bm-step2__h{ display:flex; align-items:center; gap:8px; margin:0; font:600 var(--fs-body, 16px)/1.3 var(--font-sans); color:var(--ink); }
.bm-step2__n{ display:grid; place-items:center; inline-size:26px; block-size:26px; border-radius:50%; background:var(--ink); color:#fff; font:600 12px/1 var(--font-mono); }
.bm-pis{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.bm-pi{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:12px 14px; border-radius:var(--radius-card, 12px); background:#fff;
  box-shadow:var(--shadow-card); }
.bm-pi__a{ font:600 var(--fs-small, 14px)/1.35 var(--font-sans); color:var(--ink); text-decoration:none; }
.bm-pi__a:hover{ text-decoration:underline; text-underline-offset:3px; }
.bm-pi__a:focus-visible, .bm-pi__more:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; border-radius:var(--radius-button, 8px); }
.bm-pi__p{ flex-basis:100%; font:400 13px/1.5 var(--font-sans); color:var(--ink-muted); }
.bm-pi__more{ display:inline-flex; align-items:center; gap:6px; font:600 13px/1.3 var(--font-sans); color:var(--ink); text-decoration:none; }
.bm-pi__more:hover{ text-decoration:underline; text-underline-offset:3px; }
.bm-pill{ display:inline-flex; align-items:center; min-block-size:22px; padding:0 8px; border-radius:999px; background:var(--ghost-white, #F8F8FA);
  box-shadow:inset 0 0 0 1px var(--hairline); font:600 11px/1 var(--font-mono); letter-spacing:.03em; color:var(--ink); white-space:nowrap; }
.bm-pill--pro, .bm-pill--max, .bm-pill--ultra{ background:var(--ink); color:#fff; box-shadow:none; }
.bm-pill--soon{ background:transparent; color:var(--ink-muted); }

/* who reads what, and how it works */
.bm-access{ display:grid; gap:14px; }
.bm-access__dl, .bm-how__dl{ display:grid; gap:12px; margin:0; }
.bm-access__dl > div, .bm-how__dl > div{ display:grid; grid-template-columns:minmax(0, 12em) minmax(0, 1fr); gap:4px 16px; align-items:baseline; }
.bm-access__dl dt, .bm-how__dl dt{ font:600 var(--fs-small, 14px)/1.4 var(--font-sans); color:var(--ink); }
.bm-access__dl dd, .bm-how__dl dd{ margin:0; font:400 var(--fs-small, 14px)/1.55 var(--font-sans); color:var(--ink-muted); max-inline-size:68ch; }
.bm-how{ padding-block:8px; }
.bm-how__dl{ padding-block:12px 4px; }
.bm-how__src{ margin:12px 0 0; font:400 12px/1.5 var(--font-mono); color:var(--ink-muted); }

/* ---------------------------------------------------------------- tablets and phones */
@media (max-width:1023px){
  .bm-row{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .bm-row .bm-mk{ grid-column:1; }
  .bm-row .bm-tag{ grid-column:2; grid-row:2; }
  .bm-path{ grid-template-columns:minmax(0, 1fr); }
  .bm-lock{ grid-template-columns:minmax(0, 1fr); }
  .bm-rate{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:767px){
  .bm-grid{ grid-template-columns:minmax(0, 1fr); }
  .bm-goals{ grid-template-columns:minmax(0, 1fr); }
  .bm-sum{ grid-template-columns:minmax(0, 1fr); }
  .bm-sum__score{ justify-items:start; }
  .bm-sum__h{ font-size:var(--fs-h3, 24px); }
  .bm-step{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .bm-step__n{ inline-size:30px; block-size:30px; font-size:13px; }
  .bm-lv__t{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .bm-lv{ min-block-size:44px; align-content:center; }
  .bm-scale__list li{ grid-template-columns:36px minmax(0, 1fr); }
  .bm-scale__p{ grid-column:2; }
  .bm-mrow{ grid-template-columns:minmax(0, 1fr) 56px; }
  .bm-mrow .bm-bar{ grid-column:1 / -1; grid-row:2; }
  .bm-mrow .bm-tag{ grid-column:1 / -1; justify-self:start; }
  .bm-access__dl > div, .bm-how__dl > div{ grid-template-columns:minmax(0, 1fr); }
  .bm-signup__grid{ grid-template-columns:minmax(0, 1fr); }
  .bm-signup .bm-btn{ justify-self:stretch; }
  .bm-go{ justify-content:stretch; }
  .bm-go .bm-btn{ flex:1 1 100%; }
}
@media (max-width:479px){
  .bm-row{ grid-template-columns:minmax(0, 1fr); }
  .bm-row .bm-tag{ grid-column:1; grid-row:auto; justify-self:start; }
}
@media (prefers-reduced-motion:reduce){
  .bm-chip span, .bm-goal, .bm-btn{ transition:none; }
}