/* Area styles: rooms. Only what the shared components (components.css) cannot
   express. Use the tokens from tokens.css — never a literal colour. */

/* Canvas drawings (shared/surface-engine/renderer.js) read their paper from
   the --plan-* properties defined in canvas.css. */

.rooms-lock-scroll, .rooms-lock-scroll body { overflow: hidden; }

.rooms-hint { margin: 0; padding: 0 var(--sp-1); color: var(--ink-2); font-size: var(--fs-sm); }

.rooms-warning { background: var(--warning-wash); color: var(--ink); }

/* ------------------------------------------------------------ room list --- */

.rooms .row__sub { white-space: normal; }

.rooms-thumb {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px; background: var(--surface-sunken);
}

.rooms-thumb svg { width: 32px; height: 32px; display: block; }

.rooms-thumb__shape { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }

.rooms-plan {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: inherit; text-decoration: none;
}

.rooms-plan:active { background: var(--surface-sunken); }

.rooms-plan__drawing { display: block; padding: var(--sp-3); pointer-events: none; }

.rooms-plan__svg { display: block; width: 100%; height: auto; max-height: 14rem; }

.rooms-plan__room { fill: var(--accent-wash); stroke: none; }

.rooms-plan__wall { stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; }

.rooms-plan__label { fill: var(--ink-2); font-family: var(--font); font-weight: 600; }

.rooms-plan__caption {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: var(--touch); padding: 0 var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}

.rooms-plan__edit { color: var(--accent-ink); font-weight: 600; white-space: nowrap; }

.rooms-totals {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 0; overflow: hidden;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
}

@media (min-width: 30rem) {
  .rooms-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rooms-totals__cell {
  display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0;
  padding: var(--sp-2) var(--sp-3); background: var(--surface);
}

.rooms-totals__cell dt { color: var(--ink-2); font-size: var(--fs-xs); }

.rooms-totals__cell dd {
  margin: 0; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------ room page --- */

.rooms-nav { display: inline-flex; align-items: center; gap: 2px; }

.rooms-nav .icon-btn:disabled { opacity: 0.35; }

.rooms-nav__count { min-width: 2.5em; text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.rooms-dot { width: 20px; flex: none; display: grid; place-items: center; }

.rooms-dot .dot { width: 10px; height: 10px; }

.rooms-suggest__label { padding: 0 var(--sp-1); color: var(--ink-2); font-size: var(--fs-sm); }

.rooms-suggest .icon { width: 15px; height: 15px; }

.rooms-sequence { display: flex; flex-direction: column; gap: var(--sp-5); }

.rooms-phase { display: flex; flex-direction: column; gap: var(--sp-2); }

.rooms-phase__head { display: flex; align-items: flex-start; gap: var(--sp-3); }

.rooms-phase__num {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent-ink);
  font-size: var(--fs-sm); font-weight: 700;
}

.rooms-phase__title { font-weight: 700; }

.rooms-phase__why { color: var(--ink-2); font-size: var(--fs-sm); }

.rooms-export__img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-md);
}

/* ------------------------------------------------------------- surfaces --- */

.rooms-net {
  position: relative; display: block; width: 100%; max-height: 60vh;
  padding: 0; overflow: hidden;
  background: var(--plan-ground); border: 1px solid var(--line); border-radius: var(--r-lg);
}

/* A picture, not a control surface: scrolling never gets caught on it. */
.rooms-net__canvas { display: block; width: 100%; height: 100%; pointer-events: none; }

.rooms-net__expand {
  position: absolute; right: var(--sp-2); bottom: var(--sp-2);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-raised); color: var(--ink-2); box-shadow: var(--shadow-card);
  pointer-events: none;
}

.rooms-netview__body { flex: 1; min-height: 0; position: relative; }

.rooms-netview__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none; cursor: grab;
}

/* ------------------------------------------------------------- planner --- */

.rooms-planner {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column;
  background: var(--bg);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.rooms-planner__body { flex: 1; min-height: 0; position: relative; }

.rooms-planner__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--surface); }