/* The room map (roomMapUi.mjs). Tokens only, from the app's token layer: the light theme and the
   ?assoc= re-brands need no override.

   The one designed object is the letter. On the plan it has the shapes of the annotated plan the
   team receives (renderEvidence): an outlined circle is a room of the flat, a filled square a room of
   this contract. What the visitor sees is what the team reads, and the legend under the plan says it
   in the evidence's words. Letters sit on the white sheet (--paper) in every theme.
   Everything around them stays quiet: one frame, a bar above the sheet for what to do (the next
   letter, the count, the instruction) and a bar below it for how to look at it (legend, page, zoom,
   rotation). */

/* The field's own measures, derived from the token layer: on the field, and on the letter a drag
   carries into <body>. */
.room-map, .room-map__ghost {
  --rm-tag: 36px;                        /* the drawn letter */
  --rm-tag-font: var(--fs-lg);
  --rm-ring: 3px;
  --rm-hit: var(--control-min-touch);    /* what a finger or a pointer hits, never less than 44px */
  --rm-view: var(--iconbtn-md);          /* a view control: zoom, rotation, page */
}
@media (pointer: coarse) {
  .room-map { --rm-view: var(--iconbtn-lg); }
}
@media (max-width: 480px) {
  /* A phone shows the sheet ~300px wide, where a 36px letter hides the room name printed under it:
     the drawn letter shrinks, the area a finger hits does not. */
  .room-map, .room-map__ghost { --rm-tag: 30px; --rm-tag-font: var(--fs-base); }
}

/* ── the field: three zones (file, sheet, contract) on one rhythm ─────────────────────────── */
.room-map { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.room-map [hidden] { display: none !important; }
.room-map p { margin: 0; }
.room-map__help { color: var(--text-secondary); font-size: var(--fs-base); line-height: var(--lh-normal); }

/* The three things the field asks; the current one is filled (roomMapUi.mjs render()). */
.room-map__steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: room-map-step; }
.room-map__step { counter-increment: room-map-step; display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--fs-sm); }
.room-map__step::before {
  content: counter(room-map-step);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--icon-lg);
  height: var(--icon-lg);
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.room-map__step[data-state="current"] { color: var(--text); font-weight: 600; }
.room-map__step[data-state="current"]::before { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.room-map__step[data-state="done"]::before { content: "\2713"; border-color: var(--success); color: var(--success-dark); }

/* ── the plan's file ─────────────────────────────────────────────────────────────────────────
   Until a plan is on screen this is the field's invitation, drawn like the documents page's drop
   area. Once the sheet is shown it steps back to one line: changing the plan is the rare move. */
.room-map__source { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.room-map__source[data-state="empty"],
.room-map__source[data-state="missing"] {
  padding: var(--space-5);
  border: 2px dashed var(--accent-border);
  border-radius: var(--radius-lg);
  background: var(--btn-outline-bg);
}
.room-map__source[data-state="loaded"] { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.room-map__source[data-state="loaded"] .room-map__source-note { order: -1; flex: 1 1 18rem; min-width: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
/* The file input stays (visually hidden, focusable); the label is its face, in Italian. */
.room-map__file-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.room-map__file-button { cursor: pointer; }
.room-map__source:not([data-state="loaded"]) .room-map__file-button { min-height: var(--control-min-touch); }
.room-map__file:focus-visible + .room-map__file-button { outline: 3px solid var(--accent); outline-offset: 2px; }
.room-map__file:disabled + .room-map__file-button { opacity: .5; cursor: wait; }
.room-map__file-hint { color: var(--text-secondary); font-size: var(--fs-sm); }
/* the one-click reuse of a planimetria recognised on the documents page (main.mjs reusablePlanimetrie) */
.room-map__reuse { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.room-map__reuse-label { color: var(--text-secondary); font-size: var(--fs-sm); }

.room-map__status { color: var(--info-dark); font-size: var(--fs-base); line-height: var(--lh-normal); }
.room-map__error { padding-left: var(--space-3); border-left: 3px solid var(--danger); color: var(--danger-dark); }
.room-map__replacement {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--warning-light);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-lg);
}
.room-map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.room-map-retry { margin-top: var(--space-4); padding: var(--space-4); background: var(--info-light); border: 1px solid var(--info-border); border-radius: var(--radius-lg); }
.room-map-retry[hidden] { display: none; }

/* ── the sheet in its frame ──────────────────────────────────────────────────────────────── */
.room-map__workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  transition: var(--transition-tone);
}
/* Tap placement armed: the frame, its bar and the sheet all say the next tap sets a letter down. */
.room-map__workspace[data-placing="true"] { border-color: var(--accent); }
.room-map__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  transition: var(--transition-tone);
}
.room-map__workspace[data-placing="true"] .room-map__head { background: var(--accent-light); }
.room-map__workspace[data-placing="true"] .room-map__hint { color: var(--text); font-weight: 600; }
.room-map__tray { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* The tray: the next letter, dragged out of the button onto its room, or pressed and then set down
   with a tap. Its letter is the very object that lands on the sheet, so it is drawn for paper too. */
.room-map__add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-min-touch);
  padding-left: var(--space-1-5);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.room-map__add-letter {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--control-min-touch) - var(--space-3));
  height: calc(var(--control-min-touch) - var(--space-3));
  border: var(--rm-ring) solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-none);
  transition: var(--transition-control);
}
.room-map__add-letter:empty { display: none; }
@media (hover: hover) {
  .room-map__add:hover:not(:disabled) .room-map__add-letter { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
}
/* Scoped under .room-map to outrank the light theme's `.btn-outline` ink. */
.room-map .room-map__add[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-light); color: var(--text); }
/* Every room is on the sheet: one more letter is still possible, it is no longer the next move. */
.room-map .room-map__add[data-quiet="true"] { border-color: var(--border); background: var(--btn-ghost-bg); color: var(--text-secondary); }
.room-map__add[data-quiet="true"] .room-map__add-letter { border-color: var(--muted); }
.room-map__add.room-map__pressed { transform: scale(1.04); }

/* Fewer letters than rooms is progress; only more letters than rooms is a problem. */
.room-map__count {
  margin-left: auto;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.room-map__count:empty { display: none; }
.room-map__count[data-state="ok"] { border-color: var(--success-border); background: var(--success-light); color: var(--success-dark); }
.room-map__count[data-state="over"] { border-color: var(--warning-border); background: var(--warning-light); color: var(--warning-dark); }
.room-map__hint { transition: var(--transition-tone); }

/* The table the sheet lies on. Its padding is half a letter's hit area, so a letter on the sheet's
   very edge fits in the scroll box, and so does every transform it makes while it lands or is
   pressed: no scrollbar flashes. Its shadows and rings may be cut at that edge, which is harmless. */
.room-map__viewport {
  max-height: 65dvh;
  min-height: 160px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: calc(var(--rm-hit) / 2);
  background: var(--surface-2);
}
.room-map__stage { position: relative; min-width: 100%; isolation: isolate; }
.room-map__stage:focus-visible { outline: 3px solid var(--accent); outline-offset: var(--space-1); }
.room-map__stage[data-placing="true"] { cursor: crosshair; }
.room-map__canvas { display: block; width: 100%; height: auto; box-shadow: var(--shadow-sm); transition: var(--transition-control); }
/* Armed, the sheet itself is ringed; with the keyboard on it the focus ring already says so. */
.room-map__stage[data-placing="true"]:not(:focus-visible) .room-map__canvas { box-shadow: 0 0 0 3px var(--accent), var(--shadow-sm); }
.room-map__missing {
  display: grid;
  place-items: center;
  min-height: 160px;
  padding: var(--space-6);
  background: var(--surface-2);
  color: var(--text-secondary);
  text-align: center;
}

/* ── the letters ─────────────────────────────────────────────────────────────────────────────
   A button as large as a fingertip, and inside it (::before) the drawn letter. The white halo keeps
   a letter apart from a wall drawn in black, as the white stroke does on the evidence. Its shadow is
   composed from three parts so that every state changes only its own part and the change animates:
   --rm-shade (the darkening of a letter of this contract), --rm-glow (hover), --rm-lift (a press). */
.room-map__markers { position: absolute; inset: 0; pointer-events: none; }
.room-map__marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: var(--rm-hit);
  height: var(--rm-hit);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--paper-ink);
  font-family: var(--font-display);
  font-size: var(--rm-tag-font);
  font-weight: 700;
  line-height: var(--lh-none);
  pointer-events: auto;
  cursor: grab;
  isolation: isolate;
  transition: var(--transition-tone);
  /* A drag that starts on a letter moves the letter, not the page; everywhere else the sheet and
     the page still pan. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.room-map__marker::before {
  --rm-shade: transparent;
  --rm-glow: transparent;
  --rm-lift: var(--shadow-sm);
  content: "";
  position: absolute;
  z-index: var(--z-behind);
  inset: calc((var(--rm-hit) - var(--rm-tag)) / 2);
  border: var(--rm-ring) solid var(--accent);
  /* 50%, not --radius-full: a percentage interpolates to the square's corner in step with the fill */
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 var(--rm-tag) var(--rm-shade), 0 0 0 2px var(--paper), 0 0 0 6px var(--rm-glow), var(--rm-lift);
  transition: var(--transition-shape);
}
/* In this contract: the filled square. A tap morphs one into the other — that morph is the answer
   to the tap, so every part of it (corner, fill, shade, ink) is a transition and nothing jumps. */
.room-map__marker--selected { border-radius: var(--radius-md); color: var(--on-accent); }
.room-map__marker--selected::before { --rm-shade: var(--tag-shade); border-color: var(--paper); border-radius: var(--radius-sm); background: var(--accent); }
@media (hover: hover) {
  .room-map__marker:hover:not(:disabled)::before { --rm-glow: var(--accent-border); }
}
/* Drawn for the sheet, not the page: dark ink with a white edge reads on paper and on a black wall
   alike, whatever the brand colour. */
.room-map__marker:focus-visible { outline: 3px solid var(--paper-ink); outline-offset: 1px; box-shadow: 0 0 0 5px var(--paper); }
.room-map__marker:disabled { cursor: wait; }
.room-map__marker--dragging { visibility: hidden; }
/* A touch press held long enough to drag (roomMapUi.mjs TOUCH_HOLD_MS): the letter says it is ready.
   The drawn letter grows, not the button, so it stays inside the table's padding. */
.room-map__marker.room-map__pressed::before { --rm-lift: var(--shadow-lg); transform: scale(1.15); }
/* While a letter is being placed with a tap, a tap on an existing letter places there too. */
.room-map__stage[data-placing="true"] .room-map__marker { pointer-events: none; }

/* Just set down (roomMapUi.mjs `landed`, taken off on a timer, never on animationend): the letter
   lands like a stamp and a ring spreads from it, so the eye finds what just changed. The stamp stays
   inside the hit box and the ring is a shadow, which never enlarges the scroll box. The global
   reduced-motion rule removes both; the letter is simply there. */
@keyframes room-map-land {
  from {
    transform: scale(1.2);
    box-shadow: inset 0 0 0 var(--rm-tag) var(--rm-shade), 0 0 0 2px var(--paper), 0 0 0 2px rgba(var(--accent-rgb), .6), var(--rm-lift);
  }
  to {
    transform: none;
    box-shadow: inset 0 0 0 var(--rm-tag) var(--rm-shade), 0 0 0 2px var(--paper), 0 0 0 18px rgba(var(--accent-rgb), 0), var(--rm-lift);
  }
}
.room-map__marker--landed::before { animation: room-map-land var(--dur-slower) var(--ease-out); }

/* The letter under the finger: fixed to the viewport, above every layer, never a hit target. Dashed
   while it would not land, solid over the sheet. */
.room-map__ghost,
.room-map__cursor {
  display: grid;
  place-items: center;
  width: var(--rm-tag);
  height: var(--rm-tag);
  border: var(--rm-ring) dashed var(--accent);
  border-radius: var(--radius-full);
  background: var(--paper);
  color: var(--paper-ink);
  font-family: var(--font-display);
  font-size: var(--rm-tag-font);
  font-weight: 700;
  line-height: var(--lh-none);
  pointer-events: none;
}
.room-map__ghost {
  position: fixed;
  z-index: var(--z-drag);
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 0 2px var(--paper), var(--shadow-lg);
}
.room-map__ghost[data-over="true"] { border-style: solid; }
/* Under a finger or a pen a small letter is hidden by the hand itself: such a drag carries a
   full-size one. */
.room-map__ghost[data-touch="true"] { width: var(--rm-hit); height: var(--rm-hit); font-size: var(--fs-lg); }
body.room-map-dragging, body.room-map-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
/* Where the next letter would be set down: shown to the keyboard on the focused sheet, and under a
   mouse; on a touch screen there is nothing to hover and the instruction says «tocca». */
.room-map__cursor {
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--paper);
  visibility: hidden;
}
.room-map__stage:focus-visible .room-map__cursor,
.room-map__stage[data-hover="true"] .room-map__cursor { visibility: visible; }
/* Right after a letter is set down the next one waits out of sight, or it would sit on the one just
   placed; it comes back with the next arrow key or pointer move. */
.room-map__stage[data-cursor-idle="true"] .room-map__cursor { visibility: hidden; }

/* ── under the sheet: how to read it, how to look at it ──────────────────────────────────── */
.room-map__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-top: 1px solid var(--border);
}
.room-map__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}
.room-map__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.room-map__legend-tag {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  border: 2px solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--paper);
}
/* Off the sheet there is no wall to keep apart from: no white frame, which a light theme would
   swallow and leave a smaller square than the circle beside it. */
.room-map__legend-tag--selected { border-color: transparent; border-radius: var(--radius-sm); background: var(--tag-fill); }

/* Page, zoom and rotation: square buttons of one size, zoom as one segmented control around its
   reading, so the three read as one instrument and not as three form buttons. */
.room-map__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.room-map__page { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--fs-sm); }
.room-map__page .select-wrap { flex: none; }
/* As tall as the bordered zoom group beside it (its buttons plus the group's 1px border). */
.room-map__page-select { width: auto; min-width: 4.75rem; min-height: calc(var(--rm-view) + 2px); padding-block: 0; }
.room-map__zoom-group { display: inline-flex; align-items: stretch; overflow: hidden; }
.room-map__view-btn {
  display: grid;
  place-items: center;
  width: var(--rm-view);
  height: var(--rm-view);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: var(--transition-control);
}
/* The rotation stands apart from zoom (another question: which way up), drawn as the same kind of
   box. content-box: its border sits outside the square, as the group's does around its buttons. */
.room-map__zoom-group,
.room-map__view-btn.room-map__rotate {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.room-map__view-btn.room-map__rotate { box-sizing: content-box; }
/* At a zoom limit the button is aria-disabled, not disabled: a disabled button would drop the focus
   of the visitor who just pressed it. */
.room-map__view-btn:hover:not(:disabled, [aria-disabled="true"]) { background: var(--surface-3); }
.room-map__view-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.room-map__view-btn:disabled, .room-map__view-btn[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.room-map__view-btn:disabled .room-map__icon, .room-map__view-btn[aria-disabled="true"] .room-map__icon { opacity: .5; }
.room-map__zoom {
  display: grid;
  place-items: center;
  min-width: 5ch;
  padding-inline: var(--space-1);
  border-inline: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.room-map__icon {
  display: block;
  width: var(--icon-md);
  height: var(--icon-md);
  background: currentColor;
  -webkit-mask: var(--rm-icon) center / contain no-repeat;
  mask: var(--rm-icon) center / contain no-repeat;
}
.room-map__icon--minus { --rm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.room-map__icon--plus { --rm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
/* The drawn icons are a mask on currentColor: in forced colours that background would become Canvas
   and the button would go blank, so the icon takes the system's button text instead. */
@media (forced-colors: active) {
  .room-map__icon { forced-color-adjust: none; background: ButtonText; }
  .room-map__view-btn:disabled .room-map__icon, .room-map__view-btn[aria-disabled="true"] .room-map__icon { background: GrayText; opacity: 1; }
}
.room-map__icon--rotate { --rm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3'/%3E%3Cpath d='M19.5 4.5v4.2h-4.2'/%3E%3C/svg%3E"); }

/* ── the rooms of this contract, and the confirmation ────────────────────────────────────── */
/* A fieldset is not trusted with flex (older Safari): its rhythm is margins. */
.room-map__assignment { min-width: 0; margin: var(--space-2) 0 0; padding: 0; border: 0; }
/* Scoped under .room-map so it outranks `.room-map p { margin: 0 }` for the help paragraph. */
.room-map .room-map__assignment > * + * { margin-top: var(--space-3); }
.room-map .room-map__assignment > .room-map__confirm { margin-top: var(--space-5); }
/* No margin of its own: the help under it already carries the rhythm's margin. */
.room-map__assignment legend { margin: 0; padding: 0; font-size: var(--fs-lg); font-weight: 600; }
.room-map__rooms { display: flex; flex-direction: column; gap: var(--space-1-5); }
.room-map__room {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  transition: var(--transition-tone);
}
/* The row follows its letter: a room of this contract is lit like the filled square on the sheet. */
.room-map__room--selected { border-color: var(--accent-border); background: var(--accent-light); }
.room-map__room-choice, .room-map__confirmation { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.room-map__room-choice { align-items: center; min-height: var(--control-min-touch); font-weight: 600; }
.room-map__room-choice input, .room-map__confirmation input { flex: 0 0 auto; width: var(--icon-lg); height: var(--icon-lg); margin: var(--space-0-5) 0 0; accent-color: var(--accent); }
.room-map__room-choice input { margin: 0; }
.room-map__room-actions { display: flex; gap: var(--space-2); }
/* «Eliminare la camera B?»: the question takes the row's full width under its two answers. */
.room-map__room--confirm { border-color: var(--warning-border); background: var(--warning-light); }
.room-map__remove-question { flex: 1 0 100%; padding-bottom: var(--space-1); color: var(--text); font-size: var(--fs-sm); }

/* The last step as one block — what is confirmed, the box and, while the box is locked, the one
   reason why with the move that fixes it. Its tone follows the state (roomMapUi.mjs render()). The
   notes hang under the sentence, not under the box. */
.room-map__confirm {
  --rm-hang: calc(var(--icon-lg) + var(--space-3));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  transition: var(--transition-tone);
}
.room-map__confirm[data-state="ready"] { border-color: var(--accent); }
.room-map__confirm[data-state="done"] { border-color: var(--success-border); background: var(--success-light); }
.room-map__summary { font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.room-map__confirmation { font-size: var(--fs-base); line-height: var(--lh-normal); }
/* A disabled confirmation must look disabled, and its note (roomMapUi.mjs `blocked`) says why. */
.room-map__confirmation:has(input:disabled) { cursor: not-allowed; color: var(--text-secondary); }
.room-map__confirmation input:disabled { cursor: not-allowed; opacity: .5; }
.room-map__confirm .room-map__help { margin-left: var(--rm-hang); font-size: var(--fs-sm); }
.room-map__confirm .room-map__help--blocked { margin-left: 0; padding-left: max(var(--space-3), calc(var(--rm-hang) - 3px)); border-left: 3px solid var(--warning); color: var(--warning-dark); font-size: var(--fs-base); font-weight: 600; }
.room-map__blocked-action { margin-left: var(--rm-hang); }

@media (max-width: 480px) {
  .room-map__source[data-state="empty"], .room-map__source[data-state="missing"] { padding: var(--space-4); }
  .room-map__head { padding: var(--space-3); }
  .room-map__foot { padding: var(--space-2) var(--space-3); }
  .room-map__toolbar { margin-left: auto; }
  .room-map__room-actions { margin-left: auto; }
  .room-map__confirm { --rm-hang: 0px; padding: var(--space-3); }
}