/* /floor-plan-maker/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts).
   The drawing sits on the site's cutting mat (--mat) with its grid; rooms are paper (--surface) with ink walls. */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}

.fp-grid{display:flex;flex-direction:column;gap:1rem}
@media(min-width:960px){
  .fp-grid{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:1.5rem;align-items:start}
  .fp-side{position:sticky;top:1rem}
}
.fp-side{display:flex;flex-direction:column;gap:1rem;min-width:0}
.fp-stagecard{min-width:0;padding:0.875rem}
.fp-sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.75rem}
.fp-k{display:block;font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:0.3125rem;white-space:nowrap}
.fp-k .u{text-transform:none}
.fp-in{display:block;min-width:0}
.fp-in input,.fp-in select{width:100%}

.fp-add{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto minmax(0,1fr);gap:0.5rem;align-items:end}
.fp-add input{padding:0.5625rem 0.625rem}
.fp-x{padding-bottom:0.625rem;color:var(--muted)}
.fp-addbtn{grid-column:1/-1;height:2.5rem}
@media(min-width:560px){
  .fp-add{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto minmax(0,1fr) auto}
  .fp-addbtn{grid-column:auto}
}
.fp-err{margin:0.5rem 0 0;color:var(--bad);font-weight:600;font-size:0.875rem}
.fp-err[hidden]{display:none}

.fp-modes{margin:0.625rem 0 0.5rem}
.fp-modes button{min-height:2.5rem;padding:0.5rem 0.25rem;min-width:0}
.fp-bar{display:flex;flex-wrap:wrap;gap:0.375rem;justify-content:space-between;align-items:center;margin-bottom:0.5rem}
.fp-btns{display:flex;gap:0.375rem}
.fp-sm{height:2.375rem;padding:0 0.5rem;font-size:0.84375rem}
.fp-units{margin:0;flex:0 0 auto}
.fp-units{padding:0.1875rem}
.fp-units button{padding:0.375rem 0.5rem;min-height:2rem;flex:0 0 auto}
.btn:disabled{opacity:.45;cursor:default;filter:none}

.fp-stage{position:relative;height:clamp(18rem,calc(100svh - 29rem),25rem);border-radius:0.625rem;overflow:hidden;background:var(--mat);border:1px solid var(--line)}
@media(min-width:960px){.fp-stage{height:clamp(26rem,calc(100vh - 25rem),40rem)}}
.fp-svg{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:default}
.fp-svg.m-draw,.fp-svg.m-door,.fp-svg.m-window,.fp-svg.m-opening{cursor:crosshair}
.fp-svg:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fp-gmin{stroke:var(--mat-muted);stroke-opacity:.16;fill:none}
.fp-gmaj{stroke:var(--mat-muted);stroke-opacity:.42;fill:none}
.fp-floor{fill:var(--surface)}
.fp-floor.sel{fill:var(--accent-soft);stroke:var(--accent);stroke-width:0}
.fp-wall{fill:var(--ink-2);stroke:var(--ink-2)}
.fp-line{stroke:var(--ink)}
.fp-wallhit{fill:transparent;stroke:transparent;pointer-events:all}
.fp-wallhit.sel{fill:var(--accent);fill-opacity:.55}
.fp-item path{stroke:var(--ink);fill:none}
.fp-window path{fill:var(--surface)}
.fp-swing{stroke:var(--muted)}
.fp-item.sel path{stroke:var(--accent)}
.fp-item path.fp-itemhit{fill:transparent;stroke:transparent;pointer-events:all}
.fp-wl text{fill:var(--ink-2);font-family:var(--mono)}
.fp-wlbg{fill:var(--surface-2);stroke:var(--line-2);stroke-width:0}
.fp-wl{cursor:pointer}
.fp-wl.sel .fp-wlbg{fill:var(--accent)}
.fp-wl.sel text{fill:var(--bg)}
.fp-rl text{fill:var(--ink);font-family:var(--sans)}
.fp-rl .fp-area{fill:var(--accent);font-family:var(--mono)}
.fp-rl{pointer-events:none}
.fp-draft{stroke:var(--signal);fill:none}
.fp-draftpt{fill:var(--signal)}
.fp-draftlbl{fill:var(--signal);font-family:var(--mono)}

.fp-hint{position:absolute;left:0.75rem;right:0.75rem;bottom:0.75rem;margin:0;padding:0.625rem 0.75rem;border-radius:0.5rem;background:var(--mat-2);color:var(--mat-ink);font-size:0.8125rem;line-height:1.45;pointer-events:none}
.fp-hint[hidden]{display:none}
.fp-edit{margin-top:0.5rem;display:flex;flex-wrap:wrap;gap:0.375rem 0.5rem;align-items:center;padding:0.5rem 0.625rem;border-radius:0.5rem;background:var(--surface-2);border:1px solid var(--accent);font-size:0.875rem}
.fp-edit[hidden]{display:none}
.fp-edit b{font-weight:650}
.fp-ef{display:contents}
.fp-edit input{width:7.5rem;padding:0.4375rem 0.5rem;font-size:0.9375rem}
.fp-edit input.fp-wide{width:11rem;flex:1 1 8rem}
.fp-edit .btn{height:2.25rem;padding:0 0.75rem;font-size:0.8125rem}
.fp-edit .fp-msg{flex:1 1 100%;margin:0;color:var(--muted);font-size:0.8125rem}
.fp-edit .fp-msg.bad{color:var(--bad);font-weight:600}
.fp-total{margin:0.625rem 0.125rem 0;font-family:var(--mono);font-size:0.875rem;color:var(--ink-2)}
.fp-total b{color:var(--accent)}

.fp-rooms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem}
.fp-rooms li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.25rem 0.5rem;align-items:center;padding:0.5rem 0.625rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2)}
.fp-rooms li.sel{border-color:var(--accent)}
.fp-rooms input{padding:0.4375rem 0.5rem;font-size:0.9375rem}
.fp-rooms .fp-meta{grid-column:1/-1;font-family:var(--mono);font-size:0.75rem;color:var(--muted);border:0;background:none;padding:0;text-align:left;cursor:pointer}
.fp-rooms .fp-meta b{color:var(--accent);font-weight:600}
.fp-rooms .fp-del{height:2.25rem;padding:0 0.625rem;font-size:0.8125rem}
.fp-thick{margin-top:0.875rem;max-width:12rem}
#roomsEmpty[hidden]{display:none}

.fp-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0.625rem;margin-top:0.75rem}
.fp-paper{margin:0}
.fp-paper button{padding:0.5rem 0.25rem}
.fp-dl{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem}
.fp-dl .btn{flex:1 1 6rem}
.fp-share{display:flex;flex-direction:column;gap:0.5rem;margin-top:0.875rem}
.fp-share input{font-family:var(--mono);font-size:0.75rem}
.fp-share input[hidden]{display:none}
.note{font-size:0.8125rem;color:var(--muted);margin:0.625rem 0.125rem 0;line-height:1.5}
.note.bad{color:var(--bad);font-weight:600}
.note .fp-link{font-size:inherit}
.fp-link{border:0;background:none;padding:0;color:inherit;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.fp-link:hover{color:var(--accent)}
.modes button:focus-visible,.btn:focus-visible,.fp-link:focus-visible,.fp-meta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fp-steps li,.fp-cannot li{margin-bottom:0.5rem}
@media(prefers-reduced-motion:reduce){.modes button,.btn{transition:none}}

/* furniture (T-PB.233): pieces are paper on the floor, ink outlines; a clash is outlined in the site's --bad */
.fp-furn{cursor:grab}
.fp-furn .fp-ffill{fill:var(--surface);pointer-events:all}
.fp-furn .fp-fout{stroke:var(--ink)}
.fp-furn .fp-fbody{fill:var(--surface-2);stroke:var(--ink-2)}
.fp-furn .fp-fline{fill:none;stroke:var(--muted)}
.fp-furn text{fill:var(--ink-2);font-family:var(--sans);pointer-events:none}
.fp-furn.hung .fp-ffill{fill-opacity:.35}
.fp-furn.sel .fp-fout{stroke:var(--accent)}
.fp-furn.bad .fp-fout{stroke:var(--bad)}
.fp-clash{list-style:none;margin:0.375rem 0.125rem 0;padding:0;color:var(--bad);font-size:0.8125rem;font-weight:600;line-height:1.45}
.fp-clash[hidden]{display:none}
.fp-turn{display:flex;flex-wrap:wrap;gap:0.375rem;flex:1 1 100%}
.fp-edit .fp-turn .btn{min-width:3.25rem}
.fp-furnadd{width:100%;margin-top:0.75rem}
.fp-in input:disabled{opacity:.55}
#pieceForm input{width:5.75rem}
.fp-wd{display:inline-flex;align-items:center;gap:0.375rem;color:var(--muted)}

/* trace a picture (T-PB.234): the picture sits under the plan; floors go see-through over it; calibration marks in --accent */
.fp-pic image{pointer-events:none}
.fp-svg.has-pic .fp-floor{fill-opacity:.25}
.fp-svg.m-cal{cursor:crosshair}
.fp-cal{fill:none;stroke:var(--accent);stroke-linecap:round}
.fp-calpt{fill:var(--accent);stroke:var(--surface)}
#picCtl[hidden]{display:none}
.fp-picrow{margin-top:0.875rem}
.fp-picrow input[type=range]{margin-top:0.625rem}
.fp-picrow .fp-turn .btn{flex:1 1 3.5rem;min-width:0;height:2.375rem;padding:0 0.375rem;font-size:0.84375rem}
#calForm .u{color:var(--muted);font-size:0.875rem}
#calLen{width:6rem}
.fp-hint .fp-link{pointer-events:auto;color:inherit}