/* Workspace rules are scoped so sign-in and the signed-in header retain their styling. */
:root{--letter-white:#FFFFFF;--letter-black:#000000;--overlay-line:rgba(255,255,255,.6);--overlay-shadow:rgba(0,23,64,.35)}
main:has(.workspace){max-width:1200px}
main:has(#s-app[hidden]){max-width:460px}
.workspace{display:grid;gap:16px;margin-top:16px}
.workspace .preview-pane,.workspace .edit-pane{min-width:0}
.workspace .stage{align-items:center;min-width:0}
.workspace .frame{flex:none}
.workspace #c{max-height:32svh;border-radius:6px}
.workspace .stage-tools{align-items:center;margin-top:8px}
.workspace .stage-tools .hint{max-width:75%}
.workspace .edit-pane{display:grid;gap:10px;align-content:start}
.workspace .photo-pane{display:grid;gap:8px;min-width:0}
.workspace .field{margin:0}
.workspace label,.workspace .lab{margin-bottom:4px}
.workspace input:not([type=range]),.workspace textarea,.workspace select{padding:8px 10px;border-radius:6px}
.workspace textarea{min-height:64px}
.workspace .seg{border-radius:6px}
.workspace .seg button{border-radius:4px;padding:7px 6px}
.workspace .photo-row{display:flex;align-items:center;gap:12px}
.workspace .photo-row .ghost{width:auto;flex:1;padding:9px;border-radius:6px}
.workspace .photo-row #add.photo-empty{min-height:88px;padding:20px 16px;font-size:20px;font-weight:700}
.workspace #photo-tools{display:flex;align-items:center;gap:12px}
.workspace #photo-tools .field{flex:1;min-width:0}
.workspace #photo-tools .linkbtn{padding:0;white-space:nowrap}
.workspace .colour-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.workspace .swatches{display:flex;gap:6px;align-items:center;min-height:38px}
.workspace .swatch{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid var(--border-strong);border-radius:50%;cursor:pointer;font:inherit;background:var(--navy-2);color:var(--text)}
.workspace .swatch::after{content:'';width:22px;height:22px;border-radius:50%;border:1px solid var(--border-strong)}
.workspace .swatch[data-colour=white]::after{background:var(--letter-white)}
.workspace .swatch[data-colour=black]::after{background:var(--letter-black)}
.workspace .swatch[data-colour=navy]::after{background:var(--navy)}
.workspace .swatch[data-colour=default]::after{content:'A';color:var(--text);font-weight:900}
.workspace .swatch[aria-pressed=true]{outline:2px solid var(--crimson-bright);outline-offset:1px}
.workspace .ov-box{border-color:var(--overlay-line);box-shadow:0 0 0 1px var(--overlay-shadow)}
.workspace .selected-box{border:2px solid var(--crimson);border-radius:0}
.workspace .resize-handle{position:absolute;width:16px;height:16px;padding:0;border:2px solid var(--crimson);background:var(--text);pointer-events:auto;touch-action:none;border-radius:2px}
.workspace .handle-nw{left:-8px;top:-8px;cursor:nwse-resize}
.workspace .handle-ne{right:-8px;top:-8px;cursor:nesw-resize}
.workspace .handle-sw{left:-8px;bottom:-8px;cursor:nesw-resize}
.workspace .handle-se{right:-8px;bottom:-8px;cursor:nwse-resize}
.workspace .part-controls{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:grid;gap:10px;line-height:1.3}
.workspace .part-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.workspace #part-close{font-size:24px;line-height:1;padding:0 4px}
.workspace #part-size-value{color:var(--text-soft);margin-left:8px}
.workspace input[type=color]{width:56px;height:34px;padding:3px;cursor:pointer}
.download-pane{margin-top:18px;border-top:1px solid var(--border);padding-top:14px}
.download-pane .go{width:100%;border-radius:6px}
.download-pane #note:empty{display:none}
.download-pane #share{margin-bottom:10px}
.caption-pane #restore-wa{grid-column:2}
.workspace .go{border-radius:6px;padding:11px}
.workspace #note:empty{display:none}
.caption-pane{margin-top:18px;border-top:1px solid var(--border);padding-top:14px}
.caption-pane #cap{min-height:72px}
.caption-pane .ghost{padding:9px;border-radius:6px}
@media(min-width:800px){
  .workspace{grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr);gap:28px;align-items:start}
  .workspace .photo-pane{grid-column:1/-1}
  .workspace .preview-pane{position:sticky;top:16px}
  .workspace #c{max-height:calc(100svh - 350px);max-width:100%}
  .workspace .edit-pane{gap:10px}
  .caption-pane{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:start}
  .caption-pane .field{grid-row:1/4;margin:0}
  .caption-pane .hint{max-width:350px}
}
@media(max-width:799px){
  main:has(.workspace){padding:16px 14px 28px}
  main:has(#s-app[hidden]){padding:22px 18px 56px}
  .workspace{gap:12px}
  .workspace .stage-tools .hint{font-size:12px}
  .workspace .colour-row{grid-template-columns:1fr}
  .workspace .colour-row .field{display:grid;grid-template-columns:125px 1fr;align-items:center;gap:8px}
  .workspace .colour-row .lab{margin:0}
}
@media(min-width:800px) and (max-height:820px){
  .workspace .edit-pane{gap:6px}
  .workspace label,.workspace .lab{font-size:12px;margin-bottom:2px}
  .workspace input:not([type=range]),.workspace select{padding:6px 10px;line-height:1.2}
  .workspace textarea{min-height:54px;padding:6px 10px}
  .workspace .seg button{padding:6px}
  .workspace .photo-row .ghost{padding:7px}
  .workspace #photo-tools{gap:4px}
  .workspace .go{padding:9px}
}/* Phone: larger targets and preview. Also applied to touch phones in landscape (short, no hover) so they keep the single column. */
@media(max-width:799px),(hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  .workspace{grid-template-columns:1fr;gap:18px;align-items:stretch}
  .workspace .photo-pane{grid-column:auto}
  .workspace .preview-pane{position:static}
  .workspace #c{max-height:52svh;max-width:100%}
  .workspace .edit-pane{gap:16px}
  .workspace label,.workspace .lab{font-size:15px;margin-bottom:6px}
  .workspace input:not([type=range]),.workspace textarea,.workspace select{font-size:16px;min-height:48px;padding:12px 12px;line-height:1.3}
  .workspace textarea{min-height:84px}
  .workspace input[type=range]{min-height:36px}
  .workspace .seg button{min-height:48px;padding:10px 8px;font-size:15px}
  .workspace .photo-row .ghost{min-height:48px;padding:12px;font-size:16px}
  .workspace .photo-row #add.photo-empty{min-height:104px;font-size:22px}
  .workspace #photo-tools .linkbtn,.workspace .stage-tools .linkbtn,.workspace #part-reset{min-height:44px;font-size:15px}
  .workspace .swatches{gap:10px;min-height:48px}
  .workspace .swatch{width:44px;height:44px}
  .workspace .swatch::after{width:28px;height:28px}
  .workspace input[type=color]{width:64px;height:48px}
  .workspace #part-close{min-width:44px;min-height:44px;font-size:28px}
  .workspace .resize-handle{width:24px;height:24px}
  .workspace .handle-nw{left:-12px;top:-12px}.workspace .handle-ne{right:-12px;top:-12px}
  .workspace .handle-sw{left:-12px;bottom:-12px}.workspace .handle-se{right:-12px;bottom:-12px}
  .workspace .go,.download-pane .go{min-height:56px;padding:14px;font-size:18px}
  .caption-pane{display:block}
  .caption-pane .ghost{min-height:52px;padding:12px;font-size:16px;margin-top:10px}
  .caption-pane #cap{font-size:16px;min-height:96px}
  .workspace .stage-tools .hint{font-size:13px}
}
@media(hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  .workspace #c{max-height:85svh}
}

/* Selection stays outside exported pixels and does not alter desktop media rules. */
.workspace .group-selected{border:2px solid var(--crimson);border-radius:0}
.workspace .facts-selected{border:2px solid var(--crimson);border-radius:0}
.workspace .tag-selected{border:3px solid var(--text);outline:2px solid var(--crimson);outline-offset:2px;border-radius:999px}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
/* Official stacked Only Realty logo (361x235, aspect locked): tall enough for the wordmark to read. */
.app-header .brand-logo{margin:0;max-width:48%;max-height:none;height:54px;width:auto}
.home-screen{font:inherit;font-size:14px;font-weight:700;line-height:1.2;color:var(--text);background:var(--navy-2);border:1px solid var(--border-strong);border-radius:6px;min-height:44px;padding:8px 12px;cursor:pointer;max-width:160px}
.install-help{margin-bottom:18px;line-height:1.4}
/* Multi-photo set: compact arrows under the preview. */
.workspace .slide-nav{display:flex;align-items:center;gap:8px;margin-top:10px;touch-action:pan-y}
.workspace .slide-arrow{flex:none;display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border-radius:6px;background:var(--navy-2);border:1px solid var(--border-strong);color:var(--text);font:inherit;font-size:22px;font-weight:700;line-height:1;cursor:pointer}
.workspace .slide-arrow:disabled{opacity:.35;cursor:default}
.workspace .slide-count{flex:1;text-align:center;font-size:15px;font-weight:700;color:var(--text-soft)}
.workspace .slide-next{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 14px 8px 16px;border-radius:6px;background:var(--crimson-tint);border:1px solid var(--crimson);color:var(--crimson-bright);font:inherit;font-size:15px;font-weight:700;line-height:1.2;cursor:pointer;white-space:nowrap}
.workspace .slide-next .chev{font-size:18px;line-height:1}
@media(max-width:799px){
  .workspace .slide-arrow{min-width:48px;min-height:48px;border-radius:12px}
  .workspace .slide-next{min-height:48px;border-radius:12px}
}

/* Listing facts: a tappable section (not a native select) with five compact dropdowns. Independent of the Tag. */
.workspace .facts-section{border:1px solid var(--border-strong);border-radius:6px;background:var(--navy-2);overflow:hidden}
.workspace .facts-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 14px;background:none;border:0;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.workspace .facts-toggle .ft-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.workspace .facts-toggle .ft-title{font-size:15px;font-weight:800;white-space:nowrap;line-height:1.25}
.workspace .facts-toggle .ft-sum{font-size:13.5px;font-weight:600;color:var(--crimson-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.workspace .facts-toggle .ft-sum.empty{color:var(--text-faint);font-weight:400}
.workspace .facts-toggle .ft-chev{flex:none;width:18px;height:18px;color:var(--text-soft);transition:transform .15s}
.workspace .facts-toggle[aria-expanded="true"] .ft-chev{transform:rotate(180deg)}
.workspace .facts-toggle[aria-expanded="true"]{border-bottom:1px solid var(--border)}
.workspace .facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px 8px;padding:8px 12px 12px}
.workspace .facts .field{grid-column:span 2;min-width:0}
.workspace .facts .field.wide{grid-column:span 3}
.workspace .facts label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.workspace .facts .fact-ico{flex:none;color:var(--text)}
.workspace .facts select{padding-right:6px}
@media(max-width:799px),(hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  .workspace .facts-section{border-radius:12px}
  .workspace .facts-toggle{min-height:56px}
  .workspace .facts{gap:8px 8px;padding:10px 12px 12px}
  .workspace .facts label{font-size:15px}
}