/* ==========================================================================
   SIP House Planner styles
   1. Design tokens        6. Lists and editors      11. SVG plan drawing
   2. Base                 7. Wall controls          12. Responsive layouts
   3. Top bar and menu     8. Furniture and items    13. Print
   4. Workspace and intro  9. Layout checks
   5. Plan card           10. Confirmation dialog
   ========================================================================== */

/* 1. Design tokens
   Recurring colors live here. Single-use tints stay next to the rule that
   uses them. The light values are the base. The dark theme (below) overrides
   the page colors only. The plan drawing area stays light in both themes, like
   a sheet of paper, so it also re-declares these light values for itself. */
:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-plan: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;

  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--page-bg);
  font-size: 16px;
  line-height: 1.45;
  color-scheme: light;
}

:root,
.plan-scroll {
  --ink: #14313c;
  --ink-input: #173642;
  --ink-soft: #35505a;
  --page-bg: #eef3f3;
  --surface: #fff;
  --surface-2: #f7faf9;
  --surface-3: #f1f6f5;
  --navy: #102c38;
  --gold: #d6a75a;
  --gold-text: #88652e;
  --teal: #155b6b;
  --teal-dark: #0f4855;
  --teal-link: #235e6a;
  --teal-border: #8db3b7;
  --teal-muted: #3e626c;
  --focus: #1e88a5;
  --selected: #067990;
  --wall: #284f5b;
  --partition-wall: #6d7d87;
  --orange: #cd8741;
  --orange-fill: #fff1dc;
  --conflict: #c2452f;
  --danger: #a4493d;

  --label: #385663;
  --subtle-text: #5d747c;
  --muted: #82959b;
  --muted-text: #71848b;
  --disabled-text: #94a4a8;
  --line: #dfe9e7;
  --divider: #e7eeed;
  --card-border: #d6e2e1;
  --handle: #b3caca;

  --field-border: #c9d9d8;
  --field-border-hover: #789fa3;
  --field-disabled-bg: #f1f5f4;
  --btn-border: #bad0d1;
  --btn-text: #245561;
  --btn-hover: #e6f2f2;
  --soft-button-bg: #e9f2f2;
  --soft-button-text: #205765;
  --soft-button-hover: #d5e8e9;
  --danger-soft-bg: #f9e9e6;
  --danger-soft-text: #9c4337;
  --danger-soft-hover: #f2d5d0;
  --remove-text: #b3372b;

  --tab-bg: #e4eded;
  --tab-border: #cad9d9;
  --tab-text: #536e77;
  --tab-selected-text: #123743;
  --tab-toggle-bg: #d3e2e2;
  --tab-toggle-hover: #c3d8d8;
  --tab-disabled-bg: #edf3f3;

  --info-bg: #f2f8f7;
  --info-border: #d5e5e2;
  --info-text: #3c5f68;
  --info-strong: #174f5c;

  --check-bg: #f3f7f6;
  --check-text: #386069;
  --check-border: #9bbdb8;
  --warning-bg: #fff5e9;
  --warning-text: #815b26;
  --warning-border: #db9e46;
  --error-bg: #fff0eb;
  --error-text: #9a4334;
  --error-border: #d57560;

  /* The plan drawing area. Dark mode swaps these for a muted gray sheet. */
  --plan-bg: #f9fbfa;
  --plan-outline: #fff;
  --plan-grid: #e4efed;
  --plan-grid-major: #bed6d7;
  --plan-dim-line: #78999e;
  --plan-dim-text: #57767f;
  --plan-entrance-text: #ad6d2c;
  --plan-front-text: #88652e;
  --plan-room-dim: #5b7a83;

  /* Room fills by room type. */
  --room-social: #fff1b3;
  --room-private: #e3d5f2;
  --room-entry: #ffd9b0;
  --room-wet: #cfe3f7;
  --room-utility: #d5eccb;
  --room-circulation: #f8d3d3;
  --room-stairs: #e4dccb;
  --room-outdoor: #e4e8e6;
}

/* Dark theme. Only on screen, so printing and PDF export always stay light. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    --ink: #e3edef;
    --ink-input: #e3edef;
    --ink-soft: #c5d7db;
    --page-bg: #0d181d;
    --surface: #15252c;
    --surface-2: #1a2d35;
    --surface-3: #20353e;
    --gold-text: #d6a75a;
    --teal-link: #7fc0cf;
    --teal-border: #4a727c;
    --teal-muted: #9ec5ce;
    --focus: #4cb4d1;

    --label: #a9c4cb;
    --subtle-text: #9db5bc;
    --muted: #86a0a8;
    --muted-text: #8aa3aa;
    --disabled-text: #5d747b;
    --line: #26404a;
    --divider: #243b44;
    --card-border: #2a424b;
    --handle: #3f5d68;

    --field-border: #34505a;
    --field-border-hover: #5f8892;
    --field-disabled-bg: #1a2b32;
    --btn-border: #3a5660;
    --btn-text: #a9d3de;
    --btn-hover: #223c46;
    --soft-button-bg: #1f3a44;
    --soft-button-text: #9fd0dc;
    --soft-button-hover: #284a56;
    --danger-soft-bg: #3a2320;
    --danger-soft-text: #f0a89b;
    --danger-soft-hover: #4b2b27;
    --remove-text: #f08a7a;

    --tab-bg: #0f1d23;
    --tab-border: #2e4852;
    --tab-text: #9db5bc;
    --tab-selected-text: #e3edef;
    --tab-toggle-bg: #24404a;
    --tab-toggle-hover: #2d4e59;
    --tab-disabled-bg: #131f25;

    --info-bg: #1a2f37;
    --info-border: #2c4a52;
    --info-text: #a7c9d1;
    --info-strong: #cfe8ee;

    --check-bg: #1a2f37;
    --check-text: #a7d0d8;
    --check-border: #3f7f86;
    --warning-bg: #2d2415;
    --warning-text: #f0c98a;
    --warning-border: #b8812f;
    --error-bg: #321f1b;
    --error-text: #f2b4a7;
    --error-border: #c4604b;
  }

  /* The plan sheet: a muted gray-teal, less bright than the white sheet of light mode.
     Labels around the plan are darker so they keep their contrast on it. */
  :root[data-theme="dark"] .plan-scroll {
    --plan-bg: #a3b3b9;
    --plan-outline: #b4c2c7;
    --plan-grid: #a6b5bb;
    --plan-grid-major: #8d9fa6;
    --plan-dim-line: #4c6064;
    --plan-dim-text: #34474c;
    --plan-entrance-text: #5f3c18;
    --plan-front-text: #56401d;

    /* Room fills blended 30% toward the sheet, so the brightest pastels (yellow
       especially) no longer glare. The size text under each room name is darker
       to keep at least 5:1 contrast on them. */
    --plan-room-dim: #35505a;
    --room-social: #e3deb5;
    --room-private: #d0cbe1;
    --room-entry: #e3ceb3;
    --room-wet: #c2d5e4;
    --room-utility: #c6dbc6;
    --room-circulation: #dec9cb;
    --room-stairs: #d2cbbb;
    --room-outdoor: #cfd6d3;
  }
}

/* 2. Base */
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }

button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
#plan:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

label { display: block; font-size: .78rem; font-weight: 700; color: var(--label); }
label span { font-weight: 400; color: var(--muted); }

input, select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin-top: 5px;
  padding: 9px 10px;
  border: 1px solid var(--field-border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-input);
}
input:hover, select:hover { border-color: var(--field-border-hover); }
input:disabled, select:disabled { background: var(--field-disabled-bg); color: var(--disabled-text); }

.two-fields, .four-fields { display: grid; gap: 10px; }
.two-fields { grid-template-columns: 1fr 1fr; }
.four-fields { grid-template-columns: repeat(4, 1fr); }
.select-label { margin-bottom: 12px; }
.compact-row { margin-bottom: 12px; }
.field-help { margin: 11px 0 0; color: var(--muted-text); font-size: .77rem; line-height: 1.5; }
.field-help.lead { margin: -5px 0 14px; }

/* Shared buttons */
.quiet-button {
  padding: var(--quiet-pad-y, 8px) 12px;
  border: 1px solid #57727a;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: .84rem;
}
.quiet-button:hover { background: #25434e; }

/* Same look as .quiet-button so the Templates menu sits with the other top actions.
   A select ignores line-height, so min-height stands in for the button's one line of
   text plus its padding and border. margin: 0 drops the top margin that selects get
   from the general input rule. */
.quiet-select {
  width: 8.5rem;
  min-height: calc(1.45em + 2 * var(--quiet-pad-y, 8px) + 2px);
  margin: 0;
  padding: var(--quiet-pad-y, 8px) 12px;
  border: 1px solid #57727a;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: .84rem;
}
.quiet-select:hover { background: #25434e; }
.quiet-select option { background: var(--surface); color: var(--ink); }

.primary-button {
  display: block;
  width: 100%;
  margin-top: 11px;
  padding: 10px 12px;
  border: 1px solid var(--teal);
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  text-align: center;
  font-size: .83rem;
  font-weight: 750;
}
.primary-button:hover { background: var(--teal-dark); }

.inline-button {
  margin-top: 12px;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--soft-button-bg);
  color: var(--soft-button-text);
  font-size: .78rem;
  font-weight: 700;
}
.inline-button:hover { background: var(--soft-button-hover); }

/* Remove buttons: the same shape as .inline-button, tinted red */
.delete-button,
.quiet-danger {
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--danger-soft-bg);
  color: var(--danger-soft-text);
  font-size: .78rem;
  font-weight: 700;
}
.delete-button { margin-top: 12px; }
.quiet-danger { display: block; margin: 12px 0 0; }
.delete-button:hover, .quiet-danger:hover { background: var(--danger-soft-hover); }

.zoom-button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--btn-text);
  font-size: 1.05rem;
  line-height: 1;
}
.zoom-button:hover { background: var(--btn-hover); }
.rotate-gap { margin-right: 8px; }

.undo-button {
  height: 28px;
  margin-right: 6px;
  padding: 0 11px;
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--btn-text);
  font-size: .75rem;
  font-weight: 700;
}
.undo-button:hover { background: var(--btn-hover); }

/* 3. Top bar and menu */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px clamp(18px, 3vw, 48px);
  border-bottom: 4px solid var(--gold);
  background: var(--navy);
  color: #f7fbfb;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 1rem; line-height: 1.1; }
.brand div span { margin-top: 3px; color: #abc3c9; font-size: .79rem; }
.brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid #63818a;
  border-radius: 10px;
  color: var(--gold);
  font-size: 24px;
}
.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.private-pill {
  padding: 5px 10px;
  border: 1px solid #527f78;
  border-radius: 999px;
  color: #c4e5dd;
  font-size: .8rem;
}
.action-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.menu-toggle { display: none; }

/* Sun and moon switch for the color theme, in the same style as the other top bar controls. */
.theme-toggle { display: inline-flex; }
.theme-toggle button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid #57727a;
  background: transparent;
  color: #abc3c9;
}
.theme-toggle button:first-child { border-radius: 8px 0 0 8px; }
.theme-toggle button:last-child { margin-left: -1px; border-radius: 0 8px 8px 0; }
.theme-toggle button:hover { background: #25434e; }
.theme-toggle button[aria-pressed="true"] { background: #25434e; color: var(--gold); }
.theme-toggle button:focus-visible { position: relative; z-index: 1; }
.theme-toggle svg { width: 16px; height: 16px; }

/* 4. Workspace and intro */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  max-width: 1600px;
  margin: auto;
  padding: 28px clamp(16px, 2.5vw, 40px) 42px;
}
.canvas-section { min-width: 0; }
.sidebar { display: flex; flex-direction: column; gap: 14px; }
.side-stack { display: flex; flex-direction: column; gap: 14px; }

/* Step bar: one tab per planning step. Only the current step's panels show. */
.step-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--tab-border);
  border-radius: 9px;
  background: var(--tab-bg);
}
.step-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tab-text);
  font-size: .85rem;
  font-weight: 700;
  text-align: left;
}
.step-tab[aria-current="step"] {
  background: var(--surface);
  color: var(--tab-selected-text);
  box-shadow: 0 1px 5px #14313c21;
}
.step-number {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tab-toggle-bg);
  color: var(--teal-link);
  font-size: .75rem;
}
.step-tab[aria-current="step"] .step-number { background: var(--teal); color: #fff; }

/* Back on the left, Next on the right. When Back is hidden, Next stays right. */
.step-nav { display: flex; align-items: center; gap: 10px; }
.step-nav .primary-button { width: auto; margin: 0 0 0 auto; padding: 10px 22px; }
.step-nav .inline-button { padding: 10px 22px; }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.section-heading h1 {
  margin: 3px 0 7px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.6vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.section-heading p:not(.eyebrow) { margin: 0; color: var(--subtle-text); font-size: .94rem; }
.eyebrow {
  margin: 0 0 4px;
  color: var(--gold-text);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hint-touch { display: none; }

.floor-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
/* width: 0 keeps the long text from setting the width of the whole column, and
   min-width: 100% then stretches it to the width of the floor tabs. */
.disclaimer {
  width: 0;
  min-width: 100%;
  color: var(--ink-soft);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}
.floor-tabs {
  display: flex;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--tab-border);
  border-radius: 9px;
  background: var(--tab-bg);
  white-space: nowrap;
  gap: 4px;
}
.floor-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.floor-tab-group { display: flex; }
.floor-tabs button {
  padding: 9px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tab-text);
  font-size: .85rem;
  font-weight: 700;
}
.floor-tabs button[aria-selected="true"] {
  background: var(--surface);
  color: var(--tab-selected-text);
  box-shadow: 0 1px 5px #14313c21;
}

/* The + or − button sits on the left edge of its tab, about a quarter of the
   tab's width, so the two read as one control. Three classes beat the padding
   rules for the tab buttons in the media queries further down. */
.floor-tabs .floor-tab-group .floor-toggle {
  width: 28px;
  padding: 0;
  border-radius: 6px 0 0 6px;
  background: var(--tab-toggle-bg);
  color: var(--teal-link);
  font-size: 1.05rem;
  line-height: 1;
}
.floor-tabs .floor-tab-group .floor-toggle:hover { background: var(--tab-toggle-hover); }
.floor-tabs .floor-tab-group .floor-toggle.is-remove { color: var(--remove-text); }
.floor-tabs .floor-tab-group .floor-toggle.is-remove:hover { background: var(--danger-soft-hover); }
.floor-tab-group button[role="tab"] { border-radius: 0 6px 6px 0; }
/* A floor that is off: the tab stays but is dimmed and can't be opened. */
.floor-tab-group button[role="tab"]:disabled {
  background: var(--tab-disabled-bg);
  color: var(--disabled-text);
  cursor: default;
}

.plan-card,
.panel,
.metric-row > div {
  border: 1px solid var(--card-border);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 6px 24px #234b5010;
}
.metric-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0;
}
/* Each tile is a size container, so the number can scale to fit its width (up to 99,999 sq ft). */
.metric-row > div { padding: 15px 17px; container-type: inline-size; }
.metric-row span, .metric-row strong { display: block; }
.metric-row span { color: var(--subtle-text); font-size: .78rem; }
.metric-row strong { margin-top: 3px; font-size: clamp(.95rem, 20cqw, 1.5rem); letter-spacing: -.03em; white-space: nowrap; }
/* The unit sits under the number, smaller, so a five digit area (99,999) fits a narrow tile. */
.metric-row .area-unit { display: block; margin-top: 1px; font-size: .5em; font-weight: 700; letter-spacing: 0; color: var(--subtle-text); }
.metric-note { margin: 8px 3px 14px; color: var(--muted-text); font-size: .76rem; }

/* 5. Plan card */
.plan-card { overflow: hidden; }
.plan-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--teal-muted);
  font-size: .83rem;
  font-weight: 650;
}
.toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--subtle-text);
  font-weight: 500;
}
.layer-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  color: var(--teal-muted);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}
.layer-toggle input {
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--teal);
}
.move-toggle { display: none; }
.legend-square {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--teal-border);
}
.unit-toggle { display: inline-flex; margin: 0 4px; }
.unit-toggle button {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--btn-border);
  background: var(--surface);
  color: var(--btn-text);
  font-size: .75rem;
  font-weight: 750;
}
.unit-toggle button:first-child { border-radius: 6px 0 0 6px; }
.unit-toggle button:last-child { margin-left: -1px; border-radius: 0 6px 6px 0; }
.unit-toggle button:hover { background: var(--btn-hover); }
.unit-toggle button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: #fff; }
.unit-toggle button:focus-visible { position: relative; z-index: 1; }
#zoomLabel {
  min-width: 41px;
  color: var(--teal-muted);
  text-align: center;
  font-size: .75rem;
  font-weight: 750;
}

.plan-scroll {
  height: min(calc(100vh - 150px), 960px);
  min-height: 280px;
  padding: 18px;
  overflow: auto;
  container-type: size;
  background: var(--plan-bg);
  color-scheme: light;
}
/* Size is set inline by app.js so the plan fits the scroll box at any zoom. */
#plan { display: block; touch-action: none; }
#plan.tap-only { touch-action: pan-x pan-y pinch-zoom; }

.plan-resize {
  display: grid;
  place-items: center;
  height: 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-3);
  cursor: ns-resize;
  touch-action: none;
}
.plan-resize::before {
  content: "";
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: var(--handle);
}
.plan-resize:hover::before,
.plan-resize.dragging::before { background: var(--focus); }
.plan-resize:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

.template-credit {
  margin: 0;
  padding: 12px 17px;
  border-bottom: 1px solid var(--divider);
  background: var(--surface-2);
  color: var(--teal-muted);
  font-size: 1rem;
  line-height: 1.5;
}
.template-credit a { color: var(--teal-link); font-weight: 700; }

.plan-note {
  margin: 0;
  padding: 10px 17px;
  border-top: 1px solid var(--divider);
  background: var(--surface);
  color: var(--muted-text);
  font-size: .78rem;
}

/* Sidebar panels */
.panel { padding: 18px; }
.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 15px;
}
.panel-title h2 { margin: 0; font-size: 1rem; letter-spacing: -.015em; }
.panel-title span { color: var(--muted-text); font-size: .75rem; white-space: nowrap; }
.front-select { margin: 10px 0 0; }

/* 6. Dropdown pickers and editors */
/* Info box and dropdown row at the top of each list panel */
.info-box {
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid var(--info-border);
  border-radius: 8px;
  background: var(--info-bg);
  color: var(--info-text);
  font-size: .78rem;
  line-height: 1.5;
}
.info-box strong { color: var(--info-strong); }
/* The same stack in all four panels: pick, add, then suggested sizes */
.pick-controls { display: grid; gap: 8px; margin-bottom: 12px; }
.pick-controls select { margin-top: 0; font-weight: 700; }
.pick-controls .primary-button { margin-top: 0; }

.room-coordinates { margin-top: 10px; }
.room-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 6px;
}
.room-actions .inline-button,
.room-actions .delete-button { margin-top: 8px; }
.room-actions .inline-button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.door-editor { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--divider); }
.door-editor .two-fields { margin-bottom: 10px; }

/* 7. Wall controls */
.wall-controls { margin-bottom: 4px; }
.wall-checks {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 6px 18px;
  margin: 0 0 2px;
  padding: 0;
  border: 0;
}
.wall-checks legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--label);
  font-size: .78rem;
  font-weight: 700;
}
.wall-checks legend span { margin-left: 4px; color: var(--muted); font-weight: 400; }
.wall-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.wall-check input {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--teal);
  cursor: pointer;
}
.wall-check.exterior { color: var(--disabled-text); cursor: not-allowed; }
.wall-check.exterior input { cursor: not-allowed; }

/* 8. Furniture and items */
.item-checks-title { margin: 16px 0 8px; color: var(--label); font-size: .82rem; }

/* 9. Layout checks (shared by the Layout Checks and Item Checks lists) */
.findings { flex: 1; }
.findings ul,
.item-checks {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}
.findings ul { gap: 9px; max-height: 390px; }
.item-checks { gap: 7px; max-height: 200px; }
.findings li,
.item-checks li {
  border-left: 3px solid var(--check-border);
  border-radius: 8px;
  background: var(--check-bg);
  color: var(--check-text);
  line-height: 1.4;
}
.findings li { padding: 10px 11px; font-size: .8rem; }
.item-checks li { padding: 9px 10px; font-size: .78rem; }
.findings li.warning,
.item-checks li.warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}
.findings li.error,
.item-checks li.error {
  border-color: var(--error-border);
  background: var(--error-bg);
  color: var(--error-text);
}

/* 10. Confirmation dialog */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #0f2c38a8;
}
.confirm-card {
  width: min(100%, 420px);
  padding: 24px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-input);
  box-shadow: 0 24px 60px #0f2c3859;
}
.confirm-card h2 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
}
.confirm-card p { margin: 0 0 22px; color: var(--subtle-text); font-size: .9rem; line-height: 1.5; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 9px; }
.confirm-card .quiet-button { border-color: var(--btn-border); color: var(--btn-text); }
.confirm-card .quiet-button:hover { background: var(--btn-hover); }
.confirm-danger {
  padding: 8px 13px;
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: .84rem;
  font-weight: 750;
}
.confirm-danger:hover { background: #873c33; }
.confirm-danger.confirm-neutral { border-color: var(--teal); background: var(--teal); }
.confirm-danger.confirm-neutral:hover { background: var(--teal-dark); }

footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.5vw, 40px) 30px;
  color: var(--muted-text);
  font-size: .75rem;
}

/* 11. SVG plan drawing (units are feet, so sizes here are small numbers) */
svg text { font-family: var(--font-plan); user-select: none; }
svg .grid-line { stroke: var(--plan-grid); stroke-width: .055; }
svg .grid-major { stroke: var(--plan-grid-major); stroke-width: .075; }
svg .outline { fill: var(--plan-outline); stroke: #294c56; stroke-width: .22; }
svg .exterior-wall { fill: var(--wall); }
/* A lighter gray than the exterior wall so interior partitions read as a different kind of wall. */
svg .partition-wall { stroke: var(--partition-wall); stroke-linecap: butt; }
/* Lighter and dashed so a half wall reads as different without relying on color alone. */
svg .half-wall { stroke-opacity: .55; stroke-dasharray: .8 .3; }

svg .room { fill: var(--room-utility); stroke-width: .13; cursor: grab; transition: filter .12s; }
svg .room-social { fill: var(--room-social); }
svg .room-private { fill: var(--room-private); }
svg .room-entry { fill: var(--room-entry); }
svg .room-wet { fill: var(--room-wet); }
svg .room-circulation { fill: var(--room-circulation); }
svg .room-stairs { fill: var(--room-stairs); }
/* Dashed so an outdoor space reads as different without relying on color alone. */
svg .room-outdoor { fill: var(--room-outdoor); stroke-dasharray: .5 .3; }
/* Stair art sits under the room label, which gets a halo in the room color so it stays readable over the tread lines. */
svg .stair-line { fill: none; stroke: var(--partition-wall); stroke-width: .07; pointer-events: none; }
svg .stair-arrow { fill: none; stroke: var(--wall); stroke-width: .12; stroke-linejoin: round; pointer-events: none; }
svg .stair-arrow-head { fill: var(--wall); pointer-events: none; }
svg .stair-text { fill: var(--wall); font-weight: 750; pointer-events: none; }
svg .stairs-room .room-label,
svg .stairs-room .room-dim,
svg .stairs-room .stair-text { paint-order: stroke; stroke: var(--room-stairs); stroke-width: .3; stroke-linejoin: round; }
svg .room:hover { filter: brightness(.97); }
svg .room.selected { stroke: var(--selected); stroke-width: .32; }
svg .room.path-room { stroke: #4b9d9b; stroke-dasharray: .35 .25; }
svg .room.path-room.selected { stroke: var(--selected); }
svg .room-label { fill: #1d3c47; font-weight: 750; pointer-events: none; }
svg .room-dim { fill: var(--plan-room-dim); pointer-events: none; }

svg .interior-door { cursor: grab; }
svg .door-swing {
  fill: none;
  stroke: #cf7838;
  stroke-width: .16;
  stroke-dasharray: .27 .17;
  pointer-events: none;
}
svg .door-leaf { stroke: #b65f2c; stroke-width: .18; stroke-linecap: round; pointer-events: none; }
svg .door-hinge { fill: #fff; stroke: #ad5c2d; stroke-width: .12; pointer-events: none; }
svg .door-opening {
  stroke: #cf7838;
  stroke-width: .16;
  stroke-dasharray: .27 .17;
  pointer-events: none;
}
svg .door-opening-tick { stroke: #b65f2c; stroke-width: .18; stroke-linecap: round; pointer-events: none; }
svg .interior-door.selected .door-swing,
svg .interior-door.selected .door-leaf,
svg .interior-door.selected .door-opening,
svg .interior-door.selected .door-opening-tick { stroke: #ed9e28; stroke-width: .23; }

svg .entrance-bar { fill: #c58235; pointer-events: none; }
svg .door-label { fill: var(--plan-entrance-text); font-size: .53px; font-weight: 700; }
svg .entrance-label { text-anchor: middle; dominant-baseline: central; letter-spacing: .06em; }
svg .front-label {
  fill: var(--plan-front-text);
  font-size: .5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-anchor: middle;
  dominant-baseline: central;
}

svg .window { cursor: grab; }
svg .window-frame { fill: #eef8fb; stroke: var(--wall); stroke-width: .08; }
svg .window-pane { stroke: var(--wall); stroke-width: .06; }
svg .window-glass { stroke: #4b9fc0; stroke-width: .1; }
svg .window.selected .window-frame { fill: var(--orange-fill); stroke: var(--orange); stroke-width: .14; }
svg .window.selected .window-glass { stroke: var(--orange); }

svg .item { cursor: grab; }
svg .item rect { fill: #fffaf1; fill-opacity: .92; stroke: #9a7440; stroke-width: .1; }
svg .item.selected rect { fill: var(--orange-fill); stroke: var(--orange); stroke-width: .2; }
svg .item.conflict rect {
  fill: #fde8e3;
  stroke: var(--conflict);
  stroke-width: .14;
  stroke-dasharray: .3 .18;
}
svg .item.selected.conflict rect { stroke-width: .22; }
/* Utility markers and notes. The symbol colors reuse existing tokens. */
svg .marker-item rect { fill: #fffdf8; }
svg .marker-item-note rect { stroke-dasharray: .35 .2; fill-opacity: .75; }
svg .marker-symbol { fill: var(--wall); }
svg .marker-electrical { fill: var(--orange); }
svg .marker-plumbing { fill: var(--focus); }
svg .marker-symbol .marker-hub { fill: #fffdf8; }
svg .item-label {
  fill: #6b4f28;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

svg .dimension { stroke: var(--plan-dim-line); stroke-width: .09; }
svg .dimension-text { fill: var(--plan-dim-text); font-size: .55px; text-anchor: middle; }

/* Keyboard focus on plan shapes: a dashed focus-blue edge, distinct from the
   solid selection highlight. Only shows for keyboard navigation. */
svg [data-focus-key]:focus { outline: none; }
svg [data-room]:focus-visible > .room,
svg [data-item]:focus-visible > rect,
svg [data-window]:focus-visible > .window-frame {
  stroke: var(--focus);
  stroke-width: .3;
  stroke-dasharray: .45 .2;
}
svg [data-door]:focus-visible .door-swing,
svg [data-door]:focus-visible .door-leaf,
svg [data-door]:focus-visible .door-opening,
svg [data-door]:focus-visible .door-opening-tick { stroke: var(--focus); stroke-width: .26; }

/* Tell phone and touch screen visitors that desktop works best. It is hidden
   until the screen is narrow or touch only, and Dismiss hides it for this visit. */
.mobile-notice {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 3px solid var(--gold);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: .86rem;
}
.mobile-notice p { flex: 1; margin: 0; }
.mobile-notice .quiet-button { border-color: var(--btn-border); color: var(--btn-text); }
.mobile-notice[hidden] { display: none; }
@media (max-width: 800px), (pointer: coarse) {
  .mobile-notice:not([hidden]) { display: flex; }
}

/* Lot and setback lines on the plan */
svg .lot-line { fill: none; stroke: var(--plan-dim-line); stroke-width: .2; stroke-dasharray: 1.2 .6; pointer-events: none; }
svg .setback-line { fill: none; stroke: var(--orange); stroke-width: .1; stroke-dasharray: .3 .3; pointer-events: none; }
svg .lot-label { fill: var(--plan-dim-text); font-weight: 700; pointer-events: none; }

/* Lot Footprint box: the toggle, then three fields across */
.lot-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 700; font-size: .86rem; }
.lot-toggle input { width: auto; margin: 0; }
.lot-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.lot-fields input { padding-left: 7px; padding-right: 7px; }
.lot-fields .inline-button { padding-left: 4px; padding-right: 4px; white-space: normal; }
.lot-help { margin-top: 10px; }

/* Rotate Building: a small bordered group under Front of House */
.rotate-building {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--label);
}
.rotate-building .rotate-buttons { display: inline-flex; }

/* Space under the stair info line before the next row of fields */
.stair-controls { margin-bottom: 10px; }

/* A second row of fields under the wall thickness help text */
.height-fields { margin-top: 10px; align-items: end; }

/* Tap mode (touch screens with Drag to Move off) */
svg.tap-only .room,
svg.tap-only .item,
svg.tap-only .window,
svg.tap-only .interior-door { cursor: pointer; }

/* 12. Responsive layouts (widest to narrowest, then input type, then the
   wide dashboard layout) */
@media (max-width: 1250px) {
  .section-heading { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 1100px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 300px; }
  .four-fields { grid-template-columns: repeat(2, 1fr); }
  .metric-row { grid-template-columns: repeat(2, 1fr); }
}

/* Narrow top bar: let the tagline wrap instead of pushing the buttons down */
@media (max-width: 900px) {
  .brand div span { max-width: 180px; }
}

/* Tablet and phone: one column, the most-used panels first */
@media (max-width: 800px) {
  .workspace { display: block; padding-top: 20px; }
  .sidebar { margin-top: 16px; }

  .metric-row { gap: 8px; }
  .metric-note { display: none; }
  .plan-note { font-size: .72rem; }
  .wall-checks { grid-template-columns: repeat(2, auto); }
  /* 16px stops phones from zooming in when a field is focused */
  input, select { font-size: 16px; }

  footer { display: block; }
  footer span { display: block; margin-bottom: 5px; }
}

@media (max-width: 700px) {
  .topbar { position: relative; padding: 10px 14px; }
  .brand strong { white-space: nowrap; }
  .private-pill { display: none; }
  .menu-toggle { display: inline-block; }
  .action-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 12px;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 210px;
    padding: 8px;
    border: 1px solid #33535e;
    border-radius: 12px;
    background: var(--navy);
    box-shadow: 0 14px 34px #0f2c3866;
  }
  .action-menu.open { display: flex; }
  .action-menu { --quiet-pad-y: 11px; }
  .action-menu .quiet-button { text-align: left; font-size: .92rem; }
  .action-menu .quiet-select { width: 100%; font-size: .92rem; }
  /* In the dropdown the sun and moon buttons share the row and match the other items in height. */
  .action-menu .theme-toggle { display: flex; }
  .action-menu .theme-toggle button { flex: 1; height: calc(1.45 * .92rem + 2 * var(--quiet-pad-y) + 2px); }
  .section-heading h1 { font-size: 1.8rem; }
}

@media (max-width: 530px) {
  .brand div span { display: none; }
  .brand-mark { width: 32px; height: 32px; }
  .workspace { padding-left: 12px; padding-right: 12px; }
  .floor-tabs button { padding: 9px 10px; }
  .metric-row > div { padding: 11px; }
  .metric-row strong { font-size: clamp(.85rem, 18cqw, 1.15rem); }
  .metric-row span { font-size: .7rem; }
  .plan-scroll { padding: 10px; }
  .plan-toolbar { font-size: .7rem; }
  .toolbar-right { gap: 6px; font-size: .7rem; }
  #zoomLabel { min-width: 36px; }
}

/* Touch screens get the Drag to Move switch and touch wording */
@media (pointer: coarse) {
  .move-toggle { display: flex; }
  .hint-touch { display: inline; }
  .hint-mouse { display: none; }
}

/* Wide screens (1500px+): a 24-column dashboard.
   Row 1: intro and the four area tiles, Layout Checks, and the step bar.
   Row 2: the plan on the left. Next to it, the panels for the current step,
          with Back and Next at the bottom. */
@media (min-width: 1500px) {
  .workspace {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-template-rows: 280px auto;
    align-items: start;
    gap: 14px;
    max-width: none;
    padding: 20px 22px 34px;
  }
  .canvas-section, .sidebar { display: contents; }

  .intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 12px;
    grid-column: 1 / 9;
    grid-row: 1;
    min-width: 0;
    height: 100%;
  }
  .intro .section-heading {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
  }
  .intro .section-heading h1 { margin: 2px 0 5px; font-size: clamp(1.7rem, 1.85vw, 2.4rem); }
  .intro .section-heading p:not(.eyebrow) { font-size: .86rem; }
  .intro .floor-tabs button { padding: 7px 12px; }
  .intro .metric-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 10px;
    margin: 0;
    height: 100%;
  }
  .intro .metric-row > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
  }
  .intro .metric-row strong { font-size: clamp(.95rem, 20cqw, 1.5rem); }
  .intro .metric-note { display: none; }

  .findings { grid-column: 9 / 17; }
  .step-bar {
    grid-column: 17 / 25;
    grid-row: 1;
    grid-auto-rows: 1fr;
    height: 100%;
  }
  .step-tab { font-size: .95rem; }
  .findings {
    align-self: stretch;
    grid-row: 1;
    height: 100%;
    max-height: none;
    padding: 14px 16px;
    overflow: auto;
  }
  .findings .panel-title { margin-bottom: 10px; }
  .findings ul { max-height: none; }
  .findings li { padding: 8px 10px; font-size: .77rem; }

  .plan-card { grid-column: 1 / 17; grid-row: 2; min-width: 0; }
  .plan-scroll { height: min(calc(100vh - 110px), 1100px); }
  .side-stack {
    grid-column: 17 / 25;
    grid-row: 2;
    min-width: 0;
  }
  .side-stack > .panel { container-type: inline-size; }

  /* Item sizes use quarter steps (like 32.25), which need more room per field. */
  .items-panel .four-fields { grid-template-columns: repeat(2, 1fr); }

  /* Each box is narrow, so on smaller wide screens its fields stack. */
  @container (max-width: 359px) {
    .doors-panel .door-editor .two-fields:first-child { grid-template-columns: 1fr; }
  }
  @container (max-width: 279px) {
    .two-fields { grid-template-columns: 1fr; }
    .four-fields { grid-template-columns: repeat(2, 1fr); }
    .wall-checks { grid-template-columns: repeat(2, auto); }
  }

  footer { max-width: none; padding-left: 22px; padding-right: 22px; }
}

/* From 1800px the three floor tabs need about 410px to stay on one line, so the
   intro takes 10 columns and Layout Checks takes the 6 between it and the steps. */
@media (min-width: 1800px) {
  .intro {
    grid-column: 1 / 11;
    grid-template-columns: minmax(410px, 1.15fr) minmax(0, 1fr);
  }
  .findings { grid-column: 11 / 17; }
}

/* 13. Print: only the per-floor sheets built by app.js are printed */
.print-sheets { display: none; }

@page { size: letter landscape; margin: .4in; }

@media print {
  body > *:not(#printSheets) { display: none !important; }
  body { background: #fff; }
  .print-sheets {
    display: block;
    color: var(--ink);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .print-page {
    display: flex;
    flex-direction: column;
    height: 7.6in;
    break-after: page;
    page-break-after: always;
  }
  .print-page:last-child { break-after: auto; page-break-after: auto; }
  .print-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--navy);
  }
  .print-head h1 { margin: 0; font-family: var(--font-display); font-size: 20pt; font-weight: 500; }
  .print-head p { margin: 0; color: #4d6a73; font-size: 8.5pt; }
  .print-plan { flex: 1; min-height: 0; }
  .print-rooms {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    columns: 5;
    column-gap: 14px;
    color: #3c5c66;
    font-size: 7.5pt;
  }
  .print-rooms li { margin-bottom: 2px; break-inside: avoid; }
  .print-rooms strong { color: var(--ink); }
  .print-note { margin: 4px 0 0; color: #7a8e93; font-size: 7pt; }
}