/* Visual language follows the unifi-meeting Select prototype. System fonts only: no external requests. */
:root{--ink:#242622;--muted:#5f615b;--accent:#bf533d;--accent-dark:#a43a25;--border:#d6d9d3;--paper:#f4f5f2;--ok:#2f6b3a;--warn:#8a5a00;--font:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;--display:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.5 var(--font);background:#fff}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3,p{margin-top:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:10}
.skip-link:focus{left:10px}
.review-banner{background:#2e302b;color:#fff;font-size:13px;text-align:center;padding:7px 16px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}

.brand-header{min-height:96px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:24px}
.brand-header img{width:210px;max-width:100%;height:auto}
.brand-header nav{display:flex;gap:28px}
.brand-header nav a{font-size:14px;font-weight:600;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.brand-header nav a[aria-current=page]{border-bottom-color:var(--accent)}

main{max-width:1600px;margin:auto;padding:0 5%}
.intro{padding:40px 0 26px}
.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;color:var(--accent-dark);margin-bottom:14px}
h1{font:400 clamp(38px,4.4vw,62px)/1.05 var(--display);letter-spacing:-1px;margin-bottom:14px}
h1 em{font-style:normal;color:var(--accent-dark)}
.intro-copy{color:var(--muted);max-width:700px;margin:0}

.steps ol{list-style:none;display:flex;margin:0 0 30px;padding:0;border-bottom:1px solid var(--border)}
.steps li{flex:1}
.step{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-bottom:2px solid transparent;padding:14px 8px;text-align:left;color:var(--muted);font-size:14px}
.step.active{border-bottom-color:var(--accent);color:var(--ink)}
.step-num{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--border);border-radius:50%;font-size:12px;flex-shrink:0}
.active .step-num{background:var(--accent-dark);color:#fff;border-color:var(--accent-dark)}
.step.done .step-num{border-color:var(--accent);color:var(--accent-dark)}

.workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:5%;align-items:start}
.visual-panel{position:sticky;top:20px}
.preview-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.preview-top .eyebrow{color:var(--muted);margin:0}
.view-tabs{display:flex;background:var(--paper);padding:3px}
.view-tabs button{border:0;background:transparent;padding:7px 12px;color:var(--muted);font-size:13px}
.view-tabs button[aria-pressed=true]{color:var(--ink);background:#fff;box-shadow:0 1px 3px #0002}
.photo,.plan{height:340px;background:var(--paper);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:contain;display:block}
.plan{display:grid;place-items:center;padding:14px;background-image:linear-gradient(#d8ddd755 1px,transparent 1px),linear-gradient(90deg,#d8ddd755 1px,transparent 1px);background-size:20px 20px}
.plan svg{width:100%;height:100%}
.preview-caption{font-size:13px;color:var(--muted);padding:10px 0 16px;margin:0}
.build-card{background:var(--paper);padding:20px 22px}
.build-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.build-heading h2{font-size:20px;font-weight:500;margin:0}
.text-button{border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:4px;font-size:13px;padding:4px}
.build-row{display:flex;justify-content:space-between;gap:18px;font-size:14px;padding:7px 0;border-bottom:1px solid #e6e8e3}
.build-row dt{color:var(--muted);flex-shrink:0;max-width:40%}
.build-row dd{margin:0;text-align:right}
.build-row button{font:inherit;border:0;background:none;padding:0;text-align:right;color:var(--ink);text-decoration:underline dotted;text-underline-offset:3px}
dl{margin:0}
.build-footer{display:flex;justify-content:space-between;gap:20px;padding-top:14px;margin-top:8px;font-size:13px}
.mini-label{font-size:11px;letter-spacing:1.5px;color:var(--muted)}
.muted{color:var(--muted);font-size:13px;margin:6px 0 0}

.status{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:600;padding:4px 10px;border:1px solid currentColor;margin:4px 0 8px}
.status-standard,.status-included{color:var(--ok)}
.status-listed{color:#3c4a5c}
.status-check,.status-review{color:var(--warn)}
.status-review{border-style:dashed}

.step-meta{display:flex;justify-content:space-between;align-items:center;margin:2px 0 16px;gap:20px}
.step-meta .eyebrow{margin:0}
.step-meta>span:last-child{font-size:13px;color:var(--muted)}
#configuration:focus{outline:none}
.config-panel h2{font:400 34px/1.12 var(--display);margin-bottom:10px}
.step-description{color:var(--muted);margin-bottom:22px}
.field-label{font-size:14px;display:block;font-weight:600;margin:22px 0 10px}
.option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.option-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.option-grid.one{grid-template-columns:1fr;margin-top:12px}
.option-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice{border:1px solid var(--border);padding:14px;background:#fff;color:var(--ink);text-align:left;position:relative;transition:border-color .2s,background .2s}
.choice:hover{border-color:var(--accent)}
.choice.selected{border-color:var(--accent);background:#fcf6f3;box-shadow:inset 0 0 0 1px var(--accent)}
.choice.selected::after{content:'✓';position:absolute;top:6px;right:9px;color:var(--accent-dark);font-size:13px}
.choice strong{display:block;font-weight:600;font-size:14px}
.choice small{font-size:13px;color:var(--muted);display:block;margin-top:4px}
.choice-status{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--warn);border:1px solid currentColor;padding:1px 6px}
.choice-status:empty{display:none}
.family-grid{display:grid;gap:12px}
.family{display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:center}
.family img{width:100%;height:120px;object-fit:contain;background:var(--paper);mix-blend-mode:multiply}
.family strong{font-size:19px}
.family em{display:block;font-style:normal;color:var(--accent-dark);font-size:14px;margin-top:2px}
.family .capacity{font-style:italic}
.shape-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.shape-grid img{width:100%;height:64px;object-fit:contain;mix-blend-mode:multiply;display:block;margin-bottom:8px}
.photo-choice img{width:100%;height:110px;object-fit:contain;display:block;margin-bottom:8px;mix-blend-mode:multiply}
.length-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.finish-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.finish{padding:8px}
.finish img{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:6px;display:block}
.pedestal-grid .finish img{aspect-ratio:1.8;object-fit:contain;mix-blend-mode:multiply}
.check-row{display:flex;align-items:flex-start;gap:12px;font-size:14px;margin-top:14px}
.check-row input{accent-color:var(--accent-dark);width:18px;height:18px;margin:3px 0 0;flex-shrink:0}
.check-row small{display:block;color:var(--muted);font-size:12px}
.custom-fields{padding:14px 16px;background:var(--paper);margin-top:12px;display:grid;gap:6px}
.custom-fields p{font-size:13px;color:var(--muted);margin:0 0 6px}
.custom-fields label,.contact label{font-size:14px;font-weight:500;margin-top:6px}
input[type=number],input[type=text],input[type=email],textarea{border:1px solid #9ea39a;padding:10px 12px;background:#fff;color:var(--ink);border-radius:0;width:100%}
textarea{resize:vertical;min-height:100px}
.note{font-size:14px;color:var(--muted);padding:12px 14px;border-left:2px solid var(--accent);background:var(--paper);margin:20px 0}
.note.warn{color:var(--ink);border-left-color:var(--warn);background:#fbf5e8}
.acc-list{list-style:none;margin:0;padding:0}
.accessory{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--border);padding:6px 0 10px}
.accessory .check-row{margin-top:8px}
.accessory .status{margin:8px 0 0;font-size:12px;flex-shrink:0}
.actions{display:flex;gap:12px;margin:26px 0 0}
.actions #next{margin-left:auto;min-width:180px}
.primary,.secondary{border:1px solid var(--accent-dark);padding:13px 24px;font-size:14px;font-weight:600}
.primary{background:var(--accent-dark);color:#fff}
.primary:hover{background:#8c3020}
.secondary{background:#fff;color:var(--ink);border-color:var(--border)}
#validation{color:var(--accent-dark);font-size:14px;margin-top:14px;font-weight:600}
.review-list{border-top:1px solid var(--border);margin-top:12px}
.review-list .build-row{padding:11px 0;font-size:15px}
h3.sub{font-size:16px;font-weight:600;margin:24px 0 8px}
.issues,.safety,.sources{padding-left:20px;font-size:14px;margin:0}
.issues li,.safety li,.sources li{margin-bottom:8px}
.safety li{font-weight:500}
.sources small{color:var(--muted)}
.local-link{font-size:12px;color:var(--muted);margin-left:6px}
.contact{margin-top:10px}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.contact-grid label{display:block}
.download-actions{display:grid;gap:10px;margin-top:22px}
.download-actions button,.download-actions a{padding:13px 18px;border:1px solid var(--border);text-decoration:none;background:#fff;text-align:left;font-size:14px;display:flex;justify-content:space-between;gap:15px}
.download-actions small{color:var(--muted);font-size:12px}
.download-actions a.primary{background:var(--accent-dark);color:#fff;border-color:var(--accent-dark);justify-content:center}
.review-note{font-size:13px;color:var(--muted);margin-top:18px}
.resource-strip{display:flex;align-items:center;justify-content:space-between;padding:30px 0;gap:24px;border-top:1px solid var(--border);margin-top:70px}
.resource-strip .eyebrow{margin-bottom:6px}
.resource-strip h3{font-size:18px;font-weight:400;margin:0}
.resource-strip a{font-size:14px}
footer{display:flex;gap:36px;align-items:center;border-top:1px solid var(--border);padding:30px 5%;font-size:12px;color:var(--muted)}
footer p{margin:0}
footer span{margin-left:auto}
dialog{padding:30px;border:1px solid var(--border);max-width:460px}
dialog::backdrop{background:#1118}
dialog h2{font:400 28px var(--display)}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.show{opacity:1}
.print-only{display:none}
.training-page{padding-top:55px;padding-bottom:65px}
.training-page h1{max-width:780px}
.training-intro{font-size:19px;line-height:1.55;max-width:760px;color:var(--muted);margin:16px 0 35px}
.training-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.training-card{border:1px solid var(--border);padding:20px;background:#fff;display:flex;flex-direction:column}
.training-card h2{font:400 28px var(--display);line-height:1.15;margin:3px 0 8px}
.training-card p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.5;min-height:62px}
.training-card video{display:block;width:100%;aspect-ratio:16/9;background:#101e2e;margin:12px 0 16px}
.training-links{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;margin-top:auto}
.training-note{border-left:2px solid var(--accent);background:var(--paper);padding:16px 20px;margin:28px 0 0;font-size:14px;color:var(--muted);max-width:850px}
.research-page{padding-top:55px;padding-bottom:65px}
.research-page h1{max-width:850px}
.research-intro{font-size:19px;line-height:1.55;max-width:830px;color:var(--muted);margin:16px 0 35px}
.research-section{border-top:1px solid var(--border);padding:28px 0 25px;max-width:920px}
.research-section h2{font:400 31px var(--display);margin:5px 0 15px}
.research-section p,.research-section li{font-size:16px;line-height:1.65}
.research-section ul{padding-left:22px}
.research-question{border-left:2px solid var(--accent);background:var(--paper);padding:15px 18px}

@media(max-width:1000px){.workspace{gap:28px}.finish-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.photo,.plan{height:290px}.step{font-size:12px;gap:6px;padding-left:2px}.family{grid-template-columns:130px 1fr}}
@media(max-width:1000px){.training-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  main{padding:0 18px}.brand-header{min-height:76px;padding:0 18px;flex-wrap:wrap}.brand-header img{width:160px}.brand-header nav{gap:12px;flex-wrap:wrap}
  .workspace{display:flex;flex-direction:column;gap:26px}.visual-panel{position:static;width:100%}
  .photo,.plan{height:240px}.config-panel{width:100%}.config-panel h2{font-size:30px}
  .step{flex-direction:column;text-align:center;font-size:11px;padding:10px 2px}.step span:last-child{word-break:break-word}
  .option-grid,.option-grid.three,.length-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .family{grid-template-columns:1fr}.family img{height:150px}
  .contact-grid{grid-template-columns:1fr}.accessory{flex-direction:column;align-items:flex-start}
  .actions #next{min-width:0;flex:1}.resource-strip{flex-direction:column;align-items:flex-start}footer{flex-wrap:wrap}footer span{margin-left:0}
  .training-grid{grid-template-columns:1fr}.training-page{padding-top:32px}.training-page h1{font-size:39px}.training-card p:not(.eyebrow){min-height:0}
  .research-page{padding-top:32px}.research-page h1{font-size:39px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{html.printing body>*{display:none!important}html.printing body>.print-only{display:block!important;font-size:11pt;padding:14mm}.print-only h1{font-size:28pt}.print-only svg{width:100%;max-height:220px}.print-only .build-row{font-size:11pt}}

/* Select Pro-inspired visual system for the private UNIFI review site. */
:root{--ink:#3d3936;--muted:#5e514d;--accent:#e0786b;--accent-dark:#cf6d60;--border:#e3dfda;--paper:#f4f4f4;--font:'Helvetica Neue',Arial,sans-serif;--display:Georgia,'Times New Roman',serif}
body{color:var(--muted);font-weight:400}
.review-banner{background:#3d3936;font-size:12px;letter-spacing:.025em;padding:6px 16px}
.brand-header{min-height:120px;border-bottom:3px solid var(--accent);padding:0 max(5%,calc((100vw - 1400px)/2));gap:36px}
.brand-header img{width:220px}
.brand-header nav{gap:24px;align-items:center}
.brand-header nav a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#57534e;border-bottom:0;white-space:nowrap}
.brand-header nav a:hover,.brand-header nav a[aria-current=page]{color:var(--accent-dark)}
main{max-width:1500px;padding:0 5%}
.intro{text-align:center;padding:54px 0 45px}
.intro .eyebrow{margin-bottom:13px}
.eyebrow{font-size:11px;letter-spacing:.19em;color:var(--accent-dark)}
h1{font:400 clamp(40px,4vw,58px)/1.14 var(--display);letter-spacing:-.025em;color:var(--ink)}
h1 em{color:inherit}
.intro-copy{max-width:690px;margin:0 auto;color:var(--muted);line-height:1.65;font-size:17px}
.select-shell{max-width:1170px;margin:0 auto;background:var(--paper);border:1px solid var(--border);padding:42px 44px 50px;min-height:480px}
.select-toolbar{position:relative;display:flex;justify-content:space-between;align-items:start;gap:28px;margin-bottom:40px;min-height:46px}
.steps{flex:1;min-width:0}
.steps ol{margin:0;border:0;gap:8px}
.steps li{flex:1;min-width:0}
.step{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:0;padding:0;width:100%;font-size:10px;letter-spacing:.12em;text-transform:uppercase;line-height:1.25;color:#77716d;font-weight:600}
.step::before{content:'';display:block;width:100%;height:3px;background:#d8d3ce;order:-1}
.step.active,.step.done{color:var(--accent-dark);border:0}
.step.active::before,.step.done::before{background:var(--accent)}
.step-num{display:none}
.build-disclosure{flex:0 0 auto;position:relative;margin-top:-8px}
.build-disclosure>summary{list-style:none;background:#fff;border:1px solid #c4bfb9;color:#57534e;padding:12px 15px;min-width:142px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.13em;cursor:pointer}
.build-disclosure>summary::-webkit-details-marker{display:none}
.build-disclosure>summary span{font-size:16px;line-height:0;margin-left:5px;color:var(--accent-dark)}
.build-disclosure[open]>summary{border-color:var(--accent);color:var(--accent-dark)}
.build-disclosure[open]>summary span{display:inline-block;transform:rotate(180deg)}
.visual-panel{position:absolute;right:0;top:50px;width:min(420px,calc(100vw - 40px));background:#fff;border:1px solid var(--border);padding:19px;box-shadow:0 12px 28px #3d393622;z-index:5}
.workspace{display:block;max-width:940px;margin:0 auto}
.config-panel{text-align:center}
.step-meta{justify-content:center;margin:0 0 16px;gap:10px}
.step-meta .eyebrow{color:#77716d;font-size:11px}
.step-meta>span:last-child{display:none}
.config-panel h2{font:400 29px/1.2 var(--display);color:var(--ink);margin-bottom:10px}
.step-description{max-width:650px;margin:0 auto 28px;line-height:1.6}
.field-label{text-align:left;color:var(--ink);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:28px 0 11px}
.choice{text-align:center;border-color:#d9d4cf;padding:16px 14px;min-height:94px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.choice:hover{border-color:var(--accent)}
.choice.selected{background:#fff;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.choice.selected::after{display:none}
.choice strong{font:400 20px/1.18 var(--display);color:var(--ink)}
.choice.selected strong{color:var(--accent-dark)}
.choice small{font-size:12px;line-height:1.45;margin-top:7px}
.choice-status{font-family:var(--font);font-size:10px}
.family-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.family{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:285px;padding:18px 18px 22px}
.family img{height:165px;width:100%;background:transparent;object-fit:contain;margin-bottom:5px}
.family strong{font-size:24px}
.family em{font-family:var(--font);font-size:12px;line-height:1.4;color:var(--muted)}
.family .capacity{font-style:normal}
.shape-grid img{height:104px;margin:0 auto 12px}
.photo-choice img{height:145px;margin:0 auto 12px}
.finish{min-height:0;padding:10px}
.finish img{margin-bottom:11px}
.option-grid,.finish-grid{gap:12px}
.actions{max-width:940px;justify-content:center;padding-top:27px;border-top:1px solid var(--border);margin:36px auto 0}
.actions #next{margin-left:auto}
.primary,.secondary{font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:14px 24px;border-radius:0}
.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.primary:hover{background:var(--accent-dark)}
.secondary{border-color:#c4bfb9;color:#57534e}
.note,.custom-fields,.review-list,.contact,.download-actions,.issues,.safety,.sources{text-align:left}
.check-row,.accessory{text-align:left}
.status{font-family:var(--font)}
.photo,.plan{height:220px}
.build-card{background:#fff;padding:12px 0 0;border-top:1px solid var(--border)}
.build-heading h2{font:400 24px var(--display)}
.view-tabs{background:#f4f4f4}
.view-tabs button[aria-pressed=true]{box-shadow:none;border:1px solid var(--accent);color:var(--accent-dark)}
.training-page,.research-page{text-align:center;padding-top:54px}
.training-page h1,.research-page h1{max-width:900px;margin-left:auto;margin-right:auto}
.training-intro,.research-intro{margin:16px auto 44px}
.training-grid,.research-section{text-align:left}
.training-card{border-color:var(--border);background:var(--paper);padding:22px}
.training-card h2,.research-section h2{color:var(--ink)}
.training-card video{background:#3d3936}
.resource-strip{max-width:1170px;margin:70px auto 0}
footer{border-top-color:var(--border)}
@media(max-width:1000px){.brand-header{min-height:100px;gap:22px}.brand-header nav{gap:15px}.brand-header nav a{font-size:10px}.select-shell{padding:32px}.family img{height:130px}.family{min-height:255px}}
@media(max-width:760px){
  .brand-header{padding:16px 18px;min-height:0;gap:8px;justify-content:center}.brand-header img{width:180px}.brand-header nav{width:100%;justify-content:center;gap:8px 16px}.brand-header nav a{font-size:10px}
  main{padding:0 15px}.intro{padding:38px 4px 31px}.intro-copy{font-size:15px}.select-shell{padding:22px 16px 28px}.select-toolbar{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-bottom:31px;padding-bottom:0}.steps ol{gap:6px}.step{font-size:9px;letter-spacing:.05em;text-align:left;align-items:flex-start;padding:0;gap:6px}.step span:last-child{display:none}.step.active span:last-child{display:block}.build-disclosure{position:static;align-self:flex-end;margin:0}.build-disclosure[open]{align-self:stretch}.build-disclosure>summary{padding:9px 12px;font-size:10px;min-width:125px;width:max-content;margin-left:auto}.visual-panel{position:static;width:100%;margin-top:8px}
  .config-panel h2{font-size:27px}.step-meta{margin-bottom:12px}.family-grid{grid-template-columns:1fr;gap:9px}.family{min-height:0;display:grid;grid-template-columns:40% 1fr;column-gap:12px;text-align:left;align-items:center;padding:12px}.family img{grid-row:span 3;height:115px;margin:0}.family strong{font-size:22px}.family em{margin-top:0}.shape-grid img{height:80px}.photo-choice img{height:100px}.finish-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.choice strong{font-size:18px}.actions{padding-top:18px}.resource-strip{margin-top:44px}.training-page,.research-page{padding-top:38px}.training-page h1,.research-page h1{font-size:38px}
}

/* Technology location drawing (top + side view), clickable markers and accessory photo cards. */
.drawings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:6px 0 10px;text-align:left}
.dwg-view{margin:0;background:#fff;border:1px solid var(--border);padding:12px 12px 14px}
.dwg-view figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#77716d;margin-bottom:8px}
.dwg{position:relative;width:100%}
.dwg svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.dwg svg .table,.dwg svg .slab{stroke:#5f5954;stroke-width:1.4}
.dwg svg .cab,.dwg svg .ped{stroke:#5f5954;stroke-width:1.2}
.dwg svg .leg{fill:#4a4643}
.dwg svg .disp{fill:#2b2927}
.dwg svg .tray{fill:#d9d5d0;stroke:#8d8781;stroke-width:1}
.dwg svg .floor,.dwg svg .wall{stroke:#a8a29c;stroke-width:2}
.dwg svg .cut{fill:#ffffffcc;stroke:#5f5954;stroke-width:1}
.dwg svg .under{fill:none;stroke:#5f5954;stroke-width:1.2;stroke-dasharray:3 2}
.dwg svg .zone{fill:#ffffff99;stroke:var(--warn);stroke-width:1.4;stroke-dasharray:5 4}
.dwg svg .seam{stroke:#5f5954;stroke-width:1.2}
.dwg svg .dim{font:12px var(--font);fill:#6f6863}
.marker{position:absolute;transform:translate(-50%,-50%);min-width:34px;height:34px;padding:0 8px;border-radius:17px;border:2px solid #3d3936;background:#fff;color:#3d3936;font:700 13px/30px var(--font);text-align:center;white-space:nowrap;box-shadow:0 1px 4px #3d393633;z-index:1}
button.marker:hover{border-color:var(--accent-dark);color:var(--accent-dark)}
.marker.is-zone{font-size:12px;letter-spacing:.02em}
.marker.is-review{border-style:dashed;border-color:var(--warn);color:var(--warn)}
.marker.is-info{border-color:#8d8781;color:#5f5954;background:#f4f4f4}
.marker.has-picks{background:var(--accent);border-color:var(--accent-dark);border-style:solid;color:#fff}
.marker.has-picks.is-review{background:#fbf0d9;border-color:var(--warn);border-style:dashed;color:#6b4600}
.marker.is-active{box-shadow:0 0 0 4px #e0786b66,0 1px 4px #3d393633;z-index:2}
.marker .count{position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;border-radius:9px;background:#3d3936;color:#fff;font-size:11px;line-height:18px;padding:0 4px}
.dwg-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;list-style:none;padding:0;margin:4px 0 0;font-size:12px}
.dwg-legend li{display:flex;align-items:center;gap:7px}
.marker.sample{position:static;transform:none;min-width:24px;height:24px;line-height:20px;font-size:11px;padding:0 5px;box-shadow:none;display:inline-block}
.dwg-note{font-size:12px;color:var(--warn);margin:8px 0 0}
.loc-panel{text-align:left;background:#fff;border:1px solid var(--border);border-top:3px solid var(--accent);padding:20px 20px 22px;margin:18px 0 6px}
.loc-head h3{font:400 24px/1.2 var(--display);color:var(--ink);margin:0 0 6px}
.loc-head .eyebrow{margin-bottom:6px}
.loc-source{font-size:12px;color:var(--muted);margin:0 0 4px}
.loc-panel h4.sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:20px 0 10px}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.acc-card{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid #d9d4cf;padding:0;color:var(--ink)}
.acc-card:hover{border-color:var(--accent)}
.acc-card.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.acc-card:disabled{opacity:1;cursor:default}
.acc-photo{position:relative;display:block;width:100%;aspect-ratio:16/10;background:#f7f6f4;border-bottom:1px solid var(--border)}
.acc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
/* Neutral stand-in for a device with no photo (2026-10-23 audit: it used to print "No photo on file"). No text: a soft tile with a faint dashed square, so the card keeps its shape and says nothing internal. */
.no-photo{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#f1efec,#e7e4df)}
.no-photo::after{content:"";width:34%;aspect-ratio:1;max-width:36px;border:1.5px dashed #c4beb6;border-radius:4px}
.acc-body{display:flex;flex-direction:column;gap:5px;padding:11px 12px 13px}
.acc-body strong{font:400 17px/1.2 var(--display)}
.acc-card.selected strong{color:var(--accent-dark)}
.acc-body small{font-size:12px;line-height:1.4;color:var(--muted)}
.acc-body .acc-ref{font-size:11px;color:#8d8781}
.acc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tag{display:inline-block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;border:1px solid currentColor;padding:2px 6px;white-space:nowrap}
.tag-listed{color:#3c4a5c}.tag-included,.tag-standard{color:var(--ok)}.tag-review,.tag-check{color:var(--warn);border-style:dashed}
.tag-picked{color:#fff;background:var(--accent-dark);border-color:var(--accent-dark)}
.feature-list{list-style:none;padding:0;margin:14px 0 0;font-size:14px}
.feature-list li{padding:8px 0;border-bottom:1px solid var(--border)}
.chosen{text-align:left}
.chosen-list{list-style:none;padding:0;margin:0;font-size:14px}
.chosen-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 0;border-bottom:1px solid var(--border)}
.chosen-list li>span:first-child{flex:1 1 220px;color:var(--ink)}
@media(max-width:760px){
  .drawings{grid-template-columns:1fr}
  .dwg-view{padding:10px 8px 12px}
  .marker{min-width:30px;height:30px;line-height:26px;font-size:12px;padding:0 6px}
  .marker.is-zone{font-size:11px}
  .loc-panel{padding:16px 14px 18px}
  .acc-grid{grid-template-columns:1fr 1fr;gap:9px}
  .acc-body{padding:9px 9px 11px}
  .acc-body strong{font-size:15px}
}
@media(max-width:340px){.acc-grid{grid-template-columns:1fr}}
@media print{.print-only .dwg svg{max-height:none}.print-only .drawings{grid-template-columns:1fr 1fr}}
.marker.has-picks:hover,.marker.has-picks:focus-visible{color:#fff;border-color:var(--accent-dark)}
.marker.has-picks.is-review:hover{color:#6b4600;border-color:var(--warn)}
.drawings{align-items:start}

/* Meeting: real CAD views with cut-in hotspots */
.drawings.cad{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.drawings.cad .cad-top{grid-column:1/-1}
.dwg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.cut-hi{position:absolute;transform:translate(-50%,-50%);border:2px solid transparent;pointer-events:none}
.cut-hi.on{background:#e0786b40;border-color:var(--accent-dark)}
.marker.is-cad{min-width:30px;height:30px;line-height:26px;font-size:12px;padding:0 5px;opacity:.96}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 8px}
.marker.is-pill{position:relative;transform:none;height:36px;line-height:32px;padding:0 14px;font-size:13px}
@media(max-width:760px){.drawings.cad{grid-template-columns:1fr}.marker.is-cad{min-width:24px;height:24px;line-height:20px;font-size:10px;padding:0 3px;border-width:2px}.marker.is-pill{height:34px;line-height:30px}}
.cut-chips{justify-content:center;margin:12px 0 4px}
.cut-chips .marker.is-pill{min-width:52px}
/* ---- Beta app additions (2026-10-20): easy mode, quote forms, a11y fixes ---- */
/* Focus ring: dark enough (about 7:1 on the light gray panel) to see on every surface. The coral accent alone was under 3:1. */
:focus-visible{outline:3px solid #7a2a1c;outline-offset:3px}
/* Primary buttons: a darker coral so white text meets 4.5:1 contrast; the hover is darker still. */
.primary{background:#b34e3e;border-color:#b34e3e}.primary:hover{background:#8c3020;border-color:#8c3020}
.primary:disabled,.secondary:disabled{opacity:.55;cursor:not-allowed}
.beta-tag{display:inline-block;vertical-align:middle;font:700 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#7a2a1c;border:1px solid #7a2a1c;padding:6px 8px;margin-left:6px;position:relative;top:-6px}
.h3{font-size:18px;font-weight:400;margin:0}
.text-button.inline{font-size:inherit;padding:0 2px;color:#7a2a1c}
#main:focus{outline:none}
.easy-shell{text-align:left}
.easy-shell h2{font:400 30px/1.2 var(--display);text-align:center;margin-bottom:8px}
.easy-shell .step-description{text-align:center;margin-bottom:22px}
.easy-shell fieldset{border:0;padding:0;margin:0 0 22px}
.easy-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.ef{display:grid;gap:5px}.ef label,.easy-shell label{font-size:14px;font-weight:500}
.ef input,.easy-shell textarea{font:inherit;padding:11px 12px;border:1px solid #b9b3ac;background:#fff;min-height:44px}
.easy-shell textarea{width:100%;min-height:90px;margin-top:5px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg-btn{min-height:44px;min-width:96px;padding:10px 18px;border:1px solid #b9b3ac;background:#fff;font-size:15px}
.seg-btn.selected{border-color:var(--accent-dark);box-shadow:inset 0 0 0 1px var(--accent-dark);color:#7a2a1c;font-weight:600}
.invalid>legend,.invalid>label{color:#a42a14}
.invalid input,fieldset.invalid .seg-btn,fieldset.invalid .choice{border-color:#a42a14}
.form-error{color:#a42a14;font-weight:600;font-size:14px;min-height:1em;margin:8px 0}
.who-contacts{font-size:14px;color:var(--muted);margin:14px 0 4px}
.easy-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px}
.primary-link{display:inline-block;background:#b34e3e;color:#fff;text-decoration:none;padding:14px 24px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.easy-done{text-align:center}.easy-done:focus{outline:none}.easy-done .easy-actions{justify-content:center}
/* Honeypot: off screen for people, still in the form for bots. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.reopen{margin-top:26px;text-align:left}.reopen label{font-size:14px;font-weight:500}
.reopen-row{display:flex;gap:8px;margin-top:6px}.reopen-row input{font:inherit;padding:10px 12px;border:1px solid #b9b3ac;min-height:44px;flex:1;min-width:0;text-transform:uppercase}
.quote-form{margin-top:26px;background:#fff;border:1px solid var(--border);padding:20px}
.quote-form .contact-grid input{font:inherit;padding:10px 12px;border:1px solid #b9b3ac;min-height:44px;width:100%}
.saved-line{font-size:14px;margin:12px 0;word-break:break-word}
.price-note{font-size:14px;margin:14px 0}
.price-lines{list-style:none;padding:0;margin:0}.price-lines li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding:6px 0;font-size:14px}
@media(max-width:760px){.easy-row{grid-template-columns:1fr}.easy-shell h2{font-size:25px}.easy-actions>*{flex:1 1 100%;text-align:center}.seg-btn{flex:1;min-width:0}.beta-tag{top:-3px}}
/* Easy-mode picture cards (Chris 2026-10-20: picture-first). The picture sits in a fixed-ratio box with object-fit contain, so the whole drawing or photo shows, centered. */
.pic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pic-card{display:flex;flex-direction:column;align-items:stretch;text-align:center;padding:10px;min-height:44px}
.pic-card .pic{position:relative;display:block;aspect-ratio:16/10;background:#f4f4f4;margin-bottom:8px;overflow:hidden}
.pic-card .pic img,.pic-card .pic svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pic-card small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.pic-card:disabled{opacity:.45;cursor:not-allowed}
.easy-tables .family img{height:170px}
.ef.room{max-width:320px;margin-bottom:22px}
@media(max-width:760px){.pic-grid{grid-template-columns:1fr 1fr}.easy-tables .family img{height:auto;max-height:150px}}

/* 3D view (public/3d/tables viewer, loaded on first use) */
.v3d-slot{margin:0 0 22px}
.v3d-canvas{height:380px;background:#f2f2f1;border:1px solid var(--border);position:relative}
.v3d-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;margin-top:8px;font-size:13px}
.v3d-bar .check-row{margin:0}
.v3d-notes{font-size:12px;margin:6px 0 0}
@media(max-width:700px){.v3d-canvas{height:270px}}

/* ---- Compact finish chips, every family, basic and advanced (Chris, 2026-10-21: "on mobile ...
   the selection for finishes needs to be much smaller for all of them"). A 48 px swatch with the
   name under it, at least 44 px to tap, in a wrapping grid; the chosen maker / code is written
   once under the grid (.chip-detail). Later rules here override the older .finish-grid sizes. ---- */
.finish-grid.chip-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.choice.finish.swatch{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:44px;padding:8px 4px;text-align:center}
.choice.finish.swatch img,.chip-color{width:52px;height:52px;aspect-ratio:auto;object-fit:cover;margin:0;display:block;border:1px solid #d9d4cf;mix-blend-mode:normal}
.pedestal-grid .choice.finish.swatch img{object-fit:cover;aspect-ratio:auto}
.choice.finish.swatch strong{font:500 12px/1.25 var(--font);color:var(--ink);overflow-wrap:anywhere}
.choice.finish.swatch.selected strong{color:var(--accent-dark)}
.choice.finish.swatch.selected img,.choice.finish.swatch.selected .chip-color{outline:2px solid var(--accent);outline-offset:2px}
.chip-detail{font-size:13px;margin:8px 0 0}
@media(max-width:760px){
  .finish-grid.chip-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
  .choice.finish.swatch{padding:6px 2px}
  .choice.finish.swatch img,.chip-color{width:44px;height:44px}
  .choice.finish.swatch strong{font-size:11px}
}

/* ---- Basic picture steps (Chris, 2026-10-21) ---- */
.basic-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px;min-height:28px}
.basic-head .text-button{min-height:44px}
.basic-step{margin-bottom:18px}
.size-grid .pic-card .pic{aspect-ratio:2/1;background:#fff}
.basic-summary{border-top:1px solid var(--border);padding-top:14px;margin-top:8px}
.basic-summary ul{list-style:none;padding:0;margin:6px 0 10px;display:flex;flex-wrap:wrap;gap:6px}
.basic-summary li .text-button{border:1px solid var(--border);padding:6px 10px;min-height:36px;font-size:13px;text-align:left;text-decoration:none}
.basic-summary li .text-button span{color:var(--muted);margin-right:4px}
.cut-count{font-size:14px;font-weight:500;margin:4px 0 10px}
.cut-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-bottom:16px}
.cut-card{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto;gap:6px 12px;border:1px solid #d9d4cf;padding:10px;background:#fff;align-items:start}
.cut-card.has-qty{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cut-card .acc-photo{grid-row:span 2;width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:#f4f4f4;overflow:hidden}
.cut-card .acc-photo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cut-body strong{display:block;font-size:14px;font-weight:600}
.cut-body small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
.cut-body .cut-reason{color:var(--warn)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:44px;height:44px;border:1px solid #b9b3ac;background:#fff;font-size:22px;line-height:1;color:var(--ink);cursor:pointer}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper output{min-width:28px;text-align:center;font-size:18px;font-weight:600}
@media(max-width:760px){.cut-grid{grid-template-columns:1fr}.cut-card{grid-template-columns:60px 1fr}.cut-card .acc-photo{width:60px;height:60px}}

/* ---- Basic size step: one styled dropdown and a people box (Chris, 2026-10-21) ---- */
.size-pick{max-width:520px}
.select-wrap{position:relative}
.select-wrap::after{content:'';position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select-wrap select{appearance:none;-webkit-appearance:none;width:100%;min-height:50px;padding:12px 44px 12px 14px;font:16px/1.3 var(--font);color:var(--ink);background:#fff;border:1px solid #b9b3ac;border-radius:0;cursor:pointer}
.select-wrap select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.or-line{display:flex;align-items:center;gap:12px;margin:16px 0 10px;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.or-line::before,.or-line::after{content:'';flex:1;border-top:1px solid var(--border)}
.people-row input{max-width:160px;min-height:48px;font-size:16px}
.size-pick .small{font-size:13px;margin-top:10px}
.render-card .pic{background:#ececea}
.render-card .pic img{mix-blend-mode:normal;object-fit:cover}

/* ---- Arc Meeting Table, the fourth table (Chris, 2026-10-21) ---- */
/* Four table types: two columns of cards on desktop and tablet (four in a row would squeeze the
   photos), one column on phones (the 760 px rule above already does that). */
@media(min-width:761px){.family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The picture of the chosen Arc size under the basic size dropdown: the Salamander product image. */
.arc-size-pic{margin:14px 0 4px;background:#fff;border:1px solid var(--border)}
.arc-size-pic img{display:block;width:100%;max-height:240px;object-fit:contain}
/* Advanced Arc size cards: product images are wide, so they get the full card width. */
.arc-size-grid .photo-choice img{object-fit:contain}
/* The Arc technology drawing: the curved top view uses the full width, the built-in pill sits under it. */
.drawings.arc-drawings{grid-template-columns:1fr}
.drawings.arc-drawings .dwg-view:first-child .dwg{max-width:640px;margin:0 auto}

/* ---- 2026-10-22: room-first basic flow, finishes together, Start over, simplified technology drawing, Humanscale seating ---- */
/* Back and Start over side by side in the basic page head (Start over on every page, Chris 2026-10-22). */
.basic-head-actions{display:flex;gap:4px 14px;flex-wrap:wrap;justify-content:flex-end}
.step-meta #adv-reset{min-height:44px;font-size:13px}
/* Finish page: the Arc's included leg as a picture card with no choice (Chris, 2026-10-22). */
.included-base{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;border:1px solid var(--border);padding:10px;margin:14px 0 4px;background:#fafaf9}
.included-base img{width:72px;height:72px;object-fit:cover}
.included-base strong{display:block}
.included-base small{color:var(--muted)}
.pic-grid.two-up{grid-template-columns:repeat(2,minmax(0,1fr));margin:12px 0 16px;max-width:520px}
.pic-grid.two-up .pic{aspect-ratio:auto;height:120px;display:block;overflow:hidden}
.pic-grid.two-up .pic img{object-fit:cover;mix-blend-mode:normal}
/* Simplified technology drawing (Chris, 2026-10-22): outline only, filled with the top finish's screen color, markers on top. */
.plan-drawing .dwg{max-width:760px;margin:0 auto}
.dwg svg .plan-table{fill:currentColor;stroke:#5f5954;stroke-width:1.2;vector-effect:non-scaling-stroke}
.dwg svg .plan-table.is-custom{stroke-dasharray:6 5;fill-opacity:.45}
.dwg svg .plan-cab{fill:#e8e5e1;stroke:#5f5954;stroke-width:1.2;vector-effect:non-scaling-stroke}
.plan-drawing .pill-row{margin-top:14px}
/* Humanscale chair cards (Chris and Scott Srolis, 2026-10-22). */
.chair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:12px 0}
.chair-card{display:grid;grid-template-rows:auto 1fr auto;border:1px solid var(--border);background:#fff;padding:10px;gap:8px}
.chair-card.has-qty{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.chair-photo{display:block;background:#fff;aspect-ratio:4/3;overflow:hidden}
.chair-photo img{width:100%;height:100%;object-fit:contain;display:block}
.chair-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.chair-body .eyebrow{margin:0;font-size:11px}
.chair-body strong{font-size:16px;line-height:1.25}
.chair-price{font-weight:600;color:var(--ink,#242622)}
.chair-body a{font-size:13px;min-height:32px;display:inline-flex;align-items:center}
.chair-card .stepper{justify-self:start}
.chair-add{justify-self:start;min-height:44px}
@media(max-width:760px){.chair-grid{grid-template-columns:1fr 1fr;gap:8px}.chair-card{padding:8px}.chair-body strong{font-size:14px}}
@media(max-width:360px){.chair-grid{grid-template-columns:1fr}}
/* The basic form shows the 3D view on every page (Chris, 2026-10-22); on phones it is a little
   shorter so the page's choices start near the top. */
@media(max-width:700px){.easy-shell .v3d-canvas{height:230px}}

/* Landing chooser (Chris, 2026-10-22): three picture cards like the Select Pro Cabinets page. The
   picture of each card cycles through versions of that family (JS in app.js, startChooserCycle);
   with prefers-reduced-motion the first picture stays and nothing fades. */
.chooser{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:8px 0 28px}
.chooser-card{display:flex;flex-direction:column;padding:8px;background:#fff;border:1px solid var(--border);border-radius:0;text-align:left;color:inherit;min-width:0;transition:border-color .2s,box-shadow .2s}
.chooser-card:hover{border-color:#9a9d96;box-shadow:0 6px 18px rgba(36,38,34,.1)}
.chooser-card.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.chooser-pics{position:relative;display:block;aspect-ratio:3/2;background:var(--paper);overflow:hidden}
.chooser-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.chooser-pics img.on{opacity:1}
.chooser-cap{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:2px 9px;font-size:12px;line-height:1.5;color:var(--ink);background:rgba(255,255,255,.88)}
.chooser-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 8px 10px}
.chooser-title strong{display:block;font:400 24px/1.2 var(--display)}
.chooser-title small{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--muted)}
.chooser-chev{flex:none;font-size:34px;line-height:1;color:var(--muted)}
/* Head count page and the custom-size note (Chris, 2026-10-22). */
.people-pick .people-row input{max-width:180px}
.people-msg{min-height:1.5em;margin:12px 0 0;color:var(--muted)}
.people-msg.is-over,.capacity-note{padding:10px 14px;color:var(--ink);background:#fbf1ee;border-left:3px solid var(--accent)}
.capacity-note{margin:0 0 18px}
@media(max-width:760px){.chooser{grid-template-columns:minmax(0,1fr);gap:14px}.chooser-title strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){.chooser-pics img,.chooser-card{transition:none}}

/* ---- Chris, 2026-10-22 feedback ---- */
/* Finish swatches: no square box of any kind around each color choice (Chris, 2026-10-22, twice: the
   first fix removed the button's own frame but the swatch IMAGE still carried a square 1 px border and
   a square selected outline, so a round chip still sat in a square frame). Now every swatch, image or
   plain color, top and base, simple and Advanced, is itself a circle with no border. A hairline ring
   (box-shadow, which follows the round edge) keeps pale colors visible on the page. The chosen swatch
   gets one clear ring hugging the circle, plus the accent colored name. The browser's own square
   focus box is replaced by the same ring for keyboard users. */
.choice.finish.swatch,.choice.finish.swatch:hover,.choice.finish.swatch:focus,.choice.finish.swatch.selected{border:0;background:transparent;box-shadow:none;outline:0;-webkit-tap-highlight-color:transparent}
.choice.finish.swatch img,.choice.finish.swatch .chip-color{border:0;border-radius:50%;outline:0;background-clip:padding-box;box-shadow:0 0 0 1px rgba(60,50,45,.28)}
.choice.finish.swatch:hover img,.choice.finish.swatch:hover .chip-color{outline:0;box-shadow:0 0 0 1px rgba(60,50,45,.28),0 0 0 4px #d9d4cf}
.choice.finish.swatch.selected img,.choice.finish.swatch.selected .chip-color,.choice.finish.swatch.selected:hover img,.choice.finish.swatch.selected:hover .chip-color{outline:0;box-shadow:0 0 0 2px var(--paper),0 0 0 5px var(--accent)}
.choice.finish.swatch:focus-visible img,.choice.finish.swatch:focus-visible .chip-color{box-shadow:0 0 0 2px var(--paper),0 0 0 5px var(--accent-dark)}
/* Size page: a head count box with minus and plus buttons beside the size list. They sit side by side
   on a wide screen and stack on a phone. */
.sp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px;align-items:end}
.stepper{display:flex;align-items:stretch;gap:0}
.stepper input{min-height:48px;font-size:16px;text-align:center;width:100%;min-width:0;border-radius:0;border-left:0;border-right:0}
.stepper button{min-width:48px;min-height:48px;border:1px solid #d9d4cf;background:#fff;color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.stepper button:hover{border-color:var(--accent);color:var(--accent-dark)}
.size-people .people-msg{margin-top:14px}
@media(max-width:560px){.sp-grid{grid-template-columns:1fr;gap:14px}}
/* Shape page: the width choice under the shape cards. */
.width-pick{border:0;padding:0;margin:16px 0 0}
.width-row{display:flex;gap:10px;flex-wrap:wrap}
.width-card{min-height:48px;padding:10px 18px}
.width-card .pic:empty{display:none}
.width-card strong{font-size:16px}
/* Meeting plan: "Left end" / "Right end" labels under the pedestal-end markers (Chris, 2026-10-22). */
.dwg .plan-label{position:absolute;font:600 11px var(--font);color:#5f5954;white-space:nowrap;pointer-events:none}
/* Pedestal end picture in the location panel (Chris, 2026-10-22). */
.end-face{margin:8px 0 10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.end-face svg{width:132px;height:auto;flex:none}
.end-face figcaption{font-size:14px;color:var(--muted);max-width:30ch}
.end-face .ef-top{fill:#d9d5d0;stroke:#5f5954;stroke-width:1}
.end-face .ef-ped{fill:#efede9;stroke:#5f5954;stroke-width:1}
.end-face .ef-off{fill:none;stroke:#8d8781;stroke-width:1;stroke-dasharray:3 2}
.end-face .ef-on{fill:var(--accent);stroke:var(--accent-dark);stroke-width:1}
.end-face .ef-t{font:600 8px var(--font);fill:#6f6863}
.end-face .ef-t-on{fill:#fff}
/* Display page (Chris, 2026-10-22): what the included mount holds, and the shelf question under it. */
.mount-spec{margin:12px 0 0;padding:10px 14px;background:#fff;border-left:3px solid var(--accent);color:var(--ink)}
.mount-extras{margin-top:6px}
.dwg .plan-label.is-right{transform:translateX(-100%)}
/* MAC8 VESA adapter checkbox on the display page (Chris, 2026-10-22). */
.mac8-row{margin:14px 0 4px}
.mac8-row .check-row{font-weight:600}
.mac8-row small{display:block;margin:2px 0 0 30px;text-align:left}
/* MAC8 kit thumbnail (Chris, 2026-10-23): text on the left, a small white product tile on the right, like the FPS
   accessory rows. 72 x 60 matches the FPS .acc-thumb; the text column shrinks first so nothing overflows at 390 px. */
.mac8-row.has-thumb{display:flex;align-items:flex-start;gap:12px}
.mac8-row .mac8-text{flex:1;min-width:0}
.mac8-thumb{flex:none;width:72px;height:60px;margin-top:12px;background:#fff;border:1px solid var(--border);display:grid;place-items:center;overflow:hidden}
.mac8-thumb img{width:calc(100% - 6px);height:calc(100% - 6px);object-fit:contain;display:block}

/* Heading focus ring (2026-10-23 audit). After a step change app.js moves focus to the page heading (tabindex="-1") so screen readers
   announce the new step. Browsers then draw the dark red keyboard ring around the heading, which looks like a stray box to a mouse or
   touch visitor. The heading is not a control, so the ring is hidden. Real controls keep their :focus-visible ring (rules above). */
h2[tabindex="-1"]:focus,h2[tabindex="-1"]:focus-visible,h3[tabindex="-1"]:focus,h3[tabindex="-1"]:focus-visible{outline:none}