@import url("./cabinet-visual.css");
@import url("./plan-viewport.css");

/* New proportional plan tiles. Edges come from cumulative place widths. */
.plan-content { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.run-plan { position: relative; display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.empty-plan { padding-right: calc(var(--size-touch-min) + var(--space-xs)); }
.plan-row-label { display: flex; align-items: center; min-width: 0; color: var(--color-text-muted); font-size: var(--font-size-label); line-height: 1.5; }
.plan-row { position: relative; min-width: 0; }
.plan-row-lane { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-touch-min); column-gap: var(--space-xs); width: calc(100% + var(--size-touch-min) + var(--space-xs)); }
.plan-row-lane > .plan-row-label { grid-column: 1; grid-row: 1; }
.plan-row-lane > .plan-track { grid-column: 1; grid-row: 2; }
.plan-row-lane > .filler-callouts { grid-column: 1; grid-row: 3; }
.plan-row-lane > .plan-row-warning { grid-column: 1; grid-row: 4; }
.plan-row-add { grid-column: 2; grid-row: 2; display: flex; box-sizing: border-box; align-items: center; justify-content: center; min-width: var(--size-touch-min); min-height: var(--size-touch-min); margin: 0; padding: 0; border: var(--pattern-remainder-border); background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-title); cursor: pointer; }
.plan-row-add:hover { background: var(--color-surface); }
.plan-row-add:focus-visible { outline: var(--size-border-selected) solid var(--color-accent); outline-offset: calc(-1 * var(--size-border-selected)); }
.plan-row-warning { margin: var(--space-xs) 0; color: var(--color-text); font-size: var(--font-size-label); line-height: 1.5; }
.run-plan .plan-track, .empty-plan .plan-track { position: relative; width: 100%; min-width: 0; overflow: hidden; }
.run-plan [data-kind="upper"] .plan-track, .empty-plan [data-kind="upper"] .plan-track { height: var(--size-row-upper); }
.run-plan [data-kind="lower"] .plan-track, .empty-plan [data-kind="lower"] .plan-track { height: var(--size-row-lower); }
.plan-place, .plan-rest { position: absolute; top: 0; bottom: 0; box-sizing: border-box; min-width: 0; overflow: hidden; padding: 0; }
.plan-place { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; margin: 0; border: var(--size-line-width) solid var(--color-line); background: var(--color-tile-cabinet); color: var(--color-text); font-family: var(--font-family); text-align: left; cursor: pointer; }
.plan-place + .plan-place { border-left-width: 0; }
.plan-place.kind-appliance { background: var(--color-tile-appliance); }
.plan-place.kind-filler { border: var(--size-line-width) solid var(--color-text-muted); background: var(--color-tile-filler); }
.plan-place.kind-filler strong, .plan-place.kind-filler small { visibility: hidden; }
.plan-place.kind-gap { border: var(--size-line-width) dashed var(--color-text-muted); background: repeating-linear-gradient(135deg, transparent 0 var(--space-sm), var(--color-line) var(--space-sm) calc(var(--space-sm) + var(--size-line-width))); }
.run-plan .plan-place.selected { z-index: 1; border-color: var(--color-accent); outline: var(--size-border-selected) solid var(--color-accent); outline-offset: calc(-1 * var(--size-border-selected)); }
.plan-place strong, .plan-rest strong { display: block; min-width: 0; overflow: hidden; margin: var(--space-xs); color: var(--color-text); font-size: var(--font-size-label); font-weight: var(--font-weight-regular); text-overflow: ellipsis; white-space: nowrap; }
.plan-place small, .plan-rest small { display: block; min-width: 0; overflow: hidden; margin: var(--space-xs); color: var(--color-text-muted); font-size: var(--font-size-tile-width); font-weight: var(--font-weight-regular); text-overflow: ellipsis; white-space: nowrap; }
.plan-rest { display: flex; flex-direction: column; justify-content: space-between; border: 0; outline: var(--pattern-remainder-border); outline-offset: calc(-1 * var(--size-line-width)); color: var(--color-text-muted); }
.plan-rest strong { color: var(--color-text-muted); }
.plan-rest-label { margin: var(--space-xs); color: var(--color-text-muted); font-size: var(--font-size-caption); }
.run-plan .plan-rest { padding: 0; text-align: left; background: transparent; cursor: pointer; }
.run-plan .plan-place.selected strong, .run-plan .plan-place.selected small { font-weight: var(--font-weight-bold); }
.run-plan .plan-place.selected small { color: var(--color-accent); }
.plan-empty-guide { pointer-events: none; }
.worktop-band { position: relative; display: flex; box-sizing: border-box; height: var(--size-worktop-band); min-width: 0; align-items: center; justify-content: space-between; overflow: hidden; border: var(--size-line-width) solid var(--color-line); background: var(--color-worktop); padding: 0 var(--space-xs); color: var(--color-text); font-size: var(--font-size-label); line-height: 1.25; white-space: nowrap; }
.worktop-band small { color: var(--color-text-muted); font-size: var(--font-size-label); }
.plinth-band { display: flex; box-sizing: border-box; width: 100%; height: var(--size-plinth-band); align-items: center; overflow: hidden; border: var(--size-line-width) solid var(--color-line); background: var(--color-tile-cabinet); padding: 0 var(--space-xs); color: var(--color-text); font-size: var(--font-size-label); line-height: 1; }
.plan-ruler { display: flex; min-width: 0; align-items: center; justify-content: space-between; color: var(--color-text-muted); font-size: var(--font-size-label); line-height: 1.5; }
.plan-row--empty .plan-track { display: flex; align-items: center; justify-content: center; border: var(--pattern-remainder-border); color: var(--color-text-muted); }
.plan-empty-guide { display: flex; box-sizing: border-box; max-width: 100%; align-items: center; justify-content: center; overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-label); line-height: 1.5; text-align: center; text-overflow: ellipsis; }
.worktop-guide { display: flex; box-sizing: border-box; height: var(--size-worktop-band); align-items: center; overflow: hidden; border: var(--pattern-remainder-border); }
.worktop-guide .plan-empty-guide { flex: 1; white-space: nowrap; }
.plinth-band--empty { color: var(--color-text-muted); }
.plinth-strip { position: relative; height: var(--size-plinth-band); }
.plinth-strip .plinth-band { position: absolute; }
.plinth-caption { color: var(--color-text-muted); font-size: var(--font-size-label); line-height: 1.5; }