/* The floor step's own column: what still needs a look, and where the room
   faces. Same white card, same 22px radius and warm border as every other
   contextual panel — this is a state of that column, not a second sidebar. */

/* ── while the plan is being read, the photo IS the room ─────
   The old strip above the map left every tool live, so an organiser could
   hand-build a room for ninety seconds and then watch the scan replace the
   lot, having been told nothing. Reading is a state of the floor now: the
   plan fills the frame, a beam sweeps it, four pips say which question the
   model is answering, and the only things to do are wait or leave. */
.room-frame.is-reading { min-height:440px; background:#fdebe1; }
.room-frame.is-reading > .room,
.room-frame.is-reading > .photo-chip,
.room-frame.is-reading > .tier-legend { visibility:hidden; }
body.floor-reading .room-stage { grid-template-columns:minmax(0,1fr); }
.scan-stage { position:absolute; inset:0; z-index:30; display:grid; place-items:center; overflow:hidden;
  animation:fadein var(--dur-s,220ms) var(--ease,ease) both; }
.scan-stage.out { animation:scanStageOut var(--dur-s,220ms) var(--ease,ease) both; }
@keyframes scanStageOut { to { opacity:0; } }
.scan-stage-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:.55; filter:saturate(.7); }
.scan-beam { position:absolute; left:0; right:0; height:18%; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(228,87,123,.26) 50%,transparent);
  animation:scanBeam 2.6s ease-in-out infinite; }
@keyframes scanBeam { 0% { top:-20%; } 100% { top:120%; } }
.scan-card { position:relative; width:min(420px,calc(100% - 32px)); padding:22px 24px; border-radius:22px;
  background:rgba(255,255,255,.96); box-shadow:0 24px 60px rgba(58,42,56,.16); text-align:center;
  display:grid; gap:8px; justify-items:center; animation:springin var(--dur-m,380ms) var(--spring,ease) both; }
.scan-card h3 { margin:0; font-size:24px; line-height:30px; }
.scan-pips { display:flex; gap:0; margin:6px 0 2px; padding:0; list-style:none; }
.scan-pip { position:relative; display:grid; justify-items:center; gap:4px; width:84px; color:#7c6678; }
.scan-pip span { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#fff2e9;
  font-size:18px; transition:background var(--dur-s,220ms), transform var(--dur-s,220ms) var(--spring,ease); }
.scan-pip small { font-size:12px; line-height:16px; font-weight:800; }
.scan-pip + .scan-pip::before { content:""; position:absolute; inset-inline-start:-22px; top:19px; width:44px; height:2px; background:#eadde4; }
.scan-pip.done { color:#356649; }
.scan-pip.done span { background:#e4f0e6; }
.scan-pip.done + .scan-pip::before { background:#356649; }
.scan-pip.active { color:#c23a61; }
.scan-pip.active span { background:#fbe3ea; animation:scanPipPulse 1.2s ease-in-out infinite; }
.scan-live { margin:0; font-weight:800; color:#3a2a38; }
.scan-wait { margin:0; max-width:34ch; font-size:14px; line-height:20px; color:#705a6c; }
.scan-stage-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin-top:6px; }
.scan-stage-actions .tool { min-height:44px; }
.scan-card.is-error .scan-live { color:#a92f4b; }
.scan-card.is-error ~ .scan-beam, .scan-stage:has(.is-error) .scan-beam { animation:none; opacity:0; }
/* The step says so too, from wherever they happen to be standing. */
.stepper button.reading .dot { position:relative; }
.stepper button.reading .dot::after { content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid transparent; border-top-color:#e4577b; animation:scanSpin 1.1s linear infinite; }
.stepper button.ready .dot::after { content:"✓"; position:absolute; inset-inline-end:-6px; top:-6px;
  width:18px; height:18px; border-radius:50%; background:#356649; color:#fff; font-size:11px; line-height:18px;
  animation:pieceStamp var(--dur-m,380ms) var(--spring,ease) both; }
@media (prefers-reduced-motion:reduce) {
  .scan-beam { animation:none; opacity:.35; top:41%; }
  .scan-pip.active span { animation:none; }
  .stepper button.reading .dot::after { animation:none; border-color:#e4577b; }
  .stepper button.ready .dot::after { animation:none; }
}
@media (max-width:520px) {
  .scan-pip { width:64px; }
  .scan-pip small { font-size:11px; }
  .scan-pip + .scan-pip::before { inset-inline-start:-14px; width:28px; }
}

/* A message about somewhere else carries the way there.
   The pill itself stays click-through — it floats over the page and must never
   swallow a press meant for what is underneath — so the button inside it has
   to take pointer events back, or the one route to a floor map that landed
   elsewhere cannot be pressed at all. */
.toast { display:inline-flex; align-items:center; gap:12px; }
.toast-action { pointer-events:auto; min-height:32px; padding:0 4px; border:0; background:none; color:#e9b94e;
  font:900 14px/20px inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.toast-action:focus-visible { outline:2px solid #e9b94e; outline-offset:2px; border-radius:6px; }

/* ── the piece editor's two new rows ──────────────────────── */
/* In use, or set aside. The first row of a table's card, because it decides
   whether anything below it matters. */
.pi-switch { display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border:1px solid #eadde4;
  border-radius:14px; cursor:pointer; }
.pi-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.pi-switch-track { flex:none; width:44px; height:26px; border-radius:999px; background:#7c6678; position:relative;
  transition:background var(--dur-s,220ms); }
.pi-switch-track i { position:absolute; top:3px; inset-inline-start:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition:transform var(--dur-s,220ms) var(--spring,ease); }
.pi-switch input:checked + .pi-switch-track { background:#356649; }
.pi-switch input:checked + .pi-switch-track i { transform:translateX(18px); }
.pi-switch input:focus-visible + .pi-switch-track { outline:3px solid #e4577b; outline-offset:2px; }
.pi-switch b { display:block; font-size:14px; line-height:20px; }
.pi-switch small { display:block; font-size:13px; line-height:19px; color:#705a6c; font-weight:400; }

/* A clash said where it is caused, with the free number beside it. */
.pi-warn { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 0;
  font-size:12px; line-height:17px; color:#805718; }
.pi-warn button { min-height:32px; padding:3px 10px; border:0; border-radius:999px; background:#fbf0d7;
  color:#805718; font:900 12px/18px inherit; cursor:pointer; }

/* Importance is chosen in the colours it is drawn in. */
.pi-quality-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.pi-quality-head b { font-size:14px; line-height:20px; color:#3a2a38; }
.pi-auto { padding:4px 10px; border:0; border-radius:999px; background:#e4f0e6; color:#356649;
  font:900 12px/18px inherit; cursor:pointer; }
.pi-auto:not(.on) { background:#efe7fb; color:#694597; }
.pi-auto:disabled { cursor:default; }

.floor-check { background:#fff; border:1px solid #eadde4; border-radius:22px; padding:20px; align-self:start; }
.floor-check h3 { margin:0; font-size:20px; line-height:26px; }

/* ── the room check: a to-do list, not a log ─────────────────
   One card per *kind* of problem with a count, one sentence and the button
   that answers it. A row per instance produced two hundred and seventy-three
   of them on a real scanned plan, only one kind of which could be acted on —
   which reads as "ignore this panel", and was ignored. */
.fc-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.fc-head h3 { flex:1; }
.fc-ring { flex:none; width:40px; height:40px; }
.fc-ring circle { fill:none; stroke-width:4; }
.fc-ring .track { stroke:#eadde4; }
.fc-ring .must { stroke:#a92f4b; }
.fc-ring .look { stroke:#c69a2a; }
.fc-ring text { font:900 13px "Nunito",system-ui,sans-serif; fill:#3a2a38; text-anchor:middle; dominant-baseline:central; }
.fc-ring text.clear { fill:#356649; }
.fc-summary { display:grid; gap:1px; font-size:12px; line-height:17px; color:#705a6c; font-variant-numeric:tabular-nums; }
.fc-summary b { color:#3a2a38; font-size:13px; }
/* Hints never reach the ring, so they never reach the two lines that read it. */
.fc-summary .hint { color:var(--ink-faint,#7c6678); font-size:12px; }
.fc-section { margin:14px 0 6px; font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#7c6678; }
.fc-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }

.fc-card { position:relative; padding:12px 14px 12px 18px; border-radius:14px; background:#fff; border:1px solid #eadde4;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s; }
/* Colour never carries the meaning on its own: the bar is doubled by the glyph
   the title leads with and by the words in the card. */
.fc-card::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:4px; border-radius:0 4px 4px 0; }
.fc-blocking::before { background:#a92f4b; }
.fc-advisory::before { background:#805718; }
.fc-info::before { background:#9d7bd8; }
/* A hint is judged from the drawing, and the drawing is a proxy for a real
   floor — so it is lilac, not amber, and it is watching rather than warning. */
.fc-hint::before { background:var(--lilac,#9d7bd8); }
.fc-hint .fc-card-head { color:var(--ink-soft,#705a6c); }
/* The eye is emitted as the card's own .fc-glyph, like every other
   severity's mark — a ::before here would draw a second one. */
@media (hover:hover) and (pointer:fine) { .fc-card:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(58,42,56,.07); } }
.fc-card-head { display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:0; border:0; background:none;
  color:#3a2a38; font:800 14px/20px inherit; text-align:start; cursor:pointer; }
.fc-glyph { flex:none; }
.fc-title { flex:1; }
.fc-chevron { flex:none; width:18px; height:18px; transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
.fc-chevron::before { content:""; display:block; width:8px; height:8px; margin:3px auto;
  border-right:2px solid #7c6678; border-bottom:2px solid #7c6678; transform:rotate(45deg); }
.fc-card-head[aria-expanded="false"] .fc-chevron { transform:rotate(-90deg); }
/* Folding a card hides the list of pairs it is about — never the sentence
   that says what is wrong, and never the buttons that put it right. `~ *` hid
   those too, so folding a blocking card left a title with nothing to press. */
.fc-card-head[aria-expanded="false"] ~ .fc-rows { display:none; }
.fc-lead { margin:4px 0 8px; font-size:13px; line-height:19px; color:#705a6c; }

.fc-rows { list-style:none; margin:0 0 10px; padding:0; display:grid; gap:6px; }
.fc-row { display:grid; grid-template-columns:auto auto auto 1fr;
  grid-template-areas:"a swap b text" "actions actions actions actions"; align-items:center; gap:6px 8px;
  padding:8px 10px; border-radius:10px; background:#fff2e9; }
.fc-mini { width:32px; height:32px; border-radius:50%; background:var(--tier-bg,#fff);
  box-shadow:inset 0 0 0 2px var(--tier,#eadde4); border:0; color:#3a2a38;
  font:900 12px/32px inherit; cursor:pointer; padding:0; }
.fc-mini[data-tier="6"]{--tier:var(--tier-6);--tier-bg:var(--tier-6-bg)}
.fc-mini[data-tier="5"]{--tier:var(--tier-5);--tier-bg:var(--tier-5-bg)}
.fc-mini[data-tier="4"]{--tier:var(--tier-4);--tier-bg:var(--tier-4-bg)}
.fc-mini[data-tier="3"]{--tier:var(--tier-3);--tier-bg:var(--tier-3-bg)}
.fc-mini[data-tier="2"]{--tier:var(--tier-2);--tier-bg:var(--tier-2-bg)}
.fc-mini[data-tier="1"]{--tier:var(--tier-1);--tier-bg:var(--tier-1-bg)}
.fc-mini[data-tier="0"]{--tier:var(--tier-0);--tier-bg:var(--tier-0-bg)}
.fc-swap { color:#7c6678; font-weight:900; }
.fc-row small { grid-area:text; font-size:12px; line-height:16px; color:#705a6c; }
.fc-row-actions { grid-area:actions; display:flex; flex-wrap:wrap; gap:6px; }
.fc-row-more { padding:2px 10px; font-size:12px; color:#7c6678; }

.fc-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.fc-primary, .fc-secondary, .fc-row-actions button { min-height:36px; padding:6px 12px; border-radius:12px; border:0;
  font:800 13px/19px inherit; cursor:pointer; transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s; }
.fc-primary { background:#3a2a38; color:#fff; }
.fc-blocking .fc-primary { background:#a92f4b; }
.fc-advisory .fc-primary { background:#805718; }
.fc-info .fc-primary { background:#694597; }
.fc-hint .fc-primary { background:var(--lilac,#9d7bd8); }
.fc-secondary, .fc-row-actions button { background:#fff; color:#3a2a38; border:1px solid #eadde4; }
@media (hover:hover) and (pointer:fine) {
  .fc-primary:hover, .fc-secondary:hover, .fc-row-actions button:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(58,42,56,.07); }
}
.fc-show { display:inline-flex; align-items:center; gap:5px; min-height:36px; margin-inline-start:auto; padding:0 6px;
  border:0; background:none; color:#694597; font:800 13px/19px inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; }
.fc-show svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }

/* A finger needs more room than a pointer does.
   The cards are drawn compactly on purpose — a 36px button and a 32px disc read
   as one tidy row on a desktop — but this file's own rule is that nothing is
   narrower than a fingertip, and every `.pi-*` control beside them is 44px.
   Extending the hit area behind the drawing was tried first and lost to paint
   order against the neighbours it had to reach across, so on a touch pointer
   the controls are simply the size they need to be. There is room: a phone has
   the width, and the card is a column. */
@media (pointer: coarse) {
  .fc-primary, .fc-secondary, .fc-show, .fc-row-actions button { min-height:44px; padding:10px 14px; }
  .fc-mini { width:44px; height:44px; font-size:13px; line-height:44px; }
  .fc-row { gap:8px 10px; padding:10px; }
  .fc-row-actions { gap:8px; }
  .fc-actions { gap:10px; }
  .pi-auto { min-height:44px; padding:10px 14px; }
  .pi-warn button { min-height:44px; padding:10px 14px; }
  .pi-warn { gap:10px; }
}

.fc-ready { display:grid; justify-items:center; gap:6px; padding:18px 8px 6px; text-align:center; }
.fc-ready .face { font-size:28px; }
.fc-ready b { font:650 20px/26px "Fraunces",Georgia,serif; }
.fc-ready p { margin:0; font-size:13px; line-height:19px; color:#705a6c; }
.fc-ready .arrow { display:inline-block; animation:fcArrow 1.1s cubic-bezier(.22,1,.36,1) 2; }
@keyframes fcArrow { 50% { transform:translateY(5px); } }
/* Pressing "Fix 3 first" points at the card rather than refusing the press. */
.fc-card.nudge { animation:cardNudge .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes cardNudge {
  0%,100% { box-shadow:0 0 0 0 rgba(169,47,75,0); }
  30% { transform:translateX(-6px); box-shadow:0 0 0 4px rgba(169,47,75,.28); }
  60% { transform:translateX(3px); }
}
.fc-tip { display:flex; gap:6px; align-items:center; margin:12px 0 0; font-size:12px; line-height:17px; color:#7c6678; }
.fc-quiet { margin:0 0 16px; font-size:13px; line-height:19px; color:#705a6c; }
@media (prefers-reduced-motion:reduce) {
  .fc-ready .arrow { animation:none; }
  .fc-card.nudge { animation:none; box-shadow:0 0 0 4px rgba(169,47,75,.28); }
}

.fc-focal { border-top:1px solid #eadde4; padding-top:16px; margin-top:14px; display:grid; gap:8px; }
.fc-focal h3 { font-size:15px; line-height:21px; }
.fc-focal-help, .fc-focal-hint { margin:0; font-size:13px; line-height:19px; color:#705a6c; }
.fc-focal-chip { justify-self:start; min-height:44px; padding:8px 16px; border-radius:14px; border:1px solid #eadde4; background:#fff; font:700 14px/20px inherit; color:#3a2a38; cursor:pointer; }
.fc-focal-chip.on { background:#efe7fb; border-color:#ddd0f4; color:#694597; }
.fc-focal-chip.picking { outline:2px solid #a92f4b; outline-offset:2px; }
.picking-focal #room .object-node, .picking-focal #room .stage-node { cursor:crosshair; }

.pi-back { display:flex; align-items:center; gap:6px; min-height:44px; margin:-4px 0 8px; padding:0; border:0; background:none; color:#705a6c; font:700 13px/19px inherit; cursor:pointer; }
.pi-back::before { content:'‹'; font-size:18px; }


@media (max-width:1023px) { .floor-check { border-radius:18px; padding:16px; } }

/* Confirm never sleeps: with something in the way it says how much, and says
   it in ink rather than in the rose that means "this is the way on". */
.pfoot .next[data-blocked]:not([data-blocked=""]) { background:#3a2a38; box-shadow:none; }

/* A scan that read nothing, or only part of the plan, answered in the studio
   rather than over it — the photo is already behind the room to build on. */
.scan-followup { position:relative; margin:12px 0; padding:16px 18px; border:1px solid #f0dfb4; border-radius:18px; background:#fbf0d7; color:#805718; }
.scan-followup h3 { margin:0 0 4px; font-size:20px; line-height:26px; }
.scan-followup p { margin:0 0 12px; font-size:14px; line-height:20px; }
.scan-followup small { display:block; margin-top:8px; font-size:13px; line-height:19px; }
.scan-followup-actions { display:flex; flex-wrap:wrap; gap:8px; }
.scan-followup-actions button { min-height:44px; }
.scan-followup-close { position:absolute; inset-block-start:8px; inset-inline-end:8px; min-width:44px; min-height:44px; }

/* Placing a piece without dragging it, and the guides that show a drag when it
   lines up with something already in the room. */
.pi-position { margin:8px 0; }
.pi-position > summary { min-height:44px; display:flex; align-items:center; font:700 14px/20px inherit; cursor:pointer; }
.pi-axis { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; }
.pi-axis input { width:96px; min-height:44px; font-size:16px; }
.pi-snap { display:flex; align-items:center; gap:8px; min-height:44px; }
.align-guide { position:absolute; background:#e4577b; opacity:.5; pointer-events:none; z-index:3; }
.align-guide.x { inset-block:0; width:1px; }
.align-guide.y { inset-inline:0; height:1px; }

/* The one card that says why a relationship is worth adding. It is guidance,
   not a warning: warm paper, no red, no shake, and an explicit way past it in
   the footer beside it. */
.rule-empty { margin:0 0 16px; padding:20px; border:1px solid #eadde4; border-radius:22px; background:#fff; display:grid; gap:12px; justify-items:start; }
.rule-empty h3 { margin:0; font-size:20px; line-height:26px; }
.rule-empty p { margin:0; font-size:14px; line-height:20px; color:#705a6c; }
.rule-empty-modes { display:flex; flex-wrap:wrap; gap:12px; }
.rule-empty-mode { display:inline-flex; align-items:center; gap:6px; font:700 13px/19px inherit; color:#3a2a38; }
.rule-empty-mode i { width:22px; height:3px; border-radius:2px; background:#9d7bd8; }
.rule-empty-mode.gold i { background:#3f6fd8; }
.rule-empty-mode.grey i { background:#4f9d6b; }
.rule-empty-mode.red i { background:#c3455f; }
.rule-empty-why { font-weight:600; }
.rule-empty-quiet { font-size:13px; line-height:19px; }
.rule-empty .buy { min-height:48px; }
.tab-badge { margin-inline-start:8px; padding:2px 8px; border-radius:999px; background:#efe7fb; color:#694597; font:700 12px/18px inherit; }
.tab-badge[hidden] { display:none; }
.share-stale { margin:8px 0 0; padding:8px 12px; border-radius:12px; background:#fbf0d7; color:#805718; font-size:13px; line-height:19px; }
.share-stale[hidden] { display:none; }
.floor-save { font-size:13px; line-height:19px; color:#705a6c; }
.floor-save .text-action { min-height:32px; }

/* "Ask for a change" is a labelled control in the header row, not a mystery
   glyph parked over the map. Nothing about it floats, so it can never cover
   the floor plan or the footer's primary action. */
.magic-pill { position:static; width:auto; height:auto; min-height:44px; padding:0 16px; gap:8px; grid-auto-flow:column; align-items:center; border-radius:999px; font:700 13px/19px inherit; box-shadow:none; animation:none; }
.magic-pill span { white-space:nowrap; }
@media (max-width:900px) { .magic-pill span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .magic-pill { width:44px; padding:0; } }

/* The map and its one contextual panel sit side by side, and the panel is the
   same column whether it is showing the room check or a selected piece —
   never two sidebars, never a card pushed below the floor. */
@media (min-width:1024px) {
  .room-stage { grid-template-columns:minmax(0,1fr) 320px; gap:20px; }
}
@media (min-width:1200px) {
  .room-stage { grid-template-columns:minmax(0,1fr) 344px; }
}
/* Below the two-column breakpoint the panel is full width under the map. */
@media (max-width:1023px) { .room-stage { grid-template-columns:minmax(0,1fr); } }


/* ── the piece editor, sized like every other panel ─────────
   Same white card, same 22px radius and #EADDE4 line as the room
   check it replaces, and nothing in it smaller than 13px or
   narrower than a fingertip. §3. */
.piece-inspector { gap: 14px; padding: 20px; border: 1px solid #eadde4; border-radius: 22px; }
.pi-head { gap: 12px; }
.pi-kicker { font-size: 13px; line-height: 19px; letter-spacing: .08em; }
.pi-close { width: 44px; height: 44px; border-radius: 14px; font-size: 18px; }
.pi-field > span { font-size: 13px; line-height: 19px; color: #705a6c; }
.pi-field > span b { font-size: 14px; line-height: 20px; color: #3a2a38; }
.pi-field > span small { font-size: 13px; line-height: 19px; }
.pi-name input { min-height: 44px; padding: 10px 12px; border-radius: 12px; font-size: 16px; }
.pi-stepper button { width: 44px; height: 44px; font-size: 18px; }
.pi-stepper b { font-size: 16px; }
.pi-stars { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:20px; overflow:visible; }
.pi-stars button { position:relative; min-width:0; height:44px; border:0; border-radius:8px;
  background:var(--tier-bg,#fff2e9); color:#3a2a38; font:900 14px/44px inherit; cursor:pointer;
  box-shadow:inset 0 0 0 2px transparent;
  transition:transform var(--dur-s,220ms) var(--spring,ease), box-shadow var(--dur-s,220ms); }
.pi-stars button.on { transform:translateY(-3px); box-shadow:inset 0 0 0 2px var(--tier), 0 6px 14px rgba(58,42,56,.18); }
/* The chosen value names itself *beneath* the bar: above it is where the
   Auto chip lives. */
.pi-stars button.on::after { content:"★ " attr(data-tier); position:absolute; inset-inline-start:50%; bottom:-21px;
  transform:translateX(-50%); font-size:11px; font-weight:900; color:var(--tier); white-space:nowrap; }
.pi-stars button[data-tier="6"]{--tier:var(--tier-6);--tier-bg:var(--tier-6-bg)}
.pi-stars button[data-tier="5"]{--tier:var(--tier-5);--tier-bg:var(--tier-5-bg)}
.pi-stars button[data-tier="4"]{--tier:var(--tier-4);--tier-bg:var(--tier-4-bg)}
.pi-stars button[data-tier="3"]{--tier:var(--tier-3);--tier-bg:var(--tier-3-bg)}
.pi-stars button[data-tier="2"]{--tier:var(--tier-2);--tier-bg:var(--tier-2-bg)}
.pi-stars button[data-tier="1"]{--tier:var(--tier-1);--tier-bg:var(--tier-1-bg)}
.pi-stars button[data-tier="0"]{--tier:var(--tier-0);--tier-bg:var(--tier-0-bg)}
@media (prefers-reduced-motion:reduce) { .pi-stars button.on { transform:none; } }
.pi-note, .pi-toggle small, .pi-focus small { font-size: 13px; line-height: 19px; }
.pi-toggle b, .pi-focus b { font-size: 14px; line-height: 20px; }
.pi-link { min-height: 44px; font-size: 13px; line-height: 19px; }
.pi-size output, .pi-rotate output { font-size: 13px; line-height: 19px; }
.pi-actions button { min-height: 44px; font-size: 14px; line-height: 20px; }
/* Four columns put the piece names at 9px, which is not a label. Three
   columns at 13px say the same words and can be read. */
.pi-typegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pi-typegrid button { min-height: 62px; padding: 8px 4px; font-size: 13px; line-height: 16px; overflow-wrap: anywhere; }
.pi-typegrid .mini { width: 34px; height: 24px; }

/* Both panels are the room's own column: they follow the floor down the
   page rather than scrolling away from the piece they describe. */
@media (min-width: 1024px) {
  .floor-check, .piece-inspector { position: sticky; top: calc(var(--sticky-top, 0px) + 16px); max-height: calc(100dvh - var(--sticky-top, 0px) - var(--foot-h, 76px) - 32px); overflow: auto; overscroll-behavior: contain; }
}
@media (max-width: 767px) {
  .pi-typegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pi-typegrid button { min-height: 56px; font-size: 13px; }
}

/* The consent card is fixed to the bottom of the window; the step footer is
   sticky to the bottom of its panel. On a short step the panel ends well above
   the window, so the footer floats up into exactly the band the card occupies.
   Reserving the card's measured height under the page keeps the panel — and so
   the footer — below it at every scroll position. The id selector is here to
   win against the base `.stage` padding rather than to shout. */
body.consent-pending #stage { padding-bottom:calc(var(--consent-h,190px) + var(--foot-h,76px) + 32px); }
body.consent-pending .venue-picker { padding-bottom:calc(var(--consent-h,190px) + 28px); }
/* And if anything ever does overlap, the primary action wins the hit test. */
.panel>.pfoot { z-index:80; }

/* Below 768px the map and the list take turns rather than sharing a screen
   that fits neither. The switch itself only exists at that width. */
.seating-views { display:none; }
@media (max-width:767px) {
  .seating-views { display:flex; gap:6px; margin:0 0 12px; padding:4px; border:1px solid #eadde4; border-radius:999px; background:#fff; }
  .seating-views button { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; border:0; border-radius:999px; background:none; color:#705a6c; font:700 14px/20px inherit; cursor:pointer; }
  .seating-views button.on { background:#fbe2e6; color:#a92f4b; }
  #seating-review-root[data-seat-view="map"] > #review-sidebar { display:none; }
  #seating-review-root[data-seat-view="tables"] > #seating-map-slot { display:none; }
}
/* Escape hides a focused tooltip without moving the focus off its button. */
.tip.dismissed::after { opacity:0 !important; transform:translateX(-50%) scale(.96) !important; }

/* The header row: the event's name in the middle, a quiet save line beside the
   controls, and the rare actions folded away where the row gets tight. */
.bar-event { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:650 15px/22px "Fraunces",Georgia,serif; color:#3a2a38; }
.bar-save { font-size:13px; line-height:19px; color:#705a6c; white-space:nowrap; }
.bar-more { position:relative; }
.bar-menu { position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:70; min-width:200px; padding:6px; border:1px solid #eadde4; border-radius:14px; background:#fff; box-shadow:0 18px 44px rgba(58,42,56,.2); }
.bar-menu[hidden] { display:none; }
.bar-menu button { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:0 10px; border:0; border-radius:10px; background:none; color:#3a2a38; font:700 14px/20px inherit; text-align:start; cursor:pointer; }
.bar-menu button:hover { background:#fbe2e6; }
.bar-menu svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; }
@media (max-width:1100px) { .bar-save { display:none; } }
@media (max-width:760px) { .bar-event { display:none; } }
/* The long table in the Add palette: the same mark, drawn as a run. */
.mini.mini-long { width:30px; height:12px; border-radius:5px; background:#f0dfe6; border:1px solid #e0c9d5; }