/* PLANS styles. The interactive floor plan drawing, its legend, and tooltip.
   Consumes design tokens from site.css; never redefines :root.
   Reads as a drawing sheet: paper plate, warm-ink walls, paper-2 room fills,
   taupe hover tint, serif room numbers, dashed porches. */

.pl-root {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-md);
  overflow: auto;
  box-sizing: border-box;
}

/* ------------------------------------------------------------- the plate */

.pl-figure {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-md);
  background: var(--paper);
  border: 1px solid var(--line);
  box-sizing: border-box;
}

.pl-title {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-md);
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pl-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------- floor switching */

.pl-floors {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-md);
  display: flex;
  gap: var(--space-2xs);
  z-index: 2;
}

.pl-floor-btn {
  appearance: none;
  min-height: 44px;
  padding: 8px 16px;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.pl-floor-btn:hover { color: var(--ink); }

.pl-floor-btn[aria-pressed="true"] {
  color: var(--ink);
  background: var(--paper-2);
  border-color: var(--taupe);
}

/* --------------------------------------------------------- drawing layers */

.pl-foot {
  fill: none;
  stroke: color-mix(in oklab, var(--taupe) 65%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pl-foot--roof {
  stroke-dasharray: 6 5;
}

.pl-cond {
  fill: var(--paper-2);
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pl-wall {
  stroke: color-mix(in oklab, var(--ink) 60%, transparent);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.pl-counter {
  fill: color-mix(in oklab, var(--taupe) 30%, var(--paper-2));
  stroke: none;
}

.pl-porch {
  fill: color-mix(in oklab, var(--taupe) 14%, var(--paper));
  stroke: color-mix(in oklab, var(--taupe) 78%, transparent);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.pl-line {
  fill: none;
  stroke: color-mix(in oklab, var(--ink) 52%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.pl-dash {
  fill: none;
  stroke: color-mix(in oklab, var(--ink) 45%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.pl-fill {
  fill: color-mix(in oklab, var(--ink) 55%, transparent);
  stroke: none;
  pointer-events: none;
}

/* ---------------------------------------------------------- dimension line */

.pl-dim {
  stroke: color-mix(in oklab, var(--taupe) 80%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pl-dim-chip {
  fill: var(--paper);
  stroke: none;
}

.pl-dim-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- interaction */

.pl-room {
  outline: none;
  cursor: default;
}

.pl-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  pointer-events: all;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur-fast) var(--ease-out),
    stroke var(--dur-fast) var(--ease-out);
}

.pl-room:hover .pl-hit,
.pl-room.is-active .pl-hit {
  fill: color-mix(in oklab, var(--taupe) 42%, transparent);
}

.pl-room:focus-visible .pl-hit {
  fill: color-mix(in oklab, var(--taupe) 42%, transparent);
  stroke: var(--rust);
}

.pl-num {
  font-family: var(--serif);
  font-size: 15px;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}

.pl-num--fix {
  font-size: 11px;
  fill: var(--ink-2);
}

.pl-room:hover .pl-num,
.pl-room.is-active .pl-num,
.pl-room:focus-visible .pl-num {
  fill: var(--ink);
}

/* --------------------------------------------------------------- tooltip */

.pl-tip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  z-index: var(--z-tooltip);
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 240px;
  background: var(--paper);
  border: 1px solid var(--taupe);
  box-shadow: 0 6px 20px -12px color-mix(in oklab, var(--charcoal) 60%, transparent);
  pointer-events: none;
}

.pl-tip-n {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 0 var(--space-2xs);
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  font-family: var(--serif);
  font-size: var(--text-base);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pl-tip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2xs) var(--space-xs);
}

.pl-tip-name {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: 1.25;
}

.pl-tip-dim {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- legend */

.pl-legend-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.pl-legend-h {
  margin: 0 0 var(--space-xs);
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pl-legend {
  columns: 2;
  column-gap: var(--space-xl);
}

.pl-leg-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: 5px var(--space-2xs);
  break-inside: avoid;
  border-radius: 2px;
  cursor: default;
  transition: background var(--dur-fast) var(--ease-out);
}

.pl-leg-item:hover,
.pl-leg-item.is-active {
  background: color-mix(in oklab, var(--taupe) 30%, transparent);
}

.pl-leg-n {
  flex: 0 0 auto;
  min-width: 1.4em;
  font-family: var(--serif);
  font-size: var(--text-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pl-leg-n::after {
  content: " -";
  color: var(--ink-2);
}

.pl-leg-name {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.35;
}

.pl-leg-item:hover .pl-leg-name,
.pl-leg-item.is-active .pl-leg-name {
  color: var(--ink);
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 480px) {
  .pl-figure { padding: var(--space-2xl) var(--space-sm) var(--space-sm); }
  .pl-legend { columns: 1; }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .pl-hit,
  .pl-floor-btn,
  .pl-leg-item {
    transition: none;
  }
}

/* review pass: small screens, floor toggle drops into the flow, no overlap */
@media (max-width: 560px) {
  .pl-floors {
    position: static;
    display: flex; justify-content: flex-end;
    margin: 0 0 var(--space-xs);
  }
  .pl-title { max-width: calc(100% - 24px); }
}