/* site-v51-workspace-tour: #workspace as THE TOUR. One pinned workspace window (the app's chrome, the Team / Client / Project /
 * Task picker, the real sidebar) walks through seven states driven by shared/stage.js:
 * 0 team home · 1 Tern Coffee › Conversations · 2 Cockpit · 3 Files & Deliverables · 4 the Deliverables view · 5 Team members,
 * an invite typed · 6 Priya joined. Every size is in design units (u), like the rest of the site's windows.
 * Reading order: heading → lede → the window → the one caption that changes with the window → the note. */

/* (option-page rule for its first section removed in v51: on the home the first section is #top) */

/* ── section frame ── */
.sec-wt .wt-top{align-items:end}
.st-wt{grid-template-columns:minmax(0,1fr);margin-top:clamp(8px,2vh,24px)}
.st-wt .st-pin{padding-block:40px 0}
html.anim .st-wt .st-pin{padding:40px 0 22px}
.st-wt .st-now{display:none!important} /* the caption under the window already carries the lit step, on every screen */
.st-wt .pinfit .wt{--room:152px}
html.anim .st-wt .pinfit .wt{--room:152px}
.wt-note{margin-top:clamp(16px,2.6vh,26px)}

/* the one caption that changes with the window: all seven share one grid cell, so the height never jumps */
.wt-cap{display:grid;margin-top:16px;max-width:52em}
.wt-cap p{grid-area:1/1;font-size:16.5px;line-height:1.5;color:var(--ink)}
html.anim .wt-cap p{visibility:hidden;opacity:0;transition:opacity var(--motion-medium) var(--ease-out),visibility 0s linear var(--motion-medium)}
html.anim .wt-cap p.on{visibility:visible;opacity:1;transition:opacity var(--motion-medium) var(--ease-out),visibility 0s}
html:not(.anim) .wt-cap p:not(:last-child){display:none} /* no motion: the final window, the final caption */

/* ── the window ── */
.wt{--dw:1180;--dh:700;background:#212121}
.wt .ic{stroke-width:1.9}
.wt u{text-decoration:underline;text-underline-offset:calc(var(--u)*3);text-decoration-color:#7a7a7a}
.wt b{font-weight:600}
.wt h3{font-size:calc(var(--u)*18);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.wt h4{font-size:calc(var(--u)*17.5);font-weight:600;letter-spacing:-.015em;line-height:1.25}

/* app top bar: the teal edge, mark, / Workspace, ‹ Chat, Build, the picker, theme, avatar */
.wt-app{flex:none;height:calc(var(--u)*46);display:flex;align-items:center;gap:calc(var(--u)*10);padding:0 calc(var(--u)*14);border-top:calc(var(--u)*3) solid var(--teal);background:#1a1a1a;font-size:calc(var(--u)*12.5)}
.wt-app>img{width:calc(var(--u)*22);height:calc(var(--u)*22)}
.wt-ws{font-size:calc(var(--u)*14.5);font-weight:600;letter-spacing:-.01em;margin-right:calc(var(--u)*4)}
.wt-ws i{font-style:normal;color:var(--brand);margin-right:calc(var(--u)*6)}
.wt-pill{display:inline-flex;align-items:center;gap:calc(var(--u)*5);height:calc(var(--u)*24);padding:0 calc(var(--u)*9);border:1px solid var(--edge);border-radius:calc(var(--u)*6);color:var(--sub);font-size:calc(var(--u)*11.5)}
.wt-build{color:var(--ink);height:calc(var(--u)*28);padding:0 calc(var(--u)*11)}
.wt-pill .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.wt-scope{height:calc(var(--u)*34);gap:calc(var(--u)*10);padding:0 calc(var(--u)*12)}
.wt-scope .w-seg{min-width:calc(var(--u)*56)}
.wt-scope .w-seg>span{gap:calc(var(--u)*2)}
.wt-scope .wt-seg-c{min-width:calc(var(--u)*98)}
.wt-si{width:calc(var(--u)*12);height:calc(var(--u)*12);margin-right:calc(var(--u)*5);color:var(--sub)}
.wt-none{color:var(--dim)}
.wt-seg-c .wt-on{color:var(--ink)}
.wt[data-state="1"] .wt-seg-c .wt-on{color:var(--teal-hi)} /* the pick that just happened */
.wt-sun{display:grid;place-items:center;width:calc(var(--u)*28);height:calc(var(--u)*28);color:var(--sub)}
.wt-sun .ic{width:calc(var(--u)*16);height:calc(var(--u)*16)}

/* crumb bar */
.wt-crumb{flex:none;height:calc(var(--u)*34);display:flex;align-items:center;gap:calc(var(--u)*9);padding:0 calc(var(--u)*14);border-bottom:1px solid #454545;background:#212121;font-size:calc(var(--u)*12.5);color:var(--sub)}
.wt-crumb b{color:var(--ink)}
.wt-crumb i{font-style:normal;color:#454545}
.wt-back,.wt-bx{display:grid;place-items:center;width:calc(var(--u)*24);height:calc(var(--u)*24);border:1px solid var(--edge);border-radius:calc(var(--u)*6);color:var(--sub)}
.wt-back{margin-right:calc(var(--u)*4)}
.wt-bx{margin-left:auto}
.wt-back .ic,.wt-bx .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}

.wt-body{flex:1;min-height:0;display:flex}

/* ── the sidebar: the app's labels, in the app's order ── */
.wt-side{flex:none;width:calc(var(--u)*212);display:flex;flex-direction:column;padding:calc(var(--u)*8) calc(var(--u)*8) calc(var(--u)*6);background:#1a1a1a;border-right:1px solid #454545;font-size:calc(var(--u)*11.6);color:var(--sub);overflow:hidden}
.wt-tsw{display:flex;gap:calc(var(--u)*6);margin-bottom:calc(var(--u)*4)}
.wt-tsel{flex:1;display:flex;align-items:center;gap:calc(var(--u)*7);height:calc(var(--u)*26);padding:0 calc(var(--u)*9);border:1px solid var(--edge);border-radius:calc(var(--u)*7);color:var(--ink);font-weight:600;font-size:calc(var(--u)*12)}
.wt-tsel .w-cv{margin-left:auto}
.wt-col{display:grid;place-items:center;width:calc(var(--u)*26);height:calc(var(--u)*26);border:1px solid var(--edge);border-radius:calc(var(--u)*7)}
.wt-col .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.wt-n{flex:none;display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*18);padding:0 calc(var(--u)*8);border-radius:calc(var(--u)*6);border:1px solid transparent;white-space:nowrap;transition:background-color var(--motion-medium) var(--ease-out),color var(--motion-medium) var(--ease-out),border-color var(--motion-medium) var(--ease-out)}
.wt-n .ic{width:calc(var(--u)*12.5);height:calc(var(--u)*12.5);color:var(--dim);transition:color var(--motion-medium) var(--ease-out)}
.wt-week{color:var(--ink);font-weight:500}
.wt-n.f-on{background:rgba(33,173,143,.1);border-color:#1f6b5a;color:var(--teal-hi)}
.wt-n.f-on .ic{color:var(--teal-hi)}
.wt-l{flex:none;display:flex;align-items:center;padding:calc(var(--u)*6) calc(var(--u)*8) calc(var(--u)*2);font:600 calc(var(--u)*9)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#7a7a7a}
.wt-l em{margin-left:auto;display:flex;align-items:center;gap:calc(var(--u)*3);font:500 calc(var(--u)*10)/1 var(--sans);letter-spacing:0;text-transform:none;font-style:normal;color:var(--sub)}
.wt-l em .ic{width:calc(var(--u)*10);height:calc(var(--u)*10)}
.wt-tree{flex:none;display:flex;flex-direction:column;padding-bottom:calc(var(--u)*3);margin-bottom:calc(var(--u)*3);border-bottom:1px solid #454545}
.wt-t{display:flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*19);padding:0 calc(var(--u)*6);border-radius:calc(var(--u)*6);color:var(--ink);font-weight:600;font-size:calc(var(--u)*12);white-space:nowrap;transition:background-color var(--motion-medium) var(--ease-out),color var(--motion-medium) var(--ease-out)}
.wt-tc{width:calc(var(--u)*11);height:calc(var(--u)*11);color:var(--dim)}
.wt-td{margin-left:auto;width:calc(var(--u)*12);height:calc(var(--u)*12);color:#454545}
.wt-t.f-on{background:rgba(33,173,143,.1);color:var(--teal-hi)}
.wt-p{--d:flex;align-items:center;gap:calc(var(--u)*5);height:calc(var(--u)*17);padding:0 calc(var(--u)*6) 0 calc(var(--u)*23);color:var(--sub);white-space:nowrap}
.wt-pnew{color:var(--dim)}
.wt-pnew .ic{width:calc(var(--u)*10);height:calc(var(--u)*10)}
.wt-badge{margin-left:auto;padding:0 calc(var(--u)*6);border-radius:calc(var(--u)*8);background:#e8a317;color:#1a1a1a;font:600 calc(var(--u)*10)/1.45 var(--sans);font-style:normal}

/* ── the main column ── */
.wt-main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:0 calc(var(--u)*30)}
.wt-pg{--d:flex;flex-direction:column;min-height:0}
.wt-pg>*{flex:none}

/* 0 team home */
.wt-home{padding:calc(var(--u)*34) calc(var(--u)*36) 0;max-width:calc(var(--u)*880);width:100%;margin-inline:auto}
.wt-hh{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--u)*16);margin-bottom:calc(var(--u)*20)}
.wt-hh p{margin-top:calc(var(--u)*5);color:var(--sub);font-size:calc(var(--u)*12.5)}
.wt-obtn{display:inline-flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*32);padding:0 calc(var(--u)*13);border:1px solid var(--edge);border-radius:calc(var(--u)*8);font-weight:600;font-size:calc(var(--u)*12.5);white-space:nowrap}
.wt-obtn .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.wt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*12)}
.wt-cc{display:flex;align-items:center;gap:calc(var(--u)*13);min-height:calc(var(--u)*72);padding:calc(var(--u)*14) calc(var(--u)*14) calc(var(--u)*14) calc(var(--u)*16);background:#292929;border:1px solid #454545;border-radius:calc(var(--u)*10)}
.wt-cc>div{flex:1;min-width:0;display:grid;gap:calc(var(--u)*3)}
.wt-cc b{font-size:calc(var(--u)*14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-cc small{display:flex;align-items:center;gap:calc(var(--u)*5);font-size:calc(var(--u)*11.5);color:var(--sub);line-height:1.35}
.wt-cc small .ic{width:calc(var(--u)*11);height:calc(var(--u)*11)}
.wt-cci{flex:none;display:grid;place-items:center;width:calc(var(--u)*36);height:calc(var(--u)*36);border-radius:calc(var(--u)*8);background:#16362e;border:1px solid #1f5a4c;color:var(--teal-hi)}
.wt-cci .ic{width:calc(var(--u)*16);height:calc(var(--u)*16)}
.wt-cc-unf .wt-cci{background:#3a2a10;border-color:#6b4a14;color:#f0b23c}
.wt-go{width:calc(var(--u)*13);height:calc(var(--u)*13);color:var(--dim)}

/* client tabs, sub-tabs */
.wt-tabs{--d:flex;flex:none;gap:calc(var(--u)*4);padding-top:calc(var(--u)*10);border-bottom:1px solid #454545;font-size:calc(var(--u)*12.8);color:var(--sub)}
.wt-tabs span{padding:calc(var(--u)*9) calc(var(--u)*13) calc(var(--u)*10);border-bottom:calc(var(--u)*2) solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color var(--motion-medium) var(--ease-out),border-color var(--motion-medium) var(--ease-out)}
.wt-tabs span.f-on{color:var(--ink);font-weight:600;border-bottom-color:var(--teal)}
.wt-subs{--d:flex;flex:none;gap:calc(var(--u)*6);padding:calc(var(--u)*12) 0 calc(var(--u)*12) calc(var(--u)*34);border-bottom:1px solid #454545;font-size:calc(var(--u)*12.5);color:var(--sub)}
.wt-subs span{display:inline-flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*28);padding:0 calc(var(--u)*11);border-radius:calc(var(--u)*7);font-weight:500;white-space:nowrap;transition:background-color var(--motion-medium) var(--ease-out),color var(--motion-medium) var(--ease-out)}
.wt-subs span.f-on{background:rgba(33,173,143,.14);color:var(--teal-hi)}
.wt-subs .ic{width:calc(var(--u)*12.5);height:calc(var(--u)*12.5)}
.wt-live{width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;background:var(--teal)}

/* 1 Conversations (the Desk under the client) */
.wt-conv{padding-top:calc(var(--u)*14)}
.wt-sum{display:flex;align-items:center;gap:calc(var(--u)*7);margin-bottom:calc(var(--u)*10);font-size:calc(var(--u)*12);color:var(--sub)}
.wt-sum b{color:var(--ink)}
.wt-sum i{font-style:normal;color:#454545}
.wt-list{display:grid;gap:calc(var(--u)*7)}
.wt-cv{display:grid;grid-template-columns:calc(var(--u)*30) minmax(0,1.25fr) minmax(0,1.2fr) calc(var(--u)*104) calc(var(--u)*118);align-items:center;gap:calc(var(--u)*12);min-height:calc(var(--u)*54);padding:calc(var(--u)*8) calc(var(--u)*14);background:#292929;border:1px solid #454545;border-radius:calc(var(--u)*10)}
.wt-ci{display:grid;place-items:center;width:calc(var(--u)*30);height:calc(var(--u)*30);border-radius:calc(var(--u)*8);background:#303030;color:var(--sub)}
.wt-ci .ic{width:calc(var(--u)*13);height:calc(var(--u)*13)}
.wt-ct{min-width:0;display:grid;gap:calc(var(--u)*2)}
.wt-ct b,.wt-made{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-ct b{font-size:calc(var(--u)*13.2)}
.wt-ct small{font-size:calc(var(--u)*11.2);color:var(--dim)}
.wt-made{display:flex;align-items:center;gap:calc(var(--u)*6);font-size:calc(var(--u)*12);color:var(--sub)}
.wt-made .ic{width:calc(var(--u)*12);height:calc(var(--u)*12);color:var(--teal-hi)}
.wt-cost{font:600 calc(var(--u)*11)/1.2 var(--sans);color:var(--sub);text-align:right;white-space:nowrap}
.wt-st{justify-self:end;display:inline-flex;align-items:center;gap:calc(var(--u)*5);height:calc(var(--u)*22);padding:0 calc(var(--u)*9);border-radius:calc(var(--u)*11);font-size:calc(var(--u)*11);font-weight:600;white-space:nowrap}
.wt-st .ic{width:calc(var(--u)*11);height:calc(var(--u)*11)}
.wt-done{background:rgba(33,173,143,.12);color:var(--teal-hi)}
.wt-run{background:rgba(92,150,230,.14);color:#8cb8f2}
.wt-wait{background:rgba(232,163,23,.14);color:#f0b23c}
.wt-sch{background:#303030;color:var(--sub)}

/* 2 Cockpit */
.wt-cock{padding-top:calc(var(--u)*12)}
.wt-areas{display:flex;align-items:center;gap:calc(var(--u)*3);font-size:calc(var(--u)*11.8);color:var(--sub);white-space:nowrap}
.wt-areas span{display:inline-flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*26);padding:0 calc(var(--u)*9);border-radius:calc(var(--u)*7)}
.wt-areas span.on{background:#303030;color:var(--ink);font-weight:600;padding:0 calc(var(--u)*16)}
.wt-areas i,.wt-tile span i{width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%;background:var(--c)}
.wt-gear{margin-left:auto;width:calc(var(--u)*14);height:calc(var(--u)*14);color:var(--sub)}
.wt-h2row{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--u)*16);margin-top:calc(var(--u)*16)}
.wt-h2row u,.wt-h2row small{font-size:calc(var(--u)*11.5);color:var(--sub)}
.wt-lede{margin-top:calc(var(--u)*4);font-size:calc(var(--u)*12.2);color:var(--sub)}
.wt-recs{margin-top:calc(var(--u)*9);border-top:1px solid #454545}
.wt-rec{display:flex;align-items:center;gap:calc(var(--u)*12);min-height:calc(var(--u)*42);padding:calc(var(--u)*5) calc(var(--u)*6);border-bottom:1px solid #454545}
.wt-rec>i{flex:none;width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:#7a7a7a}
.wt-rec>i.w{background:#f0b23c}
.wt-rec>div{flex:1;min-width:0;display:grid;gap:calc(var(--u)*1)}
.wt-rec b{font-size:calc(var(--u)*12.8)}
.wt-rec small{font-size:calc(var(--u)*11);color:var(--dim)}
.wt-start{padding:calc(var(--u)*4) calc(var(--u)*13);border-radius:calc(var(--u)*6);background:var(--app-btn);color:var(--app-btn-ink);font-weight:600;font-size:calc(var(--u)*11.8)}
.wt-links{display:flex;gap:calc(var(--u)*18);margin-top:calc(var(--u)*9);font-size:calc(var(--u)*11.5);color:var(--ink)}
.wt-stands{margin-top:calc(var(--u)*16)}
.wt-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(var(--u)*8);margin-top:calc(var(--u)*10)}
.wt-tile{display:grid;gap:calc(var(--u)*3);align-content:start;padding:calc(var(--u)*10) calc(var(--u)*10) calc(var(--u)*11);background:#292929;border:1px solid #454545;border-radius:calc(var(--u)*9)}
.wt-tile span{display:flex;align-items:center;gap:calc(var(--u)*5);font-size:calc(var(--u)*10.8);color:var(--sub);white-space:nowrap}
.wt-tile b{font-size:calc(var(--u)*19);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.wt-tile small{font-size:calc(var(--u)*11);color:var(--dim);line-height:1.35}
.wt-tile-no{background:transparent;border-style:dashed;border-color:#454545}
.wt-tile-no b{font-size:calc(var(--u)*13);color:var(--sub);font-weight:500;padding-block:calc(var(--u)*3) calc(var(--u)*1)}

/* 3, 4 Files & Deliverables */
.wt-files{padding-top:calc(var(--u)*16)}
.wt-frow{display:flex;gap:calc(var(--u)*10)}
.wt-search{flex:1;min-width:0;display:flex;align-items:center;gap:calc(var(--u)*9);height:calc(var(--u)*34);padding:0 calc(var(--u)*12);border:1px solid var(--edge);border-radius:calc(var(--u)*8);color:var(--dim);font-size:calc(var(--u)*12);white-space:nowrap;overflow:hidden}
.wt-search .ic{width:calc(var(--u)*13);height:calc(var(--u)*13)}
.wt-search span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wt-segs{flex:none;display:flex;gap:calc(var(--u)*3);padding:calc(var(--u)*3);border:1px solid var(--edge);border-radius:calc(var(--u)*9);font-size:calc(var(--u)*12.2);font-weight:600;color:var(--sub)}
.wt-segs span{display:inline-flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*26);padding:0 calc(var(--u)*12);border-radius:calc(var(--u)*6);transition:background-color var(--motion-medium) var(--ease-out),color var(--motion-medium) var(--ease-out)}
.wt-segs span.f-on{background:rgba(33,173,143,.16);color:var(--teal-hi)}
.wt-segs .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.wt-expl{margin-top:calc(var(--u)*9);font-size:calc(var(--u)*11.5);color:var(--sub);line-height:1.45}
.wt-expl b{color:var(--ink)}
.wt-counts{--d:flex;align-items:baseline;gap:calc(var(--u)*5);margin-top:calc(var(--u)*11);font-size:calc(var(--u)*12.5);color:var(--sub)}
.wt-counts b{color:var(--ink);font-weight:600}
.wt-counts b:not(:first-child){margin-left:calc(var(--u)*12)}
.wt-counts span{margin-left:calc(var(--u)*12);color:var(--teal-hi)}
.wt-grp{margin:calc(var(--u)*14) 0 calc(var(--u)*7);font:600 calc(var(--u)*10)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.wt-flist{--d:grid;gap:0;border:1px solid #454545;border-radius:calc(var(--u)*10);overflow:hidden}
.wt-fr{display:grid;grid-template-columns:calc(var(--u)*26) minmax(0,1fr) auto calc(var(--u)*62);align-items:center;gap:calc(var(--u)*12);min-height:calc(var(--u)*46);padding:calc(var(--u)*6) calc(var(--u)*14);background:#212121;border-top:1px solid #454545}
.wt-fr:first-child{border-top:0}
.wt-fr>div{min-width:0;display:grid;gap:calc(var(--u)*1)}
.wt-fr b{font-size:calc(var(--u)*12.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-fr small{font-size:calc(var(--u)*11);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-fr time{font-size:calc(var(--u)*11);color:var(--dim);text-align:right;white-space:nowrap}
.wt-fr>time:nth-child(3){grid-column:4}
.wt-fi{display:grid;place-items:center;width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:calc(var(--u)*7);background:#303030;color:var(--sub)}
.wt-fi .ic{width:calc(var(--u)*12.5);height:calc(var(--u)*12.5)}
.wt-fi-s{background:#15352c;color:#4fd1a5}
.wt-fi-d{background:#1c2e44;color:#8cb8f2}
.wt-chip{display:inline-flex;align-items:center;gap:calc(var(--u)*5);height:calc(var(--u)*21);padding:0 calc(var(--u)*9);border-radius:calc(var(--u)*6);border:1px solid #454545;font-size:calc(var(--u)*10.8);font-weight:600;font-style:normal;color:var(--sub);white-space:nowrap}
.wt-chip .ic{width:calc(var(--u)*11);height:calc(var(--u)*11)}
.wt-chip-d{border-color:#2c4a6e;color:#8cb8f2;background:rgba(92,150,230,.08)}
.wt-chip-r{border-color:#1f6b5a;color:var(--teal-hi);background:rgba(33,173,143,.08)}
.wt-chip-ok{border-color:transparent;background:rgba(33,173,143,.16);color:var(--teal-hi)}
.wt-chip-send{border-color:var(--app-btn);background:var(--app-btn);color:var(--app-btn-ink)}

/* 5, 6 Team members */
.wt-team{padding-top:calc(var(--u)*24)}
.wt-th p{margin-top:calc(var(--u)*3);font-size:calc(var(--u)*12);color:var(--sub)}
.wt-th>span{display:block;margin-top:calc(var(--u)*3);font-size:calc(var(--u)*11.2);color:var(--ink);font-weight:600}
.wt-th>span b{font:600 calc(var(--u)*10)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.wt-tcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(var(--u)*14);margin-top:calc(var(--u)*16);align-items:start}
.wt-tside{display:grid;gap:calc(var(--u)*14)}
.wt-box{display:grid;align-content:start;gap:calc(var(--u)*9);padding:calc(var(--u)*16) calc(var(--u)*18);background:#292929;border:1px solid #454545;border-radius:calc(var(--u)*12)}
.wt-mem{min-height:calc(var(--u)*380)}
.wt-bl{display:flex;align-items:center;gap:calc(var(--u)*8);font:600 calc(var(--u)*10)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--sub)}
.wt-bl .ic{width:calc(var(--u)*13);height:calc(var(--u)*13)}
.wt-bl em{font-style:normal;color:var(--ink)}
.wt-fl{margin-top:calc(var(--u)*2);font:600 calc(var(--u)*10)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.wt-inv{display:flex;gap:calc(var(--u)*8)}
.wt-in{flex:1;min-width:0;display:flex;align-items:center;height:calc(var(--u)*36);padding:0 calc(var(--u)*12);border:1px solid #454545;border-radius:calc(var(--u)*8);background:#212121;color:var(--dim);font-size:calc(var(--u)*12.5);white-space:nowrap;overflow:hidden}
.wt-in.wt-typed,.wt-in.wt-name{color:var(--ink)}
.wt-in.wt-typed::after{content:"";width:1px;height:calc(var(--u)*15);margin-left:calc(var(--u)*2);background:var(--teal-hi)}
.wt-role{flex:none;display:flex;align-items:center;gap:calc(var(--u)*18);height:calc(var(--u)*36);padding:0 calc(var(--u)*11);border:1px solid #454545;border-radius:calc(var(--u)*8);font-size:calc(var(--u)*12.5)}
.wt-inv-btn{flex:none;display:grid;place-items:center;height:calc(var(--u)*36);padding:0 calc(var(--u)*15);border-radius:calc(var(--u)*8);background:var(--app-btn);color:var(--app-btn-ink);font-weight:600;font-size:calc(var(--u)*12.5)}
.wt-create{background:#1f5f51}
.wt-hint{font-size:calc(var(--u)*11.3);color:var(--sub)}
.wt-hint u{color:var(--teal-hi);text-decoration:none;font-weight:600}
.wt-ppl{display:grid;margin-top:calc(var(--u)*4);border-top:1px solid #454545}
.wt-pp{--d:flex;display:flex;align-items:center;gap:calc(var(--u)*11);padding:calc(var(--u)*10) calc(var(--u)*2);border-bottom:1px solid #454545}
.wt-pp>div{flex:1;min-width:0;display:grid;gap:calc(var(--u)*1)}
.wt-pp b{font-size:calc(var(--u)*12.8)}
.wt-pp b small{font-weight:400;color:var(--dim);font-size:calc(var(--u)*11)}
.wt-pp>div>small{font-size:calc(var(--u)*11);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wt-pp em{font-style:normal;font-size:calc(var(--u)*11);color:var(--sub)}
.wt-pp em.wt-own{padding:calc(var(--u)*2) calc(var(--u)*7);border-radius:calc(var(--u)*5);background:rgba(33,173,143,.14);color:var(--teal-hi);font-weight:600}
.wt-pp-new{background:rgba(33,173,143,.07);border-radius:calc(var(--u)*8);border-bottom-color:transparent;padding-inline:calc(var(--u)*8);margin-top:calc(var(--u)*4)}
.wt-av{flex:none;display:grid;place-items:center;width:calc(var(--u)*30);height:calc(var(--u)*30);border-radius:50%;background:#1f6b5a;color:var(--ink);font-size:calc(var(--u)*10.5);font-weight:600}
.wt-av-b{background:#3b4f7a}.wt-av-c{background:#6a4a7a}.wt-av-d{background:#7a5a2a}
.wt-dom{display:flex;align-items:flex-start;gap:calc(var(--u)*14);padding-top:calc(var(--u)*10);margin-top:calc(var(--u)*2);border-top:1px solid #454545}
.wt-dom>div{flex:1;display:grid;gap:calc(var(--u)*3)}
.wt-dom b{font-size:calc(var(--u)*12.8)}
.wt-dom small{font-size:calc(var(--u)*11.2);color:var(--sub);line-height:1.4}
.wt-tog{flex:none;display:flex;align-items:center;width:calc(var(--u)*36);height:calc(var(--u)*20);padding:calc(var(--u)*2);border-radius:calc(var(--u)*10);background:var(--teal)}
.wt-tog i{width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:50%;background:#fff;margin-left:auto}
.wt-arch{font-size:calc(var(--u)*11.5);color:var(--sub);text-decoration:none!important;font-weight:600}

/* forward: lists fill one row after another (stage.js adds .enter; .snap cancels it going back) */
html.anim .wt .enter{animation-delay:calc(var(--i,0) * 60ms)}

/* ── phones: the sidebar folds away, as it does in the app; one column; the picker keeps Team and Client ── */
@media (max-width:899px){
  .fit .wt{--dw:430;--dh:760}
  html.anim .st-wt .st-pin{padding:14px 0 12px}
  .st-wt .pinfit .wt,html.anim .st-wt .pinfit .wt{--room:178px}
  .wt-cap{margin-top:12px}
  .wt-cap p{font-size:15px;line-height:1.45}
  .wt-side,.wt-ws,.wt-pill,.wt-sun,.wt-pj{display:none!important}
  .wt-app{gap:calc(var(--u)*8);padding:0 calc(var(--u)*10)}
  .wt-scope{margin-left:auto}
  .wt-main{padding:0 calc(var(--u)*14)}
  .wt-home{padding:calc(var(--u)*20) 0 0}
  .wt-hh{margin-bottom:calc(var(--u)*14)}
  .wt-hh p{max-width:calc(var(--u)*230)}
  .wt-grid{grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*8)}
  .wt-cc{min-height:calc(var(--u)*58);padding:calc(var(--u)*10) calc(var(--u)*12)}
  .wt-tabs{overflow:hidden}
  .wt-tabs span:nth-child(2),.wt-tabs span:nth-child(3){display:none}
  .wt-tabs span{padding-inline:calc(var(--u)*9)}
  .wt-subs{padding-left:0;overflow:hidden}
  .wt-subs span{padding:0 calc(var(--u)*8)}
  .wt-sum{flex-wrap:wrap;row-gap:calc(var(--u)*2)}
  .wt-cv{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t s" "m c";row-gap:calc(var(--u)*4);min-height:0;padding:calc(var(--u)*9) calc(var(--u)*12)}
  .wt-ci{display:none}
  .wt-ct{grid-area:t}.wt-st{grid-area:s;align-self:start}.wt-made{grid-area:m}
  .wt-cost{grid-area:c;align-self:center}
  .wt-areas{overflow:hidden}
  .wt-h2row{flex-wrap:wrap;row-gap:calc(var(--u)*3)}
  .wt-rec{min-height:calc(var(--u)*40)}
  .wt-rec b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* the seven areas as one compact list: name, then the measurement */
  .wt-tiles{grid-template-columns:minmax(0,1fr);gap:0;border:1px solid #454545;border-radius:calc(var(--u)*9);overflow:hidden}
  .wt-tile,.wt-tile-no{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:calc(var(--u)*6) calc(var(--u)*10);border:0;border-top:1px solid #454545;border-radius:0;background:#292929}
  .wt-tile:first-child{border-top:0}
  .wt-tile b,.wt-tile-no b{font-size:calc(var(--u)*13);padding:0;text-align:right}
  .wt-tile small{display:none}
  .wt-links,.wt-lede{display:none}
  .wt-frow{flex-direction:column;gap:calc(var(--u)*8)}
  .wt-segs{align-self:flex-start}
  .wt-fr{grid-template-columns:calc(var(--u)*26) minmax(0,1fr);grid-template-areas:"i t" "i c";row-gap:calc(var(--u)*4);padding-block:calc(var(--u)*8)}
  .wt-fi{grid-area:i;align-self:start}
  .wt-fr>div{grid-area:t}
  .wt-fr .wt-chip{grid-area:c;justify-self:start}
  .wt-fr time{display:none}
  /* the Everything view: the kind chip stays on the title row */
  .wt-flist[data-s="3"] .wt-fr{grid-template-columns:calc(var(--u)*26) minmax(0,1fr) auto;grid-template-areas:"i t c";padding-block:calc(var(--u)*7)}
  .wt-flist[data-s="3"] .wt-fr .wt-chip{justify-self:end}
  .wt-counts{flex-wrap:wrap}
  .wt-team{padding-top:calc(var(--u)*16)}
  .wt-tcols{grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*10);margin-top:calc(var(--u)*12)}
  .wt-tside>.wt-box:last-child{display:none}
  .wt-mem{min-height:0}
  .wt-box{padding:calc(var(--u)*12) calc(var(--u)*14);gap:calc(var(--u)*8)}
  .wt-role{display:none}
  .wt-pp{padding-block:calc(var(--u)*7)}
  .wt-arch{display:none}
}

/* the picker's client segment: site.css shows every span in a segment, so this one follows the state itself */
.wt:not([data-state="0"]) .wt-seg-c>.wt-none,.wt[data-state="0"] .wt-seg-c>.wt-on{display:none}

/* phones: the wall opens at eight tiles; a button shows the rest (Dan, 30 Sep: pages must not be long scrolls on mobile) */
.tw-reveal{display:none}
@media (max-width:899px){
  .tw-grid:not(.all) .tw-t:nth-child(n+9){display:none}
  .tw-reveal{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;padding:0 16px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--ink);font:500 14px/1 var(--sans)}
}