/* assets/dcr-filters.css · The Desert Camel Report's filters (11 Nov 2026). Loaded on every report page after
   assets/dcr-light.css and assets/dcr-mark.css (build_report.py head()), so it never edits the shell's own sheets.
   1. THE FILTER BAR ([data-dcr-ll], the Lens line): one line in the same place on every chapter, right under the chapter
      band (under the hero on the cover). It says what the page shows ("Showing MENA · all seats"), lists the chosen
      markets and seats as removable chips (solid ink, like every selected option in the report), offers "Clear all",
      and opens the Lens sheet. A market with too little data adds one hatched line. Script off: the sentence alone,
      which is then true (nothing narrows). No magenta here: the page's one action stays the bar's "Add your numbers".
   2. THE LENS CHECKBOXES: each market and seat chip in the Lens sheet shows a Lucide square / square-check glyph, so
      the sheet reads as what it is, a multi-select (tick several markets and several seats).
   3. THE SKILLS SEAT PICKER: every seat, its coded posts in Plex Mono beside the name, and the low-sample mark (the
      report's hatch, as a dot) on a seat under the floor, with its key line; on phones the row scrolls sideways.
   Light mode (the report's mode), tokens with their light fallbacks, radius tokens only (8 controls, 12 cards, pill,
   50% dots), the purple focus ring (3px, 2px offset), the UI motion tier and nothing under reduced motion. */

/* ---------------------------------------------------------------- 1 · the filter bar */
.dcr-ll{ padding-block:12px 0; }
.dcr-ll__in{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-block-size:52px; padding-block:8px; padding-inline:16px 8px;
  border-radius:var(--radius-card, 12px); background:var(--white, #FFFFFF); box-shadow:var(--shadow-card, 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06));
  color:var(--ink, #000000); }
.dcr-ll__now{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-inline-size:0;
  font:600 var(--fs-small, 14px)/1.3 var(--font-sans); }
.dcr-ll__ico{ flex:none; inline-size:18px; block-size:18px; color:var(--ink-muted, #4A4A68); }
.dcr-ll__k{ font:500 var(--fs-micro, 11px)/1 var(--font-mono); letter-spacing:var(--track-label, .08em); text-transform:uppercase;
  color:var(--ink-muted, #4A4A68); }
.dcr-ll__slot{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; min-inline-size:0; }
.dcr-ll__def[hidden], .dcr-ll__note[hidden], .dcr-ll__clear[hidden]{ display:none; }
.dcr-ll__sep{ color:var(--ink-muted, #4A4A68); font-weight:400; }
/* the separator never starts a line: it is drawn at the end of the market slot, so when the seats wrap to a second
   row (two markets and two seats on a phone) that row does not open on a dot (review, 12 Nov 2026) */
.dcr-ll__slot[data-dcr-ll-slot="role"] > .dcr-ll__sep{ display:none; }
.dcr-ll__slot[data-dcr-ll-slot="market"]::after{ content:"\00B7"; color:var(--ink-muted, #4A4A68); font-weight:400; }
/* a chosen market or seat: solid ink, its name and a 16px Lucide x; the whole chip removes it */
.dcr-ll__chip{ appearance:none; border:0; display:inline-flex; align-items:center; gap:6px; min-block-size:32px; padding-block:0; padding-inline:12px 8px;
  border-radius:999px; background:var(--ink, #000000); color:var(--white, #FFFFFF); cursor:pointer;
  font:600 var(--fs-small, 14px)/1 var(--font-sans); white-space:nowrap;
  transition:background-color var(--dur-instant, 120ms) var(--ease-standard, ease); }
.dcr-ll__chip .dcr-ico{ inline-size:16px; block-size:16px; flex:none; opacity:.8; }
.dcr-ll__chip:hover{ background:var(--slate-700, #565675); }
.dcr-ll__chip:hover .dcr-ico{ opacity:1; }
.dcr-ll__chip:focus-visible, .dcr-ll__clear:focus-visible, .dcr-ll__edit:focus-visible{ outline:3px solid var(--purple, #3B06D4); outline-offset:2px; }
.dcr-ll__dot{ flex:none; inline-size:10px; block-size:10px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--slate-400, #A4A4C7); }
.dcr-ll__note{ flex:1 0 100%; order:3; margin:0; display:flex; align-items:center; gap:8px;
  font:400 var(--fs-small, 14px)/1.4 var(--font-sans); color:var(--ink-muted, #4A4A68); }
.dcr-ll__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-inline-start:auto; }
.dcr-ll__clear{ appearance:none; border:0; background:transparent; cursor:pointer; min-block-size:36px; padding:0 8px;
  border-radius:var(--radius-button, 8px); color:var(--purple, #3B06D4); font:600 var(--fs-small, 14px)/1 var(--font-sans); }
.dcr-ll__clear:hover{ text-decoration:underline; text-underline-offset:3px; }
.dcr-ll__edit{ appearance:none; border:0; display:inline-flex; align-items:center; gap:8px; min-block-size:40px; padding:0 14px;
  border-radius:var(--radius-button, 8px); background:var(--white, #FFFFFF); box-shadow:inset 0 0 0 2px var(--ink, #000000);
  color:var(--ink, #000000); cursor:pointer; font:600 var(--fs-small, 14px)/1 var(--font-sans); white-space:nowrap;
  transition:background-color var(--dur-instant, 120ms) var(--ease-standard, ease), color var(--dur-instant, 120ms) var(--ease-standard, ease); }
.dcr-ll__edit .dcr-ico{ inline-size:18px; block-size:18px; flex:none; }
.dcr-ll__edit:hover, .dcr-ll__edit[aria-expanded="true"]{ background:var(--ink, #000000); color:var(--white, #FFFFFF); }
/* with the script off nothing narrows and there is no sheet to open: the sentence alone */
html:not(.js) .dcr-ll__acts, html:not(.js) .dcr-ll__note{ display:none; }
@media (max-width:719px){
  .dcr-ll{ padding-block:8px 0; }
  .dcr-ll__in{ padding-block:8px; padding-inline:12px; gap:8px; }
  .dcr-ll__acts{ flex:1 0 100%; margin-inline-start:0; justify-content:space-between; }
  .dcr-ll__edit{ flex:1 1 auto; justify-content:center; }
}
@media print{ .dcr-ll__acts{ display:none; } .dcr-ll__in{ box-shadow:none; padding-inline:0; } }

/* ---------------------------------------------------------------- 2 · the Lens sheet's chips are checkboxes */
.dcr-lens .dcr-lchip::before{ content:""; flex:none; inline-size:16px; block-size:16px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  opacity:.7; }
.dcr-lens .dcr-lchip:has(input:checked)::before, .dcr-lens .dcr-lchip.is-on::before{ opacity:1;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='m8 12 3 3 5-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect x='3' y='3' width='18' height='18' rx='2' fill='black' mask='url(%23m)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='m8 12 3 3 5-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Crect x='3' y='3' width='18' height='18' rx='2' fill='black' mask='url(%23m)'/%3E%3C/svg%3E"); }
.dcr-lens .dcr-lchip{ padding-inline:12px 14px; }

/* ---------------------------------------------------------------- 3 · the Skills seat picker: every seat, n and the low mark */
.sk-pick{ padding:4px; margin:-4px; }
.sk-pick__b{ display:inline-flex; align-items:center; gap:6px; padding:0 14px; }
.sk-pick__n{ font:500 var(--fs-micro, 11px)/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink-muted, #4A4A68); }
.sk-pick__b[aria-pressed="true"] .sk-pick__n{ color:inherit; opacity:.8; }
.sk-pick__low{ flex:none; inline-size:10px; block-size:10px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--slate-400, #A4A4C7); }
.sk-pick__low[hidden]{ display:none; }
/* a seat with no coded post: not enough data yet, the Lens key's dashed ring (never the low-sample hatch) */
.sk-pick__none{ flex:none; box-sizing:border-box; inline-size:10px; block-size:10px; border-radius:50%; border:1px dashed var(--slate-400, #A4A4C7); }
.sk-pick__b[aria-pressed="true"] .sk-pick__none{ border-color:currentColor; opacity:.8; }
.sk-pick__none[hidden]{ display:none; }
.sk-pick__b--low .sk-pick__t{ color:var(--ink-muted, #4A4A68); }
.sk-pick__b--low[aria-pressed="true"] .sk-pick__t{ color:inherit; }
.sk-pick__key{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; font:400 var(--fs-small, 14px)/1.4 var(--font-sans);
  color:var(--ink-muted, #4A4A68); }
.sk-pick__k{ display:inline-flex; align-items:center; gap:8px; }
html:not(.js) .sk-pick__key{ display:none; }
@media (max-width:719px){
  /* nineteen seats: one row that scrolls sideways (dcr-viz-skills.js keeps the pressed seat in view) */
  .sk-pick{ flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; scroll-snap-type:x proximity; }
  .sk-pick::-webkit-scrollbar{ display:none; }
  .sk-pick__b{ flex:none; scroll-snap-align:start; }
}
@media (prefers-reduced-motion:reduce){
  .dcr-ll__chip, .dcr-ll__edit{ transition:none; }
}