/* What these need — narrowing the answer by use case and asset class */
.reqnarrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px}
.reqnarrow .reqnl{font-size:12px;color:var(--muted);margin:0 4px 0 8px}
.reqnarrow .reqnl:first-child{margin-left:0}
.reqfchip{font:inherit;font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--rule-strong);background:transparent;color:inherit;cursor:pointer}
.reqfchip[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}

/* What these need — views, lifecycle map, checklist */
/* SCOPED TO THIS PAGE, 28 October 2026. `.seg` is the segmented control the whole product uses
   and styles.css already defines it; this file's version was written for the requirements page
   alone and said something slightly different (no padding, no gap, overflow hidden). That was
   harmless while this sheet was loaded on one page. The lifecycle map moves onto the catalogue
   now — "i want the lifechyle view to be a other view in hte main screen" — so this sheet loads
   there too, and an unscoped `.seg` would quietly restyle the drawer's own controls. */
body[data-page="requirements"] .seg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:999px;overflow:hidden}
body[data-page="requirements"] .seg button{font:inherit;font-size:13px;padding:5px 14px;border:0;background:transparent;color:inherit;cursor:pointer}
body[data-page="requirements"] .seg button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.reqviews{margin:0 0 16px}
.lcbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 8px}
.lcscroll{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;background:var(--paper);padding:6px 0;margin:8px 0 14px}
.lcmap{display:block}
.lcmap .lccolt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;fill:var(--muted)}
.lcmap .lcnode{cursor:pointer}
.lcmap .lcnode rect{fill:var(--ground);stroke:var(--rule-strong);stroke-width:1}
.lcmap .lcnode.picked rect{fill:var(--cream);stroke:var(--gold);stroke-width:1.5}
.lcmap .lcnode.focus rect{stroke:var(--ink);stroke-width:2}
.lcmap .lcnode.dim{opacity:.32}
.lcmap .lcnode:focus-visible rect{stroke:var(--gold-ink);stroke-width:2}
.lcmap .lcid{font-family:ui-monospace,Menlo,monospace;font-size:10px;fill:var(--gold-ink)}
.lcmap .lcnm{font-size:12px;fill:var(--ink)}
.lcmap .lcedge{fill:none;stroke-width:1.6}
.lcmap .lcedge.first{stroke:var(--gold)}
.lcmap .lcedge.rel{stroke:var(--muted);stroke-dasharray:4 4}
.lcmap .lcarr{fill:var(--muted)}
.lclegend{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lclegend .lk{display:inline-block;width:22px;height:0;border-top:2px solid var(--gold);margin-left:6px}
.lclegend .lk.rel{border-top:2px dashed var(--muted)}
.lcaround h4{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
.lcgrp{margin:0 0 14px}.lcgrp h5{margin:0 0 2px;font-size:14px}
/* The layers after a flow, folded — 27 October 2026. The immediate next layer is the thing to
   read; the rest is one line until somebody opens it. Styled as the group it stands in for, so a
   closed fold reads as a heading rather than as a control. */
details.lcmore>summary{margin:0 0 2px;font:600 14px/1.4 var(--sans);cursor:pointer;list-style:none}
details.lcmore>summary::-webkit-details-marker{display:none}
details.lcmore>summary::before{content:"\25B8";display:inline-block;width:12px;color:var(--faint)}
details.lcmore[open]>summary::before{content:"\25BE"}
details.lcmore>summary i{font-style:normal;color:var(--faint);margin-left:6px}
details.lcmore>summary .reqsub{margin-left:8px;font-weight:400}
details.lcmore .reqsub{display:block;margin:8px 0 2px}
.lcul{margin:6px 0 0;padding-left:18px}.lcul li{margin:3px 0}
.reqrow.picked{border-color:var(--gold);background:var(--cream)}
.ckhead{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-radius:10px;margin:0 0 14px;border:1px solid var(--rule-strong)}
.ckhead.ready{background:var(--built-bg);border-color:var(--built)}.ckhead.ready b{color:var(--built)}
.ckhead.blocked{background:var(--prog-bg);border-color:var(--prog)}.ckhead.blocked b{color:var(--prog)}
/* Nothing blocked, and not everything in either: a reading of its own since 26 October 2026. */
.ckhead.partial{background:var(--pend-bg);border-color:var(--muted)}.ckhead.partial b{color:var(--ink)}
.ckrow{display:flex;gap:10px;align-items:flex-start;padding:7px 4px;border-bottom:1px solid var(--rule);cursor:pointer}
.ckrow input{margin-top:3px}
.ckrow.done .ckt{text-decoration:line-through;color:var(--muted)}
@media (max-width:640px){.seg button{padding:5px 10px}}
.lcmap .lccolt{letter-spacing:.02em;font-weight:600}
.lclegend .lclg{stroke-width:2}.lclegend .lclg.first{stroke:var(--gold)}.lclegend .lclg.rel{stroke:var(--muted);stroke-dasharray:4 4}

.ckprop{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.ckprop select,.ckprop input,.lcplace select{font:inherit;font-size:13px;padding:4px 8px;border:1px solid var(--rule-strong);border-radius:6px;background:var(--ground);color:var(--ink)}
.lcplace{font-size:12px;color:var(--muted);margin-left:auto;display:inline-flex;gap:6px;align-items:center}
/* No explanatory text on the page (23 October 2026). */
.reqpick .note{display:none}

/* ---- The lifecycle, redrawn 26 October: an overview with no lines, and one workflow in focus. */
.lcov{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(178px,1fr);gap:14px;padding:14px;align-items:start}
.lccol2{display:flex;flex-direction:column;gap:8px;min-width:0}
.lccol2 h4{margin:0 0 4px;font:600 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:8px;border-bottom:2px solid var(--rule-strong)}
.lccol2 h4 i{font-style:normal;color:var(--faint);font-weight:500;margin-left:4px}
.lccard{display:flex;flex-direction:column;gap:3px;text-align:left;font:inherit;padding:8px 10px;border:1px solid var(--rule-strong);border-radius:8px;background:var(--ground);cursor:pointer;color:var(--ink);transition:opacity .15s,border-color .15s}
.lccard:hover{border-color:var(--ink)}
.lccard .lcch{display:flex;align-items:center;justify-content:space-between;gap:6px}
.lccard .lcch b{font:500 10.5px/1 ui-monospace,Menlo,monospace;color:var(--gold-ink)}
.lccard .lcnm2{font-size:12.5px;line-height:1.3}
.lccard .lcdeg{font-size:10.5px;color:var(--faint)}
.lccard.picked{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.lccard.focus{border-color:var(--ink);border-width:2px;background:var(--cream)}
.lccard.dim{opacity:.35}
.lccard .lctag{font:600 9.5px/1 var(--sans);font-style:normal;text-transform:uppercase;letter-spacing:.05em;padding:3px 6px;border-radius:4px}
.lccard.r-before{border-color:var(--gold);background:#FBF5E6}.lccard.r-before .lctag{background:var(--gold);color:#fff}
.lccard.r-lets{border-color:#3E7D5A;background:#EEF5F0}.lccard.r-lets .lctag{background:#3E7D5A;color:#fff}
.lccard.r-after{border-color:#2F5D8A;background:#EEF3F8}.lccard.r-after .lctag{background:#2F5D8A;color:#fff}
.lccard.r-rel{border-style:dashed}.lccard.r-rel .lctag{border:1px dashed var(--muted);color:var(--muted)}

.lcfocus{border:1px solid var(--rule-strong);border-radius:12px;background:var(--paper);padding:14px 16px 10px;margin:6px 0 16px;scroll-margin-top:16px}
.egbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.egbar h4{margin:0;font-size:16px;flex:1 1 auto}
.egscroll{overflow-x:auto;margin:6px 0 4px}
.egmap{display:block}
.egmap .egcolt{font:600 10.5px var(--sans);letter-spacing:.08em;fill:var(--muted)}
.egmap .eghdr{font:600 11.5px var(--sans);fill:var(--muted)}
.egmap .egnone{font:italic 12.5px var(--sans);fill:var(--faint)}
.egmap .egn{cursor:pointer}
.egmap .egn rect{fill:var(--ground);stroke-width:1.3}
.egmap .egn:hover rect{stroke-width:2.2}
.egmap .egn.k-needs rect{stroke:var(--gold)}.egmap .egn.k-lets rect{stroke:#3E7D5A}.egmap .egn.k-after rect{stroke:#2F5D8A}
.egmap .lcid{font:500 10.5px ui-monospace,Menlo,monospace;fill:var(--gold-ink)}
.egmap .lcnm{font:400 12.5px var(--sans);fill:var(--ink)}
.egmap .egcenter{cursor:pointer}.egmap .egcenter rect{fill:var(--ink)}
.egmap .egcenter .lcid{fill:#E9D9A8}.egmap .egcenter .egcnm{font:600 14px var(--sans);fill:#fff}
.egmap .ege{fill:none;stroke-width:1.8}
.egmap .ege.k-needs{stroke:var(--gold)}.egmap .ege.k-lets{stroke:#3E7D5A}.egmap .ege.k-after{stroke:#2F5D8A}
.egmap .egarr.k-needs{fill:var(--gold)}.egmap .egarr.k-lets{fill:#3E7D5A}.egmap .egarr.k-after{fill:#2F5D8A}
.lcfocus .lclegend{margin:8px 0 0}
.egk{display:inline-block;width:18px;height:0;border-top:2px solid;margin:0 4px 0 8px;vertical-align:middle}
.egk.k-needs{border-color:var(--gold)}.egk.k-lets{border-color:#3E7D5A}.egk.k-after{border-color:#2F5D8A}
.egrel{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 4px;font-size:12px;color:var(--muted)}
.egrel > span{margin-right:4px}
.egchip{font:inherit;font-size:12px;padding:3px 9px;border:1px dashed var(--rule-strong);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.egchip b{font:500 10.5px ui-monospace,Menlo,monospace;color:var(--gold-ink);margin-right:3px}
.egchip:hover{border-style:solid;border-color:var(--ink)}
.lcwhy{margin:10px 0 2px}.lcwhy summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
.lcfocus .lclegend{display:block;font-size:12px;color:var(--muted)}
.lcfocus .egbar h4{text-transform:none;letter-spacing:0;font:600 17px/1.3 var(--sans);color:var(--ink)}
.lccol2 h4{min-height:38px;display:flex;align-items:flex-end;gap:4px}
.egmap .egvia{font:400 10.5px var(--sans);fill:var(--muted)}
.egmap .egn.k-loop rect{stroke:#7A5C99}.egmap .ege.k-loop{stroke:#7A5C99}.egmap .egarr.k-loop{fill:#7A5C99}
.egk.k-loop{border-color:#7A5C99}
.lccard.r-loop{border-color:#7A5C99;background:#F3EFF7}.lccard.r-loop .lctag{background:#7A5C99;color:#fff}

/* CAN IT BE TURNED ON — 27 October 2026.
 *
 *   "i want to see from the what this needs is which of those workflows have reached the minimum
 *    state (basic, all must haves are there) ... it will make me see clearly if i can turn on the
 *    workflow or not"
 *
 * Three states and three weights. Ready is the only one that earns colour — it is the answer she
 * is looking for. Short is marked but quiet, because a count is already a number to read. A flow
 * nobody has marked gets NOTHING on the card: fifty-nine grey badges would be the loudest thing
 * on the map, and they would read as "not ready", which is not what it means.
 */
.lcready{margin:10px 0 6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.lcready > b{font:600 12.5px/1.4 var(--sans)}
.lcr{font:500 11.5px/1 var(--sans);border:1px solid var(--rule-strong);border-radius:999px;padding:4px 9px;white-space:nowrap}
.lcr.ok{color:var(--stated);border-color:currentColor;background:color-mix(in srgb,var(--stated) 8%,transparent)}
.lcr.no{color:var(--assume);border-color:currentColor}
.lcr.non{color:var(--muted)}
.lcready .reqsub{flex:1 1 100%;margin:2px 0 0}

.lcgo{font-style:normal;font:600 9.5px/1 var(--sans);letter-spacing:.03em;border-radius:4px;
  padding:3px 5px;margin-left:5px;white-space:nowrap}
.lcgo.ok{color:var(--stated);border:1px solid currentColor;background:color-mix(in srgb,var(--stated) 10%,transparent)}
.lcgo.no{color:var(--assume);border:1px solid currentColor}

.lcgo-line{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:8px;
  border:1px solid var(--rule-strong);border-left-width:3px;margin:0 0 14px}
.lcgo-line b{font:600 12.5px/1.3 var(--sans)}
.lcgo-line span{font-size:12px;color:var(--muted);line-height:1.45}
.lcgo-line.ok{border-left-color:var(--stated);background:color-mix(in srgb,var(--stated) 6%,transparent)}
.lcgo-line.ok b{color:var(--stated)}
.lcgo-line.no{border-left-color:var(--assume)}
.lcgo-line.no b{color:var(--assume)}
.lcgo-line.non{border-left-color:var(--rule-strong)}
.lcgo-line.non b{color:var(--muted)}