[hidden]{display:none!important}
:root{
  /* palette from the MSC reference */
  --ink:#23282e; --slate:#333d49; --steel:#4f5f72; --graphite:#4a4a4a;
  --forest:#3d4f3d; --sage:#677d68; --clay:#99694c; --wheat:#e0ab6c;
  --bg:#ffffff; --surface:#ffffff; --soft:#f3f4f5; --line:#dcdfe3; --text:#23282e; --muted:#5d6670;
  --nav:#333d49; --banner:#333d49; --banner-ink:#f4f5f6;
  --primary:#99694c; --chip-on:#677d68; --chip-on-ink:#fff;
  --serif:"Tinos","Times New Roman",Times,serif; --sans:Arial,"Helvetica Neue",Helvetica,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1b1f24; --surface:#23282e; --soft:#2a3037; --line:#39414b; --text:#eceef0; --muted:#a7afb8;
  --nav:#23282e; --banner:#2a3440; --primary:#b07a58; --steel:#9fb1c6;
}}
:root[data-theme="dark"]{
  --bg:#1b1f24; --surface:#23282e; --soft:#2a3037; --line:#39414b; --text:#eceef0; --muted:#a7afb8;
  --nav:#23282e; --banner:#2a3440; --primary:#b07a58; --steel:#9fb1c6;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.45 var(--sans);overflow-x:hidden}
button,input,select{font:inherit;color:inherit}

/* top nav, mirrors the MSC bar */
.nav{background:var(--nav);color:#fff;height:52px;display:flex;align-items:center;gap:18px;padding:0 max(16px,env(safe-area-inset-left))}
.logo{font:300 26px/1 var(--sans);letter-spacing:-.02em;color:#fff;text-decoration:none;white-space:nowrap}
.logo b{font-weight:300;opacity:.75;font-size:15px;letter-spacing:.02em;margin-left:8px}
.navlinks{display:flex;gap:20px;margin-left:auto;align-items:center}
.navlinks a,.navlinks button{color:#fff;text-decoration:none;background:none;border:0;cursor:pointer;font-size:16px;padding:6px 0}
.navlinks a:hover{text-decoration:underline}
.navlinks .pill{display:inline-flex;align-items:center;gap:6px;background:var(--clay);color:#fff;border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700}
.pill span{background:rgba(255,255,255,.22);border-radius:999px;padding:0 7px}
@media (max-width:640px){.navlinks .hide-sm{display:none}.logo b{display:none}}

/* banner with search */
.wrap{max-width:1500px;margin:0 auto;padding:0 16px}
.banner{background:var(--banner);color:var(--banner-ink);margin:16px 0 0;padding:34px 20px 26px;text-align:center}
.banner h1{font:400 clamp(34px,5.4vw,64px)/1.05 var(--serif);margin:0}
.banner p.lead{margin:10px 0 22px;font-size:clamp(15px,1.8vw,19px);opacity:.92}
.search{max-width:860px;margin:0 auto;text-align:left}
.qrow{display:flex;background:#fff;border-radius:3px;overflow:hidden}
#q{flex:1;min-width:0;border:0;background:#fff;color:#23282e;padding:14px 16px;font-size:17px}
#q:focus{outline:none}
.qrow:focus-within{outline:3px solid var(--wheat);outline-offset:1px}
.iconbtn{display:grid;place-items:center;width:52px;cursor:pointer;color:#333d49;border-left:1px solid #e3e5e8;background:#fff}
.iconbtn:hover{background:#f4f5f6}
.go{background:var(--primary);color:#fff;border:0;padding:0 22px;font-weight:700;cursor:pointer;font-size:16px}
.go:hover{filter:brightness(1.08)}
.chip.photo{display:flex;align-items:center;gap:10px;margin-top:10px;padding:6px 8px;background:rgba(255,255,255,.12);border-radius:3px;font-size:14px;color:var(--banner-ink)}
.chip.photo img{width:44px;height:44px;object-fit:cover;background:#fff}
.chip.photo span{flex:1;min-width:0}
.chip.photo button{border:0;background:transparent;cursor:pointer;padding:6px 8px;color:inherit}
.bhint{margin:10px 0 0;font-size:13px;opacity:.7}
@media (hover:none){.bhint{display:none}}

/* filter bar */
.filters{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding:16px 0 12px;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1 1 100%;min-width:0;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chips button{white-space:nowrap;border:1px solid var(--line);background:var(--surface);border-radius:3px;padding:7px 12px;cursor:pointer;font-size:14px;color:var(--text)}
.chips button:hover{border-color:var(--sage)}
.chips button[aria-pressed="true"]{background:var(--chip-on);border-color:var(--chip-on);color:var(--chip-on-ink)}
.sel{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px;flex:1 1 220px;min-width:0;max-width:340px}
.sel.narrow{flex:0 1 150px}
@media (max-width:560px){.filters{gap:10px}.sel{flex:1 1 55%}.sel.narrow{flex:1 1 30%}}
.sel select,.sel input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:3px;padding:9px 10px;font-size:15px;color:var(--text)}

.status{min-height:22px;margin:14px 0 10px;color:var(--muted);font-size:14px}
.status .bar{display:inline-block;width:120px;height:6px;background:var(--line);vertical-align:middle;margin-left:8px;overflow:hidden}
.status .bar i{display:block;height:100%;background:var(--sage);width:0;transition:width .2s}

/* results grid: photo tiles like "Shop by Rooms" */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px 22px}
@media (max-width:560px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}}
.card{display:flex;flex-direction:column;min-width:0}
.imgwrap{display:block;aspect-ratio:1/1;background:#fff;border:1px solid var(--line);padding:10px}
.imgwrap img{width:100%;height:100%;object-fit:contain;display:block}
.card .vendor{margin-top:10px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--clay);font-weight:700}
.card .name{font:700 16px/1.25 var(--sans);color:var(--text);margin:3px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card{container-type:inline-size}
.actions{margin-top:auto;padding-top:8px;display:flex;gap:5px;align-items:center;min-width:0}
.actions .link{flex:1;font-size:14px;color:var(--steel);text-decoration:none;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions .link:hover{text-decoration:underline}
.actions button{flex:0 0 auto;min-width:32px;height:32px;border:1px solid var(--line);background:var(--surface);border-radius:3px;padding:0 6px;cursor:pointer;font-size:15px;line-height:1;color:var(--text)}
.actions .link{min-width:0}
@container (max-width:250px){.actions .link{font-size:0}.actions .link::after{content:"View ↗";font-size:13px}.actions{gap:4px}.actions button{min-width:29px;padding:0 4px}}
.actions button:hover{border-color:var(--sage)}
.actions .save[aria-pressed="true"]{background:var(--clay);color:#fff;border-color:var(--clay)}
@media (max-width:560px){.actions .link{font-size:0}.actions .link::after{content:"Open ↗";font-size:14px}.card .name{font-size:14px}}
.more{text-align:center;margin:26px 0}
.btn{border:1px solid var(--slate);background:var(--surface);color:var(--text);border-radius:3px;padding:10px 22px;cursor:pointer;font-weight:700}
.btn:hover{background:var(--soft)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}

/* empty state: "Shop by Type" tiles */
.section-title{font:400 22px/1.2 var(--sans);color:var(--text);margin:26px 0 18px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:30px 36px}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}}
.tile{border:0;background:none;padding:0;cursor:pointer;text-align:center;color:var(--text)}
.tile .ti{aspect-ratio:1.38/1;background:#fff;border:1px solid var(--line);overflow:hidden}
.tile img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .25s}
.tile:hover img{transform:scale(1.04)}
.tile strong{display:block;margin-top:12px;font:700 18px/1.2 var(--sans)}
.tile small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.examples{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.examples button{border:1px solid var(--line);background:var(--surface);border-radius:3px;padding:8px 14px;cursor:pointer;color:var(--text)}
.examples button:hover{border-color:var(--sage)}

/* saved drawer */
.board{position:fixed;inset:0 0 0 auto;width:min(420px,100%);background:var(--surface);border-left:1px solid var(--line);z-index:20;display:flex;flex-direction:column;box-shadow:-10px 0 30px rgba(0,0,0,.18)}
.boardhead{display:flex;justify-content:space-between;align-items:center;padding:0 16px;height:52px;background:var(--nav);color:#fff}
.boardhead h2{margin:0;font:400 22px var(--serif)}
.boardhead button{background:none;border:0;color:#fff;font-size:18px;cursor:pointer}
.boardlist{flex:1;overflow:auto;padding:8px 16px}
.bitem{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.bitem img{width:60px;height:60px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.bitem a{color:var(--text);text-decoration:none;font-size:14px;font-weight:700;flex:1}
.bitem small{display:block;color:var(--muted);font-weight:400}
.bitem button{border:0;background:transparent;cursor:pointer;color:var(--muted)}
.boardactions{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.foot{border-top:1px solid var(--line);margin-top:30px;padding:16px 0 34px;color:var(--muted);font-size:13px}

/* shop the room */
.roomcta{margin-top:12px;text-align:center}
.roombtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--banner-ink);border:1px solid rgba(255,255,255,.45);border-radius:3px;padding:8px 14px;font-size:15px}
.roombtn:hover{background:rgba(255,255,255,.1);border-color:var(--wheat)}
.room{padding-top:6px;border-bottom:1px solid var(--line);padding-bottom:18px}
.roomhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.roomhead .section-title{margin:18px 0 6px}
.roomtools{display:flex;gap:8px}
.roomtools .btn{padding:8px 14px}
#drawBtn[aria-pressed="true"]{background:var(--sage);border-color:var(--sage);color:#fff}
.roomhint{color:var(--muted);font-size:14px;margin:0 0 14px}
.roomgrid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.roomgrid{grid-template-columns:minmax(0,1fr)}}
.roomphoto{position:relative;user-select:none;touch-action:auto}
@media (min-width:861px){.roomphoto{position:sticky;top:12px}}
.roomphoto.drawing{touch-action:none;cursor:crosshair}
.roomphoto img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.rbox{position:absolute;border:2px solid var(--wheat);box-shadow:0 0 0 1px rgba(0,0,0,.35);cursor:pointer;background:rgba(224,171,108,.06)}
.rbox.on{border-color:#fff;background:rgba(255,255,255,.14)}
.rbox span{position:absolute;left:-2px;top:-2px;background:var(--wheat);color:#23282e;font:700 12px/1 var(--sans);padding:3px 6px;white-space:nowrap}
.rbox.drawn{border-style:dashed}
.roomrows{display:flex;flex-direction:column;gap:22px;min-width:0}
.rrow{min-width:0;scroll-margin-top:12px}
.rrow.on .rrhead strong{color:var(--clay)}
.rrhead{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.rrhead .num{display:inline-grid;place-items:center;min-width:24px;height:24px;background:var(--wheat);color:#23282e;font-weight:700;font-size:13px}
.rrhead strong{font-size:17px}
.rrhead select{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:3px;padding:5px 8px;font-size:13px}
.rrhead .x{margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:3px;padding:4px 9px;cursor:pointer;color:var(--muted)}
.rrscroll{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,22vw,200px);gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.rrscroll .card{scroll-snap-align:start}
.rrscroll .card .name{font-size:14px}
.rrscroll .actions .link{font-size:0}.rrscroll .actions .link::after{content:"Open ↗";font-size:13px}
.rrwait{color:var(--muted);font-size:14px;padding:18px 0}
.rrhead select{max-width:55%}

/* refresh dialog */
.linkbtn{background:none;border:0;padding:0;color:var(--steel);text-decoration:underline;cursor:pointer;font-size:13px}
.dlg{border:0;padding:0;width:min(520px,calc(100% - 32px));background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.dlg::backdrop{background:rgba(20,24,28,.55)}
.dlghead{display:flex;justify-content:space-between;align-items:center;background:var(--nav);color:#fff;padding:0 16px;height:52px;margin:0}
.dlghead h2{margin:0;font:400 22px var(--serif)}
.dlghead button{background:none;border:0;color:#fff;font-size:18px;cursor:pointer}
.dlgbody{padding:16px}
.dlgbody p{margin:0 0 12px}
.small{font-size:13px;color:var(--muted)}
.runstat{padding:10px 12px;background:var(--soft);border-left:4px solid var(--sage);margin-bottom:14px;font-size:14px}
.runstat.bad{border-left-color:var(--clay)}
.runstat.busy{border-left-color:var(--wheat)}
.dlgactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dlgactions .btn{text-decoration:none;display:inline-block}
.dlg .sel{max-width:none}

/* customer view */
.navlinks .custbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:4px 12px;font-size:14px}
.navlinks .custbtn[aria-pressed="true"]{background:var(--sage);border-color:var(--sage)}
@media (max-width:640px){.custlabel{display:none}}
body.cust .nav{background:var(--forest)}
body.cust .custbanner{display:block}
.custbanner{display:none;background:var(--sage);color:#fff;text-align:center;font-size:13px;padding:5px 12px}
body.cust .card .vendor, body.cust .card .actions .link, body.cust .sel.vendor, body.cust .bitem small .vd, body.cust .foot{display:none}
body.cust .imgwrap{cursor:default}

/* client boards */
.navlinks .pill .bbname{background:none;padding:0;font-weight:400;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.navlinks .pill .bbname{display:none}}
.boardpick{display:flex;gap:8px;align-items:flex-end;padding:12px 16px 0}
.boardpick .sel{flex:1;max-width:none}
.boardpick .btn{padding:9px 12px;white-space:nowrap}
.newboard{display:flex;gap:6px;padding:10px 16px 0;flex-wrap:wrap}
.newboard input{flex:1 1 200px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:3px;padding:9px 10px;font-size:15px}
.newboard .btn{padding:8px 12px}
.boardmeta{padding:12px 16px 8px;border-bottom:1px solid var(--line)}
#boardName{width:100%;border:1px solid transparent;background:transparent;color:var(--text);font:400 22px var(--serif);padding:2px 4px;margin-left:-4px;border-radius:3px}
#boardName:hover,#boardName:focus{border-color:var(--line);background:var(--surface);outline:none}
.boardmeta small{display:block;color:var(--muted);font-size:12px;padding-left:1px}
.bitem{align-items:flex-start}
.bbody{flex:1;min-width:0}
.bbody .bname{display:block;color:var(--text);text-decoration:none;font-size:14px;font-weight:700}
.bopts{display:flex;gap:6px;margin-top:6px}
.bnote{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:3px;padding:6px 8px;font-size:13px}
.bqty{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.bqty input{width:52px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:3px;padding:5px 6px;font-size:13px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:3px;font-size:14px;z-index:30;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:calc(100% - 32px)}
.toast .linkbtn{color:var(--wheat);font-size:14px}

/* special-order approval */
.sotoggle{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text);padding:9px 12px;border:1px solid var(--line);border-radius:3px;background:var(--surface);cursor:pointer;white-space:nowrap}
.sotoggle input{width:16px;height:16px;accent-color:var(--sage)}
.sobadge{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:2px;text-transform:uppercase;letter-spacing:.04em;cursor:help;align-self:flex-start}
.sobadge.no{background:#f7e3dd;color:#8a3b22}
.sobadge.check{background:#fbf0de;color:#7a5413}
body.cust .sobadge{display:none!important}
.bbody .sobadge{display:table;margin-top:4px}
body.cust .sotoggle a{display:none}

/* refine chips */
.refine{display:flex;gap:10px;align-items:center;margin:-4px 0 14px;min-width:0}
.refine .flabel{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.refine .chips{flex:1 1 auto;padding-bottom:2px}
.refine .chips button[aria-pressed="true"]{background:var(--clay);border-color:var(--clay);color:#fff}
.refine .clear{background:none;border:0;color:var(--steel);text-decoration:underline;cursor:pointer;font-size:13px;white-space:nowrap}
@media (min-width:760px){.refine .chips{flex-wrap:wrap;overflow:visible}}

/* compare */
.actions .cmp[aria-pressed="true"]{background:var(--steel);border-color:var(--steel);color:#fff}
.cmptray{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:25;display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.2);padding:8px 10px;border-radius:4px;max-width:calc(100% - 24px)}
.cmpthumbs{display:flex;gap:6px}
.cmpthumbs img{width:44px;height:44px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.cmptray .btn{padding:8px 14px}
.cmpdlg{width:min(1100px,calc(100% - 24px))}
.cmpbody{overflow:auto;max-height:80vh;padding:0 0 12px}
.cmptbl{border-collapse:collapse;width:100%;font-size:14px}
.cmptbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px 12px;vertical-align:top;white-space:nowrap;width:1%}
.cmptbl td{padding:10px 12px;vertical-align:top;border-left:1px solid var(--line);min-width:170px}
.cmptbl tr+tr td,.cmptbl tr+tr th{border-top:1px solid var(--line)}
.cmptbl .cimg{aspect-ratio:1;max-height:190px;margin:0 auto;background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:6px}
.cmptbl .cimg img{max-width:100%;max-height:100%;object-fit:contain}
.cmptbl .cname{font-weight:700;font-size:15px}
.cmptbl .big{font-weight:700;color:var(--clay)}
.cmptbl .rm{background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:underline;font-size:12px;padding:0;margin-top:6px}
body.cust .cmptbl .vendorrow{display:none}

/* complete the room */
.anchor{display:flex;gap:14px;align-items:center;margin:4px 0 18px;padding:10px;background:var(--soft);border-left:4px solid var(--wheat)}
.anchor img{width:84px;height:84px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.anchor strong{display:block;font-size:16px}
.anchor small{color:var(--muted)}
#complete .rrhead strong{font-size:17px}

/* color / swatch match */
.colorpick{position:relative}
.colorbtn{display:inline-flex;align-items:center;gap:8px;font:14px var(--sans);color:var(--text);padding:9px 12px;border:1px solid var(--line);border-radius:3px;background:var(--surface);cursor:pointer;white-space:nowrap}
.colorbtn .dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.2);background:conic-gradient(#b46a4b,#c79a38,#8d9c84,#5b7896,#27324a,#d7b1a6,#b46a4b)}
.colorbtn.on{border-color:var(--sage);box-shadow:inset 0 0 0 1px var(--sage)}
.colorclear{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:11px;cursor:pointer;line-height:1}
.colorpop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:min(340px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:12px}
.cphead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:14px}
.cphead button{border:0;background:none;color:var(--text);font-size:16px;cursor:pointer}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.swatches button{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:0;cursor:pointer;color:var(--muted);font:11px var(--sans)}
.swatches i{display:block;width:100%;aspect-ratio:1;border-radius:3px;border:1px solid rgba(0,0,0,.15)}
.swatches button[aria-pressed="true"] i{outline:2px solid var(--sage);outline-offset:2px}
.cprow{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:12px}
.cpcustom{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}
.cpcustom input{width:40px;height:30px;border:1px solid var(--line);padding:0;background:none;cursor:pointer}
.cpphoto{cursor:pointer}
.swatchwrap{margin-top:10px}
.swatchwrap canvas{display:block;max-width:100%;max-height:260px;border:1px solid var(--line);cursor:crosshair;touch-action:manipulation}
.swatchwrap small{color:var(--muted)}
@media (max-width:560px){.colorpop{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;max-height:calc(100vh - 32px);overflow:auto}.swatchwrap canvas{max-height:30vh;width:auto}}
.cdot{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.2);vertical-align:-1px;margin-right:4px}
.qsbadge{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:2px;text-transform:uppercase;letter-spacing:.04em;cursor:help;align-self:flex-start;background:#e3ebe2;color:#3d4f3d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .qsbadge{background:#2f3d30;color:#cfe0cd}}

/* find a piece for this room */
.roomcta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
button.roombtn{background:none;font:inherit;font-size:15px}
.helpphoto{min-height:220px}
.helpdrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:240px;border:2px dashed var(--line);border-radius:4px;cursor:pointer;color:var(--muted);text-align:center;padding:20px;background:var(--surface)}
.helpdrop b{color:var(--text);font-size:16px}
.helpdrop.drag{border-color:var(--sage);background:rgba(103,125,104,.08)}
.helpform{display:flex;flex-direction:column;gap:10px;min-width:0}
.helplabel{font-weight:700;font-size:15px;color:var(--text)}
.helpform textarea{width:100%;font:15px/1.4 var(--sans);padding:10px 12px;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--text);resize:vertical}
.helpex{display:flex;flex-wrap:wrap;gap:6px}
.helpex button{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:14px;padding:4px 10px;font-size:12.5px;cursor:pointer;text-align:left}
.helpex button:hover{border-color:var(--sage);color:var(--text)}
.helpacts{display:flex;gap:8px;flex-wrap:wrap}
#helpDraw[aria-pressed="true"]{background:var(--sage);border-color:var(--sage);color:#fff}
.helpsum{font-size:14px;color:var(--text);display:flex;flex-direction:column;gap:8px}
.helpsum .hrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.helpsum .hk{font-weight:700;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
.helpsum .note{color:#7a5413;background:#fbf0de;padding:6px 10px;border-radius:3px}
.helpsum .err{color:#8a3b22;background:#f7e3dd;padding:6px 10px;border-radius:3px}
.hsw{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:3px 9px 3px 4px;font-size:12px;color:var(--text);cursor:pointer}
.hsw i{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.hsw[aria-pressed="false"]{opacity:.4;text-decoration:line-through}
.rbox.ref{border-color:#fff;border-style:dashed;background:rgba(255,255,255,.06);cursor:default}
.rbox.ref span{background:#fff}
/* help guide */
.gbtn{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:8px;background:var(--clay);color:#fff;border:0;border-radius:28px;padding:12px 20px 12px 14px;font:700 16px var(--sans);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.gbtn span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--clay);font-size:17px}
.gbtn:hover{filter:brightness(1.08)}
.gbtn.nudge{animation:gnudge 1s ease-in-out 3}
@keyframes gnudge{50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.gbtn.nudge{animation:none}}
.gpanel{position:fixed;right:18px;bottom:82px;z-index:41;width:min(400px,calc(100vw - 24px));max-height:min(640px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.28);overflow:hidden}
.ghead{display:flex;justify-content:space-between;align-items:center;background:var(--slate);color:#fff;padding:12px 16px;font-size:18px}
.ghead button{background:none;border:0;color:#fff;font-size:20px;cursor:pointer;padding:2px 6px}
.gask{padding:14px 16px 8px;border-bottom:1px solid var(--line)}
.gl{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.grow{display:flex;gap:8px}
.grow input{flex:1;min-width:0;font:16px var(--sans);padding:10px 12px;border:2px solid var(--line);border-radius:4px;background:var(--surface);color:var(--text)}
.grow input:focus{border-color:var(--sage);outline:none}
.gasknow{background:var(--sage);color:#fff;border:0;border-radius:4px;padding:0 16px;font:700 16px var(--sans);cursor:pointer}
.gbody{overflow-y:auto;padding:10px 16px 16px;font-size:16px;line-height:1.5}
.gsub{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:14px 0 8px}
.gpop,.glist{display:flex;flex-direction:column;gap:6px}
.gpop button,.glist button{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:11px 14px;font:15.5px var(--sans);color:var(--text);cursor:pointer}
.gpop button{border-left:4px solid var(--wheat)}
.gpop button:hover,.glist button:hover{border-color:var(--sage);background:rgba(103,125,104,.07)}
.glink{background:none;border:0;padding:12px 0 0;color:var(--steel);text-decoration:underline;cursor:pointer;font:15px var(--sans)}
.glink.back{padding:4px 0 6px;text-decoration:none;font-weight:700}
.gt{font:400 21px/1.3 var(--serif);margin:4px 0 10px}
.gsteps{margin:0 0 14px;padding-left:24px}
.gsteps li{margin:0 0 10px;padding-left:4px}
.gsteps li::marker{font-weight:700;color:var(--clay)}
.gshow{width:100%;background:var(--clay);color:#fff;border:0;border-radius:4px;padding:13px;font:700 17px var(--sans);cursor:pointer}
.gshow:hover{filter:brightness(1.08)}
.gmiss{margin:6px 0 10px}
.ghl{position:relative;z-index:35;outline:4px solid var(--wheat)!important;outline-offset:4px;border-radius:4px;animation:gpulse 1.4s ease-in-out infinite;box-shadow:0 0 0 9999px rgba(20,24,28,.45)!important}
@keyframes gpulse{50%{outline-color:#fff}}
@media (prefers-reduced-motion:reduce){.ghl{animation:none}}
.gspot{position:fixed;inset:0;z-index:42;pointer-events:none}
.gtip{position:fixed;max-width:min(320px,calc(100vw - 24px));background:var(--wheat);color:#23282e;font:700 16px/1.35 var(--sans);padding:12px 14px;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.3);pointer-events:auto}
.gtip button{display:block;margin-top:8px;background:#23282e;color:#fff;border:0;border-radius:3px;padding:6px 12px;font:700 14px var(--sans);cursor:pointer}
@media (max-width:560px){.gbtn{padding:10px 16px 10px 12px;font-size:15px}}
@media print{.guide{display:none}}

.gbtn{touch-action:none;user-select:none}
.gdot{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:var(--sage);border:2px solid #fff}
.ghead{cursor:move;touch-action:none;user-select:none;gap:10px}
.gtools{display:flex;gap:6px;align-items:center}
.ghead .gclear{font:700 13px var(--sans);border:1px solid rgba(255,255,255,.5);border-radius:3px;padding:4px 9px}
.ghead #gMin{font-size:24px;line-height:1;padding:0 8px 4px}
.guide.dragging,.guide.dragging *{cursor:grabbing!important}
.guide.dragging .gpanel{opacity:.92}
.gask{border-top:1px solid var(--line);border-bottom:0;padding:10px 16px 14px}
.gbody{flex:1;min-height:120px}
.gyou{margin:14px 0 8px auto;max-width:85%;width:fit-content;background:var(--steel);color:#fff;padding:8px 12px;border-radius:12px 12px 2px 12px;font-size:15px}
.gans{border-left:3px solid var(--wheat);padding:2px 0 6px 12px;margin-bottom:6px}
.gans .gt{margin-top:2px}
.gbody{position:relative}.gnote{font-size:13px;color:var(--muted);margin:12px 0 0}
.havbadge{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:2px;text-transform:uppercase;letter-spacing:.04em;align-self:flex-start;background:var(--slate);color:#fff}
.card.hav .imgwrap{outline:2px solid var(--slate);outline-offset:-2px}