@import url("../build/styles.css");

.stage-wrap { min-height: 500px; }
.stage { width: min(100%, 590px); }
.stage svg { touch-action: none; }
.room { transition: none; }
.room.editor-selected { stroke: var(--ink); stroke-width: 3; }
.room.recovery-affected { stroke: var(--amber); stroke-width: 3; }
.destroying .room { stroke: var(--red); stroke-width: 3; stroke-dasharray: 8 6; }
.destroying .room-label { opacity: .28; }
.stage.recovering .wall-hit, .stage.recovering .wall-guide { display: none; }
.wall-guide { stroke: var(--teal); stroke-width: .06; stroke-dasharray: .16 .12; vector-effect: non-scaling-stroke; opacity: .85; pointer-events: none; }
.wall-hit { stroke: rgba(43, 111, 111, .001); stroke-width: 16; vector-effect: non-scaling-stroke; cursor: col-resize; pointer-events: stroke; }
.wall-hit[data-axis="y"] { cursor: row-resize; }
.wall-hit:hover + .wall-guide, .wall-hit.selected + .wall-guide { stroke: var(--amber); stroke-width: .1; opacity: 1; }
.guide-toggles {
  display: grid;
  gap: .3rem .7rem;
  align-self: center;
  margin: 0;
  padding: .35rem .55rem .45rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--sub);
  font: .68rem var(--mono);
}
.guide-toggles legend {
  padding: 0 .25rem;
  color: var(--sub);
  font-size: .62rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.guide-toggle {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  cursor: pointer;
  white-space: nowrap;
}
.guide-toggle input { accent-color: var(--teal); margin: 0; }
.guide-toggle span { color: var(--ink); }
.guide-toggle small { color: var(--sub); font-size: .6rem; }
.guide-toggle:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; }

.transversal-guide,
.transversal-guide * {
  pointer-events: none;
}
.transversal-guide { opacity: .95; }
.transversal-halo {
  stroke: var(--panel);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .82;
}
.transversal-stroke {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 9 7;
  vector-effect: non-scaling-stroke;
}
.diagonal-guide .transversal-stroke { stroke: var(--teal); }
.antidiagonal-guide .transversal-stroke { stroke: var(--amber); }
.recovery-log { display: grid; gap: .45rem; max-height: 240px; margin-top: .9rem; overflow: auto; padding-right: .2rem; }
.recovery-line { padding: .5rem .6rem; border-left: 3px solid var(--line); background: color-mix(in srgb, var(--bg) 55%, var(--panel)); color: var(--sub); font-size: .78rem; line-height: 1.4; }
.recovery-line.remove { border-left-color: var(--red); }
.recovery-line.extend { border-left-color: var(--amber); }
.recovery-line.done { border-left-color: var(--teal); color: var(--ink); }
.recovered-empty { color: var(--sub); font: .75rem var(--mono); }
.error { margin-top: .9rem; }
@media (max-width: 760px) {
  .stage-wrap { min-height: 320px; }
}