.hub { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-8); }
@media (max-width: 900px) { .hub { grid-template-columns: 1fr; } }

.floor-tabs { display: flex; gap: var(--space-6); margin-bottom: var(--space-4);
  align-items: flex-end; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); }
.floor-tabs__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
  margin-left: auto; margin-bottom: var(--space-2); }
.floor-tabs__group { display: flex; gap: var(--space-1); align-items: flex-end; }
.floor-tabs__tabwrap { position: relative; display: flex; align-items: flex-end; }
.floor-tabs__delete { position: absolute; top: -4px; right: -9px; }
.floor-tabs__delete-button { background: none; border: none; padding: 0; cursor: pointer;
  color: var(--color-danger); display: block; }
.floor-tabs__delete-button .icon-delete { width: 18px; height: 18px; display: block; }
.floor-tabs__delete-button:hover .icon-delete circle { fill: var(--color-danger-bg); }
.floor-tabs__delete, .floor-tabs__reorder { display: none; }
.hub__plan--editing .floor-tabs__delete, .hub__plan--editing .floor-tabs__reorder { display: block; }
.floor-tabs__edit-only { display: none; }
.hub__plan--editing .floor-tabs__edit-only { display: inline-block; }
.floor-tabs__reorder { margin-bottom: var(--space-2); }
/* ghost arrows: no pill, muted, ink on hover (overrides .btn--secondary) */
.floor-tabs__reorder .btn { border: none; background: none; padding: var(--space-1) 2px;
  color: var(--color-text-muted); font-size: var(--text-sm); }
.floor-tabs__reorder .btn:hover { color: var(--color-text); background: none; transform: none; }
.floor-tabs__tab { padding: 0 0 var(--space-2); text-decoration: none;
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  letter-spacing: -0.01em; color: var(--color-text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 120ms ease; }
.floor-tabs__tab:hover { color: var(--color-text); }
.floor-tabs__tab--active { color: var(--color-text); border-bottom-color: var(--color-text); }

/* border-box + block: the 1px borders live inside the JS-fixed 1:100 width,
   otherwise they overflow the scroll pane by 2px and cause a phantom
   scrollbar. (0.13% scale error — far below calibration resolution.) */
.floor-plan { width: 100%; box-sizing: border-box; display: block;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.floor-plan__canvas { fill: var(--color-surface); }
/* The plan is size-fixed by JS (true 1:100); never shrink it to fit — scroll. */
.floor-plan__scroll { overflow-x: auto; }
.calibrate-bar { height: var(--space-4); background: var(--color-text); border-radius: 2px; }
.calibrate-hint { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.room-rect { stroke: var(--color-text); stroke-width: var(--stroke-room); cursor: pointer;
  transition: stroke-width 120ms ease; }
.room-rect--seamless { stroke: none; }
.room-outline { fill: none; stroke: var(--color-text); stroke-width: var(--stroke-room);
  pointer-events: none; transition: stroke-width 120ms ease; }
.room-link:hover .room-outline { stroke-width: var(--stroke-room-hover); }
/* Luftraum: hatched void, not clickable — there is no room behind it. */
.luftraum-hatch__line { stroke: var(--color-border); stroke-width: 1; }
.room-rect--void { fill: url(#luftraum-hatch); cursor: default; }
.room-link--void { cursor: default; }
.room-rect--empty  { fill: var(--color-status-empty); }
.room-rect--active { fill: var(--color-status-active); }
.room-rect--done   { fill: var(--color-status-done); }
.room-link:hover .room-rect { stroke-width: var(--stroke-room-hover); }
.room-cover { display: none; pointer-events: none; opacity: var(--opacity-cover); }
.room-link:hover .room-cover { display: block; }
.room-link:hover .room-rect__name, .room-link:hover .room-rect__meta, .room-link:hover .room-rect__dims
  { paint-order: stroke; stroke: var(--color-surface); stroke-width: var(--stroke-text-halo); }
.room-rect__name { font-family: var(--font-display); font-size: var(--text-plan-name);
  font-weight: 600; fill: var(--color-text); pointer-events: none; }
.room-rect__meta { font-family: var(--font-mono); font-size: var(--text-plan-meta);
  fill: var(--color-text); opacity: var(--opacity-meta); pointer-events: none; }
.room-rect__dims { font-family: var(--font-mono); font-size: var(--text-plan-meta);
  fill: var(--color-text); opacity: var(--opacity-meta); pointer-events: none; }

.plan-dialog { margin: auto; min-width: 340px; padding: var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.plan-dialog::backdrop { background: rgb(26 25 23 / 0.35); }
.plan-dialog form { display: flex; flex-direction: column; gap: var(--space-4); }
.plan-dialog__title { margin: 0; }
.plan-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

@media (max-width: 700px) {
  .plan-dialog { margin: auto auto 0; width: 100%; max-width: none; min-width: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .floor-tabs__actions, .floor-tabs__reorder, .floor-tabs__delete { display: none; }
  .floor-tabs { overflow-x: auto; }
  .hub__plan { overflow: hidden; }
  /* touch-action lives on the gesture surface, not the container: an
     ancestor's touch-action intersects with descendants', so setting
     it on .hub__plan would also disable native swipe on .floor-tabs. */
  svg.floor-plan { touch-action: none; }
}

.plan-tooltip { position: fixed; z-index: 20; pointer-events: none; white-space: nowrap;
  background: var(--color-text); color: var(--color-primary-contrast);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500; box-shadow: var(--shadow-1); }

.zone-chips { margin-top: var(--space-4); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.zone-chip { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  text-decoration: none; font-size: var(--text-base); font-weight: 500; color: var(--color-text);
  border: var(--control-border-w) solid var(--color-border); background: var(--color-surface);
  transition: border-color 120ms ease; }
.zone-chip:hover { border-color: var(--color-text); }
.zone-chip--active { background: var(--color-status-active); }
.zone-chip--done   { background: var(--color-status-done); }
.zone-chip__delete { display: none; width: 18px; height: 18px; cursor: pointer;
  fill: none; stroke: var(--color-danger); stroke-width: 1.25; stroke-linecap: round; }
.zone-chip__delete circle { fill: var(--color-surface); }
.zone-chip__delete:hover circle { fill: var(--color-danger-bg); }
.hub__plan--editing .zone-chip { display: inline-flex; align-items: center; gap: var(--space-2); }
.hub__plan--editing .zone-chip__delete { display: block; }


.room-handle { fill: var(--color-text); cursor: nwse-resize; display: none; }
.room-delete { display: none; cursor: pointer; fill: none; stroke: var(--color-danger);
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.room-delete circle { fill: var(--color-surface); }
.room-delete:hover circle { fill: var(--color-danger-bg); }
.hub__plan--editing .room-handle, .hub__plan--editing .room-delete { display: block; }
.hub__plan--editing .room-rect { cursor: grab; }
.hub__plan--editing .room-rect__name { pointer-events: auto; cursor: text; }
.room-add-section { display: none; cursor: pointer; fill: none; stroke: var(--color-text-muted);
  stroke-width: 1.25; stroke-linecap: round; }
.room-add-section circle { fill: var(--color-surface); }
.room-add-section:hover { stroke: var(--color-text); }
.hub__plan--editing .room-add-section { display: block; }
.room-link--dragging .room-outline { display: none; }

.hub__dashboard { display: flex; flex-direction: column; gap: var(--space-4); }
.dashboard__totals { margin: 0 0 var(--space-4); display: flex; gap: var(--space-6); }
.dashboard__total { display: flex; flex-direction: column; gap: 2px; }
.dashboard__total a { color: inherit; text-decoration: none; }
.dashboard__total a:hover { text-decoration: underline; }
.dashboard__budget-link { text-align: right; margin-top: var(--space-3); }
.dashboard__budget-link a { color: inherit; text-decoration: none; }
.dashboard__budget-link a:hover { text-decoration: underline; }
.dashboard__tasks { list-style: none; margin: 0; padding: 0; }
.dashboard__coming li { justify-content: flex-start; gap: var(--space-2); }
.dashboard__coming li > span:last-child { margin-left: auto; }
.dashboard__coming-date { white-space: nowrap; }
.dashboard__coming--overdue .dashboard__coming-date { color: var(--color-danger); }
.dashboard__tasks li { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base); }
.dashboard__tasks li a { font-weight: 500; text-decoration: none; }
.dashboard__tasks li a:hover { text-decoration: underline; }
.dashboard__tasks li:last-child { border-bottom: none; }
.dashboard__tasks li span { color: var(--color-text-muted); white-space: nowrap; }