/* Architecture Audit: pipeline boxes, scorecard rows, results. */

/* ---------- score badges (red 1-3, yellow 4-7, green 8+) ---------- */
.score{display:inline-flex;align-items:baseline;gap:1px;padding:2px 10px;border-radius:999px;font-weight:600;font-size:15px}
.score small{font-size:12px;font-weight:500;opacity:.7;margin-left:2px}
.score.s-red,.rbar .s-red{background:var(--tag-red);color:var(--tag-red-ink)}
.score.s-yellow,.rbar .s-yellow{background:var(--tag-yellow);color:var(--tag-yellow-ink)}
.score.s-green,.rbar .s-green{background:var(--tag-green);color:var(--ok)}

/* ---------- sources ---------- */
.shared-note{margin-top:18px}

/* ---------- stack pipeline ---------- */
.pipe{margin:4px 0 14px}
.pflow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:4px 2px 8px}
.parrow{flex:none;display:grid;place-items:center;width:22px;color:var(--faint);font-size:15px}
.pbox{flex:1 1 0;min-width:128px;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:8px;border:1px solid rgba(var(--ink-rgb),.14);background:var(--surface);transition:border-color .15s,background .15s}
.pbox.on{border-color:#a8d5c9;background:#f3faf7}
.pbox.none{border-style:dashed;background:var(--soft)}
.pbox.off{border-style:dashed}
.pbox.src.on{border-color:rgba(var(--ink-rgb),.2);background:var(--soft)}
.plabel{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ptool{font-weight:600;font-size:14px;min-height:22px}
.ptool.missing{color:var(--faint);font-weight:500}
.pdesc{font-size:12px;line-height:1.4;color:var(--faint);margin-top:auto}
.pextra{display:flex;justify-content:center;gap:22px;margin-top:10px}
.pextra .pbox{flex:0 1 240px}
.ppart{font-size:10.5px;font-weight:500;color:var(--faint);margin-left:4px}
.popt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--faint)}
.pipe.ro .pbox[data-step]{cursor:pointer}

/* ---------- scorecard ---------- */
.pillar-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.qlist{border-top:1px solid var(--line)}
.qgroup{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding:18px 0 6px}
.qrow{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:start;padding:10px 6px;border-bottom:1px solid var(--line);border-radius:4px;transition:background .12s}
.qrow:hover{background:rgba(var(--ink-rgb),.025)}
.qnum{color:var(--faint);font-size:12px;padding-top:3px;text-align:right}
.qtext{font-size:14.5px;line-height:1.45}
.qex{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.qnote{width:100%;margin-top:4px;border:0;background:transparent;font:inherit;font-size:13px;color:var(--muted);padding:2px 0;outline:none}
.qnote::placeholder{color:var(--faint)}
.qnote:placeholder-shown{display:none}
.qrow.noting .qnote{display:block}
.qact{display:flex;align-items:center;gap:8px}
.qnote-btn{border:0;background:none;font:inherit;font-size:12.5px;color:var(--faint);padding:3px 6px;border-radius:4px;cursor:pointer;opacity:0}
.qrow:hover .qnote-btn,.qnote-btn:focus-visible{opacity:1}
.qnote-btn:hover{background:var(--hover);color:var(--ink)}
.seg{display:inline-flex;padding:2px;border-radius:6px;background:rgba(var(--ink-rgb),.06);gap:2px;margin-top:1px}
.seg button{border:0;background:transparent;padding:3px 10px;border-radius:4px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.seg button.on{background:var(--surface);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.12);font-weight:500}
.qrow.a-yes .seg button.on{color:var(--ok)}
.qrow.a-no .seg button.on{color:var(--fact)}
.qrow.a-unsure .seg button.on{color:var(--amber)}

/* ---------- results ---------- */
.rhero{display:flex;align-items:center;gap:22px;padding:22px 26px;border-radius:10px;margin-bottom:14px}
.rhero.s-red{background:#fdf0ee}
.rhero.s-yellow{background:#fbf6e6}
.rhero.s-green{background:#eef6f0}
.rbig{font-size:46px;font-weight:700;line-height:1;letter-spacing:-.02em}
.rbig small{font-size:20px;font-weight:500;color:var(--muted)}
.rpct{font-size:20px;font-weight:600}
.rband{color:var(--muted)}
.rcards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rcard{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font:inherit;text-align:left;cursor:pointer}
.rcard:hover{background:var(--soft)}
.rcard-t{font-size:13px;font-weight:500;color:var(--muted)}
.rbar{width:100%;height:5px;border-radius:3px;background:rgba(var(--ink-rgb),.08);overflow:hidden}
.rbar span{display:block;height:100%}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wgroup{padding:12px 14px;border:1px solid var(--line);border-radius:8px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.wtitle{width:100%;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.wchip{font-size:13px;padding:2px 9px;border-radius:999px}
.wchip.yes{background:var(--tag-green);color:var(--ok)}
.wchip.no{background:var(--tag-gray);color:var(--muted)}
.wchip.unsure{background:var(--tag-yellow);color:var(--tag-yellow-ink)}
.gap-group{margin-bottom:14px}
.gap-hd{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.gap{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.gtag{flex:none;width:84px;text-align:center;font-size:12px;padding:1px 0;border-radius:3px}
.gtag.no{background:var(--tag-red);color:var(--tag-red-ink)}
.gtag.unsure{background:var(--tag-yellow);color:var(--tag-yellow-ink)}
.gtag.open{background:var(--tag-gray);color:var(--muted)}
.gnote{display:block;color:var(--faint);font-size:13px}

@media (max-width:900px){
  .pflow{flex-direction:column}
  .parrow{width:auto;height:18px;transform:rotate(90deg)}
  .pextra{flex-direction:column;gap:10px}
  .pextra .pbox{flex:1}
  .rcards,.wgrid{grid-template-columns:1fr 1fr}
  .qrow{grid-template-columns:22px 1fr}
  .qact{grid-column:2}
}

@media print{
  aside,header,.nav,.below,.popover{display:none !important}
  .app{display:block;height:auto}
  main{overflow:visible}
  .rcard,.pbox,.wgroup{break-inside:avoid}
}

/* walkthrough video button in the results hero */
.rhero .wt,.rhero .wt-add{margin-left:auto}
.wt{display:flex;align-items:center;gap:6px}
.wt-play{display:flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:6px 16px 6px 6px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(var(--shadow-rgb),.08),0 0 0 1px rgba(var(--shadow-rgb),.06);transition:transform .12s,box-shadow .12s}
.wt-play:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--shadow-rgb),.12),0 0 0 1px rgba(var(--shadow-rgb),.06)}
.wt-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff}
.wt-ic svg{margin-left:2px}
.wt-play b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.wt-play small{display:block;font-size:12px;color:var(--muted)}
.wt-edit{border:0;background:none;font:inherit;font-size:12px;color:var(--faint);padding:4px 6px;border-radius:4px;cursor:pointer;opacity:0}
.rhero:hover .wt-edit,.wt-edit:focus-visible{opacity:1}
.wt-edit:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.wt-add{border:1px dashed rgba(var(--ink-rgb),.25);background:transparent;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.wt-add:hover{background:rgba(255,255,255,.6);color:var(--ink)}
@media print{.wt,.wt-add{display:none}}

/* ---------- tooling: one row per part of the stack ---------- */
.tl-list{border-top:1px solid var(--line)}
.tl-row{display:grid;grid-template-columns:230px 1fr auto;gap:16px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--line)}
.tl-row:hover{background:rgba(var(--ink-rgb),.02)}
.tl-label b{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px}
.tl-label b::before{content:'';width:8px;height:8px;border-radius:50%;background:rgba(var(--ink-rgb),.18);flex:none}
.tl-row.on .tl-label b::before{background:var(--ok)}
.tl-row.none .tl-label b::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(var(--ink-rgb),.3)}
.tl-label span{display:block;font-size:12.5px;color:var(--faint);margin-left:15px}
.tl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:32px;padding:3px 6px;border-radius:6px}
.tl-tools:focus-within{background:var(--surface);box-shadow:0 0 0 1px rgba(35,131,226,.35),0 0 0 4px var(--accent-soft)}
.tl-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 9px;border-radius:5px;background:var(--tag-blue);color:var(--tag-blue-ink);font-size:13.5px;font-weight:500}
.tl-chip button{border:0;background:none;color:inherit;opacity:.5;cursor:pointer;font-size:14px;line-height:1;padding:0 3px;border-radius:3px}
.tl-chip button:hover{opacity:1;background:rgba(0,0,0,.08)}
.tl-in{flex:1;min-width:160px;border:0;background:transparent;font:inherit;font-size:14px;padding:4px 2px;outline:none;color:var(--ink)}
.tl-in::placeholder{color:var(--faint)}
.tl-missing{font-size:13.5px;color:var(--muted);background:var(--soft);border:1px dashed rgba(var(--ink-rgb),.2);padding:2px 9px;border-radius:5px}
.tl-link{border:0;background:none;font:inherit;font-size:12.5px;color:var(--faint);cursor:pointer;padding:3px 6px;border-radius:4px;white-space:nowrap}
.tl-link:hover{background:var(--hover);color:var(--ink)}
.tl-side{min-width:100px;text-align:right}
.tl-sub{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin:22px 0 6px}
.tl-sub.first{margin-top:0}
@media (max-width:900px){ .tl-row{grid-template-columns:1fr} .tl-side{text-align:left} }

/* ---------- results: colour by score (kept quiet: tint + accent, not full colour) ---------- */
.rcard{position:relative;overflow:hidden}
.rcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.rcard.s-red::before{background:#ec8b8b}
.rcard.s-yellow::before{background:#e6c35c}
.rcard.s-green::before{background:#7cc49a}

.pipe.ro .pbox{cursor:pointer}
.pipe.ro .pbox.b-red{background:#fdf7f6;--pb:#e8a5a0}
.pipe.ro .pbox.b-yellow{background:#fdfaf1;--pb:#e3cb84}
.pipe.ro .pbox.b-green{background:#f5faf6;--pb:#9fd0b2}
.pipe.ro .pbox.b-none{background:#fbfbfa;--pb:rgba(var(--ink-rgb),.3)}
.pipe.ro .pbox.has{border:1.5px solid var(--pb)}
.pipe.ro .pbox.lacks{border:1px dashed rgba(var(--ink-rgb),.16)}
.pipe.ro .pbox.lacks .ptool{color:var(--faint)}
.plegend{display:flex;flex-wrap:wrap;gap:16px;margin:-4px 0 4px;font-size:12px;color:var(--faint)}
.plegend span{display:flex;align-items:center;gap:6px}
.plegend i{display:inline-block;width:16px;height:11px;border-radius:3px}
.lg-fill{background:linear-gradient(90deg,#fdf7f6 33%,#fdfaf1 33% 66%,#f5faf6 66%);border:1px solid rgba(var(--ink-rgb),.1)}
.lg-bold{border:1.5px solid rgba(var(--ink-rgb),.35)}
.lg-light{border:1px dashed rgba(var(--ink-rgb),.3)}

/* results pipeline: Sources spans both rows on the left */
.pgrid{display:flex;align-items:stretch;gap:0}
.pgrid > .pbox.src{flex:0 0 150px;min-width:0;margin-top:4px}
.pmain{flex:1;min-width:0}
.pmain .pflow{padding-left:0}
.pmain .pextra{padding-left:22px}
.psrc{font-size:13.5px;font-weight:500;padding:3px 0 3px 12px;position:relative;overflow-wrap:anywhere}
.psrc::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:rgba(var(--ink-rgb),.35)}
@media (max-width:900px){ .pgrid{flex-direction:column} .pgrid > .pbox.src{flex:none} }