/* Tangible Studio (studio.js): the review map, page path and finish screen around a hosted site comp.
   Portal tokens throughout; status has its own colours so it never reads as brand: grey ring = not opened,
   amber = waiting on the reviewer, blue = in progress, a closed-out tile with a green check = reviewed. */
:root{--sky:#2F6FB0;--done:#2E9C55;--done-t:#2A7A2E;--amber:#B8692E;--amber-t:#8F4E1E;--edge:rgba(32,30,29,.08);--ground-2:#EAE8E7}
.sx{margin:0 0 20px;position:relative;z-index:2}
.sx .lbl{font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.sx .eyebrow{color:var(--deep);margin:0 0 14px;display:inline-flex;align-items:center;gap:12px}
.sx .eyebrow i{width:26px;height:2px;background:linear-gradient(45deg,var(--live),var(--lime));display:block}
.sx-sd{display:block;flex:none;width:18px;height:18px}
.sx-big .sx-sd{width:28px;height:28px}
/* while Studio runs the deliverable header steps aside: the Studio bar names the site, links back and carries the
   staff switch; staff keep the status line, and a note from Tangible or a Copilot block still shows */
body.sx-on .vhead .sub,body.sx-on .band-k,body.sx-on .vhead h1,body.sx-on .vhead .stage{display:none}
body.sx-on:not(.sx-staff) .vhead .vmeta{display:none}

/* the bar */
.sx-bar{position:relative;z-index:3;display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;padding:12px 18px;background:rgba(255,255,255,.92);border:1px solid var(--edge);border-radius:12px}
.sx-lock{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none;border-radius:6px}
.sx-lock .sx-mk{display:block;overflow:visible}
.sx-lock .sx-mk path{transition:transform .9s cubic-bezier(.37,0,.63,1)}
.sx-lock-t{display:flex;flex-direction:column;line-height:1}
.sx-lock-t .k{font:500 9.5px/1 var(--arch);letter-spacing:.22em;color:#918B86}
.sx-lock-t .n{font:300 23px/1 var(--arch);letter-spacing:-.01em;color:var(--forest);transform:skewX(-7deg);transform-origin:left bottom;margin-top:3px}
.sx-ctx{display:flex;flex-direction:column;line-height:1.35;min-width:0;padding-left:20px;box-shadow:inset 1px 0 0 var(--line)}
.sx-ctx b{font-weight:600;font-size:14px}
.sx-ctx span{font-size:12.5px;color:var(--text-3)}
.sx-ctx .sx-as{font-size:12.5px;color:var(--deep);padding:0;margin-left:2px}
.sx-steps{display:flex;align-items:center;gap:8px;flex-basis:100%;min-width:0;padding-top:12px;margin-top:2px;box-shadow:inset 0 1px 0 var(--edge)}
.sx-ar{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:30px;height:30px;border-radius:6px;font-size:20px;line-height:1;color:var(--text-2);border:1px solid var(--line-2);background:#fff}
.sx-ar:hover{border-color:var(--forest);color:var(--forest)}
.sx-ar:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-where{font-size:14px;color:var(--text);white-space:nowrap;min-width:0;flex:1;max-width:560px;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.sx-where:focus{outline:none}
.sx-where b{font-variant-numeric:tabular-nums;color:var(--deep);margin-right:2px}
.sx-where span{color:var(--text-3)}
.sx-sp{flex:1}
.sx-prog{display:flex;flex-direction:column;gap:6px;min-width:210px;font-variant-numeric:tabular-nums}
.sx-pl{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--text-3)}
.sx-pl b{font-weight:600;color:var(--text)}
.sx-barl{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.sx-barl i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--deep),var(--live));transition:width .6s cubic-bezier(.2,.8,.2,1)}

.sx-body{padding-top:28px;display:flex;flex-direction:column;gap:clamp(22px,3vw,34px)}
.sx.pagemode .sx-body{padding:0;gap:0}
.sx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 32px;flex-wrap:wrap}
.sx-head h1{font-weight:700;font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.032em;margin:0 0 10px;text-wrap:balance}
.sx-head h1:focus{outline:none}
.sx-head .sub{margin:0;max-width:62ch}
.sx-key{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:13px;color:var(--text-2);padding-bottom:4px}
.sx-key span{display:inline-flex;align-items:center;gap:8px}

/* up next */
.sx-next{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,3vw,28px);align-items:center;padding:20px clamp(20px,3vw,28px);border-radius:12px;background:#fff;border:1px solid var(--edge)}
.sx-next .gnum{font-weight:700;font-size:60px;line-height:.85;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(30,127,92,.4);font-variant-numeric:tabular-nums}
.sx-next .lbl{display:block;color:var(--deep);margin-bottom:6px}
.sx-next h2{font-weight:700;font-size:clamp(19px,2.2vw,24px);letter-spacing:-.022em;line-height:1.2;margin:0}
.sx-next .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:8px;font-size:13.5px;color:var(--text-2)}
.sx-next .meta span{display:inline-flex;align-items:center;gap:8px}
.sx-nthumb{grid-column:1/-1;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--edge)}

/* owners */
.sx-av{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;font:600 10px/1 var(--arch);letter-spacing:.04em;color:#fff}
.sx-av.sm{width:22px;height:22px;font-size:9px}
.sx-av.add{background:none;color:var(--deep);box-shadow:inset 0 0 0 1.5px rgba(30,127,92,.4);font-size:20px;font-weight:300}

/* the map: one row per section, every tile the same size */
.sx-map{display:flex;flex-direction:column;gap:22px}
.sx-sec{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.sx-sec-h{display:flex;flex-direction:column;gap:9px;padding-top:14px}
.sx-sec-h .eyebrow{margin:0;font-size:10.5px}
.sx-sec-h .cnt{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.sx-sec-h .cnt b{font-weight:600;color:var(--text)}
.sx-sec-h .sx-barl{height:4px;max-width:150px}
.sx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;grid-auto-rows:1fr}
.sx-pg{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:6px;min-height:112px;padding:14px 16px 15px;border-radius:10px;background:#fff;border:1px solid var(--edge);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,background .3s}
.sx-pg:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.sx-pg:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.sx-pg .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sx-pg .no{font-weight:600;font-size:11.5px;letter-spacing:.06em;color:var(--text-3);font-variant-numeric:tabular-nums}
.sx-pg .nm{font-weight:700;font-size:15.5px;letter-spacing:-.016em;line-height:1.28;text-wrap:pretty}
.sx-pg .st{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3);min-height:22px}
.sx-pg .end{display:flex;align-items:center;gap:8px}
.sx-pg .st .end{margin-left:auto}
.sx-pg .you{font:600 10px/1 var(--arch);letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.sx-pg.todo{border-color:rgba(184,105,46,.38)}
.sx-pg.todo .st{color:var(--amber-t);font-weight:500}
.sx-pg.wip .st{color:var(--sky);font-weight:500}
.sx-pg.done{background:rgba(255,255,255,.42);border-color:transparent}
.sx-pg.done .nm{color:var(--text-2);font-weight:600}
.sx-pg.done .no{color:var(--text-3)}
.sx-pg.done .st{color:var(--done-t);font-weight:500}
.sx-pg.done:hover{background:#fff}
.sx-pg.lock{background:rgba(255,255,255,.3);border-color:transparent}
.sx-pg.lock .nm{color:var(--text-3);font-weight:600}
.sx-pg.here{border-color:transparent;box-shadow:0 0 0 2px var(--sky)}
@media(max-width:1180px){.sx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.sx-sec{grid-template-columns:1fr;gap:12px}.sx-sec-h{padding-top:0;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 14px}.sx-sec-h .sx-barl{flex:1;min-width:80px}.sx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.sx-tiles{grid-template-columns:1fr}.sx-pg{min-height:0}}


/* hover and focus preview */
.sx-peek{position:fixed;z-index:90;width:300px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 4px 10px rgba(32,30,29,.08),0 26px 60px rgba(32,30,29,.20);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s}
.sx-peek.on{opacity:1;transform:none}
.sx-peek img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--ground)}
.sx-peek .pb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.sx-peek b{font-weight:700;font-size:14.5px;letter-spacing:-.012em}
.sx-peek .ps{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.sx-peek .pu{font-size:11.5px;color:var(--text-3)}

/* cards on the map and finish screens */
.sx .card{background:#fff;border:1px solid var(--edge);border-radius:10px;padding:20px 22px}
.sx-ph{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.sx-ph h3{font-weight:700;font-size:16px;letter-spacing:-.016em;margin:0}
.sx-ph span{font-size:12.5px;color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--edge)}
.sx-row:first-of-type{border-top:0}
.sx-row > span{flex:1;min-width:0}
.sx-row b{font-weight:700;letter-spacing:-.01em;display:block;font-size:14.5px}
.sx-row small{color:var(--text-3);font-size:13px}

/* finish */
.sx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.sx-stat{background:#fff;border:1px solid var(--edge);border-radius:10px;padding:20px 22px 18px}
.sx-stat .n{display:block;font-weight:700;font-size:clamp(32px,4vw,44px);letter-spacing:-.035em;line-height:1;color:var(--forest);font-variant-numeric:tabular-nums}
.sx-stat .n small{font-size:.5em;color:var(--text-3);font-weight:600;letter-spacing:0;margin-left:2px}
.sx-stat p{color:var(--text-2);font-size:14px;margin:10px 0 0}
.sx-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sx-opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:10px;background:#fff;border:1px solid var(--edge);transition:transform .3s,background .3s}
.sx-opt h3{font-weight:700;font-size:19px;letter-spacing:-.02em;margin:0}
.sx-opt p{margin:0;color:var(--text-2);font-size:14.5px}
.sx-opt:hover{transform:translateY(-2px)}
.sx-opt:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.sx-opt.go{background:var(--forest);border-color:var(--forest);color:#fff}
.sx-opt.go p{color:rgba(234,247,236,.88)}
.sx-opt.go:hover{background:var(--deep)}
/* an option that is not available yet stays readable and says why */
.sx-opt[aria-disabled="true"]{cursor:not-allowed;background:#fff;border:1px dashed var(--line-2);color:var(--text-2);transform:none}
.sx-opt[aria-disabled="true"] h3,.sx-opt[aria-disabled="true"] p{color:var(--text-2)}
@media(max-width:760px){.sx-choice{grid-template-columns:1fr}}

/* the rail card: this page */
.sx-card{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.sx-pagehead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sx-st{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2);font-weight:500}
.sx-st small{color:var(--text-3);font-weight:400}
.sx-jump{font-size:13px}
.sx-lockline{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:13.5px;color:var(--text-2);background:var(--ground);border-radius:8px;padding:10px 12px}
.sx-lockline .sx-sd{margin-top:1px}
.sx-sub{display:flex;flex-direction:column;padding-top:16px;border-top:1px solid var(--edge)}
.sx-sub .sx-ph{margin-bottom:6px}
.sx-q{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--edge);transition:background .4s}
.sx-sub .sx-ph + .sx-q{border-top:0;padding-top:4px}
.sx-q.sx-flash{background:rgba(184,105,46,.08)}
.sx-qn{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:700 12px/1 var(--arch);color:#fff;background:var(--amber-t)}
.sx-qn:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-q.done .sx-qn{background:var(--done-t)}
.sx-qb{min-width:0;display:flex;flex-direction:column;gap:9px}
.sx-qt{font-weight:600;font-size:14.5px;letter-spacing:-.008em;line-height:1.4;text-wrap:pretty}
.sx-qc{font-size:12.5px;color:var(--text-3);margin-top:-4px}
.sx-asked{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2)}
.sx-ans{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text);background:var(--ground);border-radius:8px;padding:10px 12px;white-space:pre-line}
.sx-ans small{color:var(--text-3);margin-left:4px}
.sx-ans .sx-sd{margin-top:1px}
.sx-chgans{align-self:flex-start}
.sx-form,.sx-nq{display:flex;flex-direction:column;gap:8px}
.sx-form textarea,.sx-nq textarea{width:100%;font:400 14px/1.5 var(--arch);border:1px solid var(--line-2);border-radius:6px;padding:9px 11px;resize:vertical;min-height:72px;background:#fff}
.sx-form textarea:focus,.sx-nq textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(63,187,99,.18)}
.sx-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sx-cp{padding:12px 16px 16px;border-radius:10px;background:radial-gradient(120% 90% at 0% 0%,rgba(155,235,88,.14),rgba(155,235,88,0) 60%),#fff;box-shadow:inset 0 0 0 1px rgba(63,187,99,.24);display:flex;flex-direction:column;gap:10px}
.sx-cp .cp-head{margin-bottom:0}
.sx-cp .cp-p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text);text-wrap:pretty}
.sx-src{margin:-4px 0 0;font-size:12px;color:var(--text-3)}
.sx-chg{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px solid var(--edge)}
.sx-sub .sx-ph + .sx-chg,.sx-loose .sx-ph + .sx-chg{border-top:0;padding-top:4px}
.sx-chg .said{font-size:13.5px;color:var(--text-2);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.sx-chg .said b,.sx-chg .sx-show{font-weight:600;color:var(--text)}
.sx-chg .sx-show{padding:0;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.sx-chg .sx-show:hover{color:var(--deep)}
.sx-chg .was{font-size:13.5px;color:var(--text-3)}
.sx-chg .now{font-size:14.5px;font-weight:600;letter-spacing:-.008em;color:var(--text);text-wrap:pretty}
.sx-chg .was .lbl,.sx-chg .now .lbl{display:block;font-size:9.5px;margin-bottom:3px;font-weight:500}
.sx-chg .was .lbl{color:var(--text-3)}
.sx-chg .now .lbl{color:var(--deep)}
.sx-chg .vline{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--done-t);border-radius:4px}
.sx-chg .vline:focus{outline:none}
.sx-chg.v-no .vline{color:var(--amber-t)}
.sx-chg .vline .lnk{font-weight:500}
.sx-foot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--edge)}

/* ask someone: a native modal dialog */
.sx-dlg{width:min(540px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;overflow:auto;border-radius:12px;background:var(--ground);color:var(--text);box-shadow:0 30px 70px rgba(32,30,29,.25)}
.sx-dlg::backdrop{background:rgba(32,30,29,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sx-dlg .eyebrow{color:var(--deep);margin:0;display:inline-flex;align-items:center;gap:12px;font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.sx-dlg .eyebrow i{width:26px;height:2px;background:linear-gradient(45deg,var(--live),var(--lime));display:block}
.sx-dlg-h{padding:28px 28px 20px;display:flex;flex-direction:column;gap:10px}
.sx-dlg-h h2{font-weight:700;font-size:22px;letter-spacing:-.026em;line-height:1.2;margin:0;text-wrap:pretty}
.sx-dlg-h p{margin:0;color:var(--text-2);font-size:14px}
.sx-dlg-b{padding:0 28px 22px;margin:0;border:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.sx-person{display:grid;grid-template-columns:32px minmax(0,1fr) 22px;gap:14px;align-items:center;padding:12px 16px;border-radius:8px;background:#fff;border:1px solid var(--edge);cursor:pointer;position:relative;transition:box-shadow .2s,border-color .2s}
.sx-person .sx-av{width:32px;height:32px;font-size:10.5px}
.sx-person .sx-av.add{font-size:20px;font-weight:300}
.sx-person b{display:block;font-weight:700;font-size:14.5px;letter-spacing:-.01em;line-height:1.3}
.sx-person small{display:block;color:var(--text-3);font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
.sx-person .tick{display:grid;place-items:center}
.sx-person:hover{border-color:rgba(30,127,92,.3)}
.sx-person.on{border-color:transparent;box-shadow:0 0 0 2px var(--forest)}
.sx-person input{position:absolute;opacity:0;pointer-events:none}
.sx-person:has(input:focus-visible){outline:2px solid var(--deep);outline-offset:2px}
.sx-addf{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;margin-top:2px;border-radius:8px;background:#fff;border:1px solid var(--edge)}
.sx-addf .fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.sx-addf .fld.full{grid-column:1/-1}
.sx-addf label{font-size:12.5px;font-weight:500;color:var(--text-2)}
.sx-addf input,.sx-addf select{width:100%;font:400 14px/1.5 var(--arch);color:var(--text);border:1px solid var(--line-2);border-radius:6px;padding:9px 11px;background:#fff;min-height:42px}
.sx-addf select{appearance:none;-webkit-appearance:none;padding-right:36px;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 13px center}
.sx-addf input:focus,.sx-addf select:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(63,187,99,.18)}
.sx-addf .hint{font-size:12px;color:var(--text-3)}
.sx-err{margin:4px 0 0;color:#B3261E;font-size:13.5px}
.sx-dlg-ft{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 28px 22px;background:var(--ground-2)}
.sx-dlg-ft .who-to{margin-right:auto;font-size:12.5px;color:var(--text-3)}
.sx-dlg-done{padding:32px 28px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.sx-dlg-done .sx-sd{width:28px;height:28px}
.sx-dlg-done h2{font-weight:700;font-size:22px;letter-spacing:-.026em;margin:0}
.sx-dlg-done h2:focus{outline:none}
.sx-dlg-done p{margin:0;color:var(--text-2);font-size:14px}

/* between 1041 and 1100 the comp and the rail still sit side by side in page mode */
@media(max-width:1100px) and (min-width:1041px){
  body.wide.sx-page .studio{grid-template-columns:minmax(0,1fr) 340px}
  body.wide.sx-page .studio .frame{position:sticky;top:96px}
  body.wide.sx-page .studio .frame iframe{height:max(560px,calc(100vh - 220px))}
}
/* phones and tablets: the bar shrinks to the pager and stays in reach while the comp and the rail scroll past */
@media(max-width:1040px){
  body.sx-page .sx{position:sticky;top:64px;z-index:20}
  body.sx-page .sx .sx-bar{box-shadow:var(--sh-md)}
}
@media(max-width:860px){
  .sx-bar{padding:10px 12px}
  .sx-bar > .sx-sp{display:none}
  .sx-lock{order:0}
  #sxFin{order:1;margin-left:auto}
  .sx-ctx{order:2;flex-basis:100%;padding-left:0;box-shadow:none}
  .sx-prog{order:3;min-width:0;flex-basis:100%}
  .sx-steps{order:4}
  .sx-steps .sx-where{flex:1;max-width:none}
  body.sx-page .sx .sx-ctx,body.sx-page .sx .sx-prog{display:none}
}
@media(max-width:760px){
  .sx-next{grid-template-columns:auto minmax(0,1fr);gap:6px 14px;padding:18px}
  .sx-next .gnum{font-size:40px;align-self:start}
  .sx-next > div:last-of-type{grid-column:1/-1;margin-top:8px}
  .sx-next .btn{width:100%}
}
@media(max-width:520px){.sx-addf{grid-template-columns:1fr}.sx-dlg-ft .who-to{display:none}.sx-dlg-h,.sx-dlg-b{padding-left:20px;padding-right:20px}.sx-dlg-ft{padding:14px 20px 18px}}
/* touch: full-size targets and 16px fields so iOS does not zoom */
@media(pointer:coarse){
  .sx-ar{width:44px;height:44px}
  .sx-qn::after{content:'';position:absolute;inset:-8px}
  .sx .lnk,.sx-card .lnk{min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
  .sx-form textarea,.sx-nq textarea,.sx-addf input,.sx-addf select{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .sx *,.sx-peek{transition:none!important}
  .sx-pg:hover,.sx-opt:hover{transform:none}
}

/* while Studio is open the deliverable header shrinks to its title and status; the Studio bar carries the progress */
body.sx-on .vhead{margin-bottom:14px;align-items:center}
body.sx-on .vhead h1{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.024em;margin-bottom:6px}
body.sx-on .vhead .stage{display:none}
body.sx-on .band-k{margin-bottom:8px}

/* sent back: done for this round, and coming back changed */
.sx-pg.back{background:rgba(255,255,255,.55);border-color:rgba(143,78,30,.22)}
.sx-pg.back .nm{color:var(--text-2);font-weight:600}
.sx-pg.back .st{color:var(--amber-t);font-weight:500}


/* who holds what: the actions sit at the end of each row */
.sx-ask .sx-acts{flex:none}
@media(max-width:620px){.sx-ask{flex-wrap:wrap}.sx-ask .sx-acts{width:100%;padding-left:40px}}

/* Assigned: one card per person; "For you" first, then what the reviewer handed out */
.sx-asgs{display:flex;flex-direction:column;gap:12px}
.sx-h2{font-weight:700;font-size:18px;letter-spacing:-.018em;margin:4px 0 0}
.sx-asg{background:#fff;border:1px solid var(--edge);border-radius:10px;padding:18px 22px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:start}
.sx-asg.closed{background:rgba(255,255,255,.55)}
.sx-asg .who b{display:block;font-weight:700;font-size:16px;letter-spacing:-.014em}
.sx-asg .who small{display:block;color:var(--text-3);font-size:13px}
.sx-asg ul{grid-column:2/-1;list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.sx-asg li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--edge);font-size:14px}
.sx-asg li small{display:block;color:var(--text-3);font-size:12.5px}
.sx-asg .sx-acts{justify-content:flex-end}
.sx-who-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:14px;color:var(--text-2)}
.sx-who-line .sx-av{margin-right:-6px;box-shadow:0 0 0 2px var(--ground)}
.sx-who-line span:not(.sx-av){margin-left:6px}
.sx-who-line.for{padding:12px 16px;border-radius:10px;background:#fff;border:1px solid rgba(184,105,46,.38);color:var(--text)}
.sx-who-line.for span{margin-left:0}
@media(max-width:700px){.sx-asg{grid-template-columns:auto minmax(0,1fr)}.sx-asg .sx-acts{grid-column:1/-1;justify-content:flex-start}.sx-asg ul{grid-column:1/-1}}

/* site-wide rules: sentences the reviewer finishes */
.sx-sw-sub{margin:0 0 4px;color:var(--text-2);font-size:14px}
.sx-rules{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column}
.sx-rules li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--edge);font-size:14.5px;color:var(--text)}
.sx-rules li:first-child{border-top:0;padding-top:2px}
.sx-rules li small{display:block;color:var(--text-3);font-size:12.5px;margin-top:2px}
.sx-rules q{font-weight:600;quotes:'\201C' '\201D'}
.sx-sw-i{display:block;color:var(--deep);margin-top:2px}
.sx-sw-f{display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px solid var(--edge)}
.sx-sw-tabs{display:flex;flex-wrap:wrap;gap:2px 4px}
.sx-sw-tab{all:unset;cursor:pointer;position:relative;padding:8px 10px;font:500 13px/1 var(--arch);color:var(--text-2);border-radius:4px}
.sx-sw-tab::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:2px;background:linear-gradient(45deg,var(--live),var(--lime));transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sx-sw-tab[aria-checked="true"]{color:var(--forest);font-weight:600}
.sx-sw-tab[aria-checked="true"]::after{transform:scaleX(1)}
.sx-sw-tab:hover{color:var(--forest)}
.sx-sw-tab:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-sw-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:15px;color:var(--text)}
.sx-sw-line label,.sx-sw-line span{font-weight:600}
.sx-sw-line input{flex:1 1 180px;min-width:0;font:400 14.5px/1.4 var(--arch);color:var(--text);border:0;border-bottom:1.5px solid var(--line-2);border-radius:0;background:transparent;padding:6px 2px}
.sx-sw-line input:focus{outline:none;border-bottom-color:var(--forest)}
.sx-sw-line textarea{width:100%;font:400 14px/1.5 var(--arch);border:1px solid var(--line-2);border-radius:6px;padding:9px 11px;resize:vertical;background:#fff}
.sx-sw-line textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(63,187,99,.18)}
.sx-sw-hint{font-size:12.5px;color:var(--text-3)}
@media(pointer:coarse){.sx-sw-line input,.sx-sw-line textarea{font-size:16px}.sx-sw-tab{padding:12px 10px}}



/* the round pull-down sits in the title line */
.sx-ctx2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--text-3)}
.sx-rsel{appearance:none;-webkit-appearance:none;font:500 12.5px/1.2 var(--arch);color:var(--text-2);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231E7F5C' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 2px center;border:0;padding:2px 16px 2px 0;cursor:pointer;max-width:100%}
.sx-rsel:disabled{cursor:default;background-image:none;padding-right:0;opacity:1}
.sx-rsel:focus-visible{outline:2px solid var(--deep);outline-offset:2px;border-radius:3px}
/* page mode: back to the map, previous, the page pull-down, next (Finish on the last page) */
.sx-back{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 6px;border-radius:6px;font:500 13px/1 var(--arch);color:var(--text-2)}
.sx-back:hover{color:var(--forest);background:rgba(30,127,92,.05)}
.sx-back:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-psel{flex:1 1 240px;min-width:0;max-width:560px;appearance:none;-webkit-appearance:none;font:500 14px/1.3 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 12px center;border:1px solid var(--line-2);border-radius:6px;padding:8px 34px 8px 12px;min-height:36px;cursor:pointer;text-overflow:ellipsis}
.sx-psel:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(63,187,99,.18)}
.sx-fin{white-space:nowrap}
@media(max-width:860px){.sx-back span{display:none}}
@media(pointer:coarse){.sx-psel{min-height:44px;font-size:16px}.sx-back{min-height:44px}}

/* the process: three numbered stages joined by a line that fills as the reviewer moves through them */
.sx-stages{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:0}
.sx-stages li{display:flex;align-items:center}
.sx-stages li + li::before{content:'';width:clamp(18px,3vw,44px);height:2px;margin:0 6px;background:var(--line);border-radius:1px}
.sx-stages li.done + li::before,.sx-stages li.done + li.on::before{background:linear-gradient(45deg,var(--live),var(--lime))}
.sx-stages button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:6px 6px;border-radius:6px;font:500 13.5px/1 var(--arch);color:var(--text-3)}
.sx-stages button:hover{color:var(--forest)}
.sx-stages button:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-sn{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font:700 11.5px/1 var(--arch);color:var(--text-3);box-shadow:inset 0 0 0 1.5px var(--line-2);font-variant-numeric:tabular-nums}
.sx-sl em{font-style:normal;font-weight:500;color:var(--text-3);margin-left:4px;font-variant-numeric:tabular-nums}
.sx-stages li.on button{color:var(--forest);font-weight:600}
.sx-stages li.on .sx-sn{background:var(--forest);color:#fff;box-shadow:none}
.sx-stages li.done .sx-sn{background:linear-gradient(135deg,var(--deep),var(--live));color:#fff;box-shadow:none}
/* page row: step counter, jump-to pull-down, the dash track, one forward action */
.sx-stepno{font-size:13.5px;color:var(--text-2);white-space:nowrap}
.sx-stepno b{color:var(--forest);font-variant-numeric:tabular-nums}
.sx-steps .sx-psel{flex:0 1 380px;font-weight:500;color:var(--text-2);background-color:transparent;border-color:var(--edge)}
.sx-steps .sx-sp{flex:1}
#sxFwd{display:flex}
@media(max-width:860px){
  .sx-stages{order:2;flex-basis:100%}
}
@media(max-width:480px){.sx-sl em{display:none}.sx-stages li + li::before{width:14px}}

/* the mini map: the map stays on screen while reviewing pages */
.sx-mini{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin-top:12px;padding:14px 18px 16px;background:#fff;border:1px solid var(--edge);border-radius:12px}
.sx-mini[hidden]{display:none}
.sx-mini-h{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:12.5px;color:var(--text-3)}
.sx-mini-h b{color:var(--text);font-weight:600}
.sx-mini-s{display:flex;flex-direction:column;gap:6px}
.sx-mini-s .lbl{font-size:9.5px;letter-spacing:.2em;color:var(--deep);white-space:nowrap}
.sx-mini-r{display:flex;gap:4px}
.sx-mp{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;width:30px;height:30px;border-radius:7px;font:600 11px/1 var(--arch);font-variant-numeric:tabular-nums;color:var(--text-2);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .2s}
.sx-mp.q{box-shadow:inset 0 0 0 1.5px var(--amber);color:var(--amber-t)}
.sx-mp.p{box-shadow:inset 0 0 0 1.5px var(--sky);color:var(--sky)}
.sx-mp.d{background:#E7F3EA;color:#1F6B37;box-shadow:none}
.sx-mp.b{background:#F5E8DC;color:var(--amber-t);box-shadow:none}
.sx-mp.l{background:var(--ground);color:var(--text-3);box-shadow:none}
.sx-mp.cur{background:var(--forest);color:#fff;box-shadow:0 0 0 3px rgba(63,187,99,.35)}
.sx-mp:hover{transform:translateY(-2px)}
.sx-mp:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

/* ---- arrangement v8 (16 Oct 2026): the map first and whole, one sticky page bar, Assigned as a drawer ---- */
#sxCtx{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.sx-dl{color:var(--deep);text-decoration:none;font-weight:500}
.sx-dl::before{content:'\2039';margin-right:5px}
.sx-dl:hover{color:var(--forest)}
.sx-vis.on{color:var(--done-t);font-weight:500}
.sx-vis-b{font-size:12.5px}

/* the map stage: the headline and Up next share the first block; the key heads the map; who and rules sit under it */
.sx-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:20px 44px;align-items:end}
.sx-lead.solo{grid-template-columns:minmax(0,1fr)}
.sx-lead h1{font-weight:700;font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.032em;margin:0 0 10px;text-wrap:balance}
.sx-lead h1:focus{outline:none}
.sx-lead .sub{margin:0;max-width:62ch}
.sx-lead .sx-next{grid-template-columns:auto minmax(0,1fr);gap:14px 22px;padding:20px 24px}
.sx-lead .sx-next .gnum{font-size:52px;align-self:start;margin-top:4px}
.sx-lead .sx-next > div:last-of-type{grid-column:2}
.sx-lead .sx-next .sx-nthumb{grid-column:1/-1}
@media(max-width:960px){.sx-lead{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.sx-lead .sx-next{grid-template-columns:minmax(0,1fr);gap:8px}.sx-lead .sx-next .gnum{display:none}.sx-lead .sx-next > div:last-of-type{grid-column:1;margin-top:8px}}
.sx-mapblock{display:flex;flex-direction:column;gap:20px}
.sx-maphead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sx-maphead .eyebrow{margin:0}
.sx-maphead .sx-key{padding:0}
.sx-lockrow{display:flex;flex-wrap:wrap;gap:6px}
.sx-tiles + .sx-lockrow{margin-top:10px}
.sx-lk{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border-radius:7px;background:rgba(255,255,255,.42);font-size:13px;color:var(--text-3);transition:background .2s,color .2s}
.sx-lk:hover{background:#fff;color:var(--text-2)}
.sx-lk:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-lk .no{font-weight:600;font-size:11px;letter-spacing:.06em;color:#A29C97;font-variant-numeric:tabular-nums}
.sx-lk .sx-sd{width:16px;height:16px}
.sx-sec.quiet .sx-sec-h{padding-top:2px}
.sx-lines{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sx-lines > .sx-who-line,.sx-line{padding:14px 0;border-bottom:1px solid var(--line)}
.sx-lines > .sx-who-line.for{margin:12px 0;padding:12px 16px}
.sx-who-line b{font-weight:600;color:var(--text)}
.sx-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:14px;color:var(--text-2)}
.sx-line b{font-weight:600;color:var(--text)}
.sx-line .ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--deep)}
.sx-line .ic svg{display:block}
.sx-lines .sx-sw{margin:14px 0 16px}

/* page mode: one bar with prev, the page pull-down as the title, next and the forward action, then the map */
.sx-steps{gap:10px}
.sx-ar{font-size:0;width:36px;height:36px;color:var(--forest)}
.sx-ar svg{display:block}
.sx-ar[disabled]{opacity:.35;cursor:default;border-color:var(--line-2);color:var(--text-2)}
.sx-steps .sx-psel{flex:0 1 auto;max-width:100%;min-height:0;font:700 clamp(17px,1.8vw,21px)/1.25 var(--arch);letter-spacing:-.02em;color:var(--text);background:transparent 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 6px center;border:0;border-radius:6px;padding:4px 30px 4px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-steps .sx-psel:hover{color:var(--forest)}
.sx-steps .sx-psel:focus{box-shadow:none;outline:2px solid var(--deep);outline-offset:2px}
#sxFwd .btn{white-space:nowrap}
.sx-bar .sx-mini{flex-basis:100%;min-width:0;margin:0;padding:12px 0 2px;background:none;border:0;border-radius:0;box-shadow:inset 0 1px 0 var(--edge);gap:12px 18px;align-items:flex-end}
.sx-mini-s{gap:9px;min-width:0}
.sx-mini-s .lbl{display:block;white-space:nowrap;font-size:9.5px;letter-spacing:.15em;padding-bottom:7px;color:var(--text-3);background:linear-gradient(45deg,var(--live),var(--lime)) left bottom/18px 2px no-repeat,linear-gradient(var(--line-2),var(--line-2)) left bottom/100% 1px no-repeat}
.sx-mini-s.on .lbl{color:var(--deep);font-weight:600;background:linear-gradient(45deg,var(--live),var(--lime)) left bottom/100% 2px no-repeat}
.sx-mini-r{position:relative;gap:5px;align-items:center;min-height:26px}
.sx-mini-r::before{content:'';position:absolute;left:-10px;right:-10px;top:50%;height:2px;margin-top:-1px;background:var(--line);border-radius:1px}
.sx-mini-s.f .sx-mini-r::before{left:0}
.sx-mini-s.z .sx-mini-r::before{right:0}
.sx-mp{position:relative;z-index:1;width:26px;height:26px;font-size:10.5px}
.sx-mp.l.sm{width:11px;height:11px;border-radius:3px;font-size:0;background:#E2DEDA}
.sx-mini-x{all:unset;cursor:pointer;margin-left:auto;align-self:flex-end;padding:4px 0;font-size:12.5px;font-weight:600;color:var(--deep);white-space:nowrap;border-radius:4px}
.sx-mini-x:hover{color:var(--forest)}
.sx-mini-x:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-mini-x .smx{display:none}
.sx-mini.ro{margin:0;padding:16px 20px 18px;flex-wrap:wrap;gap:12px 18px}
.sx-mini.ro .sx-mini-h{display:flex}
.sx-mini.ro .sx-mp{cursor:default}
.sx-mini.ro .sx-mp:hover{transform:none}
.sx-still-go{padding-top:14px;border-top:1px solid var(--edge)}

/* the rail: one header per section; its foot holds Reopen and the jumps */
.sx-foot{justify-content:space-between;align-items:center}
.sx-foot .sx-jumps{display:flex;gap:14px;margin-left:auto}

/* the page bar stays on screen while the comp and the rail scroll; the comp sits below it */
@media(min-width:1041px){
  body.sx-page .sx{position:sticky;top:76px;z-index:20}
  body.sx-page .sx .sx-bar{box-shadow:0 1px 0 var(--edge),0 14px 30px -20px rgba(32,30,29,.3)}
}
@media(min-width:1101px){
  body.sx-page .studio .frame{top:calc(var(--sxH,190px) + 96px)}
  body.sx-page .studio .frame iframe{height:max(420px,calc(100vh - var(--sxH,190px) - 170px))}
}

/* Assigned: a drawer over the map */
.sx-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(560px,100%);height:100dvh;max-height:none;max-width:100%;padding:0;border:0;background:var(--ground);color:var(--text);box-shadow:-20px 0 60px rgba(32,30,29,.18);overflow:hidden}
.sx-drawer::backdrop{background:rgba(32,30,29,.28)}
.sx-dr-in{height:100%;overflow:auto;display:flex;flex-direction:column;gap:16px;padding:calc(24px + env(safe-area-inset-top,0px)) clamp(16px,3vw,28px) calc(32px + env(safe-area-inset-bottom,0px))}
.sx-drawer .lbl{font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.sx-drawer .eyebrow{color:var(--deep);margin:0 0 10px;display:inline-flex;align-items:center;gap:12px}
.sx-drawer .eyebrow i{width:26px;height:2px;background:linear-gradient(45deg,var(--live),var(--lime));display:block}
.sx-dh{display:flex;align-items:flex-start;gap:16px}
.sx-dh h2{font-weight:700;font-size:23px;letter-spacing:-.026em;line-height:1.18;margin:0;text-wrap:balance}
.sx-dh h2:focus{outline:none}
.sx-dh .sub{margin:8px 0 0;color:var(--text-2);font-size:14px}
.sx-x{all:unset;box-sizing:border-box;cursor:pointer;flex:none;margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:6px;border:1px solid var(--line-2);background:#fff;color:var(--text)}
.sx-x:hover{border-color:var(--forest);color:var(--forest)}
.sx-x:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-drawer .sx-asg{grid-template-columns:auto minmax(0,1fr);padding:16px 18px}
.sx-drawer .sx-asg .sx-acts{grid-column:1/-1;justify-content:flex-start}
.sx-drawer .sx-asg ul{grid-column:1/-1}

/* phones: in page mode the bar is just the pager and a row of status dots; the rail's work comes before the comp */
@media(max-width:860px){
  body.sx-page .sx .sx-lock,body.sx-page .sx .sx-stages{display:none}
  .sx-steps{flex-wrap:nowrap;gap:8px}
  .sx-steps .sx-psel{flex:1 1 auto;width:auto;font-size:16px}
  #sxFwd .lg{display:none}
  .sx-bar .sx-mini{flex-wrap:nowrap;gap:7px;padding-top:10px;overflow:hidden;align-items:center}
  .sx-bar .sx-mini-s{gap:0;flex:0 1 auto}
  .sx-bar .sx-mini-s .lbl{display:none}
  .sx-bar .sx-mini-r{gap:4px;min-height:10px}
  .sx-bar .sx-mini-r::before{height:1px;margin-top:0}
  .sx-bar .sx-mp{flex:0 1 8px;min-width:4px;width:8px;height:8px;border-radius:50%;font-size:0}
  .sx-bar .sx-mp.cur{flex:none;width:18px;border-radius:4px;box-shadow:0 0 0 2px rgba(63,187,99,.35)}
  .sx-bar .sx-mp.l.sm{width:6px;height:6px}
  .sx-mini-x{flex:none}
  .sx-mini-x .lgx{display:none}
  .sx-mini-x .smx{display:inline}
  .sx-mini.ro{flex-wrap:wrap}
}
@media(max-width:760px){
  body.sx-page .studio{display:flex;flex-direction:column;gap:16px}
  body.sx-page .studio .rrail{display:contents}
  body.sx-page .studio #sxCard{margin-bottom:0}
  body.sx-page .studio .frame iframe{height:60vh}
}
.sx-ar{flex:none}
.sx-card > .sx-sub:first-child{border-top:0;padding-top:0}
@media(max-width:860px){
  .sx-bar .sx-mini{order:5}
  body.sx-page .sx-steps{box-shadow:none;padding-top:0;margin-top:0}
}
/* full screen and focus mode: the comp fills its box; the page-mode height above is for the normal page only */
body.sx-page .studio:fullscreen .frame iframe,body.sx-page.focusmode .studio .frame iframe{height:100%}
body.sx-page .studio:fullscreen .frame,body.sx-page.focusmode .studio .frame{position:static;top:auto}

/* ---- workspace, step 1 (17 Oct 2026): page mode fills the screen; one slim bar; the comp edge to edge; the rail is a
   drawer over the comp's right edge, opened from a strip of counters; full screen keeps the bar and the map ---- */
.sx-strip{display:none}
@media(min-width:1101px){
  body.sx-page{overflow:hidden}
  body.sx-page .mast,body.sx-page footer,body.sx-page .vhead,body.sx-page .band-k{display:none}
  body.sx-page main{padding:0}
  body.sx-page main > .wrap{max-width:none;padding-inline:8px}
  body.sx-page .portal.viewer{gap:0}
  body.sx-page .pane{gap:8px;padding:8px 0 0;height:100dvh}
  body.sx-page .sx{position:static;margin:0}
  /* one slim bar: the mark, prev, the page, next, the map as a dot strip, the forward action */
  body.sx-page .sx .sx-bar{flex-wrap:nowrap;gap:10px;min-height:52px;padding:6px 10px 6px 12px;box-shadow:none}
  body.sx-page .sx .sx-lock-t,body.sx-page .sx .sx-ctx,body.sx-page .sx .sx-stages,body.sx-page .sx .sx-bar > .sx-sp{display:none}
  body.sx-page .sx .sx-lock .sx-mk{width:28px;height:28px}
  body.sx-page .sx .sx-steps{display:contents}
  body.sx-page .sx .sx-steps > .sx-sp{display:none}
  body.sx-page .sx [data-sx="prev"]{order:1}
  body.sx-page .sx .sx-psel{order:2;font-size:16px;flex:0 1 auto;max-width:340px}
  body.sx-page .sx [data-sx="next"]{order:3}
  body.sx-page .sx .sx-bar .sx-mini{order:4;flex:1 1 auto;min-width:0;flex-basis:auto;flex-wrap:nowrap;align-items:center;gap:7px;padding:0 0 0 10px;margin-left:4px;box-shadow:inset 1px 0 0 var(--line);overflow:hidden}
  body.sx-page .sx #sxFwd{order:6}
  body.sx-page .sx .sx-bar .sx-mini-s{gap:0;flex:0 1 auto}
  body.sx-page .sx .sx-bar .sx-mini-s .lbl{display:none}
  body.sx-page .sx .sx-bar .sx-mini-r{gap:4px;min-height:12px}
  body.sx-page .sx .sx-bar .sx-mini-r::before{height:1px;margin-top:0}
  body.sx-page .sx .sx-bar .sx-mp{flex:0 1 10px;min-width:5px;width:10px;height:10px;border-radius:50%;font-size:0}
  body.sx-page .sx .sx-bar .sx-mp.cur{flex:none;width:22px;border-radius:5px;box-shadow:0 0 0 2px rgba(63,187,99,.35)}
  body.sx-page .sx .sx-bar .sx-mp.l.sm{width:7px;height:7px}
  body.sx-page .sx .sx-bar .sx-mini-x{align-self:center;padding:0 2px}
  body.sx-page .sx .sx-bar .sx-mini-x .lgx{display:none}
  body.sx-page .sx .sx-bar .sx-mini-x .smx{display:inline}
  /* the comp takes the rest of the screen; the rail is a drawer; the strip sits on the right edge */
  body.sx-page .studio,body.sx-page.wide .studio{grid-template-columns:minmax(0,1fr) 48px;gap:8px;flex:1 1 auto;min-height:0;height:auto;align-items:stretch;padding-bottom:8px}
  body.sx-page .studio .frame{position:static;top:auto;display:flex;flex-direction:column;min-height:0;height:100%}
  body.sx-page .studio .frame .bar{padding:6px 10px;gap:8px}
  body.sx-page .studio #preview{flex:1;min-height:0}
  body.sx-page .studio .frame iframe,body.sx-page .studio .frame img{height:100%;max-height:none}
  body.sx-page .sx-strip{display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:6px 0;background:#fff;border:1px solid var(--edge);border-radius:10px}
  body.sx-page .studio .rrail{position:fixed;z-index:30;top:calc(var(--sxH,60px) + 16px);right:64px;bottom:16px;width:min(400px,40vw);overflow:auto;overscroll-behavior:contain;padding:0 2px 0 0;border-radius:12px;background:var(--ground);box-shadow:-18px 0 50px -20px rgba(32,30,29,.35),0 0 0 1px var(--edge);transform:translateX(calc(100% + 80px));visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s}
  body.sx-page.sx-railopen .studio .rrail{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s}
  body.sx-page .studio .rrail .card{border-radius:10px}
  body.sx-page .studio #notesBtn{display:none}
  body.sx-page.focusmode .studio,body.sx-page.focusmode.wide .studio{position:static;inset:auto;padding:0 0 8px;background:none;z-index:auto}
  body.sx-page.focusmode .studio .rrail{display:block}
}
.sx-sb{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;margin:0 4px;border-radius:8px;color:var(--text-2);font:600 11px/1 var(--arch);font-variant-numeric:tabular-nums}
.sx-sb .ic{display:grid;place-items:center;width:20px;height:20px;color:var(--text-2)}
.sx-sb .ic svg{display:block}
.sx-sb:hover{background:rgba(30,127,92,.06);color:var(--forest)}
.sx-sb[aria-expanded="true"]{background:rgba(30,127,92,.1);color:var(--forest)}
.sx-sb.hot b{color:var(--amber-t)}
.sx-sb.tog{margin-top:auto;color:var(--forest)}
.sx-sb:focus-visible{outline:2px solid var(--deep);outline-offset:1px}
@media(prefers-reduced-motion:reduce){body.sx-page .studio .rrail{transition:none}}

/* phones and focus mode: the rail is never laid over the comp, and full screen shows the comp */
body.sx-page.focusmode .studio .rrail,body.sx-page .studio:fullscreen .rrail{display:none}

/* the map: one tile for every page, in site order; locked pages are the same tile, quieter */
.sx-tiles{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px;grid-auto-rows:86px}
.sx-pg{min-height:0;height:86px;padding:11px 12px 12px;gap:5px}
.sx-pg .top{gap:6px}
.sx-pg .end{gap:6px;min-width:0}
.sx-pg .sl{font-size:11.5px;font-weight:500;color:var(--text-3);white-space:nowrap}
.sx-pg.todo .sl{color:var(--amber-t)}
.sx-pg.wip .sl{color:var(--sky)}
.sx-pg.done .sl{color:var(--done-t)}
.sx-pg.back .sl{color:var(--amber-t)}
.sx-pg .nm{font-size:13.5px;font-weight:600;line-height:1.3;padding-bottom:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sx-pg .st{display:none}
.sx-pg .sx-sd{width:16px;height:16px}
.sx-pg .sx-av.sm{width:18px;height:18px;font-size:8px}
/* every page is the same card: same size, border, marker and hover; the status is the marker and its word */
.sx-pg,.sx-pg.done,.sx-pg.lock,.sx-pg.back,.sx-pg.new,.sx-pg.wip{background:#fff;border:1px solid var(--edge)}
.sx-pg.todo{border-color:rgba(184,105,46,.38)}
.sx-pg.here{border-color:transparent}
.sx-pg.done .nm,.sx-pg.lock .nm{color:var(--text-2);font-weight:600}
.sx-pg.lock .no{color:var(--text-3)}
.sx-pg.lock .sl{color:var(--text-3)}
.sx-pg.lock:hover,.sx-pg.done:hover{background:#fff}
.sx-sec{grid-template-columns:160px minmax(0,1fr)}
.sx-sec-h{padding-top:10px}
.sx-sec.quiet .sx-sec-h{padding-top:10px}
@media(max-width:860px){.sx-sec{grid-template-columns:1fr}.sx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1101px){
  /* the staff bar's reserved space is not needed in the workspace; the bar itself sits small in the corner */
  body.sx-page:has(.asbar) .pane{padding-bottom:0}
  body.sx-page .asbar{left:auto;right:72px;bottom:16px;transform:none;padding:6px 6px 6px 12px;font-size:12px}
}

/* ---- client feedback, 17 Oct 2026 (Wes, Revision 2): the panel docks beside the comp instead of covering it; a
   clearer page bar with strong status dots; note numbers that read as buttons; photo slots; Ask a reviewer; take a
   sent round back ---- */
:root{--st-new:#8E8781;--st-lock:#C9C2BC}

/* the panel docks: opening it narrows the comp, so nothing on the page is hidden under it and the marks stay put */
@media(min-width:1101px){
  body.sx-page .studio,body.sx-page.wide .studio{grid-template-columns:minmax(0,1fr) 48px}
  body.sx-page.sx-railopen .studio,body.sx-page.sx-railopen.wide .studio{grid-template-columns:minmax(0,1fr) clamp(320px,24vw,380px) 48px}
  body.sx-page .studio .rrail{position:relative;z-index:auto;top:auto;right:auto;bottom:auto;width:auto;min-height:0;height:100%;display:none;overflow:auto;overscroll-behavior:contain;padding:0 2px 0 0;border-radius:10px;background:transparent;box-shadow:none;transform:none;visibility:visible;transition:none}
  body.sx-page.sx-railopen .studio .rrail{display:block}
  body.sx-page.focusmode.sx-railopen .studio .rrail{display:block}
  body.sx-page .studio .rrail .card{border-color:var(--line)}
}

/* the page bar: white, a firm edge, the whole width; the map's dots spread across it */
@media(min-width:1101px){
  body.sx-page .sx .sx-bar{background:#fff;border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(32,30,29,.06),0 10px 24px -18px rgba(32,30,29,.35);min-height:58px;gap:12px;padding:7px 10px 7px 14px}
  body.sx-page .sx .sx-cnt{order:3}
  body.sx-page .sx .sx-askbar{order:5}
  body.sx-page .sx .sx-bar .sx-mini{order:4;gap:0;padding:0 4px 0 14px;margin-left:2px}
  body.sx-page .sx .sx-bar .sx-mini-s{flex:var(--n,1) 1 0;min-width:0;padding:0 7px}
  body.sx-page .sx .sx-bar .sx-mini-s.f{padding-left:0}
  body.sx-page .sx .sx-bar .sx-mini-r{justify-content:space-between;gap:3px;min-height:24px}
  body.sx-page .sx .sx-bar .sx-mini-r::before{height:2px;margin-top:-1px;background:var(--line-2);left:-7px;right:-7px}
  body.sx-page .sx .sx-bar .sx-mini-s.f .sx-mini-r::before{left:0}
  body.sx-page .sx .sx-bar .sx-mini-s.z .sx-mini-r::before{right:0}
  body.sx-page .sx .sx-bar .sx-mp{flex:none;width:13px;height:13px;min-width:0}
  body.sx-page .sx .sx-bar .sx-mp.l.sm{width:8px;height:8px;border-radius:2px}
  body.sx-page .sx .sx-bar .sx-mp.cur{width:30px;height:22px;border-radius:6px;font-size:10.5px}
  body.sx-page .sx .sx-bar .sx-mini-x{padding:0 0 0 10px;font-size:13px}
}
.sx-cnt{font-size:13px;color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-cnt b{color:var(--text);font-weight:700}
/* dot strip colours (bar and phone): grey ring = not opened, amber = waiting on the reviewer, blue = in progress,
   green with a check = reviewed or accepted, amber ring = sent back, small grey = locked; the current page is a
   numbered pill with a dark outline */
@media(min-width:1101px),(max-width:860px){
.sx-bar .sx-mp{background:#fff;color:transparent;box-shadow:inset 0 0 0 2px var(--st-new)}
.sx-bar .sx-mp.q{background:var(--amber);box-shadow:none}
.sx-bar .sx-mp.p{background:var(--sky);box-shadow:none}
.sx-bar .sx-mp.d{background:var(--done) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.2l1.8 1.8 3.8-4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:none}
.sx-bar .sx-mp.b{background:#fff;box-shadow:inset 0 0 0 3.5px var(--amber)}
.sx-bar .sx-mp.l{background:var(--st-lock);box-shadow:none}
.sx-bar .sx-mp.cur{color:#fff;font-weight:700;background-image:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--text)}
.sx-bar .sx-mp.cur.n{background:#fff;color:var(--text);box-shadow:inset 0 0 0 2px var(--st-new),0 0 0 2px #fff,0 0 0 4px var(--text)}
.sx-bar .sx-mp.cur.b{background:#fff;color:var(--text);box-shadow:inset 0 0 0 2.5px var(--amber),0 0 0 2px #fff,0 0 0 4px var(--text)}
.sx-bar .sx-mp.cur.l{background:#8E8781}
.sx-bar .sx-mp:hover{transform:scale(1.25)}
.sx-bar .sx-mp.cur:hover{transform:none}
}
/* the read-only map on Send, and the numbered squares between phone and desktop, use the same status colours */
.sx-mp.q{box-shadow:inset 0 0 0 2px var(--amber);color:var(--amber-t)}
.sx-mp.p{box-shadow:inset 0 0 0 2px var(--sky);color:var(--sky)}
.sx-mp.d{background:var(--done);color:#fff;box-shadow:none}
.sx-mp.b{background:#fff;color:var(--amber-t);box-shadow:inset 0 0 0 3px var(--amber)}
.sx-mp.n{box-shadow:inset 0 0 0 1.5px var(--st-new)}
.sx-mini:not(.ro) .sx-mp.cur{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--text)}
@media(max-width:860px){
  .sx-bar .sx-mini{gap:5px;padding-top:12px}
  .sx-bar .sx-mini-r{gap:4px;min-height:14px}
  .sx-bar .sx-mp{flex:0 1 11px;min-width:6px;width:11px;height:11px}
  .sx-bar .sx-mp.cur{flex:none;width:24px;height:18px;border-radius:5px;font-size:9.5px}
  .sx-bar .sx-mp.l.sm{width:7px;height:7px}
  .sx-steps .sx-cnt,.sx-steps .sx-askbar{display:none}
}
@media(prefers-reduced-motion:reduce){.sx-bar .sx-mp:hover{transform:none}}

/* Ask a reviewer: in the page bar, on each note, under a page's questions */
.sx-askbar{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;flex:none;min-height:36px;padding:0 12px 0 10px;border-radius:6px;border:1px solid var(--line-2);background:#fff;font:500 13.5px/1 var(--arch);color:var(--forest);white-space:nowrap}
.sx-askbar:hover{border-color:var(--forest);background:rgba(30,127,92,.05)}
.sx-askbar:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-askbar[hidden]{display:none}
.sx-ic{display:block;flex:none}
@media(max-width:1320px) and (min-width:1101px){.sx-askbar{padding:0 9px}.sx-askbar span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.sx-askthis{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:13px;font-weight:500;color:var(--deep);padding:2px 0}
.sx-askq{display:inline-flex;align-items:center;gap:6px}
.sx-askrow{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-2);background:var(--ground);border-radius:8px;padding:9px 11px}
.sx-askrow b{color:var(--text);font-weight:600}
.sx-askrow small{display:block;color:var(--text-3);font-size:12.5px;margin-top:2px}
.sx-rvs{gap:8px}
.sx-rvs .sx-askq{align-self:flex-start;margin-top:4px}
.sx-dlg-q{margin:6px 0 0;padding:10px 12px;border-left:3px solid var(--live);background:#fff;border-radius:0 6px 6px 0;font-size:13.5px;color:var(--text-2)}
.sx-dlg-q b{color:var(--text)}
.sx-dlg-q span{display:block;margin-top:4px;color:var(--text)}
.sx-msg{display:flex;flex-direction:column;gap:6px}
.sx-msg label{font-size:13px;font-weight:600;color:var(--text)}
.sx-msg textarea{width:100%;font:400 14px/1.5 var(--arch);border:1px solid var(--line-2);border-radius:6px;padding:9px 11px;resize:vertical;min-height:76px;background:#fff;color:var(--text)}
.sx-msg textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(63,187,99,.18)}
.sx-lg{font-size:13px;font-weight:600;color:var(--text);padding:0;margin:0 0 6px}
.sx-asg li.rv{grid-template-columns:20px minmax(0,1fr) auto}
.sx-reply{grid-column:2/-1;display:flex;flex-direction:column;gap:8px;padding-top:4px}
.sx-reply textarea{width:100%;font:400 14px/1.5 var(--arch);border:1px solid var(--line-2);border-radius:6px;padding:8px 10px;resize:vertical;background:#fff}
.sx-reply .btn{align-self:flex-start}
@media(pointer:coarse){.sx-msg textarea,.sx-reply textarea{font-size:16px}.sx-askthis{min-height:44px}}

/* note and question numbers: a button that finds the spot on the page, never brown; one pulse when the panel opens */
.sx-chg .said{display:flex;flex-direction:column;align-items:flex-start;gap:7px;-webkit-line-clamp:unset;overflow:visible}
.sx-chg .said .q{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.sx-nb{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:3px 10px 3px 3px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--forest);color:var(--forest);font:600 12.5px/1 var(--arch);transition:background .15s,color .15s}
.sx-nb .pinm{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--forest);color:#fff;font:700 12px/1 var(--arch);font-variant-numeric:tabular-nums}
.sx-nb:hover{background:var(--forest);color:#fff}
.sx-nb:hover .pinm{background:#fff;color:var(--forest)}
.sx-nb:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-nb.static{cursor:default;box-shadow:none;padding-left:0;color:var(--text-2)}
.sx-nb.static .pinm{background:var(--ground-2);color:var(--text-2)}
.sx-nb.static:hover{background:none;color:var(--text-2)}
.sx-qn{background:#fff;color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--forest);transition:background .15s,color .15s}
.sx-qn:hover{background:var(--forest);color:#fff}
.sx-q.done .sx-qn{background:var(--done);color:#fff;box-shadow:none}
.sx-nb.pulse::before,.sx-qn.pulse::before{content:'';position:absolute;inset:0;border-radius:999px;pointer-events:none;animation:sxRing 1.1s ease-out 3}
@keyframes sxRing{0%{box-shadow:0 0 0 0 rgba(63,187,99,.65)}100%{box-shadow:0 0 0 11px rgba(63,187,99,0)}}
@media(prefers-reduced-motion:reduce){.sx-nb.pulse::before,.sx-qn.pulse::before{animation:none;box-shadow:0 0 0 3px rgba(63,187,99,.45)}}
@media(pointer:coarse){.sx-nb{min-height:44px;padding-right:14px}}

/* strip: Studio's own icons, the open counts in amber */
.sx-sb .ic{color:var(--text-2)}
.sx-sb.hot .ic{color:var(--amber-t)}
.sx-sb b{font-size:11.5px}

/* photo slots */
.sx-kind{display:flex;width:fit-content;align-items:center;gap:5px;margin:0 0 7px;padding:3px 8px 3px 6px;border-radius:999px;background:#FBF1E6;color:var(--amber-t);font:600 11px/1 var(--arch);letter-spacing:.02em;vertical-align:1px}
.sx-q.done .sx-kind{background:#E7F3EA;color:var(--done-t)}
.sx-drop{display:flex;align-items:center;gap:12px;padding:16px;border-radius:10px;border:1.5px dashed var(--line-2);background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.sx-drop .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ground);color:var(--forest);flex:none}
.sx-drop b{display:block;font-weight:600;font-size:14.5px;color:var(--forest)}
.sx-drop small{display:block;color:var(--text-3);font-size:12.5px;margin-top:2px}
.sx-drop:hover,.sx-drop.over{border-color:var(--forest);background:rgba(30,127,92,.04)}
.sx-drop:has(input:focus-visible){outline:2px solid var(--deep);outline-offset:2px}
.sx-phhint{margin:-2px 0 0;font-size:12.5px;color:var(--text-3)}
.sx-phsel{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
.sx-phsel b{display:block;font-weight:600;font-size:14px;overflow-wrap:anywhere}
.sx-phsel small{display:block;color:var(--text-3);font-size:12.5px;margin:2px 0 4px}
.sx-phthumb{display:grid;place-items:center;width:72px;height:72px;border-radius:8px;overflow:hidden;background:var(--ground-2);color:var(--text-3);flex:none}
.sx-phthumb img{display:block;width:100%;height:100%;object-fit:cover}
.sx-phans{align-items:center}
.sx-phans .sx-phthumb{width:56px;height:56px}
.sx-phans em{display:block;font-style:normal;color:var(--text-2);margin-top:2px}
.sx-q.photo .sx-qc{margin-top:-4px}

/* take a sent round back */
.sx-takeback{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;border-color:rgba(47,111,176,.3)!important}
.sx-tb-t{display:flex;gap:14px;align-items:flex-start;min-width:0;flex:1 1 320px}
.sx-tb-t .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(47,111,176,.1);color:var(--sky);flex:none}
.sx-tb-t h3{margin:0 0 4px;font-weight:700;font-size:16px;letter-spacing:-.014em}
.sx-tb-t p{margin:0;color:var(--text-2);font-size:14px;max-width:60ch}
.sx-tb-line{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:14px;color:var(--text-2)}
.sx-q .sx-phsel .lnk,.sx-q .sx-acts .lnk,.sx-q .sx-chgans{font-size:13px}
@media(min-width:861px) and (max-width:1100px){.sx-bar .sx-mp.cur{background:var(--forest);color:#fff}}
/* the page bar is solid on every width, so the page never shows through it while it is pinned */
body.sx-page .sx .sx-bar{background:#fff;border-color:var(--line-2)}

/* ---- site questions by topic (18 Oct 2026): every open question on the comp in one view, by topic, a question asked
   in several places listed once with its pages as chips; each topic can go to someone outside with one link ---- */
.sx-qbar{order:5}
.sx-qlink{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px 0 10px;border-radius:6px;border:1px solid var(--line-2);background:#fff;font:500 13.5px/1 var(--arch);color:var(--forest);white-space:nowrap}
.sx-qlink b{font-weight:700;color:var(--amber-t);font-variant-numeric:tabular-nums}
.sx-qlink:hover{border-color:var(--forest);background:rgba(30,127,92,.05)}
.sx-qlink:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-qhead{align-items:flex-end}
.sx-qprog{display:flex;flex-direction:column;gap:8px;min-width:220px;font-size:13.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.sx-qprog b{color:var(--text)}
.sx-qtools{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;margin-top:-8px}
.sx-qtools .btn{display:inline-flex;align-items:center;gap:6px}
.sx-qtools .lnk{font-size:13.5px}
.sx-tps{display:flex;flex-direction:column;gap:12px}
.sx-tp{background:#fff;border:1px solid var(--edge);border-radius:12px}
.sx-tp > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr) minmax(80px,160px) auto 20px;gap:14px;align-items:center;padding:16px 20px;border-radius:12px}
.sx-tp > summary::-webkit-details-marker{display:none}
.sx-tp > summary:hover{background:rgba(30,127,92,.03)}
.sx-tp > summary:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-tp-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#FBF1E6;color:var(--amber-t)}
.sx-tp.done .sx-tp-ic{background:#E7F3EA;color:var(--done-t)}
.sx-tp-h{display:flex;flex-direction:column;gap:2px;min-width:0}
.sx-tp-h b{font-weight:700;font-size:17px;letter-spacing:-.016em;color:var(--text)}
.sx-tp-h span{font-size:13px;color:var(--text-3)}
.sx-tp-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.sx-tp-bar i{display:block;height:100%;border-radius:3px;background:var(--done)}
.sx-tp-n{min-width:2.4em;text-align:right}
.sx-tp-n b{font-weight:700;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.sx-tp-chev{width:10px;height:10px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.sx-tp[open] .sx-tp-chev{transform:rotate(225deg) translate(-3px,-3px)}
.sx-tp-b{padding:0 20px 8px 74px}
.sx-tp-send{display:flex;flex-direction:column;gap:8px;padding:4px 0 14px;border-bottom:1px solid var(--edge)}
.sx-tp-ask{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px 12px;border-radius:8px;background:var(--ground)}
.sx-tp-ask.closed{opacity:.8}
.sx-tp-ask .who b{display:block;font-weight:600;font-size:14.5px}
.sx-tp-ask .who small{display:block;color:var(--text-3);font-size:12.5px}
.sx-tp-ask .who small.nt{color:var(--text-2);margin-top:2px}
.sx-tp-go{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;font-size:13.5px;color:var(--text-2)}
.sx-gqs{list-style:none;margin:0;padding:0}
.sx-gq{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--edge);transition:background .4s}
.sx-gqs > .sx-gq:first-child{border-top:0}
.sx-gq-st{padding-top:1px}
.sx-gq-b{display:flex;flex-direction:column;gap:8px;min-width:0}
.sx-gq-q{font-weight:600;font-size:14.5px;line-height:1.4;letter-spacing:-.008em;text-wrap:pretty}
.sx-gq.done .sx-kind{background:#E7F3EA;color:var(--done-t)}
.sx-gq-pgs{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sx-gq-on{font-size:12.5px;color:var(--text-3);margin-right:2px}
.sx-gpg{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:28px;padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font:500 12.5px/1.25 var(--arch);color:var(--deep)}
.sx-gpg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-gpg .sx-sd{width:14px;height:14px}
.sx-gpg.ok{border-color:#B9DCC4;background:#F1F8F3;color:var(--done-t)}
.sx-gpg:hover{border-color:var(--forest)}
.sx-gpg:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sx-gq-part{margin:0;font-size:13px;color:var(--amber-t)}
.sx-gq .sx-acts .lnk{font-size:13px}
.sx-gq.sx-flash{background:rgba(184,105,46,.08)}
.sx-cover{margin:0;font-size:12.5px;color:var(--text-3)}
.sx-tp-prev{margin:4px 0 0;padding:10px 14px 10px 30px;background:#fff;border-radius:8px;border:1px solid var(--edge);font-size:13.5px;color:var(--text);display:flex;flex-direction:column;gap:4px}
.sx-tp-prev small{color:var(--text-3)}
.sx-tp-prev .more{list-style:none;margin-left:-16px;color:var(--text-3)}
.sx-addf textarea{width:100%;font:400 14px/1.5 var(--arch);color:var(--text);border:1px solid var(--line-2);border-radius:6px;padding:9px 11px;background:#fff;resize:vertical;min-height:64px}
.sx-addf textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(63,187,99,.18)}
@media(max-width:860px){
  .sx-tp > summary{grid-template-columns:36px minmax(0,1fr) auto 16px;gap:12px;padding:14px 14px}
  .sx-tp-bar{display:none}
  .sx-tp-ic{width:36px;height:36px}
  .sx-tp-b{padding:0 14px 6px}
  .sx-qprog{min-width:0;width:100%}
}
@media(max-width:620px){
  .sx-tp-ask{grid-template-columns:auto minmax(0,1fr)}
  .sx-tp-ask .sx-acts{grid-column:1/-1}
  .sx-addf textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.sx-tp-chev,.sx-gq{transition:none}}


/* the walkthrough (studio.js, staff-calls.js): staff step through each item of a revised draft and decide it before it
   goes out. Staff only. Page mode: the comp on the left with the item's element outlined, the panel on the right with
   the item and its decision buttons pinned to its foot. Status colours from the shared system: green approved or noted,
   blue needs a change (Tangible's move), grey rejected, amber asked. */
.sx-calls{display:flex;flex-direction:column;gap:12px;margin:0 0 20px}
.sx-calls .sx-ph{margin-bottom:0}
.sx-calls .sx-ph span{color:var(--tang,#2A5F98);font-weight:600;letter-spacing:.02em}
.sx-call-sub{margin:0;font-size:13.5px;color:var(--text-2)}
.wk-map .sx-acts{margin:0}
.wk-prog{margin:0;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.wk-prog b{color:var(--text);font-weight:600}
.wk-bar{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden;background:var(--line,#E7E4E1)}
.wk-bar i{display:block;height:100%;min-width:3px}
.wk-bar .ok,.wk-dot.ok{background:var(--done-dot,#3FBB63)}
.wk-bar .tang,.wk-dot.tang{background:var(--tang-dot,#4A86C5)}
.wk-bar .gone,.wk-dot.gone{background:var(--gone-dot,#A8A29D)}
.wk-bar .wait,.wk-dot.wait{background:var(--you-dot,#D08A2E)}
.wk-bar .open{background:transparent}
.wk-dot{flex:none;width:9px;height:9px;border-radius:50%}
.wk-dot.open{background:#fff;box-shadow:inset 0 0 0 1.5px var(--text-4,#A29C97)}
.wk-pill{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap}
.wk-pill.ok{background:var(--done-bg,#E7F4EB);color:var(--done,#17663F)}
.wk-pill.tang{background:var(--tang-bg,#EAF1F9);color:var(--tang,#2A5F98)}
.wk-pill.gone{background:var(--gone-bg,#F0EEEC);color:var(--gone,#5C5753)}
.wk-pill.wait{background:var(--you-bg,#FBF0E1);color:var(--you,#8A4F0B)}
.wk-end{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:8px;background:var(--gone-bg,#F0EEEC)}
.wk-end.ok{background:var(--done-bg,#E7F4EB)}
.wk-end.fixes{background:var(--tang-bg,#EAF1F9)}
.wk-end p{margin:0;font-size:13.5px;line-height:1.5;color:var(--text)}
.wk-dir{width:100%}
.wk-dir summary{cursor:pointer;font-size:13px;color:var(--tang,#2A5F98);font-weight:500}
.wk-dir p{margin-top:8px;white-space:pre-line;font-size:13px;line-height:1.5;background:#fff;border-radius:6px;padding:10px 12px;max-height:260px;overflow:auto}
.wk-end .btn{white-space:normal;height:auto;min-height:36px;line-height:1.3;text-align:left}
.wk-all summary{cursor:pointer;font-size:13.5px;font-weight:500;color:var(--text-2);padding:4px 0}
.wk-all[open] summary{margin-bottom:6px}
/* rows: one per item, by page; the noted answers in their own group */
.wk-grp{display:flex;flex-direction:column}
.wk-grp + .wk-grp{margin-top:10px}
.wk-gh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:8px 2px 6px;border-bottom:1px solid var(--line,#E7E4E1)}
.wk-gh b{font-size:13px;font-weight:600}
.wk-gh span{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.wk-gh .lnk{margin-left:auto;font-size:12.5px}
.wk-grp.noted .wk-gh{border-bottom-color:var(--done-bg,#E7F4EB)}
.wk-row{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:7px 8px;border-radius:6px;border-bottom:1px solid var(--line,#E7E4E1)}
.wk-row:hover{background:var(--hover,rgba(32,30,29,.04))}
.wk-row.cur{background:var(--tang-bg,#EAF1F9)}
.wk-row:focus-visible{outline:2px solid var(--deep);outline-offset:-2px}
.wk-row .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wk-row .t b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-row .t small{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the panel: a head, the item (it scrolls), and the decision buttons pinned under it */
.wk{display:flex;flex-direction:column;min-height:0}
.wk kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;margin-left:8px;border-radius:4px;border:1px solid currentColor;font:500 10.5px/1 var(--arch);opacity:.55;letter-spacing:0;box-sizing:border-box}
.wk .btn-a kbd{border-color:rgba(255,255,255,.6);opacity:.8}
.wk-head{display:flex;flex-direction:column;gap:8px;padding:0 0 12px;border-bottom:1px solid var(--line,#E7E4E1)}
.wk-ttl{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.wk-ttl h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.005em;line-height:1.25}
.wk-staff{flex:none;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tang,#2A5F98)}
.wk-filters{display:flex;flex-wrap:wrap;gap:5px}
.wk-f{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:500;color:var(--text-2);border:1px solid var(--line-2,#D6D2CE);background:#fff;white-space:nowrap}
.wk-f b{font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.wk-f:hover{border-color:var(--text-3)}
.wk-f[aria-pressed="true"]{background:var(--text,#201E1D);border-color:var(--text,#201E1D);color:#fff}
.wk-f[aria-pressed="true"] b{color:rgba(255,255,255,.75)}
.wk-f:disabled{opacity:.45;cursor:default}
.wk-f:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.wk-tools{display:flex;justify-content:space-between;gap:12px}
.wk-tools .lnk{font-size:12.5px}
.wk-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 2px 14px;display:flex;flex-direction:column;gap:10px}
.wk-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wk-pos{font-size:12px;font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}
.wk-arrows{display:inline-flex;gap:6px}
.wk-ar{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 8px;border-radius:6px;border:1px solid var(--line-2,#D6D2CE);background:#fff;color:var(--text-2)}
.wk-ar kbd{margin:0 2px}
.wk-ar:hover{border-color:var(--forest);color:var(--forest)}
.wk-ar:disabled{opacity:.4;cursor:default}
.wk-ar:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.wk-src{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;margin:2px 0 0;font-size:16px;font-weight:600;line-height:1.3}
.wk-src:focus{outline:none}
.wk-src:focus-visible{outline:2px solid var(--tang-dot,#4A86C5);outline-offset:4px;border-radius:4px}
.wk-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tang-bg,#EAF1F9);color:var(--tang,#2A5F98)}
.wk-sum .wk-src{display:block}
.wk-sum .wk-src:focus-visible{outline:none;box-shadow:inset 3px 0 0 var(--tang-dot,#4A86C5);padding-left:10px}
.wk-where{margin:-4px 0 0 34px;font-size:12.5px;color:var(--text-3)}
.wk-words{margin:0;padding:10px 12px;border-radius:8px;background:var(--sunk,#FAF9F8);border:1px solid var(--line,#E7E4E1);font-size:14px;line-height:1.5;color:var(--text)}
.wk-words.none{color:var(--text-3);font-size:13px}
.wk-qa{display:flex;flex-direction:column;gap:6px}
.wk-q{margin:0;font-size:13px;line-height:1.45;color:var(--text-2)}
.wk-blk{display:flex;flex-direction:column;gap:3px}
.wk-blk .lbl,.wk-pnote .lbl{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.wk-blk.now .lbl{color:var(--tang,#2A5F98)}
.wk-blk p{margin:0;font-size:14px;line-height:1.5}
.wk-blk.now p{font-weight:500}
.wk-blk.was p{color:var(--text-2)}
.wk-blk.sug{padding:10px 12px;border-radius:8px;background:var(--brand-tint,#F2F8F4)}
.wk-blk.sug .lbl{color:var(--done,#17663F)}
.wk-side{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px}
.wk-side button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;height:30px;padding:0 12px;font-size:12.5px;font-weight:600;color:var(--text-2);border:1px solid var(--line-2,#D6D2CE);background:#fff}
.wk-side button:first-child{border-radius:7px 0 0 7px}
.wk-side button:nth-child(2){border-radius:0 7px 7px 0;margin-left:-1px}
.wk-side button[aria-pressed="true"]{background:var(--text,#201E1D);border-color:var(--text,#201E1D);color:#fff}
.wk-side button kbd{margin-left:6px}
.wk-side button:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.wk-sidel{font-size:12px;color:var(--text-3)}
.wk-call{display:block;padding:9px 11px;border-radius:8px;font-size:13px;line-height:1.45;background:var(--gone-bg,#F0EEEC);color:var(--text)}
.wk-call.ok{background:var(--done-bg,#E7F4EB)}
.wk-call.tang{background:var(--tang-bg,#EAF1F9)}
.wk-call.wait{background:var(--you-bg,#FBF0E1)}
.wk-call:focus{outline:none}
.wk-call .lnk{font-size:13px}
.wk-pnote{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:8px;border:1px dashed var(--line-2,#D6D2CE)}
.wk-pnote p{margin:0;font-size:13.5px;line-height:1.45}
.wk-pnote .small{font-size:12px}
.wk-ngrp{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:8px 10px;border-radius:8px;background:var(--done-bg,#E7F4EB);font-size:12.5px;line-height:1.4;color:var(--text-2)}
.wk-ngrp b{color:var(--done,#17663F)}
.wk-ngrp .lnk{font-size:12.5px}
.wk-sum{display:flex;flex-direction:column;gap:10px}
.wk-counts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--text-2)}
.wk-counts li{display:inline-flex;align-items:center;gap:6px}
.wk-counts b{color:var(--text)}
/* the decision buttons: Approve on its own row, the other four in one row under it */
.wk-foot{flex:none;padding:12px 0 2px;border-top:1px solid var(--line,#E7E4E1);background:var(--surface,#fff)}
.wk-acts{display:flex;flex-direction:column;gap:8px}
.wk .wk-pri{width:100%;justify-content:center;min-height:44px;height:auto;font-size:15px}
.wk-pri.on{background:var(--done,#17663F);border-color:var(--done,#17663F)}
.wk-sec{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr) minmax(0,1fr) 50px;gap:6px}
.wk-sec .btn{min-width:0;justify-content:center;padding:0 4px;min-height:36px;white-space:nowrap;font-size:13px}
.wk-sec .btn kbd{margin-left:5px}
.wk-sec .btn.on{background:var(--tang-bg,#EAF1F9);border-color:var(--tang,#2A5F98);color:var(--tang,#2A5F98)}
.wk-sec .btn.on[data-wk="reject"]{background:var(--gone-bg,#F0EEEC);border-color:var(--gone,#5C5753);color:var(--gone,#5C5753)}
.wk-sec .btn.on[data-wk="ask"]{background:var(--you-bg,#FBF0E1);border-color:var(--you-dot,#D08A2E);color:var(--you,#8A4F0B)}
.wk-sec .wk-nb{padding:0}
.wk-sec .wk-nb kbd{margin-left:4px}
.wk-sec .wk-nb.has{color:var(--tang,#2A5F98);border-color:var(--tang,#2A5F98)}
.wk-sec:has(> :nth-child(3):last-child){grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 46px}
.wk-form{display:flex;flex-direction:column;gap:6px;margin:0}
.wk-form label{font-size:13px;font-weight:600}
.wk-form textarea,.wk-form input{box-sizing:border-box;width:100%;border:1px solid var(--field-line,#948E89);border-radius:7px;padding:8px 10px;font:inherit;font-size:14px;line-height:1.45;background:#fff;resize:vertical}
.wk-form input{height:38px}
.wk-facts{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.wk-err{margin:0;font-size:12.5px;color:var(--neg,#A2531B)}
@media(hover:none),(max-width:760px){.wk kbd{display:none}}
@media(pointer:coarse){.wk-form textarea,.wk-form input{font-size:16px}.wk-sec .btn{min-height:44px}}

/* the comp in the walkthrough: Before lays the previous version's page over the draft */
body.sx-walk #preview{position:relative}
.sx-bfr{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;z-index:2}
.sx-bfr[hidden],.sx-bmsg[hidden]{display:none}
.sx-bmsg{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:24px;background:var(--sunk,#FAF9F8);text-align:center;font-size:14px;color:var(--text-2)}
.sx-btag{display:none}
body.sx-before .sx-btag{display:inline-flex;position:absolute;z-index:4;right:14px;bottom:14px;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#67615D;color:#fff;font:600 12px/1 var(--arch);pointer-events:none;box-shadow:0 4px 14px rgba(32,30,29,.2)}
body.sx-before #frame .ftitle{color:var(--text-2)}

/* the panel docks beside the comp, a little wider than the review rail, and fills its height */
@media(min-width:1101px){
  body.sx-page.sx-walk .studio,body.sx-page.sx-walk.wide .studio{grid-template-columns:minmax(0,1fr) clamp(360px,28vw,440px)}
  body.sx-page.sx-walk .sx-strip{display:none}
  body.sx-page.sx-walk .studio .rrail{display:flex;flex-direction:column;overflow:hidden}
  body.sx-page.sx-walk .studio .rrail > .review-card{display:none}
  body.sx-page.sx-walk #sxCard{flex:1 1 auto;min-height:0;margin:0;padding:16px 16px 12px;display:flex;flex-direction:column}
  body.sx-page.sx-walk #sxCard > .wk{flex:1 1 auto;height:100%}
  body.sx-page.sx-walk .sx .sx-cnt{display:none}
}
/* narrower: the panel sits under the comp, and the decision buttons stay pinned to the bottom of the screen */
@media(max-width:1100px){
  body.sx-page.sx-walk .studio .rrail > .review-card{display:none}
  body.sx-page.sx-walk #sxCard{padding:14px 14px 0}
  body.sx-page.sx-walk .wk-scroll{overflow:visible}
  body.sx-page.sx-walk .wk-foot{position:sticky;bottom:0;z-index:5;margin:0 -14px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -10px 24px -18px rgba(32,30,29,.35)}
  body.sx-page.sx-walk .studio .frame iframe{height:56vh}
}
@media(max-width:420px){
  .wk-sec{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,.8fr) 44px;gap:5px}
  .wk-sec .btn{font-size:12.5px;padding:0 4px}
  .wk-f{height:28px}
}
/* the staff bar steps to the comp's corner, clear of the decision buttons */
@media(min-width:1101px){body.sx-page.sx-walk .asbar{right:auto;left:24px}}
/* narrower: the walkthrough is one task; the staff bar comes back on the map */
@media(max-width:1100px){body.sx-page.sx-walk .asbar{display:none}}

/* Studio is an application (Brad, 20 Oct 2026): a view's heading names the place, with no eyebrow and no intro copy; where
   it stands is one short meta line under the heading (studio.js sx-meta) or the view's own progress bar */
.sx-meta{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--text-2);font-variant-numeric:tabular-nums}
.sx-lead h1,.sx-head h1{margin-top:0}
.sx-asg-none{margin:12px 0 0}

/* Site questions (20 Oct 2026): every question a mark on its page. The marks are the map's own status language: round,
   like the status dots and the owners' initials, in the status colours (amber waiting on the customer, blue Tangible's
   move, green done, grey removed), and each status has its own shape so it reads without colour: an outline needs an
   answer, a double ring is asked again, hatching is on hold, initials are with a person, an outline with a dot is
   answered, a solid disc is with Tangible or updated, a check is confirmed, a pale fill is no change, a strike is removed */
.sxq-mk{all:unset;box-sizing:border-box;position:relative;display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;font:600 11px/1 var(--arch);letter-spacing:0;font-variant-numeric:tabular-nums;cursor:pointer;color:var(--mk-t);background:#fff;box-shadow:inset 0 0 0 1.5px var(--mk);transition:transform .15s,box-shadow .15s}
span.sxq-mk{cursor:default}
.sxq-mk.t-wait{--mk:#B8692E;--mk-t:#8F4E1E;--mk-p:#FBF0E1}
.sxq-mk.t-tang{--mk:#2F6FB0;--mk-t:#235A93;--mk-p:#EAF1F9}
.sxq-mk.t-ok{--mk:#2E9C55;--mk-t:#1E6B3A;--mk-p:#E3F2E8}
.sxq-mk.t-gone{--mk:#A8A29D;--mk-t:#67615D;--mk-p:#F0EEEC}
button.sxq-mk:hover{transform:scale(1.12)}
button.sxq-mk:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sxq-mk.k-o2{box-shadow:inset 0 0 0 1.5px var(--mk),inset 0 0 0 3px #fff,inset 0 0 0 4.2px var(--mk)}
.sxq-mk.k-h{background:repeating-linear-gradient(135deg,var(--mk-p) 0 3px,rgba(184,105,46,.38) 3px 4.5px);color:#5C3511}
.sxq-mk.k-od::after{content:"";position:absolute;right:-1px;top:-1px;width:8px;height:8px;border-radius:50%;background:var(--mk);box-shadow:0 0 0 1.5px #fff}
.sxq-mk.k-s,.sxq-mk.k-sc{background:var(--mk);color:#fff;box-shadow:none}
.sxq-mk.k-sc::after{content:"";position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2 2 4-4.4' fill='none' stroke='%231E6B3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:0 0 0 1.5px var(--mk)}
.sxq-mk.k-p{background:var(--mk-p)}
.sxq-mk.k-x{background:var(--mk-p);color:var(--mk-t)}
.sxq-mk.k-x::before{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;background:var(--mk);transform:rotate(-35deg)}
.sxq-mk.k-av{background:#3F4A5A;color:#fff;box-shadow:none;font-size:9.5px;letter-spacing:.03em}
.sxq-mk.k-av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;background:var(--mk);box-shadow:0 0 0 1.5px #fff}
.sxq-mk.dim{opacity:.22}
.sxq-mk.mini{width:13px;height:13px;font-size:0}
.sxq-mk.mini::after,.sxq-mk.mini::before{transform:scale(.6)}
.sxq-mk.mini.k-o2{box-shadow:inset 0 0 0 1.5px var(--mk),inset 0 0 0 2.5px #fff,inset 0 0 0 3.6px var(--mk)}

.sxq-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px}
.sxq-over{display:flex;flex-direction:column;gap:16px;padding:clamp(16px,2.4vw,26px)}
.sxq-bar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;background:var(--line)}
.sxq-bar i{display:block;min-width:4px;background:var(--mk);--mk:#A8A29D}
.sxq-bar i.t-wait{--mk:#B8692E}.sxq-bar i.t-tang{--mk:#2F6FB0}.sxq-bar i.t-ok{--mk:#2E9C55}
.sxq-bar i.k-o,.sxq-bar i.k-o2{background:#fff;box-shadow:inset 0 0 0 1.5px var(--mk)}
.sxq-bar i.k-h{background:repeating-linear-gradient(135deg,#FBF0E1 0 3px,rgba(184,105,46,.55) 3px 5px)}
.sxq-bar i.k-od,.sxq-bar i.k-p{background:color-mix(in srgb,var(--mk) 30%,#fff)}
.sxq-bar i.k-av{background:#D08A2E}
.sxq-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.sxq-cl{display:flex;flex-wrap:wrap;gap:8px}
.sxq-chip{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--line-2,rgba(32,30,29,.14));font-size:13px;color:var(--text-2)}
.sxq-chip b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.sxq-chip:hover{border-color:var(--forest)}
.sxq-chip:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sxq-chip[aria-pressed=true]{background:var(--forest);border-color:var(--forest);color:#fff}
.sxq-chip[aria-pressed=true] b{color:#fff}
.sxq-chip.all{color:var(--deep)}
.sxq-sum{margin:0 0 0 auto;font-size:13.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.sxq-sum b{color:var(--text);font-weight:600}
.sxq-map{display:flex;flex-direction:column;gap:14px;padding-top:6px;border-top:1px solid var(--edge)}
.sxq-sec{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding-top:10px}
.sxq-sh{display:flex;flex-direction:column;gap:8px;padding-top:8px}
.sxq-sh .eyebrow{margin:0;font-size:10.5px}
.sxq-sh .cnt{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.sxq-sh .cnt b{color:#8F4E1E;font-weight:600}
.sxq-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.sxq-tile{display:flex;flex-direction:column;gap:10px;min-height:96px;padding:12px 12px 13px;border-radius:10px;background:#fff;border:1px solid var(--edge)}
.sxq-tile.none{background:transparent}
.sxq-tt{display:flex;gap:7px;align-items:baseline;min-width:0}
.sxq-tt .no{font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--text-3);font-variant-numeric:tabular-nums}
.sxq-tt .nm{font-weight:600;font-size:13.5px;letter-spacing:-.01em;line-height:1.28;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sxq-marks{display:flex;flex-wrap:wrap;gap:6px}
.sxq-marks.sm{gap:4px}
.sxq-marks.sm .sxq-mk{width:18px;height:18px;font-size:9px}
.sxq-none{font-size:12px;color:var(--text-3)}
.sxq-lt{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.sxq-lt .lnk{font-size:13.5px}
.sxq-seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--ground-2)}
.sxq-seg button{all:unset;box-sizing:border-box;cursor:pointer;padding:7px 14px;border-radius:7px;font-size:13.5px;color:var(--text-2)}
.sxq-seg button[aria-pressed=true]{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(32,30,29,.12)}
.sxq-seg button:focus-visible{outline:2px solid var(--deep);outline-offset:1px}
.sxq-pages{display:flex;flex-direction:column;gap:10px}
.sxq-pg{border-radius:12px;background:#fff;border:1px solid var(--edge)}
.sxq-pg > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:72px minmax(0,1fr) auto 20px;gap:14px;align-items:center;padding:10px 16px 10px 10px;border-radius:12px}
.sxq-pg > summary::-webkit-details-marker{display:none}
.sxq-pg > summary:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.sxq-th{display:block;width:72px;height:45px;border-radius:6px;object-fit:cover;object-position:top;background:var(--ground-2);border:1px solid var(--edge)}
.sxq-pt{display:flex;flex-direction:column;gap:3px;min-width:0}
.sxq-pt b{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.sxq-pt small{font-size:12.5px;color:var(--text-3)}
.sxq-pg[open] > summary .sx-tp-chev{transform:rotate(180deg)}
.sxq-rows{list-style:none;margin:0;padding:0 16px 4px}
.sxq-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:14px;padding:14px 0;border-top:1px solid var(--edge)}
.sxq-rb{display:flex;flex-direction:column;gap:7px;min-width:0}
.sxq-rq{margin:0;font-weight:600;font-size:14.5px;line-height:1.4;text-wrap:pretty}
.sxq-al{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13.5px;line-height:1.45}
.sxq-al .sx-av{width:22px;height:22px;font-size:9px}
.sxq-al small{color:var(--text-3)}
.sxq-al.hold b{color:#8F4E1E}
.sxq-say,.sxq-cust{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.sxq-say b{color:var(--text)}
.sxq-cust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.sxq-cust .lbl{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.sxq-more{margin:0;font-size:12.5px;color:var(--text-3)}
.sxq-ra{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.sxq-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 12px}
.sxq-acts .lnk{font-size:13.5px}
.sxq-va{display:inline-flex;gap:8px}
.sxq-v{font-size:13px;color:var(--text-2)}
.sxq-v:focus{outline:none}
.sxq-pill{gap:6px;padding-left:7px}
.sxq-form{margin-top:4px}
.sxq-holdf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2,rgba(32,30,29,.14));font-size:13px;color:var(--text-2)}
.sxq-holdf select{font:inherit;font-size:13.5px;padding:6px 8px;border-radius:7px;border:1px solid var(--line-2,rgba(32,30,29,.18));background:#fff;color:var(--text);max-width:100%}
.sxq-nq label{font-weight:600;font-size:13.5px}
.sxq-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:720px}
.sxq-cmp figure{margin:0;display:flex;flex-direction:column;gap:6px}
.sxq-cmp img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--edge);background:var(--ground-2)}
.sxq-cmp figcaption{font-size:12px;font-weight:600;color:var(--text-3)}
.sxq-cmp .now figcaption{color:#1E6B3A}
.sxq-noimg{display:grid;place-items:center;aspect-ratio:16/9;border-radius:8px;background:var(--ground-2);font-size:12px;color:var(--text-3)}
.sx-gq-st .sxq-mk{margin-top:-2px}
.sx-ans.hold b{color:#8F4E1E}
/* the card: on hover or focus beside the mark, on a phone a sheet from the bottom */
.sxq-peek{position:fixed;z-index:91;width:372px;max-width:calc(100vw - 24px);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 4px 10px rgba(32,30,29,.08),0 26px 60px rgba(32,30,29,.22);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .16s,transform .16s}
.sxq-peek.on{opacity:1;transform:none}
.sxq-crop{position:relative;aspect-ratio:16/9;background:var(--ground-2);overflow:hidden}
.sxq-crop.none{aspect-ratio:auto;min-height:44px}
.sxq-crop img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.sxq-hit{position:absolute;box-sizing:border-box;min-width:14px;min-height:14px;border-radius:5px;box-shadow:0 0 0 2.5px #2F6FB0,0 0 0 9px rgba(47,111,176,.18);transform:translate(-4px,-4px);padding:4px;outline:4px solid transparent}
.sxq-tag{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 3px;border-radius:999px;background:#fff;font-size:12.5px;font-weight:600;box-shadow:0 2px 8px rgba(32,30,29,.18)}
.sxq-cb{display:flex;flex-direction:column;gap:10px;padding:14px 16px 14px}
.sxq-cb .wk-pill{align-self:flex-start}
.sxq-cq{margin:0;font-weight:600;font-size:15px;line-height:1.38;letter-spacing:-.01em}
.sxq-ab{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:9px;border:1px solid var(--edge);font-size:13.5px;line-height:1.45}
.sxq-ab.hold{background:#FBF0E1;border-color:transparent}
.sxq-ab.hold b{color:#8F4E1E}
.sxq-ab > span:not(.sx-av){display:flex;flex-direction:column;gap:2px;min-width:0}
.sxq-ab small{color:var(--text-3);font-size:12px}
.sxq-ab .sx-av{width:24px;height:24px;font-size:9px}
.sxq-say .lbl,.sxq-cb .sxq-say .lbl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
.sxq-cb .sxq-say p{margin:0;font-size:13.5px;line-height:1.5}
.sxq-trail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-2)}
.sxq-trail li{display:flex;gap:9px;align-items:baseline}
.sxq-trail li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--deep);transform:translateY(-1px)}
.sxq-trail li.next{color:var(--text-3)}
.sxq-trail li.next::before{background:#fff;box-shadow:inset 0 0 0 1.5px var(--text-4,#A29C97)}
.sxq-cf{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;border-top:1px solid var(--edge);font-size:12.5px;color:var(--text-3)}
.sxq-cf kbd{font:600 11px/1 var(--arch);padding:2px 5px;border-radius:4px;border:1px solid var(--line-2,rgba(32,30,29,.18));background:#fff;color:var(--text-2)}
.sxq-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:100%;max-height:88dvh;margin:0;padding:0;border:0;border-radius:16px 16px 0 0;overflow:auto;background:#fff;color:var(--text);box-shadow:0 -10px 40px rgba(32,30,29,.25)}
.sxq-sheet::backdrop{background:rgba(32,30,29,.35)}
.sxq-sheet .sxq-crop{border-radius:16px 16px 0 0}
.sxq-sa{display:flex;gap:10px;padding:4px 16px 18px}
.sxq-sa .btn{flex:1;justify-content:center}
.sxq-sx{position:absolute;right:10px;top:10px;background:#fff;border-radius:50%;box-shadow:0 2px 8px rgba(32,30,29,.18)}
@media(max-width:860px){
  .sxq-sec{grid-template-columns:1fr;gap:8px}
  .sxq-sh{flex-direction:row;align-items:center;justify-content:space-between;padding-top:0}
  .sxq-tiles{grid-template-columns:1fr;gap:0}
  .sxq-tile{flex-direction:row;align-items:center;min-height:0;padding:9px 0;border:0;border-top:1px solid var(--edge);border-radius:0;background:transparent}
  .sxq-tt{flex:1}
  .sxq-tt .nm{-webkit-line-clamp:1;white-space:nowrap;display:block}
  .sxq-marks{justify-content:flex-end;max-width:60%}
  .sxq-sum{margin-left:0;flex-basis:100%}
}
@media(max-width:600px){
  .sxq-row{grid-template-columns:24px minmax(0,1fr);gap:10px 12px}
  .sxq-ra{grid-column:2;align-items:flex-start}
  .sxq-acts{justify-content:flex-start}
  .sxq-pg > summary{grid-template-columns:56px minmax(0,1fr) 20px;gap:10px}
  .sxq-pg > summary .sxq-marks{grid-column:1/-1;grid-row:2}
  .sxq-th{width:56px;height:36px}
  .sxq-rows{padding:0 12px 4px}
  .sxq-cmp{grid-template-columns:1fr}
  .sxq-over{padding:14px}
}
/* the walkthrough: the line the customer reads, and Send with items kept back */
.wk-cust{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:10px;background:var(--brand-tint,#F2F8F4);border:1px solid rgba(46,156,85,.18)}
.wk-cust-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wk-cust-h .lbl{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--done,#17663F)}
.wk-cust textarea{font:inherit;font-size:14px;line-height:1.45;width:100%;box-sizing:border-box;padding:9px 10px;border-radius:8px;border:1px solid var(--line-2,rgba(32,30,29,.18));background:#fff;color:var(--text);resize:vertical}
.wk-cust textarea:focus-visible,.wk-cust select:focus-visible{outline:2px solid var(--deep);outline-offset:1px}
.wk-cust-sel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-items:center;font-size:12.5px;color:var(--text-2)}
.wk-cust select{font:inherit;font-size:13.5px;padding:7px 8px;border-radius:7px;border:1px solid var(--line-2,rgba(32,30,29,.18));background:#fff;color:var(--text);min-width:0}
.wk-cust p{margin:0;font-size:14px;line-height:1.5}
.wk-cust-s{min-height:1em}
.wk-reply{background:#FBF0E1}
.wk-two{display:flex;flex-direction:column;gap:8px}
.wk-endl{margin:6px 0 0;font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.wk-map .sx-acts .wk-send{margin-left:0}
.wk-err-line{margin:10px 0 0}
.sx-send{width:min(620px,calc(100% - 32px))}
.sx-send-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.sx-send-l li{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:10px;background:#fff;border:1px solid var(--edge)}
.sx-send-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sx-send-h b{font-size:14px}
.sx-send-l small{font-size:12.5px;color:var(--text-3)}
.sx-send-l label,.sx-send .fld label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.sx-send-l textarea,.sx-send .fld textarea{font:inherit;font-size:14px;line-height:1.45;width:100%;box-sizing:border-box;padding:9px 10px;border-radius:8px;border:1px solid var(--line-2,rgba(32,30,29,.18));background:#fff;color:var(--text);resize:vertical}
.sx-send .fld{display:flex;flex-direction:column;gap:6px;margin-top:14px}
@media (prefers-reduced-motion: reduce){.sxq-peek,.sxq-mk{transition:none}}
.wk-pill.open{background:#fff;color:var(--text-3,#736D68);box-shadow:inset 0 0 0 1px var(--line-2,#D6D2CE)}
/* the splitter between the comp and the panel (21 Oct 2026): the panel takes --sxRail once a viewer has resized it */
@media(min-width:1101px){
  body.sx-page .studio{position:relative}
  body.sx-page.sx-railopen .studio,body.sx-page.sx-railopen.wide .studio{grid-template-columns:minmax(0,1fr) var(--sxRail,clamp(320px,24vw,380px)) 48px}
  body.sx-page.sx-walk .studio,body.sx-page.sx-walk.wide .studio{grid-template-columns:minmax(0,1fr) var(--sxRail,clamp(360px,28vw,440px))}
  .sx-split{position:absolute;z-index:6;width:10px;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none;border-radius:5px}
  .sx-split::before{content:"";width:4px;height:44px;border-radius:2px;background:var(--line-2,#D6D2CE);transition:background .15s,height .15s}
  .sx-split:hover::before,.sx-split:focus-visible::before,body.sx-splitting .sx-split::before{background:var(--deep,#1E7F5C);height:64px}
  .sx-split:focus-visible{outline:2px solid var(--deep,#1E7F5C);outline-offset:1px}
  body.sx-splitting,body.sx-splitting *{cursor:col-resize!important;user-select:none}
  body.sx-splitting iframe{pointer-events:none}
}
.sx-split[hidden]{display:none!important}
@media(max-width:1100px){.sx-split{display:none!important}}
/* a question's stages in one bar (21 Oct 2026): open (amber outline), with someone (amber), answered (blue, Tangible's
   move), applied (pale green), complete (green), on hold (amber hatching), removed (grey); the line under it gives the counts */
.sxq-stbar{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden;background:var(--line)}
.sxq-stbar.big{height:8px;border-radius:4px}
.sxq-stbar i{display:block;min-width:4px;height:100%;border-radius:0}
.sxq-stbar i.sg-open{background:#fff;box-shadow:inset 0 0 0 1.5px #B8692E}
.sxq-stbar i.sg-with{background:#D08A2E}
.sxq-stbar i.sg-answered{background:#2F6FB0}
.sxq-stbar i.sg-applied{background:#8FD1A6}
.sxq-stbar i.sg-complete{background:#2E9C55}
.sxq-stbar i.sg-hold{background:repeating-linear-gradient(135deg,#FBF0E1 0 3px,rgba(184,105,46,.55) 3px 5px)}
.sxq-stbar i.sg-removed{background:#A8A29D}
.sxq-stline{margin:-6px 0 0;font-size:13.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.wk-tiers[hidden]{display:none}
/* "Assign decision" (21 Oct 2026): the decision row gives it as much room as Needs a change, and a label wraps to a
   second line instead of running out of its button */
.wk-sec{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,1.35fr) 46px}
.wk-sec:has(> :nth-child(3):last-child){grid-template-columns:minmax(0,1fr) minmax(0,1fr) 46px}
.wk-sec .btn{white-space:normal;line-height:1.15;text-align:center}