/* Client Radar (Plan 2a) — on the desk's own tokens (static/css/desk/tokens.css). */
.cr-body { display: flex; flex-direction: column; gap: 10px; }
.cr-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 8px 12px; border: 1px solid var(--line, #d7dad1); border-radius: 8px; }
.cr-scan { font-size: var(--fs-label, 12px); color: var(--txt-2, #4b5260); }
.cr-h { font-size: var(--fs-title, 18px); margin: 14px 0 2px; }
.cr-week { font-size: var(--fs-micro, 11px); letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt-3, #727a88); margin: 12px 0 2px; }
.cr-empty { color: var(--txt-3, #727a88); font-style: italic; }

.cr-card { border: 1px solid var(--line, #d7dad1); border-left: 3px solid var(--txt-3, #727a88);
  border-radius: 8px; padding: 10px 12px; }
.cr-card.cr-t-adridha { border-left-color: var(--sage, #17694a); }
.cr-card.cr-t-mixed   { border-left-color: var(--gold, #8a5a00); }
.cr-card.cr-t-dridha  { border-left-color: var(--terra, #9b2230); }

.cr-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; }
.cr-who { font-weight: 600; }
.cr-when { font-size: var(--fs-micro, 11px); color: var(--txt-3, #727a88); }
.cr-what { margin-top: 3px; }
.cr-detail { font-size: var(--fs-label, 12px); color: var(--txt-2, #4b5260); margin-top: 2px; }

.cr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cr-chip { font-size: var(--fs-micro, 11px); padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--line, #d7dad1); color: var(--txt-2, #4b5260); }
.cr-chip.cr-adridha { color: var(--sage, #17694a); border-color: currentColor; }
.cr-chip.cr-mixed   { color: var(--gold, #8a5a00); border-color: currentColor; }
.cr-chip.cr-dridha, .cr-chip.cr-block { color: var(--danger, #9b2230); border-color: currentColor; }
.cr-chip.cr-none    { color: var(--txt-3, #727a88); }

.cr-actions { margin-top: 8px; }
.cr-btn { font: inherit; font-size: var(--fs-label, 12px); padding: 4px 10px; border-radius: 5px;
  border: 1px solid var(--line, #d7dad1); background: transparent; color: var(--txt, inherit); cursor: pointer; }
.cr-btn:hover { border-color: var(--gold, #8a5a00); }
.cr-btn:focus-visible { outline: 2px solid var(--gold, #8a5a00); outline-offset: 1px; }
.cr-btn[disabled] { opacity: .55; cursor: default; }

/* Task 7 — dashboard tiles, folder pills, filters, snapshot facts and the
   contact chip. Tokens only (checked against static/css/desk/tokens.css). */
.cr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:10px 0}
.cr-tile{border:1px solid var(--line);border-radius:8px;padding:8px}
.cr-tile b{display:block;font-size:var(--fs-title);color:var(--txt)}
.cr-tile span{color:var(--txt-3);font-size:var(--fs-micro)}
.cr-pills{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.cr-pill{border:1px solid var(--line);border-radius:14px;padding:3px 10px;background:none;color:var(--txt-2);cursor:pointer;font-size:var(--fs-micro)}
.cr-pill.cr-on{background:var(--txt);color:var(--bg);border-color:var(--txt)}
.cr-filters{margin:4px 0}
.cr-filter-check{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-micro);color:var(--txt-2);cursor:pointer}
.cr-facts{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin:6px 0;padding:6px;border-radius:6px;background:color-mix(in srgb,var(--line) 25%,transparent);font-size:var(--fs-micro)}
.cr-dim{color:var(--txt-3)}
.cr-chip.cr-ok{border-color:var(--sage);color:var(--sage)}
.cr-chip.cr-miss{border-color:var(--danger);color:var(--danger)}

/* Task 8 — the three small charts. Tokens only; the karma-mix segments reuse
   the same fixity colours the cards already draw their left border in
   (.cr-t-adridha/.cr-t-mixed/.cr-t-dridha above), so a colour never carries
   new meaning of its own. */
.cr-charts{display:flex;flex-direction:column;gap:12px;margin:8px 0}
.cr-charts section{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.cr-charts h3{margin:0 0 6px;font-size:var(--fs-label);color:var(--txt-2);font-weight:600}
.cr-charts .cr-bar{fill:var(--gold)}
.cr-charts .cr-axis{stroke:var(--line);stroke-width:1}

.cr-mixbar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--panel-2)}
.cr-seg{display:block}
.cr-seg-adridha{background:var(--sage)}
.cr-seg-dridha_adridha{background:var(--gold)}
.cr-seg-dridha{background:var(--terra)}
.cr-seg-unclassified{background:var(--txt-3)}

.cr-frow{display:grid;grid-template-columns:6.5em 1fr 2.5em;align-items:center;gap:8px;margin:4px 0;font-size:var(--fs-label);overflow:hidden}
.cr-frow span:first-child{color:var(--txt-2)}
.cr-frow b{text-align:right;color:var(--txt)}
.cr-fbar{display:block;height:8px;min-width:2px;max-width:100%;border-radius:4px;background:var(--gold)}

.cr-table{margin-top:4px;font-size:var(--fs-micro);color:var(--txt-2)}
.cr-table summary{cursor:pointer;color:var(--txt-3)}
.cr-table table{width:100%;border-collapse:collapse;margin-top:6px}
.cr-table td{padding:2px 6px;border-bottom:1px solid var(--line-soft)}

/* Task 9 — the detail panel. A right-hand sheet on desktop, a full-width
   sheet under 900px (phone width included), on the same tokens as the rest
   of the deck. */
.cr-panel{position:sticky;top:0;float:right;width:min(360px,100%);border:1px solid var(--line);border-radius:10px;padding:12px;margin-left:12px;background:var(--bg,#fff)}
.cr-panel h2{margin:4px 0 2px;font-size:var(--fs-title)}
.cr-points{margin:8px 0;padding-left:18px}
.cr-panel-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.cr-preview{border:1px dashed var(--line);border-radius:8px;padding:8px;color:var(--txt-2);font-size:var(--fs-micro)}
.cr-close{float:right}
@media (max-width:900px){.cr-panel{float:none;width:100%;margin:12px 0}}

/* D-W7: the collapsed strip of cards that have left the queue. Deliberately
   quieter than a card — it is a memory, not a call to make. */
.cr-done{margin-top:14px;font-size:var(--fs-micro);color:var(--txt-2)}
.cr-done summary{cursor:pointer;color:var(--txt-3)}
.cr-done-row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  padding:4px 6px;border-bottom:1px solid var(--line-soft)}
.cr-done-row .cr-what{flex:1 1 auto}
.cr-explain{max-width:52ch;color:var(--txt-2);line-height:1.6}
.cr-scope{margin:6px 2px 0;font-size:var(--fs-micro);color:var(--txt-3)}
.cr-table .cr-thead th{text-align:left;padding:8px 6px 2px;color:var(--txt-3);
  font-weight:600;letter-spacing:.04em}

/* Client-wise grid — one tile per client; a tile opens across the full row
   to list that client's turns as the regular cards. */
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;align-items:start}
.cr-ctile{border:1px solid var(--line);border-left:3px solid var(--txt-3);border-radius:8px;min-width:0}
.cr-ctile.cr-t-adridha{border-left-color:var(--sage)}
.cr-ctile.cr-t-mixed{border-left-color:var(--gold)}
.cr-ctile.cr-t-dridha{border-left-color:var(--terra)}
.cr-ctile.cr-open{grid-column:1/-1}
.cr-chead{padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.cr-chead:hover{background:color-mix(in srgb,var(--line) 20%,transparent)}
.cr-chead:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.cr-chead .cr-what{font-size:var(--fs-label);color:var(--txt-2);margin-top:0}
.cr-count{font-size:var(--fs-micro);color:var(--txt-3)}
.cr-toggle{font-size:var(--fs-micro);color:var(--gold)}
.cr-chip.cr-due{color:var(--gold);border-color:currentColor;font-weight:600}
.cr-cevents{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px}
.cr-enable{margin-top:8px;font-size:var(--fs-body,14px);padding:6px 14px;border-color:var(--gold)}