/* Control Tower · Dashboard — « Dashboard A » (gestion-design board, Oct 21). From boards/gestion-design/_src/genA: common.css + dashboard.css,
   minus the header rule (the Gestion header is fph.css), plus the pipeline switch, the empty pipeline and a few phone fixes at the end. */
/* Direction A — the Costs tab as is (couts.css), plus what the other pages need */
html,body{overflow-x:clip}
.ct.l th,.ct.l td{text-align:left}
.ct.l th.n,.ct.l td.n{text-align:right}
.ct .ph{display:none}
.kvrow{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;font-size:13px;color:var(--muted)}
.kvrow b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;margin-left:4px}
.ch1 .cnt{font-weight:500;color:var(--muted)}
.tilesA{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:8px}
.tilesA.n9{--n:9}.tilesA.n8{--n:8}.tilesA.n7{--n:7}.tilesA.n5{--n:5}.tilesA.n4{--n:4}.tilesA.n6{--n:6}
.tilesA .tl{padding:12px 12px 11px;gap:5px}
.tilesA .tl .t{font-size:12.5px;line-height:1.25;min-height:2.5em}
.tilesA .tl .no{font:500 10.5px ui-monospace,"JetBrains Mono",Menlo,monospace;color:var(--faint);letter-spacing:.02em;margin-right:5px;vertical-align:1px}
.tilesA.n9 .tl .t,.tilesA.n8 .tl .t{min-height:3.75em}
.tilesA .tl .d{flex:1}
.tilesA .tl .v{font-size:24px;white-space:nowrap}
.tilesA .tl .v small{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:2px}
.tilesA .tl .v .vv{display:block;font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:4px;line-height:1.2}   /* the videos under the courses (Alex, Oct 23) */
.tilesA .tl .x{font-size:11.5px;font-weight:700;color:var(--warn);margin-top:-1px}
.tilesA .tl .x.ok{color:var(--ok)}
.tilesA .tl .d{font-size:11.5px;line-height:1.35}
.tilesA .tl .sp{height:28px}
.tilesA .tl .sp .cvz{min-height:28px}
@media (max-width:1100px){.tilesA.n9{--n:5}.tilesA.n8{--n:4}.tilesA.n7{--n:4}}
@media (max-width:760px){.tilesA.n5,.tilesA.n6{--n:3}}
@media (max-width:600px){.tilesA{--n:2!important;gap:6px}.tilesA.n9{--n:3!important}.tilesA.n9 .tl .d{display:none}.tilesA.n9 .tl{padding:10px 9px 9px}.tilesA.n9 .tl .t{font-size:11.5px;min-height:3.8em}.tilesA.n9 .tl .v{font-size:19px}.tilesA.n9 .tl .v small{display:block;margin:2px 0 0;font-size:11px}
  .tilesA.n7 .tl .t,.tilesA.n5 .tl .t,.tilesA.n4 .tl .t{min-height:0}}
/* the chart card and its side card */
.duo .card{display:flex;flex-direction:column}
.side h2{margin-bottom:2px}
.side .kv2{margin-top:14px}
.side .who-l{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.side .who-l b{color:var(--fg);font-weight:600}
.side .nextbox{margin-top:auto;padding-top:14px}
.side .nextbox .nb{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:8px 0 10px;font-size:13px}
.side .nextbox .nb b{display:block;font-weight:600}
.side .nextbox .nb span{color:var(--muted);font-size:12.5px}
.k-lab{font:500 10.5px ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.empty-c{padding:34px 8px;color:var(--muted);font-size:13.5px;max-width:52ch}
.empty-c b{display:block;color:var(--fg);font-size:15px;margin-bottom:4px}
/* step cells in tables */
.sb{display:inline-flex;gap:2px;vertical-align:middle}
.sb i{width:11px;height:10px;border-radius:2px;background:var(--track)}
.sb i.y{background:var(--c-rech)}.sb i.s,.sb i.sb-nx{background:var(--c-hig)}.sb i.p{background:var(--c-claude)}
.ct tr.sub .sb i{height:8px}
.ct .stp{display:inline-flex;align-items:center;gap:8px}
.ct .stp small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ct td.cn{white-space:normal;min-width:180px}
.ct td.cn .fr{display:block;font-size:12px;color:var(--faint);margin-top:1px}
.ct td.wrap{white-space:normal}
.ct td .ok{color:var(--ok)}
.ct td .warn,.warn-t{color:var(--warn)}
.ct td .muted{color:var(--muted)}
.ct tr.grp td{background:var(--soft);font-weight:600;font-size:12.5px;color:var(--fg);cursor:pointer;white-space:normal}
.ct tr.grp td small{font-weight:500;color:var(--muted);margin-left:6px}
.ct tr.grp td .chev{margin-right:4px}
.ct tr.grp[aria-expanded="true"] .chev{transform:rotate(90deg)}
.ct .dot2{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0}
.ct .sq2{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:0}
.ct td .ib{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;color:var(--muted);font-size:13px;border:1px solid transparent}
.ct td .ib:hover{background:var(--surface);border-color:var(--border);color:var(--fg)}
.ct td .ib[disabled]{opacity:.3;cursor:default}
.ct td.act{text-align:right;width:1%}
.ct .pl{font:600 12.5px Figtree,system-ui,sans-serif;color:var(--fg);font-variant-numeric:tabular-nums;display:inline-block;min-width:22px}
.ct .tag{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:11px;font-weight:600;vertical-align:1px;white-space:nowrap}
.ct .tag.g{background:var(--tint);color:var(--ok)}
.ct .tag.n{background:var(--soft2);color:var(--muted)}
.tblh{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-bottom:10px}
.tblh .r{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ct tr.next td{background:#F7FBEE}
.ct tr.next td:first-child{box-shadow:inset 3px 0 0 var(--c-rech)}
.ct tr.drag td{opacity:.45}
.ct tr.over td{box-shadow:inset 0 2px 0 var(--fg)}
.hand{cursor:grab;color:var(--faint);font-size:13px;letter-spacing:-2px;padding:0 6px 0 0;user-select:none}
/* the grid every step x day */
.hm{width:100%;border-collapse:separate;border-spacing:3px;font-size:12.5px;table-layout:fixed}
.hm th{font-weight:500;color:var(--muted);font-size:11.5px;text-align:center;padding:2px 0 6px;line-height:1.25}
.hm th b{display:block;color:var(--fg);font-weight:600;font-size:12px}
.hm th.sl{text-align:left;width:232px}
.hm td.sl .sh{display:none}
.hm th.tt,.hm td.tt{width:54px;text-align:right;font-weight:600;color:var(--fg);padding-right:4px}
.hm td{height:32px;border-radius:6px;background:var(--soft2);text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.hm td.sl{background:none;text-align:left;font-weight:500;color:var(--fg);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:6px}
.hm td.sl .no{font:500 10.5px ui-monospace,Menlo,monospace;color:var(--faint);margin-right:6px}
.hm tr.on td.sl{font-weight:700}
.hm tr.on td.sl::before{content:"";display:inline-block;width:3px;height:14px;background:var(--fg);border-radius:2px;margin-right:6px;vertical-align:-2px}
.hm td.tt{background:none}
.hm td.out{opacity:.35}
.hm-leg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.hm-leg i{width:18px;height:12px;border-radius:3px;display:inline-block}
/* lists in cards (Do next, Needs attention…) */
.lst{display:flex;flex-direction:column}
.lst .li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--border);font-size:13px}
.lst .li:first-child{border-top:0}
.lst .lh{display:flex;justify-content:space-between;gap:10px;padding:14px 0 4px;font-size:12.5px;font-weight:600;color:var(--fg);border-top:1px solid var(--border-strong)}
.lst .lh:first-child{border-top:0;padding-top:4px}
.lst .lh+.li{border-top:0}
.lst .li .i{color:var(--faint);font-variant-numeric:tabular-nums;font-size:12px}
.lst .li .m b{font-weight:600}
.lst .li .m small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.lst .li .w{color:var(--fg);font-weight:600;font-size:12.5px;white-space:nowrap;text-align:right}
.lst .li .w small{display:block;font-weight:500;color:var(--muted)}
.lst.two .li{grid-template-columns:minmax(0,1fr) auto}
.more{margin-top:8px;font-size:12.5px;color:var(--fg);text-decoration:underline;text-underline-offset:2px;cursor:pointer;background:none;border:0;padding:0}
.stack3{display:flex;flex-direction:column;gap:12px}
details.fold{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px}
details.fold>summary{cursor:pointer;font-weight:600;list-style:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:'\25B8';display:inline-block;width:16px;color:var(--muted);font-size:12px}
details.fold[open]>summary::before{content:'\25BE'}
details.fold>summary small{font-weight:500;color:var(--muted);margin-left:6px}
details.fold .in{margin-top:12px}
details.mini{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
details.mini>summary{cursor:pointer;font-size:13px;font-weight:600;list-style:none}
details.mini>summary::-webkit-details-marker{display:none}
details.mini>summary::before{content:'\25B8';display:inline-block;width:14px;color:var(--muted);font-size:11px}
details.mini[open]>summary::before{content:'\25BE'}
details.how p+p{margin-top:8px}
.srch{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}
.srch .k{font:500 10.5px ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.srch input{border:0;outline:none;background:none;font:13.5px Figtree,system-ui,sans-serif;width:150px;color:var(--fg)}
.savebar{position:sticky;bottom:12px;z-index:50;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px 10px 16px;font-size:13px}
.savebar b{font-weight:600}.savebar .r{display:flex;gap:8px}
.fm{display:flex;flex-direction:column;gap:10px;margin:8px 0 16px}
.fm label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.fm input,.fm select,.edit input,.edit select{font:13.5px Figtree,system-ui,sans-serif;color:var(--fg);border:1px solid var(--border-strong);border-radius:8px;padding:7px 9px;background:var(--surface)}
.edit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;padding:4px 0 2px}
.edit label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);white-space:normal}
.edit .cols{display:flex;gap:6px;flex-wrap:wrap;padding-top:4px}
.edit .cols button{width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border-strong)}
.edit .cols button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--fg)}
@media (max-width:900px){.edit{grid-template-columns:1fr 1fr}}
.btn.sm{height:26px;padding:0 9px;font-size:12.5px}
.ph-only{display:none!important}
@media (max-width:600px){.ph-only{display:inline-flex!important}}
.btn.link{border:0;background:none;padding:0 4px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;height:auto}
.btn.link.danger{color:var(--danger)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.chk{width:16px;height:16px;accent-color:var(--fg);vertical-align:middle;cursor:pointer}
.selbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:var(--sel);margin-bottom:8px;font-size:13px}
.selbar b{font-weight:600}
.seg2{display:inline-flex;background:var(--soft2);border-radius:9px;padding:3px;gap:2px}
.seg2 button{font:inherit;font-size:12.5px;color:var(--muted);padding:4px 10px;border-radius:7px;cursor:pointer;white-space:nowrap}
.seg2 button[aria-pressed="true"]{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:0 1px 2px rgba(32,26,33,.12)}
.legend .mk{margin:0}
.cvz .hit.click{cursor:pointer}
.cvz text.in.sub{fill:var(--muted);font-size:11px}
.cvz text.chv{fill:var(--muted);font-size:12px}
.cvz rect.band{fill:rgba(111,71,135,.06);pointer-events:none}
.ct .mk{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;background:#FFF3C4;color:#7A5B00;font-size:10.5px;font-weight:600;vertical-align:1px}
.mk{display:inline-block;padding:0 6px;border-radius:999px;background:#FFF3C4;color:#7A5B00;font-size:10.5px;font-weight:600;vertical-align:1px}
.menu .mi i{width:9px;height:9px;border-radius:50%;display:inline-block}
@media (max-width:600px){
  .ch1{font-size:26px}
  .ex-fbar{gap:8px}
  .ex-fbar .fwrap,.ex-fbar .ex-fsel{max-width:100%}
  .ex-fsel span:not(.k){max-width:170px;overflow:hidden;text-overflow:ellipsis}
  .card{padding:14px}
  .ct .hs,.ct td .ib.hs,.ct td .btn.hs,.ct small.hs,.ct small.sm2.hs{display:none!important}
  .ct td.n0,.ct th.n0{width:30px}
  .ct .tag{white-space:normal;display:inline;line-height:1.6}
  .ct td.act{padding-left:0}
  .ct .ph{display:block;font-size:12px;color:var(--muted);margin-top:2px}
  .ex-fsel .k{display:none}
  .ex-fsel{padding:0 10px;height:32px;font-size:13px}
  .ct th,.ct td{padding:8px 5px}
  .ct td.cn{min-width:0}
  .sb i{width:8px;height:9px}
  .hm{border-spacing:2px;font-size:11px}
  .hm th.sl{width:86px}.hm th.tt,.hm td.tt{width:30px}
  .hm th{font-size:10px}.hm th b{font-size:10.5px}
  .hm td{height:26px;border-radius:4px}
  .hm td.sl .no{display:none}
  .hm td.sl .lg{display:none}.hm td.sl .sh{display:inline}
  .srch input{width:110px}
  .savebar{bottom:8px}
  .edit{grid-template-columns:1fr}
}

.menu{max-height:72vh;overflow:auto;max-width:calc(100vw - 16px)}
.menu input[type=text]{border:1px dashed var(--border-strong);border-radius:6px;margin:4px 0;height:28px}
.menu a.mi{color:var(--fg)}
.ct td.n0{width:56px;white-space:nowrap}
.ct small.sm2{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.ib{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;color:var(--muted);font-size:13px;border:1px solid transparent;vertical-align:middle}
.ib:hover{background:var(--surface);border-color:var(--border);color:var(--fg)}
.ib[disabled]{opacity:.3;cursor:default}
.fm .seg2{align-self:flex-start}
.ct.wr td,.ct.wr th{white-space:normal}

/* Round 2 (Alex, Oct 21): the « Whole pipeline » tile first, its overview chart, the short « Needs attention » card */
.tilesA.n10{--n:10}
.tilesA .tl.all{border-color:var(--fg);background:var(--surface)}
.tilesA .tl.all .t{font-weight:700;color:var(--fg)}
.tilesA .tl.all[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--fg)}
.wbars{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.wb{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 90px 34px;gap:8px;align-items:center;font-size:12.5px;color:var(--fg);cursor:pointer;padding:3px 4px;border-radius:6px}
.wb:hover{background:var(--soft2)}
.wb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb i{display:block;height:8px;border-radius:4px;background:var(--soft2);overflow:hidden}
.wb i b{display:block;height:100%;border-radius:4px}
.wb em{font-style:normal;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.wh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:12px 0 4px;font-size:13px}
.wh .muted{font-size:12px}
.li1{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.li1:last-child{border-bottom:0}
.li1 .m{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li1 .w{flex:none;font-size:12.5px}
@media (max-width:1300px){.tilesA.n10{--n:5}}
@media (max-width:760px){.tilesA.n10{--n:2}}
/* « Whole pipeline » = a button of its own, outside the step tiles (Alex, Oct 21) */
.wpb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 -2px}
.wpbtn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:1.5px solid #6F4787;background:var(--surface);color:#6F4787;font:600 14px Figtree,system-ui,sans-serif;cursor:pointer}
.wpbtn:hover{background:#F3EEF5}
.wpbtn[aria-pressed="true"]{background:#6F4787;color:#fff}
.wpb .muted{font-size:12.5px}

/* ---- the port (Oct 21) ---- */
/* the pipeline switch (pipes.js) at the top, beside the title; shared with the Queue and the Costs (gestion.pipeline) */
.dtop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.dtop>div:first-child{min-width:0;flex:1 1 420px}
.pipebar{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}   /* looks like the Show bar; its own class so .ex-fbar stays the Show bar (tour.js points at it) */
.pipebar .lbl{font:500 10.5px ui-monospace,"JetBrains Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.pipe-host{display:contents}
.pipebar .pipe-switch button{white-space:nowrap}
.csub .dstamp{color:var(--faint)}
.wtog{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.hm-leg .hl{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
/* a pipeline with nothing in production yet */
.card.dempty{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:28px}
.card.dempty h2{font-size:18px}
.card.dempty .btn{margin-top:10px;text-decoration:none}
.side .nextbox .btn{text-decoration:none}
@media (max-width:600px){
  .dtop>div:first-child{flex-basis:100%}
  .pipebar{width:100%}
  .card.dempty{padding:18px}
}
/* the old Dashboard's tile lines, each with its list on hover (Oct 21) */
.tilesA .tl .tlns{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.tilesA .tl .tln{font-size:11.5px;line-height:1.3;color:var(--muted)}
.tilesA .tl .tln[data-tip]{cursor:help;text-decoration:underline dotted;text-decoration-color:var(--border-strong);text-underline-offset:3px}
.tilesA .tl .tln[data-tip]:hover{color:var(--fg)}
.tilesA .tl .tln.up{color:var(--c-rech,#4F7F1E);font-weight:600}
.tilesA .tl .tln.quiet{color:var(--faint)}
/* the tiles' other lines open and close with one button (Oct 21); « N videos in progress » stays in sight */
.tilesA:not(.det) .tl .tln.more{display:none}
.detbtn{margin-left:auto;height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--fg);font:500 13px Figtree,system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.detbtn:hover{border-color:var(--border-strong)}
.duo.one{grid-template-columns:minmax(0,1fr)}
/* bottleneck + constraints (Oct 22, board entry 09: ?flow=a|b|c). Lime = flowing, yellow = constraint, red = the bottleneck — always with the word */
:root{--fl-ok:#A9D45A;--fl-ok-bg:#F3FADF;--fl-ok-fg:#3F6A12;--fl-con:#BFA3DA;--fl-con-bg:#F7F1FB;--fl-con-fg:#6F4787;--fl-bn:#4B2766;--fl-bn-bg:#EFE7F5;--fl-bn-fg:#4B2766}   /* Oct 22: the bottleneck dark purple, the constraints pale purple (Alex) */
.tl.fl-ok{--flc:var(--fl-ok)}.tl.fl-con{--flc:var(--fl-con)}.tl.fl-bn{--flc:var(--fl-bn)}
.flp{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;height:20px;padding:0 8px;border-radius:999px;font:700 10.5px Figtree,system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;cursor:help}
.flp.ok{background:var(--fl-ok-bg);color:var(--fl-ok-fg)}.flp.con{background:var(--fl-con-bg);color:var(--fl-con-fg)}.flp.bn{background:var(--fl-bn);color:#fff}
.flp.con::before{content:"▲";font-size:8px}.flp.bn::before{content:"■";font-size:8px}.flp.ok::before{content:"●";font-size:8px}
/* A · the tile's outline */
.flv-a .tl.fl{box-shadow:inset 0 0 0 1px var(--flc);border-color:var(--flc)}   /* a thin line (Alex, Oct 22) */
.flv-a .tl.fl-bn{box-shadow:inset 0 0 0 1.5px var(--flc);background:var(--fl-bn-bg)}
.flv-a .tl.fl-con{background:var(--surface)}   /* white, only the purple outline (Alex, Oct 22) */
.flw{font-size:11.5px;font-weight:600;line-height:1.3;color:var(--fg)}
.fl-bn .flw{color:var(--fl-bn-fg)}.fl-con .flw{color:var(--fl-con-fg)}
/* B · the line as one pipe above the tiles + a coloured top edge on each tile */
.flpipe{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));}
.flpipe.n8{grid-template-columns:repeat(8,minmax(0,1fr))}
.flpipe{gap:8px;margin:0 0 6px}
.flpipe .seg{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:38px;padding:4px 10px;border-radius:8px;font-size:11.5px;line-height:1.25;cursor:help}
.flpipe .seg b{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em}
.flpipe .seg.ok{background:var(--fl-ok-bg);color:var(--fl-ok-fg);box-shadow:inset 0 0 0 1.5px var(--fl-ok)}
.flpipe .seg.con{background:var(--fl-con-bg);color:var(--fl-con-fg);box-shadow:inset 0 0 0 2px var(--fl-con)}
.flpipe .seg.bn{background:var(--fl-bn);color:#fff}
.flpipe .seg.fixes{background:var(--soft2,#F1EEF2);color:var(--faint);cursor:default}
.flpipe .seg:not(:last-child)::after{content:"›";position:absolute;right:-8px;top:50%;transform:translate(50%,-50%);color:var(--faint);font-size:14px}
.flv-b .tl.fl{border-top:4px solid var(--flc)}
/* C · a word on each tile, the red outline on the bottleneck only, and « What slows the line » under the tiles */
.flp.dot{background:none;padding:0;height:auto;font-size:10.5px}
.flp.dot.ok{color:var(--fl-ok-fg)}.flp.dot.con{color:var(--fl-con-fg)}.flp.dot.bn{color:var(--fl-bn-fg)}
.flv-c .tl.fl-bn{box-shadow:inset 0 0 0 3px var(--fl-bn);border-color:var(--fl-bn)}
.flcard .fllist{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.flcard .fllist li{display:grid;grid-template-columns:auto minmax(0,170px) minmax(0,1fr) auto auto;gap:6px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--border);font-size:13px}
.flcard .fllist li:first-child{border-top:0}
.flhow{margin:2px 0 6px;font-size:12.5px;color:var(--muted)}
.flhow summary{cursor:pointer;color:var(--fg);font-weight:600;font-size:13px}
.flhow p{margin:6px 0 0;max-width:95ch}
.flhow .t-bn{color:var(--fl-bn-fg)}.flhow .t-con{color:var(--fl-con-fg)}.flhow .t-ok{color:var(--fl-ok-fg)}
@media (max-width:1100px){.flpipe,.flpipe.n8{grid-template-columns:repeat(3,minmax(0,1fr))}.flpipe .seg::after{display:none}}
@media (max-width:760px){.flcard .fllist li{grid-template-columns:auto minmax(0,1fr);}.flcard .fllist li>span:nth-of-type(2),.flcard .fllist li>span.muted,.flcard .fllist li>button{grid-column:1/-1}}

/* dark (Oct 22, the menu round's grandma reviewers): the flags, the « Whole pipeline » button and the marks, readable on the dark page */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fl-ok:#A9D45A;--fl-ok-bg:rgba(169,212,90,.13);--fl-ok-fg:#C8E59A;--fl-con:#9C7DBA;--fl-con-bg:rgba(191,163,218,.10);--fl-con-fg:#D9C4EA;--fl-bn:#C9A5E6;--fl-bn-bg:rgba(201,165,230,.17);--fl-bn-fg:#EADCF5}:root:not([data-theme="light"]) .flp.bn,:root:not([data-theme="light"]) .flpipe .seg.bn{color:#220B26}:root:not([data-theme="light"]) .wpbtn{border-color:#8A62AE;color:#D9C4EA}:root:not([data-theme="light"]) .wpbtn:hover{background:rgba(201,165,230,.12)}:root:not([data-theme="light"]) .wpbtn[aria-pressed="true"]{background:#8A62AE;color:#fff}:root:not([data-theme="light"]) .ct tr.next td{background:rgba(213,240,152,.08)}}
:root[data-theme="dark"]{--fl-ok:#A9D45A;--fl-ok-bg:rgba(169,212,90,.13);--fl-ok-fg:#C8E59A;--fl-con:#9C7DBA;--fl-con-bg:rgba(191,163,218,.10);--fl-con-fg:#D9C4EA;--fl-bn:#C9A5E6;--fl-bn-bg:rgba(201,165,230,.17);--fl-bn-fg:#EADCF5}
:root[data-theme="dark"] .flp.bn,:root[data-theme="dark"] .flpipe .seg.bn{color:#220B26}
:root[data-theme="dark"] .wpbtn{border-color:#8A62AE;color:#D9C4EA}:root[data-theme="dark"] .wpbtn:hover{background:rgba(201,165,230,.12)}:root[data-theme="dark"] .wpbtn[aria-pressed="true"]{background:#8A62AE;color:#fff}
:root[data-theme="dark"] .ct tr.next td{background:rgba(213,240,152,.08)}
/* the day grid's shades, light and dark (Oct 22): each with its own digit colour */
:root{--hm-1:#F1ECF4;--hm-2:#E1D5E8;--hm-3:#C5ADD4;--hm-4:#8F68A8;--hm-5:#5E3B73;--hm-1i:#201A21;--hm-2i:#201A21;--hm-3i:#201A21;--hm-4i:#fff;--hm-5i:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hm-1:#3A2C40;--hm-2:#4F3A5B;--hm-3:#6B4D80;--hm-4:#9472B0;--hm-5:#C2A2DD;--hm-1i:#F2EEF3;--hm-2i:#F2EEF3;--hm-3i:#fff;--hm-4i:#220B26;--hm-5i:#220B26}}
:root[data-theme="dark"]{--hm-1:#3A2C40;--hm-2:#4F3A5B;--hm-3:#6B4D80;--hm-4:#9472B0;--hm-5:#C2A2DD;--hm-1i:#F2EEF3;--hm-2i:#F2EEF3;--hm-3i:#fff;--hm-4i:#220B26;--hm-5i:#220B26}

/* the languages on each step (Alex, Oct 23: « rajouter les langues dans les cards du pipeline »), drawn like the jurisdiction chips of board 13 A */
.tilesA .tl .lr{display:flex;flex-wrap:wrap;gap:3px;padding-top:6px;border-top:1px dashed var(--border)}
.tilesA .tl .lr span{display:inline-flex;align-items:center;gap:3px;font:500 11px/1 ui-monospace,"JetBrains Mono",Menlo,monospace;color:var(--muted);background:var(--soft2,rgba(127,127,127,.12));border-radius:5px;padding:3px 4px;white-space:nowrap}
.tilesA .tl .lr b{font-weight:700;color:var(--fg)}
.tilesA .tl .lr span.ok{color:var(--fl-ok-fg);background:var(--fl-ok-bg)}
.tilesA .tl .lr span.ok b{color:inherit}
.tilesA .tl.fl-bn .lr span:not(.ok){background:var(--surface)}

/* gestion-cas 09 (Oct 24): « Source ⓘ » at the bottom of each step, « Type » chips on the lines that are not a new course, « arrives by itself » under the next step */
.tilesA .tl .pp-src{display:flex;align-items:center;gap:5px;margin-top:6px;font:600 11px/1.3 Figtree,system-ui,sans-serif;color:var(--muted)}
.pp-src .sty-qw{position:relative;display:inline-flex}
.pp-src .sty-q{width:17px;height:17px;font:italic 700 11px/14px Georgia,"Times New Roman",serif;padding:0}
.pp-src .sty-q:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.pp-src .sty-tip.up{width:200px;z-index:70;cursor:default;font-style:normal}
.pp-src .sty-qw.pp-open .sty-tip{display:block}
/* the tip opens above the « i »; left-aligned on the first two tiles and right-aligned on the last three (9 across), so it stays on the screen — the same on the other layouts */
@media (min-width:1101px){
  .tilesA .tl:nth-child(-n+2) .pp-src .sty-tip.up,.tilesA .tl:nth-child(n+7) .pp-src .sty-tip.up{transform:none}
  .tilesA .tl:nth-child(-n+2) .pp-src .sty-tip.up{left:-52px}
  .tilesA .tl:nth-child(-n+2) .pp-src .sty-tip.up::before{left:56px;transform:rotate(45deg)}
  .tilesA .tl:nth-child(n+7) .pp-src .sty-tip.up{left:auto;right:-28px}
  .tilesA .tl:nth-child(n+7) .pp-src .sty-tip.up::before{left:auto;right:32px;transform:rotate(45deg)}
}
@media (min-width:601px) and (max-width:1100px){   /* 5 across */
  .tilesA .tl:nth-child(5n+1) .pp-src .sty-tip.up,.tilesA .tl:nth-child(5n) .pp-src .sty-tip.up{transform:none}
  .tilesA .tl:nth-child(5n+1) .pp-src .sty-tip.up{left:-52px}
  .tilesA .tl:nth-child(5n+1) .pp-src .sty-tip.up::before{left:56px;transform:rotate(45deg)}
  .tilesA .tl:nth-child(5n) .pp-src .sty-tip.up{left:auto;right:-28px}
  .tilesA .tl:nth-child(5n) .pp-src .sty-tip.up::before{left:auto;right:32px;transform:rotate(45deg)}
}
@media (max-width:600px){   /* 3 across */
  .tilesA .tl .pp-src{margin-top:4px}
  .pp-src .sty-tip.up{width:min(200px,56vw)}
  .tilesA .tl:nth-child(3n+1) .pp-src .sty-tip.up,.tilesA .tl:nth-child(3n) .pp-src .sty-tip.up{transform:none}
  .tilesA .tl:nth-child(3n+1) .pp-src .sty-tip.up{left:-52px}
  .tilesA .tl:nth-child(3n+1) .pp-src .sty-tip.up::before{left:56px;transform:rotate(45deg)}
  .tilesA .tl:nth-child(3n) .pp-src .sty-tip.up{left:auto;right:-28px}
  .tilesA .tl:nth-child(3n) .pp-src .sty-tip.up::before{left:auto;right:32px;transform:rotate(45deg)}
}
.ct .pp-kind{display:inline-flex;align-items:center;height:19px;padding:0 7px;margin-left:8px;border-radius:6px;background:var(--tint);color:var(--fg);font:600 11px/1 Figtree,system-ui,sans-serif;white-space:nowrap;vertical-align:1px}
.ct .pp-jl{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line,#DCD6DD);color:var(--fg);font:600 11.5px/1 Figtree,system-ui,sans-serif;white-space:nowrap}   /* J: « QC · FR + EN » (Oct 26) */
.ct td .pp-auto{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--muted)}
/* the 8 tiles say they can be clicked (Alex, Oct 25: « on ne sait pas trop s'ils sont cliquables ») — a lift and a drop-shadow on hover
   (not a box-shadow: the tiles' coloured outline is an inset shadow). Same on Video production's Dashboard. */
.tilesA .tl{cursor:pointer;transition:transform .12s ease,filter .12s ease}
.tilesA .tl:hover{transform:translateY(-2px);filter:drop-shadow(0 6px 10px rgba(32,26,33,.16))}
.tilesA .tl:active{transform:none}
@media (prefers-reduced-motion:reduce){.tilesA .tl{transition:none}.tilesA .tl:hover{transform:none}}
/* G2 / G9 (use-case test, Oct 26): Video production's « à refaire » on a line */
.pp-rdo{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--warn-bg,#FFF4E5);color:var(--warn,#9A5B00);font-size:11.5px;font-weight:600;white-space:normal}