/* TIMELESS — floor-plan editor (section 9 / #floorplan-app) */

.floorplan-loading { color: var(--tl-text-dim); padding: var(--tl-sp-6); text-align: center; }

.fp-tabs { display: flex; gap: var(--tl-sp-2); margin-bottom: var(--tl-sp-4); flex-wrap: wrap; }
.fp-tab {
  font-family: inherit; font-weight: var(--tl-fw-bold); font-size: var(--tl-fs-sm);
  padding: var(--tl-sp-2) var(--tl-sp-4); border-radius: var(--tl-radius-sm) var(--tl-radius-sm) 0 0;
  border: 1px solid var(--tl-border); border-bottom: none; background: var(--tl-bg-sunken);
  color: var(--tl-text-dim); cursor: pointer;
}
.fp-tab.is-active { background: var(--tl-bg-raised); color: var(--tl-text); box-shadow: 0 -2px 0 var(--tl-accent) inset; }

.fp-plan { border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg); background: var(--tl-bg-raised); padding: var(--tl-sp-4); box-shadow: var(--tl-shadow-sm); }

.fp-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--tl-sp-4);
  flex-wrap: wrap; padding-bottom: var(--tl-sp-3); margin-bottom: var(--tl-sp-3); border-bottom: 1px solid var(--tl-border);
}
.fp-toolbar-2 { border-bottom: 1px solid var(--tl-border); margin-bottom: var(--tl-sp-4); }

.fp-palette { display: flex; gap: var(--tl-sp-2); flex-wrap: wrap; }
.fp-palette-btn {
  display: inline-flex; align-items: center; gap: var(--tl-sp-1-5); font-family: inherit; font-size: var(--tl-fs-xs);
  font-weight: var(--tl-fw-semibold); padding: var(--tl-sp-1-5) var(--tl-sp-2-5); border-radius: var(--tl-radius-pill); border: 1px solid var(--tl-border-strong);
  background: var(--tl-bg-raised); color: var(--tl-text); cursor: pointer;
}
.fp-palette-btn:hover { border-color: var(--tl-accent); }
.fp-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid; display: inline-block; flex-shrink: 0; }

.fp-view-controls { display: flex; align-items: center; gap: var(--tl-sp-2); flex-shrink: 0; }
.fp-snap-label { font-size: var(--tl-fs-xs); color: var(--tl-text-dim); font-weight: var(--tl-fw-semibold); display: flex; align-items: center; gap: var(--tl-sp-1-5); }
.fp-snap-select {
  font-family: inherit; font-size: var(--tl-fs-xs); padding: var(--tl-sp-1) var(--tl-sp-1-5); border-radius: var(--tl-radius-sm);
  border: 1px solid var(--tl-border-strong); background: var(--tl-bg-raised); color: var(--tl-text);
}

.fp-presets { display: flex; gap: var(--tl-sp-2); flex-wrap: wrap; }
.fp-io { display: flex; align-items: center; gap: var(--tl-sp-2); flex-wrap: wrap; }
.fp-load-label { cursor: pointer; }
.fp-save-status { font-size: var(--tl-fs-xs); color: var(--tl-text-faint); }
.fp-save-status-warn { color: var(--tl-warn); font-weight: var(--tl-fw-semibold); }

.fp-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--tl-sp-4); align-items: start; }
/* --tl-bp-lg (780px) */
@media (max-width: 780px) { .fp-body { grid-template-columns: 1fr; } }

.fp-canvas-wrap {
  aspect-ratio: 4 / 3; background: var(--tl-bg-sunken); border-radius: var(--tl-radius-md);
  overflow: hidden; border: 1px solid var(--tl-border);
}
.fp-svg {
  width: 100%; height: 100%; display: block; touch-action: none; -webkit-user-select: none; user-select: none;
}
/*
 * `touch-action: none` above is load-bearing for the editor's own drag/
 * rotate gestures (js/floorplan/floorplan.js — not touched by this pass) and
 * stays exactly as it is: a finger down ON THE CANVAS is a piece drag, not a
 * page scroll, by design. What was missing was any small-screen story around
 * that fact — on a phone the canvas could dominate almost the whole
 * viewport, so a visitor who landed a first touch on it had no obvious way
 * to scroll past it to the toolbar or sidebar at all.
 *
 * Two CSS-only changes, no touch-action or interaction-logic change: cap the
 * canvas's height so the toolbar above and sidebar below are always visible
 * as an obvious scroll target outside it, and add a one-line on-canvas hint
 * (chrome only — a plain overlay label, not part of the SVG) saying the rest
 * of the page scrolls normally.
 */
@media (max-width: 780px) {
  .fp-canvas-wrap { max-height: 56vh; max-height: 56dvh; aspect-ratio: auto; position: relative; }
}
.fp-touch-hint {
  display: none; position: absolute; left: 50%; bottom: var(--tl-sp-2); transform: translateX(-50%);
  background: color-mix(in srgb, var(--tl-bg-sunken) 78%, transparent); color: var(--tl-text-dim);
  font-size: var(--tl-fs-3xs); font-weight: var(--tl-fw-semibold); letter-spacing: var(--tl-tracking-2);
  padding: var(--tl-sp-0-5) var(--tl-sp-2-5); border-radius: var(--tl-radius-pill); border: 1px solid var(--tl-border);
  pointer-events: none; white-space: nowrap;
}
@media (max-width: 780px) and (pointer: coarse) {
  .fp-touch-hint { display: block; }
}

/* bounds outline — drawn in metre space, so stroke stays a constant SCREEN
   width regardless of zoom level via non-scaling-stroke */
.fp-bounds-rect { fill: none; vector-effect: non-scaling-stroke; }
.fp-bounds-hard { stroke: var(--tl-light-blue); stroke-width: 2; stroke-dasharray: 6 4; opacity: 0.6; }
:root[data-theme="light"] .fp-bounds-hard { stroke: var(--tl-deep-blue); }
.fp-bounds-warn { stroke: var(--tl-warn); stroke-width: 2; stroke-dasharray: 3 5; opacity: 0.5; }

.fp-piece { cursor: grab; touch-action: none; }
.fp-piece:active { cursor: grabbing; }
.fp-piece rect { vector-effect: non-scaling-stroke; }
.fp-piece.is-selected rect { stroke: var(--tl-light-blue); stroke-width: 0.14; filter: drop-shadow(0 0 0.15px var(--tl-light-blue)); }
:root[data-theme="light"] .fp-piece.is-selected rect { stroke: var(--tl-deep-blue); filter: drop-shadow(0 0 0.15px var(--tl-deep-blue)); }
.fp-piece.fp-piece-outside rect { stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.fp-piece-label { pointer-events: none; }
.fp-piece-seats { pointer-events: none; }
.fp-piece:focus-visible rect { outline: none; stroke: var(--tl-accent); stroke-width: 0.16; vector-effect: non-scaling-stroke; }

.fp-sidebar { display: flex; flex-direction: column; gap: var(--tl-sp-3); }
.fp-totals h4, .fp-inspector-title { margin: 0 0 var(--tl-sp-2); font-size: var(--tl-fs-lg); }
.fp-total-line { font-size: var(--tl-fs-sm); margin-bottom: var(--tl-sp-1); }
.fp-total-line strong { font-size: var(--tl-fs-lg); }
.fp-total-ok strong { color: var(--tl-ok); }
.fp-total-over strong { color: var(--tl-danger); }
.fp-group-breakdown { list-style: none; font-size: var(--tl-fs-xs); color: var(--tl-text-dim); margin-top: var(--tl-sp-2); }
.fp-group-breakdown li { display: flex; justify-content: space-between; padding: var(--tl-sp-0-5) 0; }
.fp-outside-tag { color: var(--tl-warn); font-weight: var(--tl-fw-semibold); font-size: var(--tl-fs-xs); }

.fp-inspector-hint { margin: 0; }
.fp-field { display: flex; flex-direction: column; gap: var(--tl-sp-1); font-size: var(--tl-fs-xs); font-weight: var(--tl-fw-semibold); color: var(--tl-text-dim); margin-bottom: var(--tl-sp-3); }
.fp-field input {
  font-family: inherit; font-size: var(--tl-fs-sm); font-weight: var(--tl-fw-regular); color: var(--tl-text);
  padding: var(--tl-sp-2) var(--tl-sp-3); border-radius: var(--tl-radius-sm); border: 1px solid var(--tl-border-strong);
  background: var(--tl-bg-raised);
}
.fp-rot-buttons { display: flex; gap: var(--tl-sp-2); margin-bottom: var(--tl-sp-3); }
.fp-field-size { font-size: var(--tl-fs-xs); margin-bottom: var(--tl-sp-3); }
.fp-delete-btn { width: 100%; }