/* Feng Shui My Room: confirm your layout (step 3 of 4) */

.cf { padding-top: 32px; padding-bottom: 80px; --cf-structure: #d8d0c3; }
:root[data-theme="dark"] .cf { --cf-structure: #3a4543; }
.cf-steps { margin-bottom: 28px; max-width: 640px; }
.cf-steps .stepper { margin-bottom: 0; }
.cf-keys { display: grid; gap: 8px; max-width: 680px; margin: 0 0 18px; }
.cf-keys .chips { margin: 0; }
.cf-compass > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.cf-compass > summary::-webkit-details-marker { display: none; }
.cf-compass > summary::after { content: '+'; font-size: 1.3rem; color: var(--ink-3); }
.cf-compass[open] > summary::after { content: '−'; }
.cf-compass > summary h3 { margin: 0; }
.cf-compass[open] > summary { margin-bottom: 4px; }
.cf-title { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 10px; }
.cf-lede { color: var(--ink-2); font-size: 1.05rem; max-width: 680px; margin: 0 0 18px; }
.cf-warn { display: flex; gap: 8px; align-items: flex-start; color: var(--warn); background: var(--amber-soft); border-radius: var(--radius-sm); padding: 10px 14px; max-width: 680px; margin: 0 0 18px; }
.cf-warn svg { flex: none; margin-top: 3px; }

.cf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; margin-top: 8px; }
.cf-main { display: grid; gap: 14px; min-width: 0; }
.cf-side { display: grid; gap: 14px; min-width: 0; }
.cf-side h3 { font-size: 1.05rem; margin: 0 0 4px; }

.cf-plan-card { padding: 12px; overflow: hidden; }
.cf-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cf-toolbar .spacer { flex: 1; }
.cf-svg-wrap { background: var(--paper-2); border-radius: var(--radius-sm); overflow: hidden; }
.cf-svg {
  display: block; width: 100%; height: auto; max-height: min(68vh, 640px); overflow: visible;
  touch-action: none; user-select: none; -webkit-user-select: none; outline: none; cursor: default; stroke: none;
}
.cf-svg:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.cf-hint { margin: 8px 4px 0; }

/* plan drawing (units are metres) */
.cf-floor { fill: var(--card); }
.cf-gridline { stroke: var(--line); stroke-width: 0.008; }
.cf-wall { stroke: var(--ink); stroke-linecap: square; }
.cf-item { cursor: grab; outline: none; }
.cf-item polygon, .cf-item ellipse:not(.cf-pillow) { stroke: #5c5c58; stroke-width: 0.014; fill-opacity: .9; }
.cf-item.flat polygon, .cf-item.flat ellipse { fill-opacity: .35; }
.cf-item.structural polygon { fill-opacity: 1; }
.cf-item:hover polygon, .cf-item:hover ellipse:not(.cf-pillow) { stroke: var(--accent); stroke-width: 0.03; }
.cf-item.sel polygon, .cf-item.sel ellipse:not(.cf-pillow) { stroke: var(--accent); stroke-width: 0.045; }
.cf-item:focus-visible polygon, .cf-item:focus-visible ellipse:not(.cf-pillow) { stroke: var(--accent); stroke-width: 0.045; stroke-dasharray: 0.08 0.05; }
.cf-front { stroke: #2b2622; stroke-width: 0.045; stroke-linecap: round; stroke-opacity: .75; pointer-events: none; }
.cf-pillow { fill: #fff; stroke: #5c5c58; stroke-width: 0.01; pointer-events: none; }
.cf-label { text-anchor: middle; dominant-baseline: middle; fill: #2b2622; stroke: #ffffff; paint-order: stroke; font-family: var(--font-ui); font-weight: 600; pointer-events: none; }

.cf-op { cursor: grab; outline: none; }
.cf-hit { fill: transparent; }
.cf-op-line { stroke-width: 0.1; stroke-linecap: butt; }
.cf-op.window .cf-op-line { stroke: #6f9fc4; }
.cf-op.door .cf-op-line, .cf-op.opening .cf-op-line { stroke: var(--card); }
.cf-leaf { stroke: var(--ink-2); stroke-width: 0.03; }
.cf-swing { fill: none; stroke: var(--ink-3); stroke-width: 0.014; stroke-dasharray: 0.05 0.04; }
.cf-op.main .cf-leaf { stroke: var(--cinnabar); }
.cf-entry { font-size: 0.13px; font-weight: 700; fill: var(--cinnabar); text-anchor: middle; dominant-baseline: middle; font-family: var(--font-ui); letter-spacing: .02em; pointer-events: none; }
.cf-op:hover .cf-op-line, .cf-op.sel .cf-op-line { stroke: var(--accent); }
.cf-op.sel .cf-hit, .cf-op:focus-visible .cf-hit { fill: var(--accent-glow); }

.cf-wallhandle { cursor: ew-resize; outline: none; }
.cf-wallhandle[data-wall="top"], .cf-wallhandle[data-wall="bottom"] { cursor: ns-resize; }
.cf-knob { fill: var(--card); stroke: var(--accent); stroke-width: 0.025; }
.cf-wallhandle:hover .cf-knob, .cf-wallhandle.active .cf-knob, .cf-wallhandle:focus-visible .cf-knob { fill: var(--accent); }
.cf-dim { font-size: 0.17px; font-weight: 600; fill: var(--ink-2); text-anchor: middle; dominant-baseline: middle; font-family: var(--font-ui); pointer-events: none; }
.cf-wallhandle.active .cf-dim { fill: var(--accent-ink); }

.cf-north circle { fill: var(--card); stroke: var(--line-2); stroke-width: 0.012; }
.cf-north path { fill: var(--cinnabar); }
.cf-north text { font-size: 0.13px; font-weight: 700; text-anchor: middle; fill: var(--ink); font-family: var(--font-ui); }

/* selection panel */
.cf-panel { padding: 14px 16px; min-height: 76px; }
.cf-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cf-panel-head .cf-close { margin-left: auto; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cf-rot, .cf-width { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cf-width-val { min-width: 84px; text-align: center; font-size: .9rem; font-weight: 600; }
.cf-del { color: var(--bad); }
.cf-note { margin: 10px 0 0; }
.cf-add { gap: 6px; }

/* compass */
.cf-compass, .cf-photos { padding: 16px; }
.cf-cmode { margin: 12px 0 14px; flex-wrap: wrap; }
.cf-cmode button { padding: 0 11px; }
.cf-dial-row { display: flex; gap: 14px; align-items: center; }
.cf-dial {
  position: relative; flex: none; width: 118px; height: 118px; border-radius: 50%; border: 1px solid var(--line-2);
  background: radial-gradient(circle at 50% 50%, var(--card) 60%, var(--paper-2)); cursor: grab; touch-action: none; outline: none;
}
.cf-dial:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); }
.cf-dial.off { opacity: .45; }
.cf-dial-up { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cf-needle { position: absolute; left: 50%; top: 14px; bottom: 50%; width: 0; transform-origin: 50% 100%; transition: transform .12s; }
.cf-needle::before { content: ''; position: absolute; left: -6px; top: 12px; border: 6px solid transparent; border-bottom: 34px solid var(--cinnabar); border-top: 0; }
.cf-needle b { position: absolute; left: -5px; top: -2px; font-size: .72rem; color: var(--cinnabar); }
.cf-hub { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); }
.cf-facing { margin: 0; line-height: 1.45; }

/* photos */
.cf-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.cf-thumb { padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; background: var(--paper-2); aspect-ratio: 1; }
.cf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cf-photo-full { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-sm); }

.cf-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.cf-cta p { margin: 0; display: flex; gap: 6px; align-items: center; }

@media (max-width: 860px) {
  .cf-grid { grid-template-columns: minmax(0, 1fr); }
  .cf-thumbs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
  .cf { padding-top: 20px; padding-left: 16px; padding-right: 16px; }
  .cf-plan-card { padding: 8px; }
  .cf-svg { max-height: 62vh; }
  .cf-cta { position: sticky; bottom: 0; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); margin: 20px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); z-index: 5; }
  .cf-cta .btn { width: 100%; justify-content: center; }
  .cf-cta p { display: none; }
  .cf-rot .btn { padding: 0 10px; }
}
.cf-roomtype { max-width: 680px; }
.cf-roomtype .btn-ghost { background: var(--card); }
.cf-thumb.is-ignored img { opacity: .4; filter: grayscale(1); }

/* Phones: your photos sit right under the plan, so comparing them doesn't mean scrolling past the panels. */
.cf-strip { display: none; }
.cf-redo { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.cf-redo svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
  .cf-side .cf-photos { display: none; }
  .cf-strip { display: flex; align-items: center; gap: 6px; overflow-x: auto; margin: 8px 0 0; padding-bottom: 2px; }
  .cf-strip .cf-thumb { flex: 0 0 56px; height: 56px; }
  .cf-strip .cf-redo { flex: 0 0 auto; margin: 0 0 0 6px; white-space: nowrap; }
}
/* Phones: the key pieces fit on one scrolling row, so the plan starts on the first screen. */
@media (max-width: 520px) {
  .cf-keys { gap: 6px; margin-bottom: 12px; }
  .cf-keys > .xsmall { display: none; }
  .cf-keys .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .cf-keys .chip { flex: 0 0 auto; }
  .cf-title { margin-bottom: 6px; }
  .cf-lede { margin-bottom: 12px; }
}
@media (max-width: 520px) {
  .cf .stepper-label { white-space: nowrap; font-size: .78rem; }
  .cf .stepper-item:not(.active) .stepper-label { visibility: hidden; }
}

/* Small things (lamps, plants, decor, side tables): on the plan for context, faint and out of the way. */
.cf-item-minor { pointer-events: none; }
.cf-item-minor polygon, .cf-item-minor ellipse { fill-opacity: .22; stroke: #5c5c58; stroke-opacity: .25; stroke-width: 0.01; }
@media (max-width: 520px) { .cf-wide-only { display: none; } }