/* Tangible Studio: the review page as one tool, the page track, triage, the call-out and conflict flags (21 Oct 2026).
   Loaded after studio.css on the portal (index.html). Uses the system tokens (system.css, html.v2) with fallbacks.
   Status colours keep their meaning: amber the customer's move, blue Tangible's, green done, grey replaced or void.
   Phases (the track, the map, the column and Send) use four families, tone and texture inside each: green done (deep
   complete or checked, mid applied or approved), blue Tangible's move (mid answered or to decide, deep sent back or needs a
   change, light with Tangible, hatched assigned), amber the customer's move (solid open or to check, light sent, hatched
   with someone), grey (hatched on hold, light removed or rejected). Tiers never reuse a status colour: routine ink, safe
   lemon, critical red, always with the three-bar meter and the word. Forest marks only the current page and actions. */
:root{
  --p-complete:#17663F;--p-applied:#3FBB63;--p-answered:#4A86C5;--p-back:#2A5F98;--p-tlight:#A9C7E8;--p-open:#D08A2E;--p-sent:#EBC089;--p-removed:#D6D2CE;
  --h-amber:repeating-linear-gradient(135deg,#D08A2E 0 2px,#F6E3C8 2px 5px);
  --h-blue:repeating-linear-gradient(135deg,#4A86C5 0 2px,#DCE8F5 2px 5px);
  --h-grey:repeating-linear-gradient(135deg,#A8A29D 0 2px,#EDEBE9 2px 5px);
  --t-rou:#5C5753;--t-safe:#E2BB12;--t-safe-wash:#FCF8E3;--t-crit:#C8302E;--t-crit-ink:#A3201F;--t-crit-wash:#FDF1F0;
}
.ph{display:block;height:100%}
.ph.p-complete,.sw.p-complete{background:var(--p-complete)}.ph.p-applied,.sw.p-applied{background:var(--p-applied)}.ph.p-answered,.sw.p-answered{background:var(--p-answered)}
.ph.p-back,.sw.p-back{background:var(--p-back)}.ph.p-tlight,.sw.p-tlight{background:var(--p-tlight)}.ph.p-open,.sw.p-open{background:var(--p-open)}
.ph.p-sent,.sw.p-sent{background:var(--p-sent)}.ph.p-removed,.sw.p-removed{background:var(--p-removed)}
.ph.h-amber,.sw.h-amber{background:var(--h-amber)}.ph.h-blue,.sw.h-blue{background:var(--h-blue)}.ph.h-grey,.sw.h-grey{background:var(--h-grey)}
.sw{display:inline-block;width:9px;height:9px;border-radius:2px;flex:none}
/* a segmented bar and every stage with its count; zero stages muted */
.rp-seg{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden;background:var(--line,#E7E4E1);width:100%}
.rp-seg i{display:block;height:100%;min-width:3px}
.rp-leg{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12.5px;line-height:1.4;color:var(--text-2);font-variant-numeric:tabular-nums}
.rp-leg > span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rp-leg > span.z{color:var(--text-4,#A29C97)}
.rp-leg > span.z .sw{opacity:.4}

/* ---------- head: back link, the place with its version pull-down, status, More, one meta line ---------- */
.rp-head{padding:0 0 4px}
.rp-head[hidden]{display:none}
.rp-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:4px 0;font-size:13.5px;font-weight:500;color:var(--deep);text-decoration:none}
.rp-back svg{width:14px;height:14px}
.rp-back:hover{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.rp-hrow{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap}
.rp-h{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.022em;color:var(--text);min-width:0}
.rp-h:focus{outline:none}
.rp-h .sep{color:var(--text-4,#A29C97);font-weight:400}
.rp-vp{position:relative;display:inline-flex;align-items:center;max-width:100%}
.rp-vp select{appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0 28px 2px 0;background:transparent;font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;border-bottom:1.5px dashed transparent;border-radius:0;max-width:100%;min-height:0;box-shadow:none}
.rp-vp select:hover{border-bottom-color:var(--line-2)}
.rp-vp select:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:4px}
.rp-vp select:disabled{cursor:default;opacity:1;padding-right:0}
.rp-vp select:disabled + svg{display:none}
.rp-vp svg{position:absolute;right:4px;top:50%;width:16px;height:16px;margin-top:-7px;pointer-events:none;color:var(--text-3)}
.rp-hact{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative}
.rp-meta{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-3);font-variant-numeric:tabular-nums}
.rp-meta b{font-weight:600;color:var(--text-2)}
.rp-meta .tg{color:var(--tang,#2A5F98);font-weight:500}
/* pills in the template's words and tones */
.pill.st-you{background:var(--you-bg,#FBF0E1);color:var(--you,#8A4F0B)}.pill.st-you::before{background:var(--you-dot,#D08A2E)}
.pill.st-tang{background:var(--tang-bg,#EAF1F9);color:var(--tang,#2A5F98)}.pill.st-tang::before{background:var(--tang-dot,#4A86C5)}
.pill.st-done{background:var(--done-bg,#E7F4EB);color:var(--done,#17663F)}.pill.st-done::before{background:var(--done-dot,#3FBB63)}
.pill.st-gone{background:var(--gone-bg,#F0EEEC);color:var(--gone,#5C5753)}.pill.st-gone::before{background:var(--gone-dot,#A8A29D)}
.pill.st-draft{background:#fff;color:var(--tang,#2A5F98);box-shadow:inset 0 0 0 1px var(--tang-dot,#4A86C5)}.pill.st-draft::before{background:#fff;box-shadow:inset 0 0 0 1.5px var(--tang-dot,#4A86C5)}
.pill.st-out{background:#fff;color:var(--you,#8A4F0B);box-shadow:inset 0 0 0 1px var(--you-dot,#D08A2E)}.pill.st-out::before{background:#fff;box-shadow:inset 0 0 0 1.5px var(--you-dot,#D08A2E)}
.btn.btn-more{width:32px;min-width:32px;height:32px;min-height:32px;padding:0;display:inline-grid;place-items:center}
.btn.btn-more svg{width:16px;height:16px}
.rp-menu{position:absolute;top:40px;right:0;z-index:70;min-width:220px;padding:6px;background:#fff;border-radius:10px;box-shadow:0 14px 32px rgba(32,30,29,.16),0 0 0 1px rgba(32,30,29,.07)}
.rp-menu[hidden]{display:none}
.rp-menu a,.rp-menu button{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;gap:8px;padding:9px 12px;border-radius:6px;font-size:14px;color:var(--text);cursor:pointer}
.rp-menu a:hover,.rp-menu button:hover,.rp-menu a:focus-visible,.rp-menu button:focus-visible{background:var(--ground)}
.rp-menu .mi-sep{height:1px;margin:6px 4px;background:var(--line)}
.rp-menu .mi-d{color:var(--neg,#A2531B)}

/* ---------- the Studio bar on the map and Send: lockup, a hairline, the stages, one forward action ---------- */
.sx:not(.pagemode) > .sx-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px 18px;flex-wrap:wrap;margin:20px 0 28px;padding:12px 0;background:var(--ground);border:0;border-radius:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:none}
.sx:not(.pagemode) > .sx-bar .sx-ctx,.sx:not(.pagemode) > .sx-bar > .sx-sp{display:none}
.sx.pagemode > .sx-bar .rp-rule,.sx.pagemode > .sx-bar .sx-stages,.sx.pagemode > .sx-bar .rp-go,.sx.pagemode > .sx-bar .sx-ctx{display:none}
.sx.pagemode > .sx-bar .sx-lock-t{display:none}
.sx.pagemode > .sx-bar .sx-lock{flex:none}
/* the page bar: row 1 the mark and the steps, row 2 the track, full width (over the slim one-row bar in studio.css) */
.sx.pagemode > .sx-bar,body.sx-page .sx.pagemode > .sx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sx.pagemode > .sx-bar .sx-steps,body.sx-page .sx.pagemode .sx-steps{display:flex;flex:1 1 0;min-width:0;padding-top:0;margin-top:0;box-shadow:none}
body.sx-page .sx.pagemode .sx-steps > *{order:0}
body.sx-page .sx.pagemode .sx-steps > .sx-sp{display:block;flex:1}
.sx.pagemode > .sx-bar .sx-mini,body.sx-page .sx.pagemode .sx-bar .sx-mini{order:5;flex:1 1 100%;display:block;overflow:visible;margin:2px 0 0;padding:10px 0 2px;box-shadow:inset 0 1px 0 var(--edge,rgba(32,30,29,.08))}
.sx.pagemode > .sx-bar .sx-mini[hidden]{display:none}
.wk-src{grid-template-columns:auto 26px minmax(0,1fr) auto}
.wk-src .wk-num{margin:0}
.rp-rule{flex:0 1 56px;min-width:16px;height:1px;background:linear-gradient(90deg,var(--live),rgba(63,187,99,0))}
.rp-go{margin-left:auto;display:flex;align-items:center;gap:14px;min-width:0}
.rp-go[hidden]{display:none}
.rp-next{font-size:13px;line-height:1.35;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rp-next b{font-weight:600;color:var(--text)}
.rp-go .btn{flex:none;display:inline-flex;align-items:center;gap:6px}
.rp-go .btn svg{width:14px;height:14px}
/* the page bar: ‹ Map first, the page pull-down, this page's stage counts, Site questions with its count */
.sx-mapl{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:6px 6px;border-radius:6px;font-size:13px;font-weight:500;color:var(--deep);white-space:nowrap}
.sx-mapl svg{width:14px;height:14px}
.sx-mapl:hover{color:var(--forest)}
.sx-mapl:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-cnt .rp-leg{font-size:12.5px;flex-wrap:nowrap;overflow:hidden}
.sx-qbar .rp-n{margin-left:2px}
.rp-n{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 7px;border-radius:5px;font-size:11.5px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;background:var(--gone-bg,#F0EEEC);color:var(--text-3);white-space:nowrap}
.rp-n.you{background:var(--you-bg,#FBF0E1);color:var(--you,#8A4F0B)}
.rp-n.tang{background:var(--tang-bg,#EAF1F9);color:var(--tang,#2A5F98)}
.rp-n.done{background:var(--done-bg,#E7F4EB);color:var(--done,#17663F)}

/* ---------- body: the map leads, the column carries what Tangible sent and what is asked ---------- */
.rp-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"main top" "main bot";grid-template-rows:auto 1fr;gap:16px 40px;align-items:start}
.rp-main{grid-area:main;min-width:0}
.rp-top{grid-area:top;min-width:0}.rp-bot{grid-area:bot;min-width:0}
.rp-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 18px;font-size:12.5px;color:var(--text-2)}
.rp-key span{display:inline-flex;align-items:center;gap:7px}
.rp-key .sx-sd{width:15px;height:15px}
.rp-main .sx-map{gap:20px}
.rp-main .sx-sec{grid-template-columns:150px minmax(0,1fr);gap:18px}
.rp-main .sx-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;grid-auto-rows:minmax(100px,auto)}
.rp-main .sx-pg{height:auto;min-height:100px;padding:12px 14px 13px}
.rp-main .sx-pg .nm{font-size:14.5px}
.rp-main .sx-pg.next{border-color:transparent;box-shadow:0 0 0 2px var(--forest)}
.rp-main .sx-pg .nx{font:600 10px/1 var(--arch);letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.rp-main .sx-pg .ln{margin-top:auto;font-size:12px;line-height:1.35;color:var(--text-3);font-variant-numeric:tabular-nums}
.rp-main .sx-pg.todo .ln{color:var(--you,#8A4F0B);font-weight:500}
.rp-main .sx-pg.wip .ln,.rp-main .sx-pg.back .ln,.rp-main .sx-pg.held .ln{color:var(--tang,#2A5F98);font-weight:500}
.rp-main .sx-pg.done .ln{color:var(--done,#17663F);font-weight:500}
.rp-main .sx-sec-h .rp-seg{max-width:150px;height:5px}
.rp-main .sx-sec-h .rp-cnt{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.rp-main .sx-sec-h .rp-leg{flex-direction:column;gap:2px;font-size:12px}
/* the column: a white panel per group, sections on hairlines, each names itself and counts */
.rp-col{background:#fff;border:1px solid var(--edge,rgba(32,30,29,.08));border-radius:12px;padding:0 20px}
.rp-col + .rp-col{margin-top:16px}
.rp-sec{border-top:1px solid var(--line)}
.rp-col > .rp-sec:first-child,.rp-col > .rp-cp:first-child{border-top:0}
.rp-sec > summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:56px;cursor:pointer;border-radius:6px}
.rp-sec > summary::-webkit-details-marker{display:none}
.rp-sec > summary:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.rp-sec h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--text)}
.rp-sec .chev,.rp-fold .chev{margin-left:auto;width:16px;height:16px;color:var(--text-3);transition:transform .2s;flex:none}
.rp-sec[open] > summary .chev,.rp-fold[open] > summary .chev{transform:rotate(180deg)}
.rp-sec .d{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.rp-sb{padding:0 0 18px}
.rp-note{margin:0;font-size:14.5px;line-height:1.55;color:var(--text);white-space:pre-wrap;padding-left:12px;border-left:3px solid var(--live)}
.rp-cp{border-top:1px solid var(--line);padding-top:16px}
.rp-cp .rp-sec{border-top:0}
.rp-cp .rp-sec > summary{min-height:44px}
.rp-qs{margin:0;padding:0;list-style:none;display:grid;gap:16px;counter-reset:q}
.rp-qs li{counter-increment:q;display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 6px}
.rp-qs li::before{content:counter(q) ".";font-size:13.5px;color:var(--text-3);font-variant-numeric:tabular-nums;line-height:1.5}
.rp-qs .q{font-size:14px;line-height:1.5;color:var(--text)}
.rp-qs .df{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--text-3)}
.rp-qs form{grid-column:2;display:flex;gap:8px;margin-top:8px}
.rp-qs form[hidden]{display:none}
.rp-qs input{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid var(--field-line,#948E89);border-radius:6px;font:inherit;font-size:14px;color:var(--text);background:#fff}
.rp-qs input:focus-visible{outline:none;border-color:var(--live);box-shadow:0 0 0 3px rgba(63,187,99,.18)}
.rp-qs .ans{grid-column:2;margin-top:8px;padding:6px 0 6px 10px;border-left:2px solid var(--live);font-size:13.5px;line-height:1.45}
.rp-qs .ans b{font-weight:600;color:var(--deep);margin-right:4px}
.rp-qs .ans button{border:0;background:none;padding:0 0 0 6px;font:inherit;font-size:12.5px;color:var(--text-3);text-decoration:underline;cursor:pointer}
.rp-fold{margin-top:14px;border-top:1px solid var(--line)}
.rp-fold > summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;font-size:13.5px;font-weight:500;color:var(--text-2);cursor:pointer}
.rp-fold > summary::-webkit-details-marker{display:none}
.rp-fold .cp-k{margin:4px 0}
.rp-fold .cp-p,.rp-fold .cp-list{font-size:14px;line-height:1.55}
.rp-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.rp-rows li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.rp-rows li .t{min-width:0;flex:1}
.rp-rows li .t small{display:block;font-size:12.5px;color:var(--text-3);line-height:1.4;margin-top:2px}
.rp-rows li .t p{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.rp-rows li button.lnk{font-size:13px}
.rp-held li{align-items:flex-start}
.rp-sb .rp-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rp-empty{margin:0 0 12px;font-size:13.5px;color:var(--text-3)}
.rp-sq > summary{display:grid;gap:8px;padding:14px 0;min-height:0}
.rp-sqh{display:flex;align-items:center;gap:10px}
.rp-sq[open] > summary .chev{transform:rotate(180deg)}
.rp-topics li{display:block}
.rp-topics .t button{all:unset;cursor:pointer;display:block;font-weight:500;margin-bottom:6px}
.rp-topics .t button:hover{color:var(--forest)}
.rp-topics .t button:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.rp-topics .rp-seg{height:4px;margin-bottom:5px}
.rp-topics .rp-leg{font-size:12px}
.rp-rules .sx-sw{margin:8px 0 0;border:0;padding:0;box-shadow:none;background:none}
.rp-rules .sx-sw .sx-ph{display:none}
/* the top bar for staff: the view-as switch sits with the account */
.rp-as{display:flex;align-items:center;gap:10px;margin-right:6px}
.rp-as .btn{white-space:nowrap}
.rp-as .on{font-size:13px;color:var(--deep);font-weight:500;white-space:nowrap}

/* ---------- Send: stages as bars, what is open as rows, the decision in one bar ---------- */
.rp-meters{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0 0 24px}
.rp-mrow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 18px;align-items:center}
.rp-mrow .l{grid-row:span 2;font-size:14px;font-weight:600;display:flex;gap:8px;align-items:baseline}
.rp-mrow .l .d{font-size:13px;font-weight:400;color:var(--text-3)}
.rp-h2{margin:28px 0 8px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.rp-main .tk.ro{margin:0 0 4px;padding:16px 18px;background:#fff;border:1px solid var(--edge,rgba(32,30,29,.08));border-radius:12px}
.rp-rws{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.rp-rw{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line)}
.rp-rw .ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--sunk,#FAF9F8);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2)}
.rp-rw .t{font-size:15px;font-weight:600;line-height:1.45;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-rw .m{grid-column:2;font-size:13px;color:var(--text-3);line-height:1.4}
.rp-rw .go{grid-column:3;grid-row:1 / span 2}
.rp-decide{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-top:28px;padding:14px 0;background:var(--ground);border-top:1px solid var(--line)}
.rp-decide .m{font-size:13.5px;color:var(--text-2)}
.rp-decide .m b{font-weight:600;color:var(--text)}
.rp-decide .end{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rp-decide .why{font-size:12.5px;color:var(--text-3)}

/* ---------- the page track (direction A): tubes, the overall thermometers, the key ---------- */
.sx-bar .sx-mini.tk-host{padding:10px 0 2px;display:block}
.tk{display:flex;flex-direction:column;gap:10px;min-width:0}
.tk-a{display:flex;align-items:flex-end;gap:12px 22px;flex-wrap:wrap;min-width:0}
.tk-secs{display:flex;align-items:flex-end;flex-wrap:wrap;row-gap:8px;min-width:0}
.tk-sec{display:flex;flex-direction:column;gap:6px;padding:0 10px;border-left:1px solid var(--line)}
.tk-sec:first-child{padding-left:0;border-left:0}
.tk-sl{font:500 9.5px/1 var(--arch);letter-spacing:.16em;text-transform:uppercase;color:var(--deep);white-space:nowrap}
.tk-sec.on .tk-sl{color:var(--forest);font-weight:600}
.tk-tubes{display:flex;gap:5px;align-items:flex-end}
.tk-pg{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.tk.ro .tk-pg{cursor:default}
.tk-tube{display:flex;gap:2px;width:14px;height:44px}
.tk-tube.two{width:20px}
.tk-lane{flex:1;border-radius:5px;background:#EEECEA;overflow:hidden;display:flex;flex-direction:column-reverse;box-shadow:inset 0 0 0 1px rgba(32,30,29,.06)}
.tk-lane .ph{width:100%;height:auto}
.tk-no{font:600 10px/1 var(--arch);color:var(--text-3);font-variant-numeric:tabular-nums}
.tk-pg.cur .tk-no{color:#fff;background:var(--forest);border-radius:4px;padding:3px 4px;margin-top:-1px}
.tk-pg.cur .tk-lane{box-shadow:0 0 0 2px var(--forest),0 0 0 4px rgba(63,187,99,.25)}
.tk-pg.lock .tk-lane{opacity:.45}
.tk-pg:hover .tk-lane,.tk-pg:focus-visible .tk-lane,.tk-pg.pinned .tk-lane{box-shadow:0 0 0 2px var(--deep)}
.tk-pg:focus-visible{outline:none}
.tk-pg:focus-visible .tk-no{outline:2px solid var(--deep);outline-offset:2px;border-radius:3px}
.tk-tot{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px 10px;align-items:center;min-width:240px;flex:1;align-self:center}
.tk-tot .bl{font-size:12px;font-weight:600;color:var(--text)}
.tk-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:1px;background:#EEECEA}
.tk-key{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:baseline;font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}
.tk-key .fam{font-weight:600;color:var(--text);white-space:nowrap}
.tk-key .fam small{font-weight:400;color:var(--text-3);margin-left:4px;font-size:11px}
.tk-key .row{display:flex;flex-wrap:wrap;gap:3px 12px}
.tk-key .it{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tk-key .it b{font-weight:600;color:var(--text)}
.tk-key .it.z{color:var(--text-4,#A29C97)}.tk-key .it.z b{color:inherit;font-weight:500}.tk-key .it.z .sw{opacity:.4}
/* the card: hover, pinned under the bar, a smaller preview beside a pinned one, a bottom sheet on a phone */
.tk-card{position:fixed;z-index:65;width:340px;max-height:calc(100vh - 200px);overflow:auto;background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(32,30,29,.18),0 0 0 1px rgba(32,30,29,.07);font-size:13px;color:var(--text);overscroll-behavior:contain}
.tk-card[hidden]{display:none}
.tk-card.peek{width:260px;opacity:.98;z-index:64}
.tk-card.pinned{box-shadow:0 18px 40px rgba(32,30,29,.2),0 0 0 2px var(--forest)}
.tk-th{position:relative;height:100px;background:#F3F2F2 center top/cover no-repeat}
.tk-card.peek .tk-th{height:84px}
.tk-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px}
.tk-tb{all:unset;cursor:pointer;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.94);box-shadow:0 1px 3px rgba(0,0,0,.15);color:var(--text-2)}
.tk-tb[aria-pressed="true"]{background:var(--forest);color:#fff}
.tk-tb:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.tk-tb svg{width:15px;height:15px}
.tk-bd{padding:12px 14px 14px}
.tk-tt{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.tk-tt b{font-size:15px;font-weight:600}
.tk-tt span{font-size:12px;color:var(--text-3)}
.tk-fam{margin:0 0 8px}
.tk-fam .fh{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);margin-bottom:4px}
.tk-fam .fh b{color:var(--text);font-weight:600}
.tk-fam .fb{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:1px;background:#EEECEA}
.tk-fam .fll{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:4px;font-size:11.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.tk-fam .fll span{display:inline-flex;align-items:center;gap:5px}
.tk-fam .fll .sw{width:8px;height:8px}
.tk-none{margin:0;font-size:12.5px;color:var(--text-3)}
.tk-its{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.tk-it{padding:10px 0;border-bottom:1px solid var(--line)}
.tk-it .k{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--text-3);margin-bottom:3px}
.tk-it .k .sw{width:8px;height:8px}
.tk-it p{margin:0;font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-it .wm{display:block;margin-top:2px;font-size:12px;color:var(--text-3)}
.tk-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.tk-acts .btn{min-height:28px;padding:0 10px;font-size:12.5px}
.tk-hl{all:unset;cursor:pointer;font-size:12px;color:var(--text-3);text-decoration:underline;text-underline-offset:2px;margin-left:auto}
.tk-hl:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.tk-f textarea{width:100%;box-sizing:border-box;margin-top:8px;min-height:60px;padding:8px 10px;border:1px solid var(--live);border-radius:7px;font:inherit;font-size:13.5px;box-shadow:0 0 0 3px rgba(63,187,99,.15);resize:vertical}
.tk-done{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--done,#17663F);font-weight:500}
.tk-done .sx-sd{width:14px;height:14px}
.tk-tl{list-style:none;margin:8px 0 0;padding:0 0 0 12px;border-left:2px solid var(--line);display:grid;gap:6px}
.tk-tl li{position:relative;font-size:12px;line-height:1.35;color:var(--text-2)}
.tk-tl li::before{content:"";position:absolute;left:-17px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--p-answered);box-shadow:0 0 0 2px #fff}
.tk-tl li.p-complete::before{background:var(--p-complete)}.tk-tl li.p-applied::before{background:var(--p-applied)}.tk-tl li.p-open::before{background:var(--p-open)}.tk-tl li.p-removed::before{background:var(--p-removed)}.tk-tl li.p-back::before{background:var(--p-back)}.tk-tl li.h-amber::before{background:var(--p-open)}.tk-tl li.h-grey::before{background:#A8A29D}
.tk-tl li small{display:block;color:var(--text-3)}
.tk-tl-none{font-size:12px;color:var(--text-3);margin:8px 0 0}
.tk-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.tk-ft .more{font-size:12.5px;color:var(--text-3)}
.tk-ft .btn{display:inline-flex;align-items:center;gap:4px}
.tk-grab{display:none}
.tk-scrim{position:fixed;inset:0;z-index:62;background:rgba(32,30,29,.28)}
.tk-scrim[hidden]{display:none}
@media (max-width:860px){
  .tk-sec{padding:0 3px;border-left:0}
  .tk-sl{display:none}
  .tk-tubes{gap:1px}
  .tk-tube{width:8px;height:30px;gap:1px}.tk-tube.two{width:10px}
  .tk-lane{border-radius:3px}
  .tk-no{display:none}
  .tk-pg.cur .tk-no{display:block;position:absolute;top:-17px;font-size:9px;padding:2px 3px}
  .tk-pg.cur .tk-tube{width:14px}
  .tk-secs{padding-top:14px;gap:0 6px}
  .tk-tot{min-width:0;flex-basis:100%;grid-template-columns:62px minmax(0,1fr)}
  .tk-key{grid-template-columns:minmax(0,1fr);font-size:11.5px}
  .tk-card.pinned{left:0!important;right:0;top:auto!important;bottom:0;width:auto;max-height:72vh!important;border-radius:16px 16px 0 0;z-index:66}
  .tk-card.pinned .tk-grab{display:block;width:40px;height:4px;border-radius:2px;background:#D6D2CE;margin:8px auto 0}
  .tk-card.pinned .tk-th{height:96px;margin:8px 12px 0;border-radius:10px}
}

/* ---------- triage: the board, the tier block, history, Send ---------- */
.tr-m{display:inline-flex;align-items:flex-end;gap:2px;height:12px;flex:none;margin-right:6px}
.tr-m i{display:block;width:3px;border-radius:1px;background:var(--line-2)}
.tr-m i:nth-child(1){height:6px}.tr-m i:nth-child(2){height:9px}.tr-m i:nth-child(3){height:12px}
.tr-m.t-routine i.on{background:var(--t-rou)}.tr-m.t-safe i.on{background:var(--t-safe)}.tr-m.t-critical i.on{background:var(--t-crit)}
.tr-tag{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
.tr-tag.t-critical{color:var(--t-crit-ink)}
.tr{margin:0 0 32px}
.tr-head h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.tr-head h2:focus{outline:none}
.tr-meta{margin:4px 0 16px;font-size:13.5px;color:var(--text-3)}
.tr-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 24px}
.tr-tile{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--edge,rgba(32,30,29,.08));border-top:3px solid var(--t-rou)}
.tr-tile.t-safe{border-top-color:var(--t-safe)}.tr-tile.t-critical{border-top-color:var(--t-crit)}
.tr-tile:hover{box-shadow:0 0 0 1px var(--line-2)}
.tr-tile:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.tr-th{display:flex;align-items:center;font-size:13px;font-weight:600;color:var(--text-2)}
.tr-n{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1}
.tr-tl{display:flex;flex-direction:column;gap:2px}
.tr-tl .d{font-size:12px;color:var(--text-3)}
.tr-sec{margin:0 0 24px;background:#fff;border-radius:12px;padding:6px 18px 14px;box-shadow:0 0 0 1px var(--edge,rgba(32,30,29,.08))}
.tr-sh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:2px solid var(--t-rou);margin-bottom:10px}
.tr-sec.t-safe .tr-sh{border-bottom-color:var(--t-safe)}.tr-sec.t-critical .tr-sh{border-bottom-color:var(--t-crit)}
.tr-sh h3{display:flex;align-items:center;margin:0;font-size:16px;font-weight:600}
.tr-sh h3:focus{outline:none}
.tr-sl .rp-leg{font-size:12px}
.tr-box{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:14px 16px;margin:4px 0 10px;border-radius:10px;background:var(--sunk,#FAF9F8);box-shadow:inset 0 0 0 1px var(--line)}
.tr-box p{margin:0;font-size:14px}
.tr-split{color:var(--text-3);font-size:13px!important;margin-top:2px!important}
.tr-box .btn{display:inline-flex;align-items:center;gap:8px}
.btn kbd,.tr-menu kbd,.tr-toast kbd{font:600 10px/1 var(--arch);color:inherit;opacity:.75;border:1px solid currentColor;border-radius:3px;padding:2px 4px}
.tr-done{display:flex;align-items:center;gap:8px;font-size:13.5px;margin:4px 0 10px}
.tr-done .sx-sd{width:16px;height:16px}
.tr-g{border-top:1px solid var(--line)}
.tr-g > summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:46px;cursor:pointer;font-size:14px}
.tr-g > summary::-webkit-details-marker{display:none}
.tr-g > summary .t{font-weight:500;min-width:0}
.tr-g > summary .n{font-size:12px;font-weight:600;color:var(--text-3);background:var(--gone-bg,#F0EEEC);border-radius:5px;padding:2px 7px;white-space:nowrap}
.tr-g > summary .pg{margin-left:auto;font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.tr-g > summary .chev{flex:none;width:16px;height:16px;color:var(--text-3);transition:transform .2s}
.tr-g[open] > summary .chev{transform:rotate(180deg)}
.tr-g > summary:focus-visible{outline:2px solid var(--deep);outline-offset:2px;border-radius:6px}
.tr-rows,.tr-items,.tr-crows{list-style:none;margin:0;padding:0}
.tr-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto 32px;gap:4px 12px;align-items:start;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px}
.tr-row:focus{outline:2px solid var(--deep);outline-offset:-2px;border-radius:6px}
.tr-row.left{opacity:.55}
.tr-ck{padding-top:2px}.tr-ck input{width:18px;height:18px;accent-color:var(--forest)}
.tr-rb{display:grid;grid-template-columns:190px minmax(0,1fr);gap:4px 14px;min-width:0}
.tr-who b{display:block;font-weight:600;font-size:13px}.tr-who small{display:block;color:var(--text-3);font-size:12px}
.tr-what{min-width:0;line-height:1.45}.tr-what small{display:block;color:var(--text-3);font-size:12.5px;margin-top:2px}
.tr-rs{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tr-mt{font-size:11.5px;font-weight:600;color:var(--text-2);background:var(--gone-bg,#F0EEEC);border-radius:4px;padding:2px 6px;white-space:nowrap}
.tr-more{position:relative}
.tr-menu{position:absolute;right:0;top:36px;z-index:40;min-width:230px;padding:6px;background:#fff;border-radius:10px;box-shadow:0 14px 32px rgba(32,30,29,.16),0 0 0 1px rgba(32,30,29,.07)}
.tr-menu[hidden]{display:none}
.tr-menu button{all:unset;box-sizing:border-box;display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-size:13.5px;cursor:pointer}
.tr-menu button:hover,.tr-menu button:focus-visible{background:var(--ground)}
.tr-pgg .tr-ga{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin:-6px 0 8px}
.tr-gd{font-size:13px;color:var(--done,#17663F);font-weight:500}
.tr-item{padding:12px 0;border-top:1px solid var(--line)}
.tr-item:focus{outline:2px solid var(--deep);outline-offset:-2px;border-radius:6px}
.tr-ih{display:flex;align-items:center;gap:8px;font-size:13.5px}
.tr-ih .tr-more{margin-left:auto}
.tr-why2{display:flex;align-items:baseline;gap:8px;margin:6px 0;font-size:13.5px;color:var(--text)}
.dia{display:inline-block;width:7px;height:7px;background:var(--t-safe);transform:rotate(45deg);flex:none;margin-right:2px}
.tr-ba{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 12px;margin:6px 0;font-size:13.5px;line-height:1.45}
.tr-ba dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding-top:2px}
.tr-ba dd{margin:0}.tr-ba dd.was{color:var(--text-2)}
.tr-open{font-size:13px}
.tr-crow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 14px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.tr-crow:focus{outline:2px solid var(--deep);outline-offset:-2px;border-radius:6px}
.tr-cr{margin:0;font-size:14px;font-weight:500;line-height:1.45}
.cat{font:700 10.5px/1 var(--arch);letter-spacing:.12em;text-transform:uppercase;color:var(--t-crit-ink);margin-right:4px}
.tr-cs{margin:3px 0 0;font-size:12.5px;color:var(--text-3)}
.tr-same{display:inline-block;margin-top:6px;margin-right:6px;font-size:11.5px;font-weight:600;color:var(--text-2);background:var(--gone-bg,#F0EEEC);border-radius:4px;padding:2px 6px}
.tr-foot{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:14px 0;margin-top:8px;background:var(--ground);border-top:1px solid var(--line)}
.tr-fl{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 320px;max-width:560px}
.tr-fm{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.tr-fm .d{font-size:12.5px;font-weight:600;color:var(--text)}
.tr-fa{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tr-why{font-size:12.5px;color:var(--text-3)}
.tr-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:14px;padding:10px 14px 10px 16px;border-radius:10px;background:#201E1D;color:#fff;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.tr-toast .lnk{color:#9BEB58;font-weight:600;display:inline-flex;gap:6px;align-items:center}
/* the panel: tier filters, the tier block, Move, the repeat's pages, history */
.wk-tiers{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wk-tiers[hidden]{display:none}
.tr-tf{display:inline-flex;align-items:center}
.tr-blk{margin:0 0 12px;padding:10px 12px;border-radius:9px;background:var(--sunk,#FAF9F8);box-shadow:inset 0 0 0 1px var(--line)}
.tr-blk.t-safe{background:var(--t-safe-wash)}.tr-blk.t-critical{background:var(--t-crit-wash)}
.tr-blk .h{display:flex;align-items:center;gap:8px}
.tr-blk .h .lnk{margin-left:auto;font-size:13px}
.tr-blk p{margin:6px 0 0;font-size:13.5px;line-height:1.45}
.tr-mv{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tr-mv[hidden]{display:none}
.tr-rep ul{list-style:none;margin:4px 0 0;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff}
.tr-rep li{padding:8px 12px;border-top:1px solid var(--line);font-size:13px;line-height:1.45}
.tr-rep li:first-child{border-top:0}
.tr-rep li b{display:block;font-weight:600}
.tr-rep li.cur{background:var(--sunk,#FAF9F8)}
.tr-hist{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.tr-hist .th{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tr-hist .lbl b{font-weight:600;color:var(--text-3);margin-left:4px}
.tr-hist ul{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line);display:grid;gap:10px}
.tr-hist li{position:relative;font-size:13px;line-height:1.45}
.tr-hist li::before{content:"";position:absolute;left:-20px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--p-answered);box-shadow:0 0 0 2px #fff}
.tr-hist li.p-complete::before{background:var(--p-complete)}.tr-hist li.p-applied::before{background:var(--p-applied)}.tr-hist li.p-open::before{background:var(--p-open)}.tr-hist li.p-removed::before{background:var(--p-removed)}.tr-hist li.h-amber::before{background:var(--p-open)}
.tr-hist li.pend{background:var(--tang-bg,#EAF1F9);border-radius:6px;padding:6px 8px;margin-left:-4px}
.tr-hist .hh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.tr-hist .hh span{font-size:12px;color:var(--text-3)}
.tr-hist .hh .tag{font-size:11px;font-weight:600;color:var(--text-2);border:1px solid var(--line-2);border-radius:999px;padding:1px 7px}
.tr-hist p{margin:3px 0 0;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tr-hist .ha{display:flex;gap:12px;margin-top:4px}
.tr-hist .ha .lnk{font-size:12.5px}
/* Send: the tier cells, the spine of critical decisions, what stays with Tangible, the decision bar */
.tr-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 24px;background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--edge,rgba(32,30,29,.08))}
.tr-sc{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-left:1px solid var(--line)}
.tr-sc:first-child{border-left:0}
.tr-scn{font-size:13px;color:var(--text-3)}.tr-scn b{font-size:20px;color:var(--text);font-weight:600;margin-right:2px}
.tr-crit{margin:0 0 28px}
.tr-spine-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.tr-spine-h h2{display:flex;align-items:center;margin:0;font-size:17px;font-weight:600;color:var(--t-crit-ink)}
.tr-spine-h .tr-cc{margin-left:auto}
.tr-lock{display:inline-flex}
.tr-spine{list-style:none;margin:0;padding:0 0 0 34px;position:relative;display:grid;gap:12px}
.tr-spine::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:1px}
.tr-card{position:relative;padding:14px 16px;background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--edge,rgba(32,30,29,.08))}
.tr-card:focus{outline:none}
.tr-card.focus,.tr-card:focus-visible{box-shadow:0 0 0 2px var(--forest)}
.tr-node{position:absolute;left:-31px;top:16px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--line-2);display:grid;place-items:center}
.tr-node .sx-sd{width:18px;height:18px}
.tr-card.ok .tr-node{box-shadow:none}
.tr-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tr-q{margin:8px 0 0;font-size:13.5px;color:var(--text-2)}.tr-a{margin:4px 0 0;font-size:13.5px}
.tr-bn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 0}
.tr-bn > div{padding:8px 10px;border-radius:8px;background:var(--sunk,#FAF9F8);box-shadow:inset 0 0 0 1px var(--line)}
.tr-bn p,.tr-reads p{margin:2px 0 0;font-size:13px;line-height:1.45}
.tr-reads{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--done-bg,#E7F4EB)}
.tr-und{margin:8px 0 0;font-size:13px;color:var(--text-3)}
.tr-cacts{display:flex;align-items:center;gap:12px;margin-top:10px}
.tr-ok{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--done,#17663F);font-weight:500}
.tr-ok .sx-sd{width:15px;height:15px}
.tr-stay{margin:0 0 20px}
.tr-stay h2{display:flex;align-items:center;gap:8px;font-size:16px;margin:0 0 8px}
.tr-stay ul{list-style:none;margin:0;padding:0 14px;background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--edge,rgba(32,30,29,.08))}
.tr-stay li{padding:12px 0;border-top:1px solid var(--line)}
.tr-stay li:first-child{border-top:0}
.tr-sh2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;font-size:13.5px}
.tr-sh2 b{margin-right:auto}
.tr-stay textarea,.tr-note textarea{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--field-line,#948E89);border-radius:7px;font:inherit;font-size:14px;resize:vertical}
.tr-note{margin:0 0 12px}
.tr-note label{display:block;font-size:13px;color:var(--text-2);margin-bottom:4px}

/* ---------- the call-out: the leader line, the edge chip; conflict flags in the panel and on rows ---------- */
svg.co-lead{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:45;overflow:visible}
svg.co-lead .halo{stroke:#fff;stroke-width:5;fill:none;opacity:.9}
svg.co-lead .ln{stroke:var(--deep,#1E7F5C);stroke-width:1.6;fill:none}
svg.co-lead .ln.draw{stroke-dasharray:2000;stroke-dashoffset:2000;animation:coDraw .2s ease-out forwards}
@keyframes coDraw{to{stroke-dashoffset:0}}
svg.co-lead .dot{fill:var(--deep,#1E7F5C)}
.co-edge{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:50%;transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 6px;border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(32,30,29,.18),0 0 0 1px rgba(32,30,29,.06);font-size:12.5px;font-weight:500;color:var(--text);max-width:80%;white-space:nowrap}
.co-edge .nb{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--arch);background:var(--forest);color:#fff;flex:none}
.co-edge.down{bottom:14px}.co-edge.up{top:14px}
.co-edge:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

.fls{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.fl{border-radius:8px;background:#FBF6F1;box-shadow:inset 0 0 0 1px #EBD9C9}
.fl.redundancy,.fl.res{background:#F7F6F5;box-shadow:inset 0 0 0 1px var(--line)}
.flh{display:flex;align-items:flex-start;gap:8px;padding:7px 9px}
.fi{all:unset;cursor:pointer;flex:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:#8F4E1E;background:#fff;box-shadow:inset 0 0 0 1px #E3C3AE}
.fl.redundancy .fi{color:#5C5753;box-shadow:inset 0 0 0 1px var(--line-2,#D6D2CE)}
.fi[aria-expanded="true"]{background:#8F4E1E;color:#fff;box-shadow:none}
.fl.redundancy .fi[aria-expanded="true"]{background:#5C5753}
.fi:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.ft{flex:1;font-size:13px;line-height:1.4;color:var(--text);padding-top:3px}
.ft .fw{color:#8F4E1E;font-weight:600}
.fl.redundancy .ft .fw{color:var(--text-2)}
.ft .rs{color:var(--text-3);font-size:12px}
.crit{flex:none;font-size:11px;font-weight:600;color:var(--t-crit-ink);background:var(--t-crit-wash);border-radius:5px;padding:3px 7px;margin-top:2px}
.fx{padding:0 10px 10px 41px}
@media (prefers-reduced-motion:no-preference){.fx{animation:fxIn .2s ease-out}@keyframes fxIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}}
.fxr{border-top:1px solid #EBD9C9;padding:8px 0}
.fl.redundancy .fxr{border-top-color:var(--line)}
.fxl{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text-3);margin-bottom:2px}
.fxr p{margin:0;font-size:13px;line-height:1.45}
mark.fh{background:rgba(143,78,30,.10);box-shadow:inset 0 -2px 0 #B8692E;color:inherit;border-radius:2px;padding:0 1px}
.fl-jump{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:3px;margin-top:5px;font-size:12.5px;font-weight:500;color:var(--deep)}
.fl-jump svg{width:12px;height:12px}
.fl-jump:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.fx .why{margin:2px 0 6px;font-size:12.5px;line-height:1.45;color:var(--text-2)}
.fl-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fl-res{margin:6px 0 0;font-size:12.5px;color:var(--text-2)}
.fl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fl-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border-radius:6px;font-size:12px;line-height:1.3;background:#FBF6F1;box-shadow:inset 0 0 0 1px #EBD9C9;color:var(--text)}
.fl-chip b{font-weight:600;color:#8F4E1E}
.fl-chip i{display:grid;place-items:center;width:18px;height:18px;border-radius:4px;background:#fff;color:#8F4E1E;box-shadow:inset 0 0 0 1px #E3C3AE;flex:none}
.fl-chip i svg{width:13px;height:13px}
.fl-chip.redundancy,.fl-chip.res{background:#F7F6F5;box-shadow:inset 0 0 0 1px var(--line)}
.fl-chip.redundancy b{color:var(--text-2)}.fl-chip.redundancy i{color:#5C5753;box-shadow:inset 0 0 0 1px var(--line-2,#D6D2CE)}
.fl-chip .crit{font-size:10.5px;padding:1px 5px;margin:0 0 0 2px}
.fl-chip .rs{font-size:11px;color:var(--text-3)}

/* ---------- narrow and phone ---------- */
@media (max-width:1180px){
  .rp-body{grid-template-columns:minmax(0,1fr) 320px}
  .rp-main .sx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .rp-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main" "bot";grid-template-rows:auto;gap:20px}
  .rp-main .sx-sec{grid-template-columns:1fr;gap:10px}
  .rp-mrow{grid-template-columns:minmax(0,1fr)}
  .rp-mrow .l{grid-row:auto}
  .rp-main .sx-sec-h .rp-seg{max-width:none;flex:1;min-width:80px}
  .rp-main .sx-sec-h .rp-leg{flex-direction:row;gap:2px 10px}
  .rp-main .sx-sec-h .rp-cnt{flex-direction:row;flex-wrap:wrap;gap:2px 10px}
  .tr-rb{grid-template-columns:minmax(0,1fr)}
  .tr-tiles{gap:8px}
  .tr-tile{padding:10px 10px 12px}
  .tr-n{font-size:24px}
}
@media (max-width:640px){
  .rp-back{margin-bottom:8px}
  .rp-h{font-size:23px;gap:0 8px}
  .rp-h .sep{display:none}
  .rp-h .site{flex-basis:100%}
  .rp-hrow{gap:8px 10px}
  .sx:not(.pagemode) > .sx-bar{position:static;margin:16px 0 18px;gap:12px}
  .rp-rule{flex:1 1 auto}
  .sx:not(.pagemode) > .sx-bar .sx-stages{order:3;flex-basis:100%;justify-content:space-between}
  .rp-go{order:4;flex-basis:100%;margin-left:0;flex-direction:column;align-items:stretch;gap:8px}
  .rp-go .btn{min-height:44px;justify-content:center}
  .rp-next{white-space:normal}
  .rp-col{padding:0 16px}
  .rp-main .sx-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;grid-auto-rows:minmax(88px,auto)}
  .rp-main .sx-pg{height:auto;min-height:88px;padding:11px 12px}
  .rp-main .sx-pg .nm{font-size:14px}
  .rp-key{gap:6px 14px;font-size:12px}
  .rp-decide{padding:12px 0}
  .rp-decide .end{margin-left:0;width:100%}
  .rp-decide .end .btn{flex:1 1 0;min-height:44px;justify-content:center}
  .rp-decide .why{flex-basis:100%;order:3}
  .rp-qs input{height:40px;font-size:16px}
  .rp-as .on{display:none}
  .rp-rw{grid-template-columns:36px minmax(0,1fr)}
  .rp-rw .go{grid-column:2;grid-row:auto;justify-self:start;margin-top:6px}
  .rp-rw .t{white-space:normal}
  .tr-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tr-tile .rp-leg{display:none}
  .tr-th span{font-size:12px}
  .tr-sec{padding:4px 12px 12px}
  .tr-box .btn{width:100%;justify-content:center;min-height:44px}
  .tr-row{grid-template-columns:24px minmax(0,1fr) 32px}
  .tr-rs{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start}
  .tr-row .tr-more{grid-column:3;grid-row:1}
  .tr-crow{grid-template-columns:minmax(0,1fr) auto}
  .tr-cp{grid-column:1;grid-row:2}
  .tr-cg{grid-column:2;grid-row:2}
  .tr-g > summary .pg{display:none}
  .tr-foot .tr-fa{width:100%}
  .tr-foot .tr-fa .btn{flex:1 1 auto;min-height:44px;justify-content:center}
  .tr-cells{grid-template-columns:minmax(0,1fr)}
  .tr-sc{border-left:0;border-top:1px solid var(--line)}
  .tr-sc:first-child{border-top:0}
  .tr-spine{padding-left:0}
  .tr-spine::before{display:none}
  .tr-node{position:static;display:inline-grid;margin-bottom:6px}
  .tr-bn{grid-template-columns:minmax(0,1fr)}
  kbd{display:none}
  .btn kbd,.tr-menu kbd{display:none}
}

/* ---------- the way in: a draft ready to decide, first on every surface of whoever decides it ---------- */
.rp-entry{display:grid;grid-template-columns:36px minmax(0,1fr) 132px auto;gap:4px 16px;align-items:start;padding:14px 16px;margin:0 0 12px;border-radius:10px;background:#F1F8F3;box-shadow:inset 0 0 0 1px rgba(30,127,92,.18)}
.hm-blk .rp-entry,.dlist .rp-entry,.rise .rp-entry{margin:8px 0}
.rp-entry .ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1px var(--line,#E7E4E1)}
.rp-entry .tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.rp-entry .t{font-size:15px;font-weight:600;line-height:1.45;color:var(--text);text-decoration:none}
.rp-entry .t:hover{color:var(--forest)}
.rp-entry .m{font-size:13px;color:var(--text-3);line-height:1.4}
.rp-entry .sg{display:flex;flex-direction:column;gap:5px;margin-top:6px;max-width:420px}
.rp-entry .sg .rp-leg{font-size:12px}
.rp-entry .st{padding-top:2px}
.rp-entry .go{justify-self:end}
@media (max-width:640px){
  .rp-entry{grid-template-columns:36px minmax(0,1fr);padding:12px}
  .rp-entry .st{grid-column:2}
  .rp-entry .go{grid-column:2;justify-self:start}
  .rp-entry .go .btn{min-height:40px}
}
/* the destructive button: rust outline, rust fill to confirm */
.btn.btn-d{color:var(--neg,#A2531B);border-color:var(--neg,#A2531B)}
.btn.btn-a.btn-d{background:var(--neg,#A2531B);border-color:var(--neg,#A2531B);color:#fff}
.btn.btn-a.btn-d:hover{background:#8A4517}
/* with Studio on, the viewer's own head gives way to Studio's: the note and Copilot live in its column */
body.sx-on .vhead,body.sx-on #dcp{display:none!important}
.wk-num{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;font:700 11px/1 var(--arch);background:var(--forest);color:#fff;margin-right:2px}
.wk-prog .rp-leg{font-size:12.5px}
.wk-head .rp-seg{margin:6px 0 2px}
.sx-tg{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.sx-tg .rp-sec:first-child{border-top:0}
.rp-fin .rp-decide{position:sticky}
.sx-sb .sx-mk{width:18px;height:18px}
@media (min-width:861px){body.sx-page .sx.pagemode .sx-cnt,body.sx-page.sx-walk .sx.pagemode .sx-cnt,.sx.pagemode .sx-cnt{display:block;min-width:0;overflow:hidden;white-space:nowrap}}
/* phones: the page bar scrolls with the page (the track and its key are too tall to stay over the comp); every page fits
   one row of the track; the page pull-down takes the room the steps leave */
@media (max-width:860px){
  .sx.pagemode > .sx-bar,body.sx-page .sx.pagemode > .sx-bar{position:relative;top:auto}
  .tk-secs{gap:0 4px;flex-wrap:nowrap}
  .tk-sec{padding:0}
  .tk-tube{width:8px}.tk-tube.two{width:9px}
  .tk-pg.cur .tk-tube{width:12px}
  .sx.pagemode .sx-mapl span{display:none}
  .sx.pagemode .sx-steps .sx-psel{flex:1 1 auto;min-width:0;width:auto!important}
}
@media (max-width:640px){.tr-toast{bottom:96px;left:12px;right:12px;transform:none;justify-content:space-between}}
@media (max-width:1040px){ body.sx-page .sx.pagemode{position:relative;top:auto} }
@media (max-width:860px){ .tk-key{gap:2px 8px}.tk-key .row{gap:2px 10px} }

/* the open list of versions reads at body size, not the heading size */
.rp-vp select option{font:400 15px/1.4 Archivo,system-ui,sans-serif;letter-spacing:0;color:var(--text,#201E1D);background:#fff}
/* ---------- room to work (21 Oct 2026, Brad: "I don't have these big columns to work in"): a slim page bar with the
   track on demand as an overlay; a wider panel whose item is one large card, the panel scrolling as a whole and only the
   decision buttons pinned; filters folded into one Filter control; the item opens big over the comp ---------- */
/* the page bar: one slim row; the track drops over the comp when opened, so the comp starts right under the bar */
.sx.pagemode > .sx-bar{position:relative}
.sx.pagemode > .sx-bar .sx-mini.tk-host,body.sx-page .sx.pagemode .sx-bar .sx-mini.tk-host{position:absolute;z-index:60;left:-1px;right:-1px;top:calc(100% + 6px);order:0;margin:0;padding:14px 18px 14px;background:#fff;border:1px solid var(--line-2,#D6D2CE);border-radius:12px;box-shadow:0 18px 40px -12px rgba(32,30,29,.28);max-height:calc(100dvh - 140px);overflow:auto}
.sx.pagemode > .sx-bar .sx-mini.tk-host[hidden]{display:none}
.tk-c{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0}
.tk-cbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 10px 0 12px;border-radius:8px;border:1px solid var(--line-2,#D6D2CE);background:#fff;font:500 13px/1 var(--arch);color:var(--text-2);white-space:nowrap;min-width:0}
.tk-cbtn:hover{border-color:var(--text-3)}
.tk-cbtn:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.tk-cbtn[aria-expanded="true"]{border-color:var(--deep);color:var(--deep)}
.tk-cbars{display:flex;flex-direction:column;gap:3px;width:clamp(90px,13vw,200px);min-width:60px}
.tk-cbars .tk-bar{height:5px;border-radius:3px}
.tk-cbtn .chev{width:14px;height:14px;flex:none;transition:transform .2s}
.tk-cbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.tk-ckey{position:absolute;z-index:61;top:calc(100% + 8px);right:0;width:max-content;max-width:min(520px,calc(100vw - 32px));padding:12px 14px;background:#fff;border-radius:10px;box-shadow:0 14px 32px rgba(32,30,29,.16),0 0 0 1px rgba(32,30,29,.07);display:none;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:baseline;font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}
.tk-c:hover .tk-ckey,.tk-cbtn:focus-visible + .tk-ckey{display:grid}
.tk-c.on .tk-ckey{display:none!important}
.tk-ckey .fam{font-weight:600;color:var(--text);white-space:nowrap}
.tk-ckey .fam small{font-weight:400;color:var(--text-3);margin-left:4px;font-size:11px}
.tk-ckey .row{display:flex;flex-wrap:wrap;gap:3px 12px}
.tk-ckey .it{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tk-ckey .it b{font-weight:600;color:var(--text)}
.tk-ckey .it.z{color:var(--text-4,#A29C97)}.tk-ckey .it.z b{color:inherit;font-weight:500}.tk-ckey .it.z .sw{opacity:.4}
/* pinned and hover cards: generous, full text */
.tk-card{width:380px}
.tk-card.pinned{width:min(480px,calc(100vw - 24px))}
.tk-card.pinned .tk-th{height:120px}
.tk-card.pinned .tk-it p{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:14px;line-height:1.5}
.tk-card.pinned .tk-acts .btn{min-height:32px;padding:0 12px;font-size:13px;white-space:nowrap}
.tk-card.pinned .tk-tl li{font-size:12.5px;line-height:1.45}

/* the panel: wider by default, the splitter still sets it; it scrolls as a whole and the decision buttons stay pinned */
@media(min-width:1101px){
  body.sx-page.sx-railopen .studio,body.sx-page.sx-railopen.wide .studio{grid-template-columns:minmax(0,1fr) var(--sxRail,clamp(360px,28vw,440px)) 48px}
  body.sx-page.sx-walk .studio,body.sx-page.sx-walk.wide .studio,body.sx-page.sx-walk.sx-railopen .studio,body.sx-page.sx-walk.sx-railopen.wide .studio{grid-template-columns:minmax(0,1fr) var(--sxRail,clamp(420px,33vw,480px))}
  body.sx-page.sx-walk .studio .rrail{display:block;overflow:auto;overscroll-behavior:contain}
  body.sx-page.sx-walk #sxCard{display:block;flex:none;box-sizing:border-box;min-height:100%;margin:0;padding:16px 18px 0}
  body.sx-page.sx-walk #sxCard > .wk{height:auto;min-height:calc(100% - 0px)}
  body.sx-page.sx-walk .wk{min-height:calc(100dvh - var(--sxH,60px) - 60px)}
  body.sx-page.sx-walk .wk-foot{position:sticky;bottom:0;z-index:5;margin:auto -18px 0;padding:12px 18px 14px;box-shadow:0 -12px 22px -18px rgba(32,30,29,.4)}
}
.wk-scroll{overflow:visible;flex:1 0 auto;min-height:0;padding:14px 0 18px;gap:14px}
/* the head: the place and its tools on one line, where the pass stands on the next */
.wk-head{gap:10px;padding:0 0 12px}
.wk-ttl{align-items:center;gap:10px}
.wk-ttl h2{flex:1 1 auto;min-width:0;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-head .wk-tools{flex:none;display:flex;align-items:center;gap:6px 12px;justify-content:flex-end}
.wk-progrow{display:flex;flex-direction:column;gap:6px}
.wk-progrow .wk-prog{margin:0}
.wk-head .wk-progrow .rp-seg{margin:0}
.wk-fbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:7px;border:1px solid var(--line-2,#D6D2CE);background:#fff;font:500 12.5px/1 var(--arch);color:var(--text-2);white-space:nowrap}
.wk-fbtn svg{width:14px;height:14px;flex:none}
.wk-fbtn b{font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.wk-fbtn:hover{border-color:var(--text-3)}
.wk-fbtn[aria-expanded="true"],.wk-fbtn.on{border-color:var(--text,#201E1D);color:var(--text)}
.wk-fbtn.on b{color:var(--text)}
.wk-fbtn:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.wk-fbtn .fbl{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-fpop{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:10px;background:var(--sunk,#FAF9F8);box-shadow:inset 0 0 0 1px var(--line)}
.wk-fpop[hidden]{display:none}
.wk-fpop .wk-tiers{margin:0}
.wk-fpop .lbl{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.wk-head .wk-tools .lnk{font-size:12.5px;white-space:nowrap}
/* the item: one large card, everything in it readable without an inner scroll */
.wk-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;border-radius:12px;background:#fff;border:1.5px solid var(--forest,#1E7F5C);box-shadow:0 1px 2px rgba(32,30,29,.05)}
.wk-card .wk-nav{gap:8px}
.wk-card .wk-pos{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-exp{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:7px;border:1px solid var(--line-2,#D6D2CE);background:#fff;font:500 12.5px/1 var(--arch);color:var(--text-2);white-space:nowrap}
.wk-exp svg{width:14px;height:14px}
.wk-exp:hover{border-color:var(--forest);color:var(--forest)}
.wk-exp:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.wk-card .wk-src{font-size:17px;line-height:1.35;align-items:start}
.wk-card .wk-src .wk-num,.wk-card .wk-src .wk-ic{margin-top:1px}
.wk-card .wk-where{margin:-6px 0 0}
.wk-card .wk-words{font-size:15px;line-height:1.55;padding:12px 14px}
.wk-card .wk-q{font-size:14px}
.wk-card .wk-blk p{font-size:14.5px;line-height:1.55}
.wk-card .wk-call{font-size:13.5px;padding:10px 12px;border-radius:9px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.wk-card .wk-call .sx-sd{width:16px;height:16px;align-self:center}
.wk-card .wk-call b{font-weight:600}
.wk-card .wk-call .lnk{margin-left:auto}
.wk-ba{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px 12px;margin:0;padding:12px 14px;border-radius:9px;background:var(--sunk,#FAF9F8);box-shadow:inset 0 0 0 1px var(--line)}
.wk-ba dt{font:600 10.5px/1.9 var(--arch);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.wk-ba dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--text)}
.wk-ba dd.was{color:var(--text-2)}
.wk-ba ins{text-decoration:none;background:rgba(63,187,99,.18);box-shadow:inset 0 -2px 0 #3FBB63;border-radius:2px;padding:0 1px}
.wk-ba del{text-decoration:none;background:rgba(32,30,29,.07);box-shadow:inset 0 -2px 0 #A8A29D;border-radius:2px;padding:0 1px;color:var(--text-2)}
.wk-card .tr-blk{margin:0}
.wk-card .tr-hist{margin:0}
.wk-card .wk-side{gap:6px 10px}
/* the decision buttons: Approve the whole width, the rest in a row that wraps whole buttons, never a label */
.wk .wk-sec,.wk .wk-sec:has(> :nth-child(3):last-child){display:grid;grid-template-columns:repeat(2,minmax(max-content,1fr));gap:6px}
.wk .wk-sec .btn{min-width:0;white-space:nowrap;justify-content:center;min-height:38px;padding:0 12px;font-size:13px;line-height:1.1;text-align:center;gap:6px}
.wk .wk-sec .wk-nb{padding:0 12px}
.wk .wk-sec .wk-nb svg{flex:none}
/* the other items on the page, under the card: roomy rows */
.wk-more{display:flex;flex-direction:column;gap:2px}
.wk-scroll .wk-row{min-height:56px;padding:10px 12px;margin:0 0 8px;border:1px solid var(--line);border-radius:10px;background:#fff;align-items:flex-start;gap:12px}
.wk-scroll .wk-row:hover{background:var(--sunk,#FAF9F8);border-color:var(--line-2)}
.wk-scroll .wk-row.cur{background:var(--tang-bg,#EAF1F9);border-color:var(--tang-dot,#4A86C5)}
.wk-scroll .wk-row .t b{white-space:normal;font-size:13.5px;line-height:1.35}
.wk-scroll .wk-row .t small{white-space:normal;font-size:13px;line-height:1.45;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wk-scroll .wk-row .wk-dot{margin-top:5px}
.wk-rn{display:inline-grid;place-items:center;flex:none;min-width:24px;height:24px;padding:0 4px;box-sizing:border-box;border-radius:999px;border:1px solid var(--line-2,#D6D2CE);font:600 11px/1 var(--arch);color:var(--text-2);font-variant-numeric:tabular-nums}
.wk-scroll .wk-gh{border-bottom:0;padding:4px 2px 8px}
/* Expand: the item as a large panel over the comp, everything visible; Esc or Close puts it back */
.wk-scrim{display:none}
@media(min-width:1101px){
  body.sx-wkbig .wk-scrim{display:block;position:fixed;top:0;bottom:0;left:0;right:calc(var(--sxRail,clamp(420px,33vw,480px)) + 14px);z-index:69;background:rgba(32,30,29,.28)}
  body.sx-wkbig .wk-card.big{position:fixed;z-index:70;top:calc(var(--sxH,60px) + 20px);bottom:20px;right:calc(var(--sxRail,clamp(420px,33vw,480px)) + 30px);width:min(720px,calc(100vw - var(--sxRail,clamp(420px,33vw,480px)) - 60px));overflow:auto;overscroll-behavior:contain;padding:22px 26px 26px;gap:16px;border-radius:14px;box-shadow:0 30px 70px rgba(32,30,29,.28),0 0 0 1.5px var(--forest,#1E7F5C);border:0}
  body.sx-wkbig .wk-card.big .wk-src{font-size:20px}
  body.sx-wkbig .wk-card.big .wk-words{font-size:16px}
  body.sx-wkbig .wk-card.big .wk-ba dd,body.sx-wkbig .wk-card.big .wk-blk p{font-size:15.5px}
  body.sx-wkbig .wk-card.big .tr-hist p{display:block;-webkit-line-clamp:unset;overflow:visible}
}
@media(max-width:1100px){.wk-exp{display:none}}
/* the history timeline reads in full in the panel too */
.wk-card .tr-hist p{-webkit-line-clamp:6}
@media(max-width:860px){
  .tk-cbars{width:clamp(56px,18vw,120px)}
  .tk-cbtn{padding:0 8px;gap:8px}
  .tk-cbtn .tk-ct{display:none}
  .sx.pagemode > .sx-bar .sx-mini.tk-host,body.sx-page .sx.pagemode .sx-bar .sx-mini.tk-host{padding:12px 12px;max-height:60vh}
  .tk-ckey{display:none!important}
}
@media(max-width:420px){.wk .wk-sec .btn{padding:0 10px}}
/* phones: the progress takes its own line under the page row */
@media(max-width:860px){
  body.sx-page .sx.pagemode .sx-steps,.sx.pagemode > .sx-bar .sx-steps{flex-wrap:wrap;row-gap:8px}
  body.sx-page .sx.pagemode .sx-steps > .sx-prog,.sx.pagemode .sx-steps > .sx-prog{order:9;flex:1 1 100%;display:flex}
  .sx-prog .tk-c,.sx-prog .tk-cbtn{width:100%}
  .sx-prog .tk-cbars{flex:1;width:auto}
  .sx-prog .tk-cbtn .tk-ct{display:inline}
}
.sx-prog{display:inline-flex;min-width:0}
.sx-prog:empty{display:none}

/* ---------- the board (21 Oct 2026, Brad): its own view, never stacked over the map; a checkbox on every row and a
   select-all per list; one bar for the ticked set; decided rows stay clear with Undo; no key hints anywhere ---------- */
.sx kbd,.tr kbd,.tr-toast kbd,.wk kbd,.tk-card kbd,.tr-menu kbd,.sx-dlg kbd{display:none!important}
.rp-board{max-width:1180px}
.rp-board .tr{margin:0 0 24px}
.rp-board .card.sx-calls{margin:0 0 24px}
.rp-board .wk-all{margin-top:14px}
.tr-sec{scroll-margin-top:110px}
.tr-sec.hl{box-shadow:0 0 0 2px var(--forest,#1E7F5C),0 16px 36px -18px rgba(30,127,92,.45)}
@media(prefers-reduced-motion:no-preference){.tr-sec{transition:box-shadow .35s}}
.tr-tile[aria-pressed="true"]{box-shadow:0 0 0 2px var(--forest,#1E7F5C)}
.tr-cb{display:inline-grid;place-items:center;width:28px;min-height:28px;flex:none;cursor:pointer;padding:0}
.tr-cb input{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;width:20px;height:20px;border-radius:5px;border:1.5px solid var(--field-line,#948E89);background:#fff center/14px 14px no-repeat;cursor:pointer;transition:background-color .12s,border-color .12s}
.tr-cb input:hover{border-color:var(--forest,#1E7F5C)}
.tr-cb input:checked{background-color:var(--forest,#1E7F5C);border-color:var(--forest,#1E7F5C);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.3l2.6 2.6L11 4.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tr-cb input:indeterminate{background-color:var(--forest,#1E7F5C);border-color:var(--forest,#1E7F5C);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7h7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.tr-cb input:focus-visible{outline:2px solid var(--deep,#1E7F5C);outline-offset:2px}
.tr-row,.tr-crow{grid-template-columns:28px minmax(0,1fr) auto auto}
.tr-row.left,.tr-row.dec,.tr-item.dec,.tr-crow.dec{opacity:1}
.tr-row.sel,.tr-item.sel,.tr-crow.sel{background:rgba(30,127,92,.06);border-radius:8px}
.tr-ck{padding-top:0}
.tr-ra{display:flex;align-items:center;gap:6px 14px;justify-content:flex-end;flex-wrap:wrap;white-space:nowrap}
.tr-ra .lnk{font-size:13px}
.tr-ra .tr-und{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--deep,#1E7F5C);text-decoration:underline;text-underline-offset:3px}
.tr-ra .tr-und:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.tr-ih{gap:10px}
.tr-ih .tr-ra{margin-left:auto}
.tr-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 10px}
.tr-item > .tr-cb{grid-row:1 / span 6;align-self:start}
.tr-item > :not(.tr-cb){grid-column:2}
.tr-crow > .tr-cb{align-self:start}
.tr-all{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13px;font-weight:500;color:var(--text-2);border-top:1px solid var(--line)}
.tr-all label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.tr-sh .tr-all{border-top:0;padding:0}
.tr-bulk{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;flex:1 1 100%;padding:10px 12px;border-radius:10px;background:#fff;box-shadow:0 0 0 1.5px var(--forest,#1E7F5C)}
.tr-bulk > b{font-size:14px;margin-right:6px}
.tr-bulk .tr-mvto{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2)}
.tr-bulk .tr-mvto .btn{white-space:nowrap}
.tr-bulk .lnk{margin-left:auto;font-size:13px}
.tr-bulk form{display:flex;flex-direction:column;gap:8px;flex:1 1 100%}
.tr-bulk textarea{box-sizing:border-box;width:100%;border:1px solid var(--field-line,#948E89);border-radius:7px;padding:8px 10px;font:inherit;font-size:14px;resize:vertical}
.tr-bulk .acts{display:flex;gap:8px}
.tr-foot{flex-wrap:wrap}
.tr-done .lnk,.tr-gd + .lnk{font-weight:600}
@media(max-width:640px){
  .tr-row,.tr-crow{grid-template-columns:28px minmax(0,1fr)}
  .tr-rs,.tr-ra,.tr-cp,.tr-cg{grid-column:2;grid-row:auto;justify-content:flex-start}
  .tr-crow .tr-cp,.tr-crow .tr-cg{grid-column:2;grid-row:auto}
  .tr-bulk .btn{flex:1 1 auto;min-height:44px;justify-content:center}
  .tr-bulk .lnk{margin-left:0}
}
/* a row's caret opens it in place: the crop of the page, the words, what changed, the customer line, the actions */
.tr-car{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;color:var(--text-2)}
.tr-car:hover{background:var(--ground,#F6F5F4);color:var(--forest,#1E7F5C)}
.tr-car:focus-visible{outline:2px solid var(--deep);outline-offset:1px}
.tr-car .car{transition:transform .18s}
.tr-car[aria-expanded="true"] .car{transform:rotate(90deg)}
.tr-rb{grid-template-columns:26px 190px minmax(0,1fr);gap:4px 10px;align-items:start}
.tr-cb2{display:flex;align-items:flex-start;gap:10px;min-width:0}
.tr-crow > .tr-cb2{grid-column:2}
.tr-ga{display:flex;align-items:center;gap:10px;justify-content:flex-start;margin:-4px 0 8px}
.tr-gl{font-size:13px;color:var(--text-2);margin-right:auto}
.tr-x{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 20px;margin:10px 0 4px;padding:16px;border-radius:12px;background:#fff;box-shadow:0 0 0 1.5px var(--forest,#1E7F5C),0 14px 30px -20px rgba(32,30,29,.35)}
.tr-item > .tr-x{grid-column:1 / -1}
.tr-crop{position:relative;overflow:hidden;border-radius:9px;background:var(--sunk,#FAF9F8);box-shadow:inset 0 0 0 1px var(--line);align-self:start}
.tr-xb{display:flex;flex-direction:column;gap:12px;min-width:0}
.tr-xb .wk-call{margin:0}
.tr-xa{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tr-xa .btn{white-space:nowrap}
.tr-xa .tr-open{margin-left:auto;font-size:13px}
.tr-xf{display:flex;flex-direction:column;gap:8px}
.tr-xf label{font-size:13px;font-weight:600}
.tr-xf textarea{box-sizing:border-box;width:100%;border:1px solid var(--field-line,#948E89);border-radius:7px;padding:8px 10px;font:inherit;font-size:14px;resize:vertical}
.tr-row.open,.tr-item.open,.tr-crow.open{background:transparent}
@media(max-width:900px){.tr-x{grid-template-columns:minmax(0,1fr)}.tr-rb{grid-template-columns:26px minmax(0,1fr)}.tr-rb .tr-what{grid-column:2}}
@media(max-width:640px){.tr-x{padding:12px}.tr-xa .btn{flex:1 1 auto;min-height:44px;justify-content:center}.tr-xa .tr-open{margin-left:0}}

/* the section heads: the select-all, the tier, its stages at the right */
.tr-sh{justify-content:flex-start;gap:10px}
.tr-sh .tr-sl{margin-left:auto}
/* the board as one list (21 Oct 2026): one summary line, the filters, a list per tier, the same row everywhere */
.tr-sum{display:flex;flex-direction:column;gap:8px;margin:6px 0 16px}
.tr-sum .tr-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:14px;color:var(--text-2)}
.tr-jump{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:2px;font-weight:500;color:var(--text);border-radius:6px;padding:2px 2px}
.tr-jump b{font-weight:700;margin-left:4px;font-variant-numeric:tabular-nums}
.tr-jump:hover{color:var(--forest,#1E7F5C)}
.tr-jump:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.tr-tot{color:var(--text-3)}
.tr-sum .rp-seg{max-width:760px}
.tr-legl .rp-leg{font-size:12.5px}
.tr-filt{position:sticky;top:64px;z-index:14;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 16px;padding:10px 0;background:var(--ground)}
.tr-seg{display:inline-flex;border:1px solid var(--line-2,#D6D2CE);border-radius:9px;overflow:hidden;background:#fff}
.tr-seg button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;font-size:14px;font-weight:500;color:var(--text-2);border-left:1px solid var(--line-2,#D6D2CE)}
.tr-seg button:first-child{border-left:0}
.tr-seg button b{font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.tr-seg button[aria-pressed="true"]{background:var(--text,#201E1D);color:#fff}
.tr-seg button[aria-pressed="true"] b{color:rgba(255,255,255,.75)}
.tr-seg button:focus-visible{outline:2px solid var(--deep);outline-offset:-3px}
.tr-pg{min-height:40px;padding:0 34px 0 12px;border-radius:9px;border:1px solid var(--line-2,#D6D2CE);background-color:#fff;font:inherit;font-size:14px;max-width:320px}
.tr-none{margin:8px 0 24px;font-size:14px;color:var(--text-3)}
.tr-sh h3 .tr-n2{font-weight:500;color:var(--text-3);margin-left:6px;font-size:14px}
.tr-sh .btn{min-height:44px;padding:0 20px;font-size:14.5px}
.tr-list{list-style:none;margin:0;padding:0}
.tr-r{display:grid;grid-template-columns:28px 28px minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:12px 4px;border-top:1px solid var(--line)}
.tr-r:first-child{border-top:0}
.tr-r:focus{outline:2px solid var(--deep);outline-offset:-2px;border-radius:8px}
.tr-r .tr-cb,.tr-r .tr-car{margin-top:-2px}
.tr-r.sel{background:rgba(30,127,92,.06);border-radius:8px}
.tr-rm{min-width:0}
.tr-rh{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:0;font-size:13px}
.tr-rh b{font-weight:600}
.tr-pgs{color:var(--text-3);font-size:12.5px}
.tr-kind{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:11.5px;font-weight:600;background:var(--gone-bg,#F0EEEC);color:var(--text-2)}
.tr-kind.k-chg{background:#EEF3EF;color:var(--deep,#1E7F5C)}
.tr-rt{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--text)}
.tr-rw{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--text-3)}
.tr-rw span{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-right:4px}
.tr-rs{display:flex;align-items:center;gap:10px;justify-content:flex-end;white-space:nowrap;padding-top:1px}
.tr-und{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--deep,#1E7F5C);text-decoration:underline;text-underline-offset:3px}
.tr-und:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.tr-r > .tr-x{grid-column:1 / -1}
.tr-x .btn,.tr-bulk .btn,.tr-xf .btn{min-height:44px;padding:0 18px;font-size:14.5px}
.tr-bulk .tr-mvto .btn{min-height:40px;padding:0 12px;font-size:13.5px}
.tr-foot.on{padding:12px 0}
@media(max-width:640px){
  .tr-r{grid-template-columns:28px 28px minmax(0,1fr)}
  .tr-rs{grid-column:3;justify-content:flex-start}
  .tr-filt{top:0;position:static}
  .tr-seg button{padding:0 12px}
  .tr-pg{max-width:100%;flex:1 1 100%}
  .tr-sh .btn{flex:1 1 100%;justify-content:center}
}
/* a draft's map: each tile carries its items' stages as a bar and its questions as marks; the key names both */
.sx-lay{display:flex;flex-direction:column;gap:6px;margin-top:8px;width:100%}
.sx-lay .rp-seg{height:5px}
.sx-qm{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.sx-qm .sxq-mk{width:11px;height:11px}
.sx-qm b{font-size:11px;font-weight:600;color:var(--text-3)}
.rp-qkey{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-left:14px;margin-left:4px;border-left:1px solid var(--line)}
.rp-qkey b{font-weight:600;color:var(--text)}
.rp-qkey span{display:inline-flex;align-items:center;gap:6px}
.rp-qkey .sxq-mk{width:12px;height:12px}
/* the walkthrough's decision buttons at a comfortable size */
.wk .wk-pri{min-height:46px}
.wk .wk-sec .btn{min-height:42px;font-size:13.5px}
/* the version picker as a menu: the heading shows the version with a small caret; the list is body type with dates and pills */
.rp-vp.has-vm > svg{display:none}
.rp-vp.has-vm{position:relative}
.rp-vbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:inherit;color:inherit;letter-spacing:inherit;border-bottom:1.5px dashed transparent;border-radius:4px}
.rp-vbtn:hover{border-bottom-color:var(--line-2)}
.rp-vbtn:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.rp-vbtn svg{width:16px;height:16px;flex:none;color:var(--text-3);transition:transform .15s}
.rp-vbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.rp-vmenu{position:absolute;z-index:75;top:calc(100% + 8px);left:0;min-width:340px;max-width:calc(100vw - 32px);padding:6px;background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(32,30,29,.18),0 0 0 1px rgba(32,30,29,.07);font-size:14px;font-weight:400;letter-spacing:0;line-height:1.4}
.rp-vmenu[hidden]{display:none}
.rp-vi{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n p" "d c";gap:2px 12px;align-items:center;padding:10px 12px;border-radius:8px;color:var(--text);text-decoration:none}
.rp-vi:hover,.rp-vi:focus-visible{background:var(--ground,#F6F5F4);outline:none}
.rp-vi:focus-visible{box-shadow:inset 0 0 0 2px var(--deep)}
.rp-vi .vn{grid-area:n;font-weight:600;font-size:14.5px}
.rp-vi .vd{grid-area:d;font-size:12.5px;color:var(--text-3)}
.rp-vi .pill{grid-area:p;justify-self:end}
.rp-vi .vc{grid-area:c;justify-self:end;font-size:12px;font-weight:600;color:var(--deep,#1E7F5C)}
.rp-vi.cur{background:rgba(30,127,92,.06)}
@media(max-width:640px){.rp-vmenu{min-width:min(340px,calc(100vw - 32px))}}
/* the Send step: the note, who gets the email, the preview; then Sent */
.tr-msg{margin:0 0 24px;padding:18px 20px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--edge,rgba(32,30,29,.08));display:flex;flex-direction:column;gap:16px}
.tr-msg h2,.tr-to h2{margin:0 0 8px;font-size:16px;font-weight:600}
.tr-msg .tr-note{margin:0}
.tr-msg .tr-note label{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}
.tr-to ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.tr-to li{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.tr-to li .sx-sd{width:18px;height:18px}
.tr-to li small{display:block;font-size:12.5px;color:var(--text-3)}
.tr-prevb{display:flex}
.tr-prevb .btn,.tr-sfoot .btn,.tr-sentf .btn{min-height:44px;padding:0 20px;font-size:14.5px}
.tr-takel{margin:0 0 8px;font-size:13.5px;color:var(--text-2)}
.tr-sent .tr-sentl{margin:0 0 20px;font-size:16px;line-height:1.5}
.tr-sent .tr-to{margin:0 0 24px}
.tr-heldl li{display:flex;flex-direction:column;gap:2px}
.tr-heldl li span{font-size:13.5px;color:var(--text-2)}
.tr-sentf{display:flex;flex-wrap:wrap;gap:10px}
.tr-prevd{width:min(680px,calc(100% - 32px))}
.tr-prevf{display:block;width:100%;height:min(70vh,640px);border:0;border-radius:8px;background:#fff}
.tr-prevd .mailprev{border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:#fff;display:flex;flex-direction:column;gap:10px}
.tr-prevd .mp-sub{font-weight:600}
.tr-prevd .mp-h{font-size:22px;font-weight:600;letter-spacing:-.01em}
.tr-prevd .mp-p{margin:0;line-height:1.55}
.tr-prevd .mp-note{padding:10px 14px;border-left:3px solid var(--live,#3FBB63);background:var(--sunk,#FAF9F8);white-space:pre-wrap}
.tr-prevd .mp-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:8px;background:var(--forest,#1E7F5C);color:#fff;font-weight:600}
.tr-nobody{margin:0;font-size:14px;color:var(--you,#8A4F0B);font-weight:500}
/* four stages on a phone: Board · Map · Pages · Send in one row */
@media(max-width:480px){
  .sx-stages{min-width:0}
  .sx-stages li{min-width:0}
  .sx-stages li + li::before{width:8px;margin:0 3px}
  .sx-stages button{gap:5px;padding:6px 2px;font-size:13px}
}
/* Share with leads: From Tangible at the top of the Board, the dialog's people */
.tr-from{margin:0 0 18px;padding:16px 20px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--edge,rgba(32,30,29,.08))}
.tr-fromh{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.tr-fromh h2{margin:0;font-size:16px;font-weight:600}
.tr-fromh .d{font-size:13px;color:var(--text-3)}
.tr-fromh .sx-mk-s{display:inline-flex}
.tr-share .fld textarea{width:100%;box-sizing:border-box;border:1px solid var(--field-line,#948E89);border-radius:7px;padding:8px 10px;font:inherit;font-size:14px;resize:vertical}
.tr-share .fld label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.tr-shto{border:0;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tr-shto legend{font-size:14px;font-weight:600;margin-bottom:6px;padding:0}
.tr-shp{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.tr-shp small{display:block;font-size:12.5px;color:var(--text-3)}
.tr-share #trShPrev:not(:empty){margin-top:14px}
.tr-share .mailprev{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#fff;display:flex;flex-direction:column;gap:8px}
.tr-share .mp-h{font-size:20px;font-weight:600}
.tr-share .mp-p{margin:0;line-height:1.5}
.tr-share .mp-note{padding:10px 14px;border-left:3px solid var(--live,#3FBB63);background:var(--sunk,#FAF9F8);white-space:pre-wrap}
.tr-share .mp-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:8px;background:var(--forest,#1E7F5C);color:#fff;font-weight:600}
.tr-share .sx-dlg-ft .btn{min-height:44px;padding:0 18px}
.tr-filt{position:static}
/* phones: the page row stays one row (View, previous, the page, next); the pull-down takes what is left */
@media(max-width:860px){
  body.sx-page .sx.pagemode .sx-steps .sx-psel,.sx.pagemode .sx-steps .sx-psel{flex:1 1 0;min-width:0;width:0!important}
}

/* ---------- the project's phases and the view switcher (21 Oct 2026, Brad) ----------
   the Studio line: the lockup, then Design · Review · Approve · Launch · Complete on a hairline, markers that fill as the
   phases complete, the current one ringed (amber the customer's move, blue Tangible's, forest when nobody waits), the
   dates as small meta. Under it, at the top of the editing area: Map · Outline · Live site, the actions beside it. */
.sx-life{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;flex:1 1 420px;max-width:760px;min-width:0}
.sx-life li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.sx-life li + li::before{content:'';position:absolute;top:8px;left:calc(-50% + 10px);right:calc(50% + 10px);height:1px;background:var(--line-2)}
.sx-life li.done::before,.sx-life li.on::before{background:var(--forest)}
.sx-life .lf-m{position:relative;width:9px;height:9px;margin:4px 0 8px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 1.5px var(--line-2);flex:none}
.sx-life li.done .lf-m{background:var(--forest);box-shadow:none}
.sx-life li.on .lf-m{width:13px;height:13px;margin:2px 0 6px;background:#fff;box-shadow:inset 0 0 0 3.5px var(--forest),0 0 0 4px rgba(30,127,92,.12)}
.sx-life li.on.w-you .lf-m{box-shadow:inset 0 0 0 3.5px var(--you-dot),0 0 0 4px var(--you-bg)}
.sx-life li.on.w-tang .lf-m{box-shadow:inset 0 0 0 3.5px var(--tang-dot),0 0 0 4px var(--tang-bg)}
.sx-life .lf-t{font:500 12.5px/1.3 var(--arch);letter-spacing:.01em;color:var(--text-3);white-space:nowrap}
.sx-life li.done .lf-t{color:var(--text-2)}
.sx-life li.on .lf-t{font-weight:600;color:var(--text)}
.sx-life .lf-rv{font-weight:500;color:var(--text-3)}
.sx-life .lf-d{margin-top:3px;font-size:11.5px;line-height:1.3;color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-life .lf-d .lf-w{font-weight:500;color:var(--text-2)}
.sx-life li.w-you .lf-d .lf-w{color:var(--you)}
.sx-life li.w-tang .lf-d .lf-w{color:var(--tang)}
.sx-brk{flex:0 0 100%;height:0;margin-top:-16px}
.sx-views{display:flex;align-items:center;min-width:0}
.sx-vseg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:var(--ground-2)}
.sx-vseg button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;height:32px;padding:0 15px;border-radius:7px;font:500 13.5px/1 var(--arch);color:var(--text-2);white-space:nowrap}
.sx-vseg button[hidden]{display:none}
.sx-vseg button:hover{color:var(--forest)}
.sx-vseg button.on{background:#fff;color:var(--forest);font-weight:600;box-shadow:0 1px 2px rgba(32,30,29,.1),0 0 0 1px rgba(32,30,29,.05)}
.sx-vseg button:focus-visible{outline:2px solid var(--deep);outline-offset:1px}
.sx-vsel{display:none}
.sx.pagemode > .sx-bar .sx-life,.sx.pagemode > .sx-bar .sx-brk{display:none}
.sx.pagemode > .sx-bar .sx-views{flex:none}
@media (max-width:640px){
  .sx-life{flex:1 1 100%;max-width:none;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .sx-life::-webkit-scrollbar{display:none}
  .sx-life li{min-width:64px}
  .sx-life .lf-t{white-space:normal}
  .sx-life .lf-rv{display:block;font-size:11.5px}
  .sx-life .lf-rv .lf-sep,.sx-life .lf-d .lf-sep{display:none}
  .sx-life .lf-d{white-space:normal;display:flex;flex-direction:column}
  .sx-life li.on .lf-d .lf-dt{display:none}
  .sx-brk{margin-top:-12px}
  .sx-vseg{display:none}
  .sx-vsel{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1;font-weight:500;color:var(--text-3)}
  .sx-vsel select{min-height:40px;padding:0 32px 0 12px;font:600 14px/1 var(--arch);color:var(--text);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231E7F5C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center;border:1px solid var(--line-2);border-radius:8px;-webkit-appearance:none;appearance:none}
  .sx.pagemode .sx-vsel > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.sx-walk .sx.pagemode #sxFwd{display:none}
  .sx.pagemode .sx-vsel select{min-height:38px;padding:0 24px 0 10px;font-size:13px;background-position:right 8px center}
}
#sxFwd{display:inline-flex;align-items:center;gap:8px;flex:none}
/* phones, the live site: row 1 previous, the page, next; row 2 the View select beside the progress */
@media (max-width:640px){
  body.sx-on .sx.pagemode > .sx-bar > .sx-steps{display:contents}
  body.sx-on .sx.pagemode > .sx-bar [data-sx="prev"]{order:1}
  body.sx-on .sx.pagemode > .sx-bar .sx-psel{order:2;flex:1 1 0;min-width:0;width:0!important}
  body.sx-on .sx.pagemode > .sx-bar [data-sx="next"]{order:3}
  body.sx-on .sx.pagemode > .sx-bar > .sx-brk{display:block;order:4;margin-top:-8px}
  body.sx-on .sx.pagemode > .sx-bar > .sx-views{order:5}
  body.sx-on .sx.pagemode > .sx-bar .sx-steps > .sx-prog{order:6;flex:1 1 0;min-width:0}
  body.sx-on .sx.pagemode > .sx-bar .sx-steps > .sx-cnt,body.sx-on .sx.pagemode > .sx-bar .sx-steps > .sx-sp,body.sx-on .sx.pagemode > .sx-bar .sx-steps > .sx-askbar,body.sx-on .sx.pagemode > .sx-bar .sx-steps > #sxFwd{order:7}
  body.sx-on .sx.pagemode > .sx-bar .sx-steps > .sx-sp{display:none}
}

/* ---------- the note and its Copilot section on Send and Share with leads (22 Oct 2026, Brad) ----------
   The Copilot button under the note, then the section as it will read, every line a quiet field: edit it, remove it
   (the x beside it), or remove the whole section. */
.tr-cpb{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:10px 0 0}
.btn.btn-cp{display:inline-flex;align-items:center;gap:8px}
.btn.btn-cp svg{display:block;flex:none}
.cpx{margin-top:12px;padding:14px 16px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--edge,rgba(32,30,29,.1))}
.cpx .cp-head{margin-bottom:6px}
.cpx .cp-k{margin:14px 0 6px}
.cpx-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cpx-needs{counter-reset:cpn}
.cpx-needs > li{counter-increment:cpn}
.cpx-needs > li::before{content:counter(cpn) ".";flex:none;width:18px;padding-top:9px;font-size:14px;color:var(--text-3)}
.cpx-row{display:flex;align-items:flex-start;gap:6px}
.cpx textarea,.cpx input[type=text]{box-sizing:border-box;width:100%;min-width:0;margin:0;padding:7px 9px;border:1px solid transparent;border-radius:7px;background:var(--ground,#F6F5F4);font:inherit;font-size:14.5px;line-height:1.5;color:var(--text-2);resize:vertical;field-sizing:content}
.cpx textarea{min-height:38px}
.cpx textarea:hover,.cpx input[type=text]:hover{border-color:var(--line-2,#D6D2CE)}
.cpx textarea:focus,.cpx input[type=text]:focus{outline:none;border-color:var(--forest,#1E7F5C);background:#fff;box-shadow:0 0 0 3px rgba(30,127,92,.14)}
.cpx-n{flex:1;min-width:0;display:grid;gap:4px}
.cpx-n textarea{color:var(--text)}
.cpx-def{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-3)}
.cpx-def span{flex:none}
.cpx-def input[type=text]{font-size:13.5px;padding:5px 8px}
.cpx-x{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin-top:3px;border-radius:7px;color:var(--text-3)}
.cpx-x:hover{background:var(--ground-2,#EFEDEB);color:var(--rust,#A3401B)}
.cpx-x:focus-visible{outline:2px solid var(--deep);outline-offset:1px}
.cpx-ft{display:flex;justify-content:flex-end;margin-top:10px}
.cpx-ft .lnk{font-size:13px;color:var(--text-3)}
.tr-share .cpx{max-height:none}
.tr-from .cp{margin-top:10px}
@media(max-width:640px){ .cpx{padding:12px} .cpx-def{flex-wrap:wrap} }
/* Questions (22 Oct 2026): the customer's questions view in the outline's anatomy (the same screens for staff and
   customers); the switcher is the dominant navigation and the back link a quiet breadcrumb */
.sx-vseg{padding:4px;border-radius:12px}
.sx-vseg button{height:40px;padding:0 20px;gap:8px;font-size:15px;border-radius:9px}
.sx-vn{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;background:var(--you-bg,#FBF0E1);color:var(--you,#8A4F0B);font:600 12px/1 var(--arch);font-variant-numeric:tabular-nums}
.sx-vn[hidden]{display:none}
.sx-staff .sx-vn{background:var(--tang-bg,#E6EEF7);color:var(--tang,#2F5F8F)}
.rp-back{margin:0 0 10px;padding:2px 0;font-size:12.5px;font-weight:400;color:var(--text-3)}
.rp-back:hover{color:var(--text-2)}
.q-head h1{margin:0 0 4px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.q-head h1:focus{outline:none}
.q-sum .sxq-stline{margin:0;font-size:13.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.q-sum .sxq-sum{margin:0}
.q-filt .tr-pg{max-width:260px}
.q-sec .tr-sh{border-bottom-color:var(--line)}
.q-sec .tr-sh .tr-sl{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.q-sec .tr-sh .q-bar{flex:0 0 120px}
.q-sec .sxq-rows,.q-sec .sx-gqs{padding:0}
.q-sec .sxq-row:first-child,.q-sec .sx-gq:first-child{border-top:0}
.q-sec.done .tr-sh h3{color:var(--text-2)}
.q-sec .sx-tp-send{padding:0 0 12px;margin-bottom:6px}
.q .tr-none{margin:0;padding:18px 0;color:var(--text-3)}
@media(max-width:640px){
  .sx-vseg button{padding:0 14px;font-size:14px}
  .q-sec .tr-sh .q-bar{flex-basis:100%}
  .q-filt .tr-pg{max-width:100%}
}
/* Send: who gets the email as tick boxes (22 Oct 2026) */
fieldset.tr-to{border:0;margin:0;padding:0;min-width:0}
fieldset.tr-to legend{margin:0 0 8px;padding:0;font-size:16px;font-weight:600}
fieldset.tr-to .tr-shp input{width:18px;height:18px;margin:0;accent-color:var(--forest,#1E7F5C)}
/* the page view keeps its slim bar: the switcher at its compact size there */
.sx.pagemode .sx-vseg{padding:3px;border-radius:10px}
.sx.pagemode .sx-vseg button{height:32px;padding:0 13px;font-size:13.5px;border-radius:7px}
/* Added questions (22 Oct 2026): Tangible's questions to the customer and the customer's questions to Tangible */
.q-ar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:start;padding:14px 0;border-top:1px solid var(--edge,rgba(32,30,29,.08))}
.q-ar:first-child{border-top:0}
.q-arb{min-width:0}
.q-arb .sxq-rq{margin:0}
.q-arm{margin:3px 0 0;font-size:12.5px;color:var(--text-3)}
.q-arb .sxq-al{margin:8px 0 0}
.q-ar .sxq-ra{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.q-ar .sxq-acts{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;justify-content:flex-end}
.q-aqf{margin-top:10px}
.q-aqf label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.q-aqf textarea{width:100%;box-sizing:border-box;border:1px solid var(--field-line,#948E89);border-radius:7px;padding:8px 10px;font:inherit;font-size:14px;resize:vertical}
.q-src{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:999px;background:var(--tang-bg,#EAF1F9);color:var(--tang,#2A5F98);font-size:12px;font-weight:600;vertical-align:1px}
#sxDlg #aqPg{width:100%;max-width:100%}
@media(max-width:640px){
  .q-ar{grid-template-columns:1fr}
  .q-ar .sxq-ra{align-items:flex-start}
  .q-ar .sxq-acts{justify-content:flex-start}
}