.companion-panel { padding:1.2rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin:1rem 0; }
.companion-panel h2,.companion-panel h3 { margin:0 0 .6rem; }
.companion-panel p,.companion-note { color:var(--text-2); font-size:.9rem; max-width:75ch; }
.companion-panel summary { cursor:pointer; font-weight:600; }
.companion-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:.8rem 0; align-items:center; }
.companion-actions button { white-space:normal; }
.companion-panel canvas, #portrait-crop-preview, #mask-editor { display:block; max-width:100%; max-height:340px; width:auto; height:auto; object-fit:contain; margin:1rem auto; }
.companion-crop-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.companion-crop-controls label { display:grid; gap:.35rem; color:var(--text-2); font-size:.875rem; }
.companion-crop-controls input { width:100%; min-width:0; accent-color:var(--focus); }
.companion-dialog { width:min(1000px,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); padding:0; border:1px solid var(--line-strong); border-radius:var(--radius-lg); color:var(--text); background:var(--bg); overflow:auto; }
.companion-dialog::backdrop { background:rgb(0 0 0 / .75); }
.companion-dialog-inner { padding:1.5rem; }
.companion-dialog header { display:flex; justify-content:space-between; align-items:start; gap:1rem; }
.companion-dialog h2 { margin:0; font-size:1.6rem; }
.companion-dialog label:has(input[type="color"]) { display:flex; gap:1rem; align-items:center; }
.companion-dialog input[type="file"] { display:block; max-width:100%; margin-top:.6rem; }
.companion-dialog input[type="color"] { width:4rem; height:2.7rem; padding:0; border:0; }
.companion-dialog button:focus-visible,.companion-dialog input:focus-visible,#mask-editor:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.companion-dialog button[aria-pressed="true"] { background:var(--surface-3); outline:2px solid var(--focus); }
.drape-grid { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; margin:1rem 0; }
.drape-grid.is-split { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.drape-grid figure { margin:0; width:100%; max-width:450px; }
.drape-grid canvas { width:100%; height:auto; display:block; border-radius:var(--radius-sm); }
.drape-grid figcaption { padding:.6rem 0; font-size:.9rem; }
.companion-picks { display:flex; flex-wrap:wrap; gap:.6rem; margin:.8rem 0; }
.companion-picks button,.companion-picks span { display:flex; gap:.5rem; align-items:center; border:1px solid var(--line); background:var(--surface-2); border-radius:.4rem; padding:.6rem; color:var(--text); }
.companion-picks i { width:2rem; height:2rem; background:var(--swatch); border:1px solid var(--line-strong); flex-shrink:0; }
.companion-evidence { display:grid; gap:.8rem; }
.companion-evidence dt { font-weight:600; }
.companion-evidence dd { margin:.25rem 0 0; color:var(--text-2); }
.companion-verification { border-top:1px solid var(--line); padding:.7rem 0; }
#mask-editor { touch-action:none; cursor:crosshair; max-height:450px; }
#companion-notice:empty { display:none; }
.core-colour button { display:block; color:var(--text-2); font-size:.875rem; padding:.3rem 0; background:none; border:0; text-align:left; }
#garment-companion { font-size:.9rem; }
@media(max-width:600px) {
 .companion-dialog { width:calc(100vw - 1rem); max-height:calc(100dvh - 1rem); }
 .companion-dialog-inner { padding:1rem; }
 .companion-crop-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
 .companion-split { display:none; }
 .drape-grid.is-split { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .companion-actions .button { min-height:44px; }
 .companion-picks button { flex-wrap:wrap; }
}
@media print { #companion-guide,#garment-companion,.companion-dialog,[data-companion] { display:none !important; } }
.drape-grid figure { max-width:clamp(210px,calc((100dvh - 340px) * .909),450px); }
@media(max-width:600px) { .drape-grid figure { max-width:min(100%,340px); } }

.companion-picks span { align-items:center; font-size:.875rem; }

.journey-progress { font-size:.85rem; color:var(--text-2); }
.journey-upload { display:grid; grid-template-columns:minmax(0,1fr); justify-items:start; gap:.7rem; margin:1.3rem 0; }
.journey-upload label { min-width:0; max-width:100%; white-space:normal; }
.journey-upload input { display:block; width:100%; min-width:0; max-width:100%; margin-top:.5rem; }
.journey-upload small,.journey-disclosure,.journey-corrections,.journey-consent { font-size:.875rem; color:var(--text-2); line-height:1.6; }
.journey-disclosure a { text-decoration:underline; }
.journey-consent { display:flex; gap:.65rem; align-items:flex-start; margin:1.5rem 0; }
.journey-consent input { margin-top:.3rem; accent-color:var(--focus); }
.journey-corrections { border-top:1px solid var(--line); padding:1rem 0; margin:1rem 0; }
.journey-corrections summary { cursor:pointer; }
.journey-corrections .button { margin:.3rem; }
.journey-availability,.journey-confirm { border-left:3px solid var(--focus); padding:1rem; background:var(--surface); }
.journey-photo-list { display:flex; flex-wrap:wrap; gap:.8rem; }
.journey-photo-list span { border:1px solid var(--line); padding:.5rem; }
#journey-photo { display:block; max-height:400px; max-width:100%; width:auto; margin:1rem auto; }
#journey-status:empty { display:none; }
.finder-actions.is-analysing { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem; }
.journey-analysis { min-width:0; }
.journey-analysis #journey-status { margin:0 0 .65rem; font-size:.875rem; line-height:1.4; color:var(--text-2); }
.journey-analysis-track { position:relative; height:8px; overflow:hidden; border-radius:999px; background:var(--line-strong); }
.journey-analysis-track::after { content:''; position:absolute; inset:0 auto 0 0; width:40%; border-radius:inherit; background:var(--focus); animation:journey-analysing 2s ease-in-out -.6s infinite; }
@keyframes journey-analysing { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
@media(prefers-reduced-motion:reduce) { .journey-analysis-track::after { animation:none; transform:translateX(75%); } }
@media(forced-colors:active) { .journey-analysis-track { outline:1px solid CanvasText; } .journey-analysis-track::after { background:Highlight; forced-color-adjust:none; } }
#colour-journey button:focus-visible,#colour-journey input:focus-visible,.result-palette button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }

/* The overlay edits only crop coordinates, never the photograph. */
.photo-crop { position:relative; width:min(100%,calc(400px * var(--crop-aspect,1))); margin:1.25rem auto .65rem; overflow:hidden; border-radius:12px; touch-action:none; user-select:none; -webkit-user-select:none; isolation:isolate; }
.photo-crop canvas { display:block !important; width:100% !important; height:auto !important; max-height:none !important; margin:0 !important; }
.photo-crop-box { position:absolute; box-shadow:0 0 0 9999px #0008; border:2px solid #fff; }
.photo-crop button { appearance:none; padding:0; margin:0; border:0; border-radius:0; background:transparent; color:#fff; min-height:0; }
.photo-crop-move { position:absolute; inset:0; width:100%; height:100%; cursor:grab; }
.photo-crop-move::after { content:''; position:absolute; inset:33.333%; border:1px solid #ffffff45; pointer-events:none; opacity:0; }
.photo-crop:focus-within .photo-crop-move::after,.photo-crop.is-dragging .photo-crop-move::after { opacity:1; }
.photo-crop.is-dragging .photo-crop-move { cursor:grabbing; }
.photo-crop .photo-crop-handle { position:absolute; width:44px; height:44px; }
.photo-crop-handle::after { content:''; position:absolute; width:15px; height:15px; border:solid #fff; border-width:0; filter:drop-shadow(0 1px 2px #000); }
.photo-crop-handle[data-crop-action="nw"] { left:0; top:0; cursor:nwse-resize; }
.photo-crop-handle[data-crop-action="ne"] { right:0; top:0; cursor:nesw-resize; }
.photo-crop-handle[data-crop-action="sw"] { left:0; bottom:0; cursor:nesw-resize; }
.photo-crop-handle[data-crop-action="se"] { right:0; bottom:0; cursor:nwse-resize; }
.photo-crop-handle[data-crop-action="nw"]::after { top:3px; left:3px; border-top-width:4px; border-left-width:4px; border-top-left-radius:3px; }
.photo-crop-handle[data-crop-action="ne"]::after { top:3px; right:3px; border-top-width:4px; border-right-width:4px; border-top-right-radius:3px; }
.photo-crop-handle[data-crop-action="sw"]::after { bottom:3px; left:3px; border-bottom-width:4px; border-left-width:4px; border-bottom-left-radius:3px; }
.photo-crop-handle[data-crop-action="se"]::after { bottom:3px; right:3px; border-bottom-width:4px; border-right-width:4px; border-bottom-right-radius:3px; }
.photo-crop button:focus-visible { outline:3px solid #fff !important; outline-offset:-6px !important; background:#0002; }
.photo-crop button:disabled { cursor:wait; }
.photo-crop-help { text-align:center; font-size:.8rem; color:var(--text-2); margin:.5rem 0 1rem; }
.crop-precision { border:1px solid var(--line); border-radius:var(--radius-sm); padding:.8rem 1rem; margin:1rem 0; font-size:.85rem; color:var(--text-2); }
.crop-precision > summary { cursor:pointer; }
.crop-precision[open] > summary { margin-bottom:1rem; }
.crop-precision > summary:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
#journey-suggestions:empty { display:none; }

/* Rounded colour cards on a neutral charcoal canvas. */
#guide-dashboard { max-width:1120px; margin-inline:auto; }
#guide-dashboard > .workspace-heading { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin:0 0 2.5rem; }
#guide-dashboard > .workspace-heading h1 { font-family:var(--font-heading); font-weight:800; font-size:clamp(2.75rem,4.8vw,4.5rem); line-height:1.05; letter-spacing:-.065em; }
#guide-dashboard > .workspace-heading .heading-actions { width:auto; margin:0; flex:0 0 auto; }
#guide-dashboard > .workspace-heading .button { flex:none; min-height:48px; padding-inline:1.3rem; }
#companion-guide { padding:0; margin:0; border:0; background:none; }
.colour-result-main { display:grid; grid-template-columns:minmax(225px,.88fr) minmax(0,1.6fr); gap:2.5rem; align-items:start; margin-bottom:2.5rem; }
.colour-result-portrait { min-width:0; margin:0; padding:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.colour-result-portrait:has(.portrait-empty) { align-self:stretch; display:flex; flex-direction:column; }
.portrait-frame:has(.portrait-empty) { flex:1; display:flex; }
.portrait-frame { padding:0; }
.colour-result-portrait canvas { display:block; width:100%; height:auto; max-height:none !important; margin:0 !important; border-radius:var(--radius-sm); }
.portrait-empty { width:100%; min-height:318px; aspect-ratio:1/1.1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px 12px; border:0; border-radius:var(--radius-sm); color:var(--text); background:var(--bg); cursor:pointer; }
.portrait-placeholder { position:relative; isolation:isolate; display:grid; place-items:center; width:108px; height:138px; margin:10px 0 24px; border:6px solid var(--surface-3); border-bottom-width:20px; border-radius:12px; background:var(--surface-2); box-shadow:0 3px 8px #0003; }
.portrait-placeholder::before,.portrait-placeholder::after { content:''; position:absolute; z-index:-1; inset:-5px; border:6px solid var(--surface-3); border-bottom-width:20px; border-radius:12px; transform-origin:center 95%; }
.portrait-placeholder::before { background:var(--portrait-colour-a); transform:rotate(-17deg); }
.portrait-placeholder::after { background:var(--portrait-colour-b); transform:rotate(14deg); }
.portrait-placeholder svg { width:100%; height:100%; padding:15px; background:var(--surface-2); color:var(--text-2); stroke:currentColor; stroke-width:1.3; }
.portrait-empty strong { font-size:.9rem; font-weight:750; }
.portrait-empty > span:last-child { font-size:.75rem; color:var(--text-3); }
.portrait-empty:hover strong { text-decoration:underline; text-underline-offset:4px; }
.portrait-caption { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 8px 6px; }
.colour-result-portrait figcaption { color:var(--text-2); font-size:.75rem; line-height:1.5; }
.portrait-caption .button { flex:0 0 auto; min-height:40px; padding:0 4px; background:none; border:0; font-size:.75rem; }
.portrait-caption .button:hover { text-decoration:underline; text-underline-offset:4px; }
.portrait-actions { display:flex; align-items:center; justify-content:space-between; min-height:60px; gap:8px; padding:8px 0 0; }
.portrait-actions:empty { display:none; }
.portrait-actions > .button { min-height:44px; flex:1; border:1px solid var(--line); border-radius:var(--radius-sm); padding:.65rem .8rem; text-align:center; background:var(--surface); color:var(--text); }
.portrait-actions > .button:hover { background:var(--surface-2); }
.portrait-tools { position:relative; flex:0 0 44px; }
.portrait-tools > summary { display:grid; place-items:center; width:44px; height:44px; cursor:pointer; border:1px solid var(--line); border-radius:var(--radius-sm); list-style:none; color:var(--text-2); letter-spacing:2px; font-size:.8rem; }
.portrait-tools > summary::-webkit-details-marker { display:none; }
.portrait-tools[open] > summary { background:var(--surface-3); }
.portrait-tools-menu { position:absolute; z-index:5; bottom:calc(100% + 8px); right:0; width:220px; padding:8px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); box-shadow:0 12px 32px #0004; }
.portrait-tools-menu .button { display:block; width:100%; border:0; min-height:44px; text-align:left; }
.portrait-tools-menu p { margin:8px; font-size:.75rem; }
#colour-result-starters .guide-section { margin:0; }
#colour-result-starters .section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1.25rem; }
#colour-result-starters .section-heading .eyebrow { display:none; }
#colour-result-starters .section-heading h2 { font-size:1.15rem; font-weight:750; letter-spacing:-.03em; line-height:1.2; margin:0; }
#colour-result-starters .section-heading > p { max-width:15ch; margin:0; font-size:.75rem; line-height:1.5; color:var(--text-3); text-align:right; }
#colour-result-starters .core-colour-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
#colour-result-starters .core-colour { border:0; border-radius:0; background:none; overflow:visible; }
#colour-result-starters .core-colour button { width:100%; height:100%; display:flex; flex-direction:column; padding:6px; font:inherit; color:var(--text); cursor:pointer; border:1px solid var(--line); border-radius:1rem; background:var(--surface); box-shadow:0 2px 3px #0001; transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease; }
.starter-swatch { display:block; flex-shrink:0; width:100%; height:clamp(100px,10.5vw,150px); background:var(--swatch); border-radius:.6rem; }
.starter-label { display:flex; flex:1; flex-direction:column; justify-content:space-between; gap:.3rem; padding:.65rem .3rem .4rem; }
#colour-result-starters .core-colour strong { display:block; font-size:.75rem; font-weight:700; white-space:normal; overflow-wrap:anywhere; line-height:1.4; }
.starter-label code { font-size:.75rem; line-height:1.4; color:var(--text-3); }
[data-companion="preview"][aria-pressed="true"] { outline:2px solid var(--focus); outline-offset:4px; }
#colour-result-starters [data-companion="preview"][aria-pressed="true"] { outline:2px solid var(--focus); outline-offset:2px; }
#colour-result-starters [data-companion="preview"]:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
@media(hover:hover) { #colour-result-starters .core-colour button:hover { transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 7px 12px #0003; } }
.result-palette { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:1.1rem .75rem; margin:.5rem 0 1.5rem; }
.result-palette button { min-width:0; padding:0; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.result-palette i { display:block; height:64px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--swatch); }
.result-palette span { display:block; font-size:.75rem; margin-top:.45rem; overflow-wrap:anywhere; }
.result-palette code { color:var(--text-3); font-size:.75rem; }
.result-options { margin:0; padding:0; border-top:1px solid var(--line-strong); }
.result-options > summary { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:72px; padding:1rem 0; list-style:none; cursor:pointer; font-size:.9rem; font-weight:650; }
.result-options > summary::-webkit-details-marker { display:none; }
.result-options > summary::after { content:'+'; display:grid; place-items:center; color:var(--text-2); font-size:1.25rem; font-weight:400; width:28px; height:28px; flex:0 0 28px; border:1px solid var(--line-strong); border-radius:50%; }
.result-options[open] > summary::after { content:'−'; background:var(--surface); }
.result-options > summary > span { margin-left:auto; color:var(--text-3); font-size:.75rem; font-weight:500; }
.result-options > summary > .palette-summary { display:flex; width:144px; height:25px; overflow:hidden; border-radius:999px; margin-left:auto; }
.palette-summary i { flex:1; }
.result-options > summary > .palette-summary + span { margin-left:0; }
.result-options > summary:focus-visible,.portrait-tools > summary:focus-visible,.colour-card-menu > summary:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--radius-sm); }
.wardrobe-options .guide-section { margin:1rem 0 1.5rem; }
.wardrobe-options .section-heading .eyebrow,.wardrobe-options .stone-reference-compact { display:none; }
.wardrobe-options .section-heading h2 { font-size:1.35rem; }
.wardrobe-options .outfit-overview { padding:1rem; }
.wardrobe-options .section-heading { margin-bottom:.75rem; }
#guide-photo-notes { padding-bottom:.5rem; font-size:.875rem; }
#guide-photo-notes .companion-evidence { gap:.75rem; }
#guide-photo-notes p { color:var(--text-2); }
#guide-analysis-notes .profile-management { padding:1rem 0; border-top:1px solid var(--line); font-size:.8rem; color:var(--text-2); }
.is-photo-recommendation #guide-analysis-notes .profile-summary { display:none; }
#guide-analysis-notes .profile-summary__actions { display:none; }
.guide-footer { display:flex; justify-content:flex-end; border-top:1px solid var(--line-strong); padding:1.25rem 0; }
.colour-card-menu { position:relative; }
.colour-card-menu summary { cursor:pointer; list-style:none; }
.colour-card-menu > div { position:absolute; z-index:3; right:0; bottom:calc(100% + 8px); padding:.5rem; min-width:190px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow); }
.colour-card-menu .button { width:100%; text-align:left; border:0; }
.companion-dialog h2 { font-family:var(--font-heading); font-weight:750; font-size:1.8rem; letter-spacing:-.04em; }
@media(min-width:701px) and (max-width:1100px) {
 .colour-result-main { grid-template-columns:minmax(220px,.83fr) minmax(0,1.6fr); gap:1.5rem; }
 .portrait-empty { min-height:316px; }
 #colour-result-starters .core-colour-grid { gap:.75rem; }
 .starter-swatch { height:100px; }
}
@media(max-width:700px) {
 #guide-dashboard > .workspace-heading { gap:1rem; margin-bottom:1.75rem; }
 #guide-dashboard > .workspace-heading h1 { font-size:clamp(2rem,7.8vw,3rem); }
 #guide-dashboard > .workspace-heading .button { font-size:.75rem; padding:.7rem .85rem; min-height:44px; }
 .colour-result-main { grid-template-columns:1fr; gap:1.75rem; margin-bottom:1.75rem; }
 .colour-result-portrait { width:min(100%,310px); margin-inline:auto; }
 .colour-result-portrait:has(.portrait-empty) { width:100%; }
 .portrait-empty { aspect-ratio:auto; min-height:194px; display:grid; grid-template-columns:112px 1fr; grid-template-rows:1fr 1fr; column-gap:20px; row-gap:4px; text-align:left; padding:24px 20px; }
 .portrait-placeholder { grid-row:1 / 3; width:80px; height:108px; margin:0 auto; }
 .portrait-placeholder svg { padding:10px; }
 .portrait-empty strong { align-self:end; }
 .portrait-empty > span:last-child { align-self:start; max-width:20ch; }
 .portrait-caption { padding-inline:8px; }
 #colour-result-starters .section-heading { margin-bottom:1rem; }
 #colour-result-starters .section-heading h2 { font-size:1.2rem; }
 #colour-result-starters .core-colour-grid { gap:.65rem; }
 #colour-result-starters .core-colour button { padding:4px; }
 #colour-result-starters .core-colour strong { font-size:.75rem; }
 .starter-label { padding:.45rem 0 .25rem; gap:.3rem; }
 .starter-label code { font-size:.75rem; letter-spacing:-.04em; }
 .starter-swatch { height:90px; }
 .result-palette { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .result-options > summary { min-height:64px; }
 .result-options > summary > .palette-summary { width:70px; height:22px; }
 .journey-photo-list { flex-direction:column; }
 .journey-upload label { max-width:100%; }
}
@media(prefers-reduced-motion:reduce) { #colour-result-starters .core-colour button { transition:none; transform:none; } }