/* Ritläge 2D – the kitchen as a plan drawing seen from above. */
.blueprint-mode {
  --bp-paper: #f7f5f0;
  --bp-panel: #fbfaf7;
  --bp-ink: #2b2520;
  --bp-accent-strong: #695b4a;
  --bp-ink-soft: #5c544b;
  --bp-muted: #8a8177;
  --bp-line: rgba(43, 37, 32, 0.16);
  --bp-grid-minor: rgba(58, 88, 128, 0.075);
  --bp-grid-major: rgba(58, 88, 128, 0.2);
  --bp-wall: #4a4239;
  --bp-cabinet: #fffdf9;
  --bp-upper: #45617f;
  --bp-accent: #695b4a;
  --bp-select: #336699; /* the 3D selection blue */
  --bp-ok: #2f8a4f;
  /* The 3D placement colours: blue can be placed, green docks, red cannot. */
  --bp-place: #4388a7;
  --bp-dock: #2f8a4f;
  --bp-bad: #c34740;
  --bp-warn: #c98a12;
  --bp-radius: 8px;
  --bp-shadow: 0 10px 30px rgba(35, 27, 18, 0.14);
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-family: Manrope, Aptos, system-ui, sans-serif;
  font-size: 14px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.blueprint-mode[hidden] { display: none; }
/* The page header with the logo stays visible above the mode. */
body.has-site-header .blueprint-mode { top: var(--site-header-height, 0px); }
body.blueprint-mode-open { overflow: hidden; }

/* ---- Top-row toggle next to "Rum" */
.blueprint-mode-toggle {
  position: relative;
  z-index: 10031;
  pointer-events: auto;
  min-width: 51px;
  width: auto;
  height: 53px;
  padding: 5px 7px 4px;
  border-radius: 5px;
  border: 1px solid rgba(105, 91, 74, 0.22);
  background: #fff;
  box-shadow: var(--mui-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  color: #2b2520;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 220ms ease, background 220ms ease;
}
.blueprint-mode-toggle i { font-size: 20px; line-height: 1.1; }
.blueprint-mode-toggle { -webkit-appearance: none; appearance: none; }
/* The same tooltip and hover as the other buttons in the row (material-ui.css). */
.blueprint-mode-toggle[data-tooltip]::before, .blueprint-mode-toggle[data-tooltip]::after {
  position: absolute; left: 50%; z-index: 10042; opacity: 0; visibility: hidden; pointer-events: none;
}
.blueprint-mode-toggle[data-tooltip]::before {
  top: calc(100% + 7px); width: 9px; height: 9px; border-top: 1px solid rgba(105, 91, 74, 0.18); border-left: 1px solid rgba(105, 91, 74, 0.18);
  background: rgba(255, 255, 255, 0.97); content: ""; transform: translate(-50%, 4px) rotate(45deg);
  transition: opacity 120ms ease, transform 150ms ease, visibility 0s linear 150ms;
}
.blueprint-mode-toggle[data-tooltip]::after {
  top: calc(100% + 12px); box-sizing: border-box; width: max-content; max-width: min(230px, calc(100vw - 24px)); padding: 8px 11px;
  border: 1px solid rgba(105, 91, 74, 0.18); border-radius: 10px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 8px 22px rgba(43, 37, 32, 0.14);
  color: #3b3129; content: attr(data-tooltip); font-family: var(--mui-font); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.35;
  text-align: center; white-space: normal; transform: translate(-50%, -4px); transition: opacity 120ms ease, transform 150ms ease, visibility 0s linear 150ms;
}
@media (hover: hover) and (pointer: fine) {
  .blueprint-mode-toggle:hover { scale: 1.04; background: #fff; }
  .blueprint-mode-toggle[data-tooltip]:hover::before, .blueprint-mode-toggle[data-tooltip]:hover::after { opacity: 1; visibility: visible; transition-delay: 140ms; }
  .blueprint-mode-toggle[data-tooltip]:hover::after { transform: translate(-50%, 0); }
}
.blueprint-mode-toggle .material-ui-scene-quick-action-label { font-size: 10px; line-height: 1.05; white-space: nowrap; letter-spacing: -0.01em; }
.blueprint-mode-toggle:active { transform: translateY(1px) scale(0.985); }
.blueprint-mode-toggle:focus, .blueprint-mode-toggle:focus-visible { outline: none; }
.stage:not(.stage--scene-controls-intro-ready) .blueprint-mode-toggle { opacity: 0; transform: translateY(-120%); pointer-events: none; }
.stage.stage--scene-controls-intro-ready .blueprint-mode-toggle { animation: material-ui-scene-controls-slide-in 850ms cubic-bezier(0.2, 0.82, 0.24, 1) both; animation-delay: 220ms; }
body.material-ui-scene-view-mode .blueprint-mode-toggle { display: none; }
@media (prefers-reduced-motion: reduce) {
  .stage:not(.stage--scene-controls-intro-ready) .blueprint-mode-toggle { opacity: 1; transform: none; pointer-events: auto; }
  .stage.stage--scene-controls-intro-ready .blueprint-mode-toggle { animation: none; }
}
@media (max-width: 760px) {
  .blueprint-mode-toggle { min-width: var(--mobile-scene-action-width, 51px); padding: 2px 5px; }
}

/* ---- Buttons */
.blueprint-mode button { font: inherit; color: inherit; }
/* Button variants win over the inherited text colour above. */
.blueprint-mode .bp-btn--primary { color: #fff; }
.blueprint-mode .bp-btn--danger { color: var(--bp-bad); }
.bp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 16px; border-radius: 8px;
  border: 1px solid #897963; background: #fff; color: var(--bp-ink);
  font: inherit; font-weight: 400; cursor: pointer; white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.bp-btn:hover:not(:disabled) { background: #f6f2ec; }
.bp-btn:active:not(:disabled) { transform: translateY(1px); }
.bp-btn:disabled { opacity: 0.4; cursor: default; }
.bp-btn:focus-visible, .bp-chip:focus-visible, .bp-tool:focus-visible { outline: 2px solid #695b4a; outline-offset: 2px; }
.bp-btn--ghost { background: transparent; border-color: transparent; }
.bp-btn--ghost:hover:not(:disabled) { background: rgba(105, 91, 74, 0.08); }
.bp-btn--icon { width: 44px; padding: 0; }
.bp-toolbar :is([data-action="print"], [data-action="save"]) i { font-size: 20px; }
.bp-btn[hidden] { display: none; }
.bp-btn--primary { background: #695b4a; border-color: #695b4a; color: #fff; min-width: 108px; }
.bp-btn--primary:hover:not(:disabled) { background: #5a4d3e; }
.bp-btn--danger { color: var(--bp-bad); border-color: rgba(195, 71, 64, 0.45); }
.bp-btn--danger:hover:not(:disabled) { background: rgba(195, 71, 64, 0.06); }

/* ---- Tabs along the top of the drawing, with history, print and Verkställ */
.bp-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bp-stage > .bp-canvas { flex: 1 1 auto; }
.bp-tabbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
  padding: 10px 14px; background: var(--bp-panel); border-bottom: 1px solid var(--bp-line);
}
/* Tabs are a segmented control: a soft track, the chosen tab a raised white plate. */
.bp-views, .bp-layer-tabs { display: flex; gap: 2px; min-width: 0; padding: 3px; border-radius: 10px; background: rgba(105, 91, 74, 0.1); }
.bp-views { overflow-x: auto; scrollbar-width: none; }
.bp-views::-webkit-scrollbar { display: none; }
.bp-view-tab, .bp-layer-tab {
  -webkit-appearance: none; appearance: none; position: relative; min-height: 36px; padding: 6px 18px; margin: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--bp-ink-soft);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.bp-view-tab:hover, .bp-layer-tab:hover { background: rgba(255, 255, 255, 0.55); color: var(--bp-ink); }
.bp-view-tab[aria-selected="true"], .bp-layer-tab[aria-selected="true"] {
  background: #fff; color: var(--bp-ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(43, 37, 32, 0.14), 0 3px 10px rgba(43, 37, 32, 0.08);
}
.bp-view-tab:focus-visible, .bp-layer-tab:focus-visible { outline: 2px solid #695b4a; outline-offset: 1px; }
.bp-toolbar { display: flex; align-items: center; gap: 8px; }
.bp-inspector > .bp-toolbar { position: sticky; top: -14px; z-index: 1; margin: -14px -14px -4px; padding: 12px 14px; background: var(--bp-panel); border-bottom: 1px solid var(--bp-line); }
.bp-inspector > .bp-toolbar [data-action="apply"] { flex: 1 1 auto; min-width: 0; }
.bp-history { display: flex; gap: 4px; }
.bp-cancel { align-self: flex-start; min-height: 40px; padding: 6px 10px; margin: -4px 0 0 -4px; }
.bp-sheet-close { display: none; }
.bp-hint[hidden] { display: none; }
/* What keeps the drawing from being built, at the top of the drawing. */
.bp-alert {
  -webkit-appearance: none; appearance: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; max-width: min(640px, calc(100% - 24px)); padding: 8px 14px;
  border: 1px solid rgba(195, 71, 64, 0.45); border-radius: 5px; background: #fdf1ef; color: #8f2f29;
  font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; box-shadow: 0 2px 10px rgba(35, 27, 18, 0.08);
}
.blueprint-mode .bp-alert { color: #8f2f29; }
.bp-alert[hidden] { display: none; }
.bp-alert i { color: var(--bp-bad); }
.bp-alert:hover { background: #fbe6e2; }
.blueprint-mode.has-alert .bp-hint { top: 58px; }

/* ---- Body */
.bp-body { display: grid; grid-template-columns: 248px minmax(0, 1fr) 312px; min-height: 0; }
.bp-palette, .bp-inspector { background: var(--bp-panel); overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
/* Airy: clear space between the groups, less inside them. */
.bp-palette { border-right: 1px solid var(--bp-line); padding: 16px 14px 24px; display: flex; flex-direction: column; gap: 22px; }
.bp-inspector { border-left: 1px solid var(--bp-line); padding: 14px 14px 24px; display: flex; flex-direction: column; gap: 18px; }

.bp-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bp-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0;
  min-height: 50px; padding: 5px 3px; border-radius: 5px;
  border: 1px solid rgba(105, 91, 74, 0.2); background: #fff; cursor: pointer;
  font-size: 11.5px; font-weight: 600; line-height: 1.15; white-space: nowrap;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.bp-tool i { font-size: 15px; color: var(--bp-accent); }
/* Wins over the inherited font of buttons in the mode. */
.blueprint-mode .bp-tool { font-size: 11px; font-weight: 500; padding: 9px 3px 6px; gap: 5px; }
.bp-tool--mode { min-height: 38px; flex-direction: row; gap: 6px; }
.blueprint-mode .bp-tool--mode { font-size: 11.5px; padding: 5px 6px; gap: 6px; }
.bp-tool--mode i { font-size: 13px; }
.bp-tool:hover { border-color: rgba(105, 91, 74, 0.45); }
.bp-tool[aria-pressed="true"] { border-color: var(--bp-accent-strong); background: var(--bp-accent-strong); color: #fff; box-shadow: 0 4px 12px rgba(105, 91, 74, 0.26); }
.bp-tool[aria-pressed="true"] i { color: #fff; }

.bp-options { display: flex; flex-direction: column; gap: 24px; }
.bp-section { display: flex; flex-direction: column; gap: 10px; }
.bp-section-title { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-muted); }
.bp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-chips--types { display: grid; grid-template-columns: 1fr; gap: 6px; }
.bp-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border-radius: 5px; border: 1px solid rgba(105, 91, 74, 0.24); background: #fff; cursor: pointer;
  font-size: 13px; font-weight: 600; text-align: left; transition: border-color 150ms ease, background 150ms ease;
}
/* The same size as the tool buttons (wins over the inherited button font). */
.blueprint-mode .bp-chip { font-size: 11px; font-weight: 500; min-height: 34px; padding: 0 10px; gap: 7px; }
.blueprint-mode .bp-chips--types .bp-chip { border-radius: 6px; justify-content: flex-start; min-height: 42px; padding: 0 12px; gap: 10px; font-size: 13px; }
.bp-chips--types .bp-chip i { width: 16px; font-size: 14px; }
/* A type with a line drawing: a fixed square, the label beside it. */
.blueprint-mode .bp-chips--types .bp-chip--drawing { min-height: 50px; padding: 4px 12px 4px 6px; }
.bp-chip-drawing { flex: none; width: 40px; height: 40px; object-fit: contain; user-select: none; pointer-events: none; }
.bp-chip-drawing.is-mirrored, .bp-props-drawing.is-mirrored { transform: scaleX(-1); }
.bp-chip i { width: 14px; font-size: 12px; text-align: center; color: var(--bp-accent); }
.bp-chip:hover:not(:disabled) { border-color: rgba(105, 91, 74, 0.5); }
/* A chosen option: a solid light brown field, no frame. */
.bp-chip[aria-pressed="true"] { background: #e9dfd2; border-color: #e9dfd2; box-shadow: none; }
.blueprint-mode .bp-chip[aria-pressed="true"] { font-weight: 600; }
.bp-chip:disabled { opacity: 0.38; cursor: not-allowed; }
.bp-chip-sub { font-size: 11px; font-weight: 500; color: var(--bp-muted); }
/* Golv / Vägg above the tools; each tab shows the tools of its layer. */
.bp-layer-tab { flex: 1 1 0; padding: 6px; }
/* Markera / Radera on the drawing, above the zoom buttons. */
.bp-canvas-tools { position: absolute; left: 12px; bottom: 66px; z-index: 1; display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--bp-line); }
.bp-canvas-tool { min-height: 36px; padding: 6px 12px; gap: 7px; font-size: 13px; }
.bp-canvas-tool[aria-pressed="true"] { background: var(--bp-accent-strong); border-color: var(--bp-accent-strong); color: #fff; }
.blueprint-mode .bp-canvas-tool[aria-pressed="true"]:hover { background: var(--bp-accent-strong); }
.bp-icon-marquee { width: 15px; height: 15px; flex: none; }

/* ---- Canvas */
.bp-canvas { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--bp-paper); }
.bp-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; cursor: crosshair; }
.bp-svg[data-cursor="pointer"] { cursor: pointer; }
.bp-svg[data-cursor="resize"] { cursor: ew-resize; }
.bp-svg[data-cursor="select"] { cursor: default; }
.bp-svg[data-cursor="erase"] { cursor: cell; }
.bp-svg[data-cursor="pan"] { cursor: grab; }
.bp-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); margin: 0; max-width: min(640px, calc(100% - 24px));
  padding: 8px 14px; border-radius: 5px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--bp-line);
  color: var(--bp-ink-soft); font-size: 13px; text-align: center; pointer-events: none; box-shadow: 0 2px 10px rgba(35, 27, 18, 0.06);
}
.bp-zoom { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--bp-line); }
.bp-zoom .bp-btn { min-height: 36px; width: 36px; }

/* Walls seen straight on. */
.bp-elev-wall { fill: rgba(255, 255, 255, 0.6); stroke: var(--bp-wall); stroke-width: calc(1px * var(--u)); }
.bp-elev-floor { fill: var(--bp-wall); }
.bp-elev-support { fill: rgba(105, 91, 74, 0.06); stroke: var(--bp-ink-soft); stroke-width: calc(0.8px * var(--u)); stroke-dasharray: calc(6px * var(--u)) calc(4px * var(--u)); }
.bp-elev-section { fill: rgba(43, 37, 32, 0.05); stroke: var(--bp-muted); stroke-width: calc(0.8px * var(--u)); stroke-dasharray: calc(4px * var(--u)) calc(3px * var(--u)); pointer-events: none; }
.bp-view--elevation .bp-module.is-upper .bp-body { fill: var(--bp-cabinet); stroke: var(--bp-ink); stroke-dasharray: none; }
.bp-view--elevation .bp-module.is-selected .bp-body { fill: #e6eef6; stroke: var(--bp-select); }
.bp-view--elevation .bp-module.is-hover .bp-body { stroke: var(--bp-select); }
.bp-elev-front { fill: none; stroke: var(--bp-ink); stroke-width: calc(1px * var(--u)); }
.bp-elev-plinth { fill: rgba(43, 37, 32, 0.1); stroke: var(--bp-ink-soft); stroke-width: calc(0.7px * var(--u)); }
.bp-elev-swing { fill: none; stroke: var(--bp-muted); stroke-width: calc(0.7px * var(--u)); stroke-dasharray: calc(4px * var(--u)) calc(3px * var(--u)); }
.bp-elev-handle { fill: var(--bp-ink); stroke: var(--bp-ink); stroke-width: calc(2px * var(--u)); stroke-linecap: round; }
.bp-elev-glass { fill: rgba(69, 97, 127, 0.1); stroke: var(--bp-upper); stroke-width: calc(0.8px * var(--u)); }
.bp-elev-appliance { fill: rgba(43, 37, 32, 0.08); stroke: var(--bp-ink); stroke-width: calc(1px * var(--u)); }
.bp-elev-appliance--steel { fill: rgba(120, 128, 134, 0.22); }
.bp-elev-shelf { stroke: var(--bp-ink); stroke-width: calc(1.4px * var(--u)); }
.bp-elev-tap { fill: none; stroke: var(--bp-upper); stroke-width: calc(2px * var(--u)); stroke-linecap: round; }
.bp-elev-cooktop { fill: var(--bp-ink); }
.bp-elev-door-leaf { fill: rgba(105, 91, 74, 0.08); stroke: var(--bp-ink); stroke-width: calc(1px * var(--u)); }
.bp-elev-mullion { stroke: var(--bp-upper); stroke-width: calc(1px * var(--u)); }
.bp-elev-opening--door .bp-opening-cut, .bp-elev-opening--window .bp-opening-cut { fill: #fff; }
.bp-view--elevation .bp-module.is-ghost--ok .bp-elev-front, .bp-view--elevation .bp-module.is-ghost--dock .bp-elev-front,
.bp-view--elevation .bp-module.is-ghost--bad .bp-elev-front { opacity: 0.55; }
.bp-titleblock {
  position: absolute; right: 12px; bottom: 12px; min-width: 188px; padding: 8px 12px; background: #fff;
  border: 1.5px solid var(--bp-ink); font-size: 11px; color: var(--bp-ink); display: grid; gap: 4px; pointer-events: none;
}
.bp-logo { display: block; width: 150px; height: 24px; margin-bottom: 2px; background-color: #1d1d1b;
  -webkit-mask: url('../images/kitchenlab-logo.png') left center / contain no-repeat; mask: url('../images/kitchenlab-logo.png') left center / contain no-repeat; }
.bp-titleblock-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--bp-ink); padding-bottom: 4px; }
.bp-titleblock-head strong { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.bp-titleblock-scale { display: flex; align-items: center; gap: 8px; }
.bp-scalebar { height: 6px; border: 1px solid var(--bp-ink); background: repeating-linear-gradient(90deg, var(--bp-ink) 0 50%, #fff 50% 100%); background-size: 50% 100%; }
.bp-cursor-tag {
  position: absolute; left: 0; top: 0; padding: 5px 9px; border-radius: 6px; background: var(--bp-accent-strong); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: var(--bp-shadow); max-width: 420px; overflow: hidden; text-overflow: ellipsis;
}
.bp-cursor-tag.is-bad { background: var(--bp-bad); }
.bp-corner-ask { position: absolute; left: 0; top: 0; z-index: 3; width: min(300px, calc(100% - 16px)); box-sizing: border-box; display: grid; gap: 8px;
  padding: 12px 14px; border: 1px solid rgba(105, 91, 74, 0.22); border-radius: 12px; background: #fff; box-shadow: var(--bp-shadow); }
.bp-corner-ask-title { font-size: 14px; font-weight: 600; color: var(--bp-ink); }
.bp-corner-ask-text { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--bp-ink-soft); }
.bp-corner-ask-actions { display: flex; justify-content: flex-end; gap: 8px; }
.bp-corner-ask-actions .bp-btn--primary { min-width: 0; }
.bp-toast {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: min(560px, calc(100% - 32px));
  padding: 10px 16px; border-radius: 8px; background: var(--bp-accent-strong); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--bp-shadow);
}
.bp-toast[data-kind="error"] { background: var(--bp-bad); }
.bp-toast[data-kind="warning"] { background: #8a5a0b; }

/* ---- Drawing */
.bp-grid-minor { stroke: var(--bp-grid-minor); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.bp-grid-major { stroke: var(--bp-grid-major); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.bp-world * { stroke-linejoin: round; stroke-linecap: round; }
.bp-floor { fill: rgba(255, 255, 255, 0.55); stroke: none; }
.bp-wall { fill: url(#bp-hatch); stroke: var(--bp-wall); stroke-width: calc(1.6px * var(--u)); }
.bp-wall--support { fill: url(#bp-hatch); }
.bp-hatch-line { stroke: var(--bp-wall); stroke-width: 0.012; }
.bp-support-hidden { stroke: var(--bp-muted); stroke-width: calc(1.2px * var(--u)); stroke-dasharray: calc(6px * var(--u)) calc(4px * var(--u)); }
.bp-room-front { stroke: var(--bp-muted); stroke-width: calc(1px * var(--u)); stroke-dasharray: calc(10px * var(--u)) calc(4px * var(--u)) calc(2px * var(--u)) calc(4px * var(--u)); }
.bp-opening-cut { fill: var(--bp-paper); stroke: var(--bp-wall); stroke-width: calc(1px * var(--u)); }
.bp-opening-hit { fill: transparent; cursor: pointer; }
.bp-opening.is-selected .bp-opening-cut { fill: #e6eef6; stroke: var(--bp-select); stroke-width: calc(2.2px * var(--u)); }
.bp-opening.is-selected .bp-window-line, .bp-opening.is-selected .bp-door-leaf { stroke: var(--bp-select); }
.bp-opening:hover .bp-opening-cut { stroke: var(--bp-select); }
.bp-room-handle { cursor: ew-resize; }
.bp-room-handle[data-room-edge="floor"] { cursor: ns-resize; }
.bp-room-handle-bar { fill: #fff; stroke: #4388a7; stroke-width: calc(2px * var(--u)); }
.bp-room-handle.is-active .bp-room-handle-bar, .bp-room-handle:hover .bp-room-handle-bar { fill: #4388a7; }
.bp-room-handle.is-locked { cursor: not-allowed; }
.bp-room-handle.is-locked .bp-room-handle-bar { stroke: var(--bp-bad); }
.bp-room-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bp-room-inputs label { display: grid; gap: 4px; font-size: 11px; color: var(--bp-muted); font-weight: 600; }
/* The same size as the choices beside it. */
.bp-input { box-sizing: border-box; width: 100%; min-width: 0; height: 32px; padding: 4px 10px; border: 1px solid rgba(105, 91, 74, 0.34); border-radius: 5px; background: #fff; font: 500 11px var(--mui-font, inherit); font-variant-numeric: tabular-nums; color: var(--bp-ink); }
.bp-input:focus { outline: 2px solid #695b4a; outline-offset: 1px; }
.bp-field { display: grid; gap: 6px; font-size: 11px; color: var(--bp-muted); font-weight: 600; max-width: 160px; }
/* Room for four digits and the stepper, no more. */
.bp-input--mm4 { width: 92px; }
.bp-window-line { stroke: var(--bp-upper); stroke-width: calc(1px * var(--u)); }
.bp-door-leaf { stroke: var(--bp-ink); stroke-width: calc(1.6px * var(--u)); }
.bp-door-swing { fill: none; stroke: var(--bp-ink-soft); stroke-width: calc(0.8px * var(--u)); stroke-dasharray: calc(4px * var(--u)) calc(3px * var(--u)); }

.bp-module .bp-body { fill: var(--bp-cabinet); stroke: var(--bp-ink); stroke-width: calc(1.3px * var(--u)); }
.bp-module .bp-worktop-edge { fill: rgba(105, 91, 74, 0.08); stroke: var(--bp-ink-soft); stroke-width: calc(0.7px * var(--u)); }
.bp-module .bp-front { stroke: var(--bp-ink); stroke-width: calc(1.8px * var(--u)); }
.bp-module .bp-swing { fill: none; stroke: var(--bp-ink-soft); stroke-width: calc(0.8px * var(--u)); stroke-dasharray: calc(3px * var(--u)) calc(2.5px * var(--u)); }
.bp-module .bp-drawer { stroke: var(--bp-ink-soft); stroke-width: calc(0.9px * var(--u)); }
.bp-module .bp-appliance { fill: rgba(105, 91, 74, 0.07); stroke: var(--bp-ink-soft); stroke-width: calc(0.8px * var(--u)); }
.bp-module .bp-glass { fill: rgba(69, 97, 127, 0.06); stroke: var(--bp-upper); stroke-width: calc(0.8px * var(--u)); stroke-dasharray: calc(3px * var(--u)) calc(2px * var(--u)); }
.bp-module .bp-hood { fill: none; stroke: var(--bp-ink-soft); stroke-width: calc(0.9px * var(--u)); }
.bp-module .bp-tall-cross { stroke: var(--bp-ink-soft); stroke-width: calc(0.8px * var(--u)); }
.bp-module .bp-sink { fill: rgba(69, 97, 127, 0.12); stroke: var(--bp-upper); stroke-width: calc(1.1px * var(--u)); }
.bp-module .bp-cooktop, .bp-island .bp-cooktop { fill: none; stroke: var(--bp-ink); stroke-width: calc(1.1px * var(--u)); }
.bp-island .bp-sink { fill: rgba(69, 97, 127, 0.12); stroke: var(--bp-upper); stroke-width: calc(1.1px * var(--u)); }
.bp-module.is-upper .bp-body { fill: rgba(255, 255, 255, 0.72); stroke: var(--bp-upper); stroke-dasharray: calc(7px * var(--u)) calc(4px * var(--u)); }
.bp-module.is-upper .bp-front, .bp-module.is-upper .bp-swing, .bp-module.is-upper .bp-drawer { stroke: var(--bp-upper); }
/* A freestanding hood over the island: drawn like a wall cabinet, above the island. */
.bp-island-hood { cursor: pointer; }
.bp-island-hood .bp-body { fill: rgba(255, 255, 255, 0.78); stroke: var(--bp-upper); stroke-width: calc(1.3px * var(--u)); stroke-dasharray: calc(7px * var(--u)) calc(4px * var(--u)); }
.bp-island-hood .bp-hood { fill: none; stroke: var(--bp-upper); stroke-width: calc(0.9px * var(--u)); }
.bp-island-hood:hover .bp-body { stroke: var(--bp-select); }
.bp-island-hood.is-selected .bp-body { fill: #e6eef6; stroke: var(--bp-select); stroke-width: calc(2.4px * var(--u)); stroke-dasharray: none; }
.bp-module.is-hover .bp-body { stroke: var(--bp-select); }
.bp-module.is-selected .bp-body { fill: #e6eef6; stroke: var(--bp-select); stroke-width: calc(2.4px * var(--u)); }
.bp-module.is-problem .bp-body { fill: rgba(195, 71, 64, 0.14); stroke: var(--bp-bad); stroke-width: calc(2.4px * var(--u)); }
.bp-module.is-erasing .bp-body { fill: rgba(195, 71, 64, 0.2); stroke: var(--bp-bad); }
.bp-module.is-ghost { pointer-events: none; }
.bp-module.is-moving { opacity: 0.35; }
.bp-module.is-ghost--ok .bp-body { fill: rgba(67, 136, 167, 0.16); stroke: var(--bp-place); stroke-width: calc(2px * var(--u)); stroke-dasharray: none; }
.bp-module.is-ghost--dock .bp-body { fill: rgba(47, 138, 79, 0.16); stroke: var(--bp-dock); stroke-width: calc(2px * var(--u)); stroke-dasharray: none; }
.bp-module.is-ghost--bad .bp-body { fill: rgba(195, 71, 64, 0.14); stroke: var(--bp-bad); stroke-width: calc(1.6px * var(--u)); stroke-dasharray: calc(5px * var(--u)) calc(3px * var(--u)); }
.bp-module.is-ghost--bad .bp-worktop-edge, .bp-module.is-ghost--bad .bp-swing { opacity: 0.5; }
.bp-removed { fill: rgba(195, 71, 64, 0.1); stroke: var(--bp-bad); stroke-width: calc(1.4px * var(--u)); stroke-dasharray: calc(5px * var(--u)) calc(3px * var(--u)); }
.bp-moved-from { fill: none; stroke: var(--bp-muted); stroke-width: calc(1px * var(--u)); stroke-dasharray: calc(4px * var(--u)) calc(3px * var(--u)); }

.bp-corner .bp-corner-body { fill: url(#bp-corner-hatch); stroke: var(--bp-ink); stroke-width: calc(1.1px * var(--u)); }
.bp-corner-hatch-line { stroke: var(--bp-ink-soft); stroke-width: 0.006; }
.bp-corner.is-upper .bp-corner-body { stroke: var(--bp-upper); stroke-dasharray: calc(7px * var(--u)) calc(4px * var(--u)); }
.bp-corner.is-problem .bp-corner-body { stroke: var(--bp-bad); fill: rgba(195, 71, 64, 0.14); stroke-width: calc(2.4px * var(--u)); }
.bp-corner.is-selected .bp-corner-body { stroke: var(--bp-select); stroke-width: calc(2.4px * var(--u)); }
.bp-corner.is-ghost .bp-corner-body { stroke: var(--bp-dock); stroke-width: calc(2px * var(--u)); }
.bp-corner.is-ghost--bad .bp-corner-body { stroke: var(--bp-bad); fill: rgba(195, 71, 64, 0.12); }

.bp-island .bp-body { fill: var(--bp-cabinet); stroke: var(--bp-ink); stroke-width: calc(1.3px * var(--u)); }
.bp-island .bp-worktop-edge { fill: rgba(105, 91, 74, 0.1); stroke: var(--bp-ink); stroke-width: calc(1.6px * var(--u)); }
.bp-island .bp-front { stroke: var(--bp-ink); stroke-width: calc(1.2px * var(--u)); }
.bp-island .bp-drawer { stroke: var(--bp-ink-soft); stroke-width: calc(0.8px * var(--u)); }
.bp-island.is-selected .bp-worktop-edge { stroke: var(--bp-select); stroke-width: calc(2.6px * var(--u)); }
.bp-island.is-ghost { pointer-events: none; }
.bp-island.is-ghost--ok .bp-worktop-edge { fill: rgba(67, 136, 167, 0.14); stroke: var(--bp-place); }
.bp-island.is-ghost--bad .bp-worktop-edge { fill: rgba(195, 71, 64, 0.14); stroke: var(--bp-bad); }

.bp-layer { transition: opacity 180ms ease; }
.bp-layer:not(.is-active) { opacity: 0.34; pointer-events: none; }
.bp-layer--upper:not(.is-active) { opacity: 0.5; }

.bp-dim-line { stroke: var(--bp-ink-soft); stroke-width: calc(0.8px * var(--u)); }
.bp-dim-line.is-gap { stroke: var(--bp-warn); }
.bp-dim-tick { stroke: var(--bp-ink); stroke-width: calc(1.2px * var(--u)); }
.bp-passage { stroke-width: calc(1.2px * var(--u)); stroke-dasharray: calc(4px * var(--u)) calc(3px * var(--u)); }
.bp-passage.is-ok { stroke: var(--bp-ok); }
.bp-passage.is-warn { stroke: var(--bp-warn); }
.bp-passage.is-bad { stroke: var(--bp-bad); }
.bp-band-tick { stroke: var(--bp-select); stroke-width: calc(1.2px * var(--u)); }
.bp-marquee { fill: rgba(51, 102, 153, 0.08); stroke: var(--bp-select); stroke-width: calc(1px * var(--u)); stroke-dasharray: calc(4px * var(--u)) calc(3px * var(--u)); }
.bp-handle { fill: #fff; stroke: var(--bp-select); stroke-width: calc(2px * var(--u)); cursor: ew-resize; }
.bp-handle-hit { fill: transparent; cursor: ew-resize; }

.bp-labels { pointer-events: none; font-family: "Aptos", "Segoe UI", Manrope, sans-serif; }
.bp-name { font-size: 9.5px; font-weight: 500; fill: var(--bp-ink); letter-spacing: 0.01em; paint-order: stroke; stroke: rgba(255, 253, 249, 0.92); stroke-width: 3px; }
.bp-name.is-ghost { fill: var(--bp-place); }
.bp-name.is-ghost--dock { fill: var(--bp-dock); }
.bp-name.is-ghost--bad { fill: var(--bp-bad); }
.bp-code { font-size: 10px; font-weight: 600; fill: var(--bp-ink); paint-order: stroke; stroke: rgba(255, 253, 249, 0.9); stroke-width: 3px; }
.bp-dim-text { font-size: 10px; fill: var(--bp-ink); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bp-paper); stroke-width: 3px; }
.bp-dim-text.is-gap { fill: #8a5a0b; font-style: italic; }
.bp-passage-text { font-size: 10.5px; font-weight: 700; paint-order: stroke; stroke: var(--bp-paper); stroke-width: 3px; }
.bp-passage-text.is-ok { fill: var(--bp-ok); }
.bp-passage-text.is-warn { fill: #8a5a0b; }
.bp-passage-text.is-bad { fill: var(--bp-bad); }
.bp-wall-name { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--bp-muted); }
.bp-opening-name { font-size: 9.5px; fill: var(--bp-upper); font-weight: 600; paint-order: stroke; stroke: var(--bp-paper); stroke-width: 3px; }

/* ---- Inspector */
.bp-props { display: flex; flex-direction: column; gap: 12px; flex: 1 0 auto; }
.bp-props-head { display: flex; flex-direction: column; gap: 4px; }
.bp-props-kind { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-muted); }
.bp-props-title { margin: 0; font-size: 16px; font-weight: 700; }
/* One selected cabinet: its drawing beside the name. */
.bp-props-head.has-drawing { display: grid; grid-template-columns: minmax(0, 1fr) 76px; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 4px; }
.bp-props-drawing { grid-column: 2; grid-row: 1 / span 2; width: 76px; height: 76px; object-fit: contain; user-select: none; }
.bp-props-text { margin: 0; color: var(--bp-ink-soft); font-size: 13px; line-height: 1.45; }
.bp-tips { margin: 0; padding-left: 18px; color: var(--bp-ink-soft); font-size: 13px; line-height: 1.5; display: grid; gap: 6px; }
.bp-keys { margin: 0; font-size: 12px; color: var(--bp-muted); line-height: 1.5; }
/* The keyboard summary stays at the bottom of the details panel. */
.bp-props > .bp-keys { position: sticky; bottom: -24px; margin: auto -14px -24px; padding: 10px 14px 14px;
  background: var(--bp-panel); border-top: 1px solid var(--bp-line); }
.bp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* ---- Busy and confirm */
.bp-busy { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 14px; background: rgba(247, 245, 240, 0.82); backdrop-filter: blur(2px); font-weight: 700; font-size: 15px; }
.bp-busy[hidden], .bp-confirm[hidden], .bp-toast[hidden], .bp-cursor-tag[hidden], .bp-corner-ask[hidden] { display: none; }
.bp-busy-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(105, 91, 74, 0.2); border-top-color: #695b4a; animation: bp-spin 0.9s linear infinite; }
@keyframes bp-spin { to { transform: rotate(360deg); } }
.blueprint-mode.is-busy .bp-body { pointer-events: none; }
.bp-confirm { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(35, 27, 18, 0.28); padding: 16px; }
.bp-confirm-card { position: relative; width: min(460px, 100%); background: #fff; border-radius: 12px; padding: 22px; box-shadow: var(--bp-shadow); display: grid; gap: 10px; }
.bp-confirm-card h3 { margin: 0; padding-right: 36px; font-size: 17px; }
.bp-confirm-close { position: absolute; top: 10px; right: 10px; width: 36px; min-height: 36px; }
.bp-confirm-card p { margin: 0; color: var(--bp-ink-soft); }
.bp-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.bp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Tablet: narrower panels */
@media (max-width: 1180px) {
  .bp-body { grid-template-columns: 216px minmax(0, 1fr) 272px; }
  .blueprint-mode .bp-tool:not(.bp-tool--mode) { font-size: 10.5px; padding: 8px 2px 5px; letter-spacing: -0.01em; }
  .bp-view-tab { padding: 8px 13px; }
}

/* ---- Phone and small landscape: palette at the bottom, details as a sheet */
@media (max-width: 760px), (max-height: 520px) and (max-width: 1000px) {
  .blueprint-mode { font-size: 13px; }
  .bp-tabbar { flex-wrap: wrap; gap: 0; padding: 6px 8px 8px; }
  .bp-tabbar > .bp-toolbar { width: 100%; justify-content: flex-end; gap: 4px; padding-bottom: 6px; }
  .bp-toolbar .bp-btn { min-height: 40px; padding: 0 12px; }
  .bp-toolbar .bp-btn--icon { width: 40px; padding: 0; }
  .bp-toolbar [data-action="apply"] { padding: 0 14px; min-width: 0; }
  .bp-views { width: 100%; }
  .bp-view-tab { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 6px 4px; font-size: 12.5px; }
  .bp-cancel { min-height: 36px; margin: 0; }
  .bp-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; position: relative; }
  .bp-stage { grid-row: 1; }
  .bp-palette {
    grid-row: 2; border-right: 0; border-top: 1px solid var(--bp-line); padding: 8px 8px max(8px, env(safe-area-inset-bottom));
    flex-direction: column; gap: 12px; max-height: 42vh; overflow-y: auto;
  }
  .bp-categories { grid-template-columns: repeat(4, 1fr) ; gap: 4px; }
  .bp-modes { grid-template-columns: 1fr 1fr; gap: 4px; }
  .blueprint-mode .bp-tool { min-height: 46px; font-size: 11px; padding: 6px 4px 4px; gap: 3px; }
  .bp-tool--mode { min-height: 36px; }
  .bp-options { flex-direction: column; gap: 14px; }
  .bp-chips, .bp-chips--types { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
  .bp-chips--types .bp-chip { border-radius: 5px; flex: none; }
  .blueprint-mode .bp-chips--types .bp-chip { min-height: 40px; }
  .blueprint-mode .bp-chips--types .bp-chip--drawing { min-height: 44px; padding: 3px 12px 3px 4px; gap: 8px; }
  .bp-chip-drawing { width: 36px; height: 36px; }
  /* Beside, not under, the sheet's close button. */
  .bp-props-head.has-drawing { grid-template-columns: minmax(0, 1fr) 60px; margin-right: 46px; }
  .bp-props-drawing { width: 60px; height: 60px; }
  .blueprint-mode .bp-chip { flex: none; min-height: 36px; }
  .bp-input { height: 36px; font-size: 12px; }
  .bp-section { gap: 4px; }
  .bp-section-title { font-size: 10px; }
  .bp-sheet-close { display: inline-flex; position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--bp-panel); }
  .bp-layer-tab { min-height: 36px; padding: 6px; }
  .bp-canvas-tools { left: 8px; bottom: 66px; }
  .bp-canvas-tool { min-height: 40px; }
  .bp-inspector {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-height: 62%; border-left: 0; border-top: 1px solid var(--bp-line);
    border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(35, 27, 18, 0.16); padding: 14px 14px max(16px, env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform 220ms ease; visibility: hidden;
  }
  .blueprint-mode.has-selection .bp-inspector { transform: none; visibility: visible; }
  .bp-titleblock { display: none; }
  .bp-hint { top: 8px; font-size: 12px; padding: 6px 12px; }
  .bp-alert { top: 8px; font-size: 12px; padding: 6px 10px; }
  .blueprint-mode.has-alert .bp-hint { top: 50px; }
  .bp-zoom { left: 8px; bottom: 8px; }
  .bp-zoom .bp-btn { min-height: 40px; width: 40px; }
  .bp-toast { bottom: 64px; }
}
@media (max-height: 520px) and (max-width: 1000px) {
  .bp-body { grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .bp-palette { grid-row: 1; grid-column: 1; max-height: none; border-top: 0; border-right: 1px solid var(--bp-line); }
  .bp-stage { grid-column: 2; }
  .bp-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-inspector { left: auto; width: min(340px, 60%); top: 0; max-height: none; border-radius: 0; border-left: 1px solid var(--bp-line); transform: translateX(105%); }
}

/* ---- Print and PDF: each view on an A4 landscape page of its own */
.blueprint-mode.is-printing .bp-canvas { position: fixed; left: 0; top: 0; width: 1047px; height: 718px; z-index: 5; }
.bp-print-pages { display: none; }
@media print {
  body.blueprint-mode-open > *:not(.blueprint-mode) { display: none !important; }
  body.blueprint-mode-open { background: #fff; overflow: visible; }
  .blueprint-mode { position: static; display: block; background: #fff; }
  .blueprint-mode .bp-tabbar, .blueprint-mode .bp-palette, .blueprint-mode .bp-inspector, .blueprint-mode .bp-hint,
  .blueprint-mode .bp-zoom, .blueprint-mode .bp-canvas-tools, .blueprint-mode .bp-alert, .blueprint-mode .bp-toast, .blueprint-mode .bp-cursor-tag, .blueprint-mode .bp-corner-ask, .blueprint-mode .bp-busy, .blueprint-mode .bp-confirm { display: none !important; }
  .blueprint-mode .bp-body, .blueprint-mode .bp-stage { display: block; }
  /* Out of sight but rendered: the page drawings use its hatch patterns. */
  .blueprint-mode .bp-canvas { position: absolute !important; left: 0; top: 0; width: 1px !important; height: 1px !important; overflow: hidden; opacity: 0; }
  .blueprint-mode .bp-print-pages { display: block; }
  .blueprint-mode .bp-print-page { position: relative; width: 277mm; height: 190mm; overflow: hidden; background: #fff; break-after: page; page-break-after: always; }
  .blueprint-mode .bp-print-page:last-child { break-after: auto; page-break-after: auto; }
  .blueprint-mode .bp-print-page > svg { display: block; width: 100%; height: 100%; }
  .blueprint-mode .bp-titleblock { display: grid !important; }
  .blueprint-mode .bp-grid-minor { stroke: rgba(58, 88, 128, 0.06); }
  .blueprint-mode * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}