/* Clients & projects as the Queue's cards (clients-cards.js, Oct 21): the same card, progress line and course rows as queue-a.css,
   no colour dots, no side panel — a card opens in place. Loaded after the page's own style and costs-skin.css. */
.cc-on{--colbg:#EEECEF;--s-c:#4F7F1E;--s-p:#8DB53C;--s-w:#6F4787;--s-n:var(--border-strong);--track:#ECE9ED}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cc-on{--colbg:#262027;--s-c:#5E8E24;--s-p:#A9D46A;--s-w:#8A62AE;--track:#3A323B}}
:root[data-theme="dark"] .cc-on{--colbg:#262027;--s-c:#5E8E24;--s-p:#A9D46A;--s-w:#8A62AE;--track:#3A323B}
.cc-on .layout{grid-template-columns:minmax(0,1fr) !important}
.cc-on .peek{display:none !important}
.cc-on .col{max-width:900px !important}
.cc-on #lists{display:flex;flex-direction:column;gap:16px}
.cc-sec{background:var(--colbg);border-radius:14px;padding:12px 10px 10px}
.cc-h{display:flex;align-items:baseline;gap:8px;padding:4px 6px 10px}
.cc-h h2{font:600 16px/1.3 Figtree,system-ui,sans-serif;letter-spacing:-.01em;margin:0}
.cc-h .def{font-size:13px;color:var(--muted)}
.cc-h .cnt{margin-left:auto;font-size:12.5px;color:var(--muted)}
.cc-list{display:flex;flex-direction:column;gap:8px}
.cc.bk{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 0 rgba(32,26,33,.04);min-width:0}
.cc.bk:hover,.cc.bk.open{border-color:var(--border-strong)}
.cc .bh{display:grid;grid-template-columns:16px 12px minmax(0,1fr) auto;grid-template-areas:"n ch l1 sz" ". . l2 l2";gap:3px 8px;align-items:center;padding:10px 12px 10px 8px;cursor:pointer;user-select:none;-webkit-user-select:none;border-radius:10px}
.cc .bh:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}
.cc .no{font:500 11px ui-monospace,"JetBrains Mono",Menlo,monospace;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.cc .bh .no{grid-area:n}
.cc .chev{grid-area:ch;color:var(--faint);font-size:14px;line-height:1;display:inline-block;transition:transform .15s;text-align:center}
.cc.open>.bh .chev{transform:rotate(90deg);color:var(--fg)}
.cc .l1{grid-area:l1;display:flex;align-items:baseline;gap:8px;min-width:0}
.cc .l1 .nm{font-weight:600;font-size:14px;line-height:1.3}
.cc .cc-rn{font:600 14px Figtree,system-ui,sans-serif;height:30px;padding:0 8px;border:1px solid var(--border-strong);border-radius:6px;min-width:0;width:min(320px,100%);color:var(--fg);background:var(--surface)}
.cc .sz{grid-area:sz;font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cc .sz b{color:var(--fg);font-weight:600;font-size:13.5px}
.cc .l2{grid-area:l2;display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;font-size:12.5px;color:var(--muted);min-width:0}
.cc .cc-none{color:var(--faint)}
.cc .prog{display:inline-flex;align-items:center;gap:6px 10px;flex-wrap:wrap;cursor:help;border-radius:4px}
.cc .prog:hover>span:last-child,.cc .prog:focus-visible>span:last-child{color:var(--fg);text-decoration:underline dotted;text-underline-offset:3px}
.cc .pbar{display:inline-flex;width:56px;height:6px;border-radius:3px;overflow:hidden;background:var(--track);gap:1px;flex-shrink:0}
.cc .pbar b{display:block;height:100%}
.cc .pbar b.s-c{background:var(--s-c)}.cc .pbar b.s-p{background:var(--s-p)}.cc .pbar b.s-w{background:var(--s-w)}
.cc .clist{border-top:1px solid var(--border);padding:4px 4px 6px 16px;display:flex;flex-direction:column}
.cc .crow{display:grid;grid-template-columns:16px minmax(0,1fr) 220px 28px;gap:2px 8px;align-items:center;padding:6px 4px 6px 4px;border-radius:8px;min-height:38px}
.cc .crow:hover{background:var(--hover)}
.cc .crow .tt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:13px;min-width:0}
.cc .crow .num{font:500 11px ui-monospace,"JetBrains Mono",Menlo,monospace;color:var(--faint)}
.cc .crow .oth{font-size:12px;color:var(--faint)}
.cc .crow .meta{display:flex;align-items:center;gap:10px}
.cc .lgs{display:inline-flex;gap:3px;width:56px}
.cc .lg{font:600 10.5px ui-monospace,"JetBrains Mono",Menlo,monospace;color:var(--muted);background:var(--soft2);border-radius:4px;padding:1px 5px}
.cc .stw{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.cc .stw i{width:8px;height:8px;border-radius:50%;background:var(--s,var(--s-n));flex-shrink:0}
.cc .stw.s-c{--s:var(--s-c)}.cc .stw.s-p{--s:var(--s-p)}.cc .stw.s-w{--s:var(--s-w)}.cc .stw.s-n{--s:var(--s-n)}
.cc .ib{width:26px;height:26px;border-radius:6px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:15px;letter-spacing:1px;line-height:1;background:none;border:0;cursor:pointer}
.cc .ib:hover{background:var(--hover);color:var(--fg)}
.cc .ce{padding:12px 10px;color:var(--muted);font-size:12.5px;border:1.5px dashed var(--border-strong);border-radius:8px;margin:6px 4px 2px 0;text-align:center}
.cc .cc-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px 12px 20px;border-top:1px solid var(--border)}
.cc .cc-act .sp{flex:1}
/* the hover card (as the Queue's) */
.qtip{position:fixed;z-index:70;min-width:230px;max-width:340px;background:var(--surface);color:var(--fg);border:1px solid var(--border-strong);border-radius:10px;box-shadow:0 10px 28px -10px rgba(32,26,33,.35);padding:10px 12px;font-size:12.5px;pointer-events:none}
.qtip[hidden]{display:none}
.qt-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px}
.qt-h b{font-weight:600;font-size:13px}.qt-h span{color:var(--muted);white-space:nowrap}
.qt-r{display:grid;grid-template-columns:10px minmax(0,1fr) auto 40px;gap:8px;align-items:center;padding:3px 0}
.qt-r i{width:10px;height:10px;border-radius:3px}
.qt-r b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.qt-r em{font-style:normal;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .cc-sec{padding:10px 6px 8px}
  .cc .crow{grid-template-columns:16px minmax(0,1fr) 28px;grid-template-areas:"n t c" ". m m"}
  .cc .crow .no{grid-area:n}.cc .crow .tt{grid-area:t}.cc .crow .meta{grid-area:m}.cc .crow .ctl{grid-area:c}
  .cc .lgs{width:auto}
  .cc .clist{padding-left:4px}
  .cc .cc-act{padding-left:12px}
  .cc .cc-act .sp{display:none}
}
/* Pipelines (Oct 23): who makes the courses; + New pipeline */
.cc-h .pl-add{margin-left:12px;height:30px;font-size:13px}
.cc.pl .pl-h{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"n l1 sz" ". l2 l2"}
.pl-n{grid-area:n;width:24px;height:24px;border-radius:50%;background:#4B2766;color:#D5F098;display:grid;place-items:center;font:600 12px 'JetBrains Mono',ui-monospace,monospace}
.cc.pl .l1{grid-area:l1;gap:8px;flex-wrap:wrap}
.cc.pl .cc-rn{width:min(240px,100%)}
.pl-fix{font-size:12.5px;color:var(--muted)}
.pl-new{display:flex;flex-direction:column;gap:10px;padding:14px;margin-bottom:8px}
.pl-new b{font-weight:600;font-size:14px}
.pl-new label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);font-weight:600}
.pl-new .cc-rn{width:min(360px,100%);font-weight:500}
.pl-fa{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pl-fa .muted{font-size:12.5px;color:var(--muted)}
.pl-err{margin:0;color:#B3261E;font-size:13px}
.btn[disabled]{opacity:.45;cursor:default}

/* a tag's batches (Oct 23: tags on batches) */
.cc .cc-tb{align-self:center;margin-left:8px;font:600 11px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--muted);background:var(--soft2,rgba(127,127,127,.12));border-radius:999px;padding:4px 8px;white-space:nowrap}

/* « Cours clients » (gestion-cas 10, Oct 24): its second line, the client tags its courses carry, and a course still missing one */
.cc .cc-d{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.cc .cc-tg{font:600 11px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--muted);background:var(--soft2,rgba(127,127,127,.12));border-radius:999px;padding:4px 8px;white-space:nowrap}
.cc .cc-miss{color:var(--warn);font-weight:600}
.cc .cc-bi{font-size:12.5px;color:var(--muted);max-width:70ch}
.cc .crow .oth.cc-miss{color:var(--warn)}

/* G15 (use-case gaps, Oct 26) — « + New course for <client> »: the client's documents (name + size chips, « + Attach a file »), the look of
   « + Add a course »'s « Client's documents » (adapt-ui.css, not loaded on this page) */
.wg-docs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.wg-docl{display:contents}
.wg-doc{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 4px 0 12px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);font-size:13px;color:var(--fg);max-width:100%;min-width:0}
.wg-docn{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wg-docz{color:var(--muted);white-space:nowrap;flex-shrink:0}
.wg-docx{width:24px;height:24px;border-radius:50%;color:var(--muted);font-size:16px;line-height:1;flex-shrink:0}
.wg-docx:hover{background:var(--hover);color:var(--fg)}
.wg-att{position:relative;display:inline-flex;align-items:center;height:32px;padding:0 12px;font-size:13px;cursor:pointer;color:var(--fg)}
.wg-att:focus-within{outline:2px solid var(--fg);outline-offset:2px}
.wg-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.wg-dh{font-size:12px;color:var(--muted);line-height:1.4}

/* C6-05 / C7-02 (final tests, Oct 27): a client of the LMS Admin Console, archived there or not */
.cc .cc-arch,.cc .cc-org{display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-left:8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.cc .cc-arch{background:var(--soft,#F4F1F5);color:var(--fg,#201A21);border:1px solid var(--border-strong,#CFC5D0)}
.cc .cc-org{color:var(--muted,#6D5F6F);border:1px dashed var(--border-strong,#CFC5D0)}