/* Claude track: drawn floor-plan editor. */
#plan-editor { display: grid; gap: 14px; min-width: 0; }
#plan-editor h3 { margin: 0 0 6px; font-size: 16px; color: var(--navy, #172A3A); overflow-wrap: anywhere; }
.pe-note { margin: 0; font-size: 14px; color: #44525F; }
.pe-hint { margin: 0; font-size: 14px; color: #44525F; }
.pe-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-level { min-height: 44px; padding: 8px 14px; border: 1px solid #9FB0BF; border-radius: 22px; background: #fff; color: #172A3A; font-size: 15px; font-weight: 650; }
.pe-level[aria-selected="true"] { background: #172A3A; border-color: #172A3A; color: #fff; }
.pe-canvas-wrap { border: 1px solid #C9D3DC; border-radius: 10px; background: #fff; overflow: hidden; }
/* touch-action on the drawing itself: on a touch screen the browser otherwise takes a finger drag for
   page scrolling and cancels it, so rooms, size handles and doors cannot be dragged. The same setting on
   the shapes inside the drawing (below) is ignored by Chrome and the Android app's WebView. Effect: a
   finger that starts on the drawing does not scroll the page; scroll from above, below or beside it. */
.pe-canvas { display: block; width: 100%; max-height: 70vh; background: #FBFCFD; touch-action: none; }
.pe-canvas[hidden] { display: none; }
.pe-empty { margin: 0; padding: 28px 16px; text-align: center; font-size: 15px; color: #44525F; }
.pe-empty[hidden] { display: none; }
.pe-grid line { stroke: #E3E9EE; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pe-scale { fill: #5B6B79; }
.pe-room { cursor: grab; touch-action: none; outline: none; }
.pe-room rect, .pe-room polygon { fill: #DCE8F1; stroke: #172A3A; stroke-width: 3; touch-action: none; }
.pe-room.unfinished rect, .pe-room.unfinished polygon { fill: #EFEAE1; }
.pe-room.garage rect, .pe-room.garage polygon { fill: #E6E2F1; }
.pe-room.exterior rect, .pe-room.exterior polygon { fill: #DFEEE4; }
.pe-room.selected rect, .pe-room.selected polygon { fill: #E3EEFA; stroke: #0B5FB0; stroke-width: 4; }
.pe-room:focus-visible rect, .pe-room:focus-visible polygon { stroke: #083F7A; stroke-width: 6; }
/* Claude track slice 22: an L-shaped room is a polygon, styled like a rectangle. */
.pe-room text { pointer-events: none; user-select: none; fill: #172A3A; }
.pe-name { font-weight: 700; }
.pe-area, .pe-dim { fill: #3E4E5C; }
.pe-handle { cursor: nwse-resize; touch-action: none; }
.pe-handle-hit { fill: transparent; touch-action: none; }
.pe-handle-dot { fill: #0B5FB0; stroke: #fff; stroke-width: 2; touch-action: none; }
/* Doors, windows and open doorways. Stroke widths are screen pixels (non-scaling). */
.pe-opening { cursor: grab; touch-action: none; outline: none; }
.pe-opening line { fill: none; stroke-linecap: butt; touch-action: none; }
.pe-opening-hit { stroke: transparent; stroke-width: 26; pointer-events: stroke; }
.pe-opening-glow { stroke: #0B5FB0; stroke-opacity: 0.35; stroke-width: 17; }
.pe-opening-gap { stroke: #FBFCFD; stroke-width: 7; }
.pe-opening-mark { stroke-width: 5; }
.pe-opening.door .pe-opening-mark { stroke: #8A5A1C; }
.pe-opening.window .pe-opening-mark { stroke: #2F7FB8; }
.pe-opening-pane { stroke: #FFFFFF; stroke-width: 1.5; }
.pe-opening-jamb { stroke: #172A3A; stroke-width: 2; }
.pe-opening:focus-visible .pe-opening-jamb { stroke: #083F7A; stroke-width: 5; }
.pe-openings { display: grid; gap: 10px; border-top: 1px solid #D5DDE4; padding-top: 12px; }
.pe-opening-list { display: grid; gap: 6px; }
.pe-opening-row { min-height: 46px; padding: 8px 12px; border: 1px solid #9FB0BF; border-radius: 7px; background: #fff; color: #172A3A; font-size: 15px; text-align: left; overflow-wrap: anywhere; }
.pe-opening-row[aria-pressed="true"] { background: #E3EEFA; border-color: #0B5FB0; font-weight: 650; }
.pe-opening-add { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-opening-edit { display: grid; gap: 10px; border: 1px solid #9DBDE0; border-radius: 8px; background: #F4F8FD; padding: 10px 12px; }
.pe-secondary.pe-remove { border: 2px solid #a12c30; color: #a12c30; background: #fff; }
.pe-secondary.pe-remove:hover { background: #FBEDEE; }
.pe-unplaced { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pe-unplaced[hidden] { display: none; }
.pe-unplaced h3, .pe-unplaced .pe-note { flex-basis: 100%; }
/* Add buttons (+ a room, + Door, + Window, + Open doorway) are green like the app's other add buttons
   (Jeffrey's phone test, November 12, 2026). */
.pe-add { min-height: 46px; padding: 8px 14px; border: 1px solid #087b2c; border-radius: 8px; background: #087b2c; color: #fff; font-size: 15px; font-weight: 700; }
.pe-add:hover { background: #056322; border-color: #056322; }
.pe-detail { display: grid; gap: 10px; }
.pe-detail:empty { display: none; }
.pe-detail label { display: block; font-size: 14px; font-weight: 650; color: #33414E; }
.pe-detail input, .pe-detail select { display: block; width: 100%; min-width: 0; min-height: 46px; margin-top: 4px; padding: 8px 10px; font-size: 16px; border: 1px solid #9FB0BF; border-radius: 7px; background: #fff; color: #172A3A; }
.pe-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pe-secondary, .pe-nudge button { min-height: 46px; padding: 8px 12px; border: 1px solid #9FB0BF; border-radius: 7px; background: #fff; color: #172A3A; font-size: 15px; font-weight: 650; }
.pe-nudge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pe-more { border: 1px solid #D5DDE4; border-radius: 8px; padding: 8px 12px; }
.pe-more summary { min-height: 30px; font-size: 15px; font-weight: 650; color: #172A3A; cursor: pointer; }
.pe-more label { margin-top: 10px; }
.pe-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 0; }
.pe-totals:empty { display: none; }
.pe-totals > div { border: 1px solid #D5DDE4; border-radius: 7px; padding: 9px; }
.pe-totals dt { font-size: 13px; color: #44525F; }
.pe-totals dd { margin: 3px 0 0; font-size: 16px; font-weight: 700; color: #172A3A; }
.pe-totals .pe-note { grid-column: 1 / -1; }
/* Instructions above the drawing, the key under it, "?" help buttons, and tap-a-wall placing
   (November 12, 2026, after Android testing). */
.pe-guide { border: 1px solid #C9D3DC; border-radius: 8px; background: #fff; padding: 2px 12px; }
.pe-guide summary { padding: 10px 0; font-size: 16px; font-weight: 700; color: #172A3A; cursor: pointer; }
.pe-guide p, .pe-guide ol { margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: #26333F; }
.pe-guide ol { padding-left: 22px; }
.pe-guide li + li { margin-top: 4px; }
.pe-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: 14px; color: #33414E; }
.pe-key[hidden] { display: none; }
.pe-key-title { font-weight: 650; }
.pe-key-item { display: inline-flex; align-items: center; gap: 6px; }
.pe-key-symbol { flex: none; width: 34px; height: 14px; }
.pe-row { display: flex; align-items: center; gap: 10px; }
.pe-row > :first-child { flex: 1 1 auto; min-width: 0; }
#plan-editor .pe-row h3 { margin: 0; }
.pe-help { flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid #172A3A; border-radius: 50%; background: #fff; color: #172A3A; font-size: 19px; font-weight: 800; line-height: 1; }
.pe-help[aria-expanded="true"] { background: #172A3A; color: #fff; }
.pe-help-text { margin: 0; padding: 8px 12px; border-left: 4px solid #172A3A; border-radius: 0 6px 6px 0; background: #EEF2F5; font-size: 15px; line-height: 1.4; color: #172A3A; }
.pe-help-text[hidden] { display: none; }
.pe-unplaced .pe-row, .pe-unplaced .pe-help-text { flex-basis: 100%; }
.pe-placing { display: grid; gap: 8px; border: 2px solid #0B5FB0; border-radius: 8px; background: #F4F8FD; padding: 10px 12px; }
.pe-placing[hidden] { display: none; }
.pe-placing p { margin: 0; }
.pe-placing-text { font-size: 16px; font-weight: 700; color: #0B3F75; }
.pe-placing-text:focus:not(:focus-visible) { outline: none; }
.pe-placing-note { padding: 6px 10px; border-radius: 6px; background: #FFF4D6; color: #6B3D00; font-size: 15px; font-weight: 650; }
.pe-placing-walls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pe-wall-target { stroke: #0B5FB0; stroke-width: 6; stroke-dasharray: 9 6; stroke-linecap: butt; pointer-events: none; }
/* Overlapping rooms (after Jeffrey's phone test): the shared area shaded red on the drawing, taking no taps,
   and a note in the selected room's panel. */
.pe-overlaps, .pe-overlap { pointer-events: none; }
.pe-overlap { fill: #C42026; fill-opacity: 0.3; stroke: #a12c30; stroke-width: 2; stroke-dasharray: 5 3; }
.pe-overlap-note { margin: 0; padding: 8px 12px; border-left: 4px solid #a12c30; border-radius: 0 6px 6px 0; background: #FBEDEE; color: #6E1B1E; font-size: 15px; font-weight: 650; line-height: 1.4; }

/* Claude track slice 24 (plan step 1.6, floor plan choice A, Jeffrey, November 14, 2026): on wide screens the
   selected room's details sit beside the plan, so a change shows on the plan without scrolling. The last row
   (1fr) takes any extra height of the details column, so the plan side never gets gaps. */
@media (min-width: 1100px) {
  #plan-editor { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: repeat(7, auto) 1fr; column-gap: 24px; align-items: start; }
  #plan-editor > * { grid-column: 1; }
  #plan-editor > .pe-detail { grid-column: 2; grid-row: 1 / -1; padding-left: 22px; border-left: 1px solid #E3E7E5; }
  #plan-editor .pe-canvas { max-height: 74vh; }
}

/* Claude track slice 28 (plan step 1.8): with a mouse, the room, door or window under the pointer is outlined, and a
   size handle grows its ring. While something is held, the pointer is a closed hand (or the resize arrow) wherever it
   goes. Phones and tablets have no pointer to show, so nothing changes there. */
@media (hover: hover) and (pointer: fine) {
  .pe-room:not(.selected):hover rect, .pe-room:not(.selected):hover polygon { stroke: #5B9BD8; stroke-width: 4; } /* lighter than a selected room */
  .pe-opening:hover .pe-opening-hit { stroke: #0B5FB0; stroke-opacity: 0.2; }
  .pe-handle:hover .pe-handle-dot { stroke: #C98A22; stroke-width: 4; }
}
.pe-canvas.pe-grabbing, .pe-canvas.pe-grabbing * { cursor: grabbing; }
.pe-canvas.pe-resizing, .pe-canvas.pe-resizing * { cursor: nwse-resize; }