/* layout.css — the interface clean-up of 23 October 2026, in a file of its own.
   styles.css is regenerated whole from the shared artifact source and dropped these rules once
   (9c14ee9), so they live here and every page links this file after styles.css.
   test/t77-needs-outside-app.js checks the links. */
/* ---------------------------------------------- the catalogue, tidied (23 October 2026)
   Title and actions on one line; filters on one line with the grouping at its end; the two chip
   rows under them; the list's own toolbar right above the list. */
.cathead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.cathead h1{margin:0}
.cathead .cag{display:flex;gap:8px;align-items:center}
.addmenu{position:relative}
.addpop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:200px;background:var(--ground);border:1px solid var(--rule-strong);border-radius:10px;box-shadow:0 14px 30px rgba(20,18,14,.12);padding:6px;display:flex;flex-direction:column}
.addpop[hidden]{display:none}
.additem{font:500 13px/1.2 var(--sans);text-align:left;border:0;background:transparent;color:var(--ink);padding:9px 10px;border-radius:7px;cursor:pointer}
.additem:hover,.additem:focus-visible{background:var(--cream)}
.fbar .grpby{margin-left:auto}
.pbar{margin-bottom:14px}
.listbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--rule);margin:0 0 4px}
.listbar .legend2{margin-left:0}
.listbar .count{margin-left:auto}
/* The legend keeps only what the chips cannot say — a decided no, being built, its own flow. */
#legend > span:nth-child(-n+6),#legend .matnote{display:none}
/* Each rung chip carries the colour its cells use. */
.fpills.rungs button[data-v]{display:inline-flex;align-items:center;gap:6px}
.fpills.rungs button[data-v]::before{content:"";width:10px;height:10px;border-radius:3px;border:1px solid transparent;display:none}
.fpills.rungs button[data-v="Discovery"]::before{display:inline-block;border:1px dashed var(--muted)}
.fpills.rungs button[data-v="Manual"]::before{display:inline-block;background:#F3EFE6;border-color:#D9CFB8}
.fpills.rungs button[data-v="Assisted"]::before{display:inline-block;background:#EFEFE4;border-color:#CFCEB2}
.fpills.rungs button[data-v="Automated"]::before{display:inline-block;background:#E8F0E9;border-color:#B9D2BF}
.fpills.rungs button[data-v="Orchestrated"]::before{display:inline-block;background:#E4EDF2;border-color:#AFCBD9}
.fpills.rungs button[data-v="Autonomous"]::before{display:inline-block;background:#EAE6F1;border-color:#C3B8D9}
.bfsstrip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin:0 0 14px;border:1px dashed var(--rule-strong);border-radius:10px;font-size:13px;color:var(--muted)}

/* ---------------------------------------------- admin: a panel, not an explanation page */
body[data-page="admin"] .wrap{max-width:none;padding:10px 0 90px}
body[data-page="admin"] .roles{display:none}
body[data-page="admin"] .atab > h2{display:none}
.wrap{max-width:none}
/* Admin without the comparisons (23 October 2026): "this should drop completely". The GAP
   comparison of the lanes and the roster-and-ownership check are hidden rather than removed, so
   the scripts that fill them still find their elements. */
#laneEditNotice,#laneEditWrap,#agentMapNotice,#agentMapWrap{display:none !important}

/* ---------------------------------------------- one design for the filter area (23 October 2026)
   "different formats living all together". Every control in the two filter rows is the same
   height, border, radius and type; selects look like the dropdown buttons beside them; both chip
   rows are the same kind of control with the same pressed state. */
.fbar,.pbar{gap:8px 8px}
.fbar .srch input,
.fbar select.fsel,
.fbar .fdropb{
  box-sizing:border-box;height:34px;padding:0 14px;border-radius:999px;
  border:1px solid var(--rule-strong);background:var(--ground);color:var(--ink);
  font:500 13px/32px var(--sans);
}
.fbar .srch input{width:260px;font-weight:400}
.fbar .srch input::placeholder{color:var(--faint)}
.fbar select.fsel,.fbar .fdropb{min-width:150px;max-width:220px;text-align:left}
.fbar select.fsel{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 15px,calc(100% - 12px) 15px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fbar .fdropb::after{content:"";float:right;width:5px;height:5px;margin:12px 1px 0 10px;opacity:1;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg)}
.fbar .fdropb.on,.fbar select.fsel:focus-visible,.fbar .srch input:focus-visible{border-color:var(--ink);outline:none}
.fbar .grpby>span{font:500 12px/1 var(--sans);color:var(--muted)}
.fbar .grpby .fsel{min-width:140px}
/* Both chip rows: same container, same chip, same pressed state. */
.pbar .fpills{border:1px solid var(--rule-strong);border-radius:999px;padding:3px;gap:2px;background:var(--ground)}
.pbar .fpills button{height:28px;padding:0 12px;font:500 12.5px/28px var(--sans);color:var(--muted);border:0;border-radius:999px;background:transparent}
.pbar .fpills button:hover{color:var(--ink)}
.pbar .fpills button[aria-pressed="true"],
.pbar .fpills.runs button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
/* One arrow for every dropdown in the bar: the same chevron on the selects and the buttons. */
.fbar select.fsel,.fbar .fdropb{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6E6E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:10px 6px;padding-right:32px}
.fbar .fdropb::after{content:none}

/* ---------------------------------------------- catalogue rows and the workflow drawer (26 October 2026)
   Drawn by public/catalogue-ui.js and the rules below; nothing here changes a workflow. */

/* The surfaces a flow's steps are on: solid where it is, dashed where it should also be. */
/* WRAPS, from 27 October 2026. An inline-flex box with no `flex-wrap` is one rigid box however
   many chips are in it: four surfaces came to 241px inside a 249px cell, and with the 6px margins
   either side the workflow cell overflowed on every record whose steps name four surfaces —
   WF-69, WF-70, WF-66 and WF-07, which t52 had been reporting as cut-off cells. Wrapping is what
   a chip group should have done from the start; nothing else about it changes. */
.surfrow{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0 6px;vertical-align:1px}
.surfrow .sf{font:500 10.5px/18px var(--sans);font-style:normal;padding:0 8px;border-radius:999px;border:1px solid var(--rule-strong);white-space:nowrap}
.surfrow .sf.on{color:var(--built);border-color:var(--built);background:var(--built-bg)}
.surfrow .sf.want{color:var(--muted);border-style:dashed;background:transparent}
/* The category chip, drawn like the lane chip it stands in for. */
.lanec.catc{font-family:var(--sans)}
/* Open items: loud enough to find while scanning, the list on hover. */
.openit{display:inline-flex;align-items:center;gap:5px;font:600 10.5px/18px var(--sans);padding:0 8px;margin:0 4px;border-radius:999px;
  color:var(--prog);background:var(--prog-bg);border:1px solid var(--prog);cursor:help;white-space:nowrap;vertical-align:1px}
.openit::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--prog)}

/* Vetted, as a badge next to the title. */
.ptitle{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.ptitle h2{margin:0}
.vetbadge{font:600 11.5px/1 var(--sans);padding:6px 11px;border-radius:999px;cursor:pointer;border:1px solid var(--rule-strong);background:transparent;color:var(--faint)}
.vetbadge.on{color:var(--built);border-color:var(--built);background:var(--built-bg)}
.vetbadge:hover{border-color:var(--ink)}
.drawer .vetrow{display:none}

/* The journey: black text, each part named, even spacing. */
.jhead{background:var(--ground);border:1px solid var(--rule-strong);border-radius:12px;padding:16px 18px;margin:0 0 18px}
.jhead .story.big{font-size:15.5px;line-height:1.6;color:var(--ink);margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--rule)}
.jhead .story.big span{color:var(--muted)}
.jhead .story.big b{color:var(--ink);font-weight:600}
.jhead .jse{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jhead .jse div{border:1px solid var(--rule);border-radius:9px;padding:10px 12px;background:var(--paper);gap:6px}
.jhead .jse span{font:600 11px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.jhead .jse p{font:400 13.5px/1.5 var(--sans);text-transform:none;letter-spacing:0;color:var(--ink);margin:0}
@media (max-width:640px){.jhead .jse{grid-template-columns:1fr}}

/* Steps: the actor and the surface are the same kind of badge, coloured by whether they are right
   — green right, amber right but short, red wrong, dashed grey not answered. The dot before the
   actor still says what kind of actor it is. */
.rsum .act,.rsum .sbadge,.sb .act{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px;
  font:500 11px/1 var(--sans);letter-spacing:0;border-radius:999px;border:1px solid var(--rule-strong);white-space:nowrap;flex:none}
.rsum .act.a-ok,.rsum .sbadge.s-ok,.sb .act.a-ok{color:var(--built);border-color:var(--built)!important;background:var(--built-bg)}
.rsum .act.a-onway,.rsum .sbadge.s-part,.sb .act.a-onway{color:var(--prog);border-color:var(--prog)!important;background:var(--prog-bg)}
.rsum .act.a-bad,.rsum .sbadge.s-bad,.sb .act.a-bad{color:var(--assume);border-color:var(--assume)!important;background:#F8ECE8}
.rsum .act.a-none,.rsum .sbadge.s-none,.sb .act.a-none{color:var(--faint);border-style:dashed!important;border-color:var(--rule-strong)!important;background:transparent}
/* The same badge wherever a step is drawn in the drawer, closed or open. */
.drawer .act,.drawer .sbadge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px;
  font:500 11px/1 var(--sans);letter-spacing:0;border-radius:999px;border:1px solid var(--rule-strong);white-space:nowrap;flex:none;text-transform:none}
.drawer .act.a-ok,.drawer .sbadge.s-ok{color:var(--built);border-color:var(--built)!important;background:var(--built-bg)}
.drawer .act.a-onway,.drawer .sbadge.s-part{color:var(--prog);border-color:var(--prog)!important;background:var(--prog-bg)}
.drawer .act.a-bad,.drawer .sbadge.s-bad{color:var(--assume);border-color:var(--assume)!important;background:#F8ECE8}
.drawer .act.a-none,.drawer .sbadge.s-none{color:var(--faint);border-style:dashed!important;border-color:var(--rule-strong)!important;background:transparent}
.jhead .jse p,.jhead .jse p *{font-weight:400}
/* Open items inside the drawer: the count beside the title, and the steps that hold them. */
.openbadge{font:600 11.5px/1 var(--sans);padding:6px 11px;border-radius:999px;cursor:pointer;color:var(--prog);background:var(--prog-bg);border:1px solid var(--prog)}
.drawer li.openstep{position:relative;box-shadow:inset 3px 0 0 var(--prog);background:linear-gradient(90deg,var(--prog-bg),transparent 40%)}
.drawer .openflag{position:absolute;right:8px;top:8px;z-index:2;font:600 10px/16px var(--sans);text-transform:uppercase;letter-spacing:.05em;padding:0 7px;border-radius:999px;color:var(--prog);border:1px solid var(--prog);background:var(--ground);cursor:help}
.drawer li.openstep.flash{animation:openflash 1.4s ease}
@keyframes openflash{0%,100%{background-color:transparent}30%{background-color:var(--prog-bg)}}
/* The journey on three lines, each part named; the pencil only on hover. */
.jhead .jlines{display:grid;gap:8px;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--rule)}
.jhead .jl{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:baseline;gap:12px}
.jhead .jk{font:600 11.5px/1.4 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.jhead .jv{font:400 16px/1.5 var(--sans);color:var(--ink)}
.jhead .jv b{font-weight:600}
.jhead .jv .lineval{color:var(--ink)}
.jhead .linepen{opacity:0;transition:opacity .15s}
.jhead .jl:hover .linepen,.jhead .jse div:hover .linepen,.jhead .linepen.on{opacity:1}
/* Starts and done: bigger. */
.jhead .jse span{font-size:12px}
.jhead .jse p,.jhead .jse p .lineval{font:400 15px/1.55 var(--sans)!important;color:var(--ink)}
/* The actor and the surface inside a step's sentence are the same badge as everywhere else. */
.sstory .sact,.sstory .ssurf{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;font:500 12px/1 var(--sans);border:1px solid var(--rule-strong);vertical-align:1px;white-space:nowrap}
/* The step list in one column, open or closed, so opening a step never reflows the others. */
.lanes .llegend,.lanes .llegend.anyopen{columns:1!important;column-count:1!important}
/* The actor on a closed step is the same badge in every view, lanes included. */
.drawer .lsum > .dotted{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px;
  font:500 11px/1 var(--sans);letter-spacing:0;border-radius:999px;border:1px solid var(--rule-strong);white-space:nowrap;flex:none;text-decoration:none}
.drawer .lsum > .dotted.a-ok{color:var(--built);border-color:var(--built);background:var(--built-bg)}
.drawer .lsum > .dotted.a-onway{color:var(--prog);border-color:var(--prog);background:var(--prog-bg)}
.drawer .lsum > .dotted.a-bad{color:var(--assume);border-color:var(--assume);background:#F8ECE8}
.drawer .lsum > .dotted.a-none{color:var(--faint);border-style:dashed;background:transparent}
/* Open items on the closed line: the chip, not a floating flag. */
.drawer .tbdc{font:600 10.5px/18px var(--sans);padding:0 8px;border-radius:999px;color:var(--prog);border:1px solid var(--prog);background:var(--prog-bg);white-space:nowrap;flex:none}
.drawer .rsum .revc,.drawer .lsum .revc{white-space:nowrap;flex:none}
.drawer .revdone{margin-left:10px;font:600 11px/1 var(--sans);padding:5px 10px;border-radius:999px;border:1px solid var(--built);color:var(--built);background:var(--built-bg);cursor:pointer}

.drawer li.open > .lsum > .revc,.drawer li.open > .lsum > .tbdc,.drawer li.open > .rsum > .revc,.drawer li.open > .rsum > .tbdc{display:none}
/* Editing a step where it is read: pencils on hover, the actor and surfaces as pickers. */
.drawer .sstory.iedit .ipick{cursor:pointer;font:inherit;font-size:12px;border:1px solid currentColor;border-radius:999px;padding:1px 9px;background:transparent}
.drawer .sstory.iedit .ipick.on{box-shadow:0 0 0 2px var(--prog-bg)}
.drawer .sstory.iedit .lineval.none,.drawer .irule .lineval.none{color:var(--faint);font-style:italic}
.drawer li .linepen{opacity:0;transition:opacity .12s}
.drawer li:hover .linepen,.drawer li .linepen.on,.drawer li .linepen:focus{opacity:1}
.drawer .ipicker{display:flex;flex-wrap:wrap;gap:10px 18px;margin:8px 0 12px;padding:10px 12px;border:1px solid var(--rule);border-radius:9px;background:var(--paper)}
.drawer .ipicker label{display:flex;flex-direction:column;gap:4px;font:600 11px/1.3 var(--sans);color:var(--muted)}
.drawer .ipicker select{font:400 13px var(--sans);padding:4px 6px;min-width:170px}
.drawer .ichk{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;width:100%}
.drawer .ichk > span{font:600 11px var(--sans);color:var(--muted);min-width:90px}
.drawer .ichk label{flex-direction:row;align-items:center;gap:5px;font:400 12.5px var(--sans);color:var(--ink)}
.drawer .itools{display:flex;gap:8px;margin:8px 0 4px}
.drawer .itool{font:500 11.5px/1 var(--sans);padding:6px 11px;border-radius:999px;border:1px dashed var(--rule-strong);background:transparent;color:var(--muted);cursor:pointer}
.drawer .itool:hover{color:var(--ink);border-color:var(--ink)}
.drawer .itool.stop.on{border-style:solid;border-color:#B5462F;color:#B5462F;background:#F8ECE8}
.drawer .stopc{display:inline-flex;align-items:center;height:20px;padding:0 9px;font:600 11px/1 var(--sans);border-radius:6px;color:#fff;background:#B5462F;white-space:nowrap;flex:none}
.drawer li.blocker{box-shadow:inset 3px 0 0 #B5462F}
/* No slot on a step any more, and no "edit every step" button: a step is edited by opening it. */
.drawer .hd .slot,.drawer [data-stepedit="*"]{display:none!important}
.drawer .hd .sname .lineinp{font:600 14px var(--sans);min-width:280px}
.drawer .rdet .itools{grid-column:1/-1}
/* Go-live and built on every step line: gold must-have, green built, red not built; dashed when unsaid. */
.drawer .lchip{display:inline-flex;align-items:center;height:20px;padding:0 8px;font:600 10.5px/1 var(--sans);border-radius:5px;border:1px solid var(--rule-strong);color:var(--muted);background:transparent;white-space:nowrap;flex:none}
.drawer .lchip.ed{cursor:pointer}
.drawer .lchip.ed:hover{border-color:var(--ink);color:var(--ink)}
.drawer .lchip.gl-none,.drawer .lchip.bt-none{border-style:dashed;color:var(--faint);font-weight:500}
.drawer .lchip.gl-must{background:var(--gold);border-color:var(--gold);color:#fff}
.drawer .lchip.gl-medium{border-color:var(--gold);color:var(--gold)}
.drawer .lchip.gl-later{border-color:var(--rule-strong);color:var(--muted)}
.drawer .lchip.bt-yes{background:var(--built-bg);border-color:var(--built);color:var(--built)}
.drawer .lchip.bt-no{background:#F8ECE8;border-color:var(--assume);color:var(--assume)}
.drawer .isegs{display:inline-flex;align-items:center;gap:0;margin-right:10px}
.drawer .isegs em{font:600 11px var(--sans);font-style:normal;color:var(--muted);margin-right:6px}
.drawer .iseg{font:500 11.5px/1 var(--sans);padding:6px 10px;border:1px solid var(--rule-strong);background:transparent;color:var(--muted);cursor:pointer;margin-left:-1px}
.drawer .isegs em + .iseg{border-radius:999px 0 0 999px;margin-left:0}
.drawer .isegs .iseg:last-child{border-radius:0 999px 999px 0}
.drawer .iseg.on.goLive-must{background:var(--gold);border-color:var(--gold);color:#fff}
.drawer .iseg.on.goLive-medium,.drawer .iseg.on.goLive-later{background:var(--prog-bg);border-color:var(--gold);color:var(--ink)}
.drawer .iseg.on.built-yes{background:var(--built-bg);border-color:var(--built);color:var(--built)}
.drawer .iseg.on.built-no{background:#F8ECE8;border-color:var(--assume);color:var(--assume)}
.drawer .itools{flex-wrap:wrap;align-items:center;row-gap:8px}
/* The body's own go-live pill would now say it twice. */
.drawer .sbits .gph{display:none}
.drawer .isegs.one .iseg{border-radius:999px!important;margin-left:0}
/* Another workflow, wherever a step hands to one: its own colour, its name, and a link to it. */
.drawer a.wfref{display:inline-flex;align-items:baseline;gap:5px;padding:1px 8px;border-radius:999px;font:500 11.5px/1.5 var(--sans);
  color:#2F5D8A;background:#E8EFF6;border:1px solid #9DB6CF;text-decoration:none;cursor:pointer;white-space:nowrap;letter-spacing:0;text-transform:none}
.drawer a.wfref b{font:600 10.5px/1 var(--mono);color:#2F5D8A}
.drawer a.wfref:hover{background:#D7E4F0;border-color:#2F5D8A}
.drawer .rbr i.toflow:has(.wfref),.drawer .llegend .toflow:has(.wfref){color:#2F5D8A;border-color:#9DB6CF;background:transparent;font-family:var(--sans)}
.drawer .rsum .ihand{display:inline-flex;gap:4px;align-items:center;flex:none;color:#2F5D8A;font:500 11px var(--sans)}

/* ---- Closed step lines in columns, 26 October: each kind of thing starts at the same place on
   every line, with room between them and a rule under each line, so what belongs to which step
   reads at a glance. Lanes: number · name · go-live+built · actor · surface · hand-off · flags. */
.drawer .llegend{line-height:1.4}
.drawer .llegend > li{border-bottom:1px solid var(--rule)}
.drawer .llegend > li > .lsum{display:grid;grid-template-columns:26px minmax(170px,250px) 150px minmax(110px,170px) minmax(130px,230px) minmax(0,1fr) auto 14px;
  column-gap:14px;align-items:center;padding:8px 8px;min-height:40px;border-radius:6px}
.drawer .lsum > *{grid-row:1;min-width:0;justify-self:start;max-width:100%}
.drawer .lsum > b{grid-column:1;justify-self:end;font:400 11.5px/1 var(--mono);color:var(--faint);font-variant-numeric:tabular-nums;min-width:0}
.drawer .lsum > .llab{grid-column:2;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-self:stretch}
.drawer .lsum > .ilife{grid-column:3}
.drawer .lsum > .dotted{grid-column:4}
.drawer .lsum > .sbadge{grid-column:5}
.drawer .lsum > .toflow{grid-column:6;margin:0}
.drawer .lsum > .iflags{grid-column:7}
.drawer .lsum > .rcar{grid-column:8;justify-self:end}

/* Rails: the rail drawing first, then the same columns; no extra height, so the rail stays joined. */
.drawer .rails .rsum{display:grid;grid-template-columns:auto 22px minmax(150px,230px) 150px minmax(110px,170px) minmax(120px,210px) auto minmax(0,1fr) auto 14px;
  column-gap:14px;align-items:center}
.drawer .rsum > *{grid-row:1;min-width:0;justify-self:start;max-width:100%}
.drawer .rsum > .rg{grid-column:1}
.drawer .rsum > .rn{grid-column:2;justify-self:end;font-variant-numeric:tabular-nums}
.drawer .rsum > .rlab{grid-column:3;justify-self:stretch}
.drawer .rsum > .ilife{grid-column:4}
.drawer .rsum > .act{grid-column:5}
.drawer .rsum > .sbadge{grid-column:6}
.drawer .rsum > .rbr,.drawer .rsum > .ihand{grid-column:7}
.drawer .rsum > .rwant{grid-column:8;justify-self:stretch}
.drawer .rsum > .iflags{grid-column:9}
.drawer .rsum > .rcar{grid-column:10;justify-self:end}

/* The groups themselves, and badges that never spill into the next column. */
.drawer .ilife,.drawer .iflags{display:inline-flex;gap:6px;align-items:center}
.drawer .rsum > .act,.drawer .rsum > .sbadge,.drawer .lsum > .dotted,.drawer .lsum > .sbadge{overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:18px}
.drawer .lsum > .dotted .rdot{vertical-align:middle;margin-right:4px}
/* The list view's heading: the same breathing room between its chips. */
.drawer ol.flow > li.sb > .hd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
/* The hand-off cell on one line, cut short rather than spilling into the flags. */
.drawer .lsum > .toflow,.drawer .rsum > .ihand,.drawer .rsum > .rbr{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-self:stretch}
.drawer .lsum > .toflow a.wfref,.drawer .rsum > .ihand a.wfref,.drawer .rsum > .rbr a.wfref{display:inline;padding:1px 8px}
/* Rails: the closed line keeps to who, where and what next; what the step does is one click away. */
.drawer .rails .rsum{grid-template-columns:auto 22px minmax(150px,240px) 140px minmax(110px,170px) minmax(120px,220px) minmax(0,1fr) 0 auto 14px}
.drawer .rsum > .rwant{display:none}
.drawer .llegend > li > .lsum{grid-template-columns:26px minmax(170px,250px) 140px minmax(110px,170px) minmax(130px,230px) minmax(0,1fr) auto 14px}
/* Needs confirming, settled or raised on the step's own heading. */
.drawer .revc .revok{margin-left:6px;padding:0 5px;border:1px solid var(--built);border-radius:999px;background:var(--built-bg);color:var(--built);font:700 10px/14px var(--sans);cursor:pointer;vertical-align:middle}
.drawer .revc .revok:hover{background:var(--built);color:#fff}
.drawer .revadd{font:500 10.5px/1 var(--sans);padding:4px 9px;border:1px dashed var(--rule-strong);border-radius:999px;background:transparent;color:var(--faint);cursor:pointer;opacity:0;transition:opacity .12s}
.drawer li:hover .revadd,.drawer .revadd:focus{opacity:1}
.drawer .revadd:hover{color:var(--prog);border-color:var(--prog)}
/* "+ needs confirming" is the same chip as "needs confirming", dashed and faint until used. */
.drawer .revadd{font:500 9.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border:1px dashed var(--rule-strong);border-radius:999px;color:var(--faint);opacity:1}
/* The rename pencil sits beside the name on the closed line; the step pencil stays at the end. */
.drawer .rsum > .irename{grid-column:3;justify-self:end}
.drawer .lsum > .irename{grid-column:2;justify-self:end}
.drawer .rsum > .rlab,.drawer .lsum > .llab{padding-right:22px}
.drawer .rsum .irename,.drawer .lsum .irename{opacity:0;padding:0 4px;margin-left:2px}
.drawer li.open > .rsum .irename,.drawer li.open > .lsum .irename,.drawer .rsum:hover .irename,.drawer .lsum:hover .irename{opacity:1}
/* Code confidence as stars, on the open step. */
.drawer .istars{display:inline-flex;align-items:center;gap:1px;margin-right:10px}
.drawer .istars em{font:600 11px var(--sans);font-style:normal;color:var(--muted);margin-right:6px}
.drawer .istar{border:0;background:transparent;padding:0 1px;font-size:17px;line-height:1;color:var(--rule-strong);cursor:pointer}
.drawer .istars:hover .istar{color:var(--gold)}
.drawer .istars .istar:hover ~ .istar{color:var(--rule-strong)}
.drawer .istar.on{color:var(--gold)}
/* The stars replace the read-only "code unscored" mark on a step that can be edited. */
.drawer li:has(.istars) .sbits .trust{display:none}
/* The step pencil's fields: data picked from the catalogue, next chosen from a list. */
.drawer .iform{grid-template-columns:repeat(2,minmax(0,1fr))}
.drawer .iform .iflabel{display:block;font:500 11.5px var(--sans);color:var(--muted);margin-bottom:5px}
.drawer .ipickd{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--rule-strong);border-radius:8px;background:var(--ground);min-height:40px}
.drawer .dtok{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 9px;border-radius:999px;background:var(--cream);border:1px solid var(--rule-strong);font:400 12.5px var(--sans)}
.drawer .dtok.new{border-style:dashed;border-color:var(--prog);background:var(--prog-bg)}
.drawer .dtok button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 3px}
.drawer .dtok button:hover{color:var(--assume)}
.drawer .dsearch{flex:1 1 160px;min-width:140px;border:0;background:transparent;font:inherit;font-size:13px;padding:4px 2px;outline:none}
.drawer .inext{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.drawer .inxrow{display:flex;gap:6px;align-items:center;width:100%}
.drawer .inxl{flex:0 0 200px;font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--rule-strong);border-radius:8px;background:var(--ground)}
.drawer .inxt{flex:1 1 auto;min-width:0;font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--rule-strong);border-radius:8px;background:var(--ground)}
.drawer .inxdel{border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer}
.drawer .dtok{color:var(--ink)}
/* The "data in → data out · pulls" line under each step, 27 October: the same facts are in the step
   pencil, where they can be edited; read-only here it was a second, uneditable copy. */
.drawer .sb-mech > .io{display:none}
/* Data in / data out / next on the open step; the step pencil has nothing left to open. */
.drawer .iflow{display:flex;flex-direction:column;gap:12px;margin:2px 0 10px}
.drawer .iflow .iflabel{display:block;font:600 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.drawer .iflow .inxl{flex:0 0 90px}
.drawer .iflow .isegs{margin:0}
.drawer .hd [data-stepedit]{display:none}
.drawer .iseg.on.kind-step{background:var(--cream);border-color:var(--ink);color:var(--ink)}
.drawer .iseg.on.kind-gate{background:var(--prog-bg);border-color:var(--prog);color:var(--prog)}
/* Before and after: two columns, gold before, blue after, purple both ways. */
.drawer .bacols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:8px}
@media (max-width:760px){.drawer .bacols{grid-template-columns:1fr}}
.drawer .bacol h5{margin:0 0 8px;font:600 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding-bottom:6px;border-bottom:2px solid}
.drawer .bacol.before h5{color:var(--gold-ink);border-color:var(--gold)}
.drawer .bacol.after h5{color:#2F5D8A;border-color:#2F5D8A}
.drawer .bacol ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.drawer .bacard{border:1px solid var(--rule-strong);border-left-width:3px;border-radius:8px;padding:8px 10px;background:var(--ground)}
.drawer .bacard.b-before{border-left-color:var(--gold)}
.drawer .bacard.b-after{border-left-color:#2F5D8A}
.drawer .bacard.b-both{border-left-color:#7A5C99;background:#F7F4FA}
.drawer .bah{display:flex;align-items:center;gap:8px}
.drawer .bah a.wfref{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.drawer .bak{margin-left:auto;font:600 9.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule-strong);border-radius:4px;padding:3px 6px;white-space:nowrap}
.drawer .bak.k-stated{color:var(--ink);border-color:var(--ink)}
.drawer .b-both .bak{color:#7A5C99;border-color:#7A5C99}
.drawer .bax{border:0;background:transparent;color:var(--muted);font-size:16px;cursor:pointer;padding:0 2px}
.drawer .bax:hover{color:var(--assume)}
.drawer .baq{margin:5px 0 0;font-size:12px;color:var(--muted);line-height:1.4}
.drawer .banone{font-size:12.5px;color:var(--faint);font-style:italic;padding:4px 0}
.drawer .baadd{width:100%;font:inherit;font-size:12.5px;padding:6px 8px;border:1px dashed var(--rule-strong);border-radius:8px;background:transparent;color:var(--muted)}
.drawer .bacard{padding:6px 10px}
.drawer .bacol ul{gap:5px}
.drawer .basub{font:600 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#7A5C99;margin:8px 0 0}
.drawer .bak{border-color:transparent}
.drawer .b-both .bak{display:none}
.drawer .bax{margin-left:auto}.drawer .bak + .bax{margin-left:0}

/* THE PARTNER LINKS FOLD IS INSET LIKE EVERY OTHER ONE — 5 November 2026, "cnayou make sure
   the partner links paddings are correct ? it seemt taht is not right compared."
   It was: measured against the fold above it, `#classBody`'s first child carries
   `12px 16px 10px` of its own and every child of `#shareBody` carried none, so its content sat
   flush at the fold's edge, sixteen pixels left of the heading above it and of every sibling
   section's content. Put on the CONTAINER rather than on the four children, because they have
   no padding of their own to double up, and a fifth one added later should not have to
   remember. In layout.css because admin.html does not load steps.css, and styles.css is
   regenerated whole. */
#shareBody{padding:12px 16px 14px}