/* ============================================================
   Atlantist — Mobile / Responsive layer
   Owns: z-index scale, bottom sheet system, breakpoints 320/600/1200/2560,
         touch target enforcement, full-width modals <600px.
   Does NOT own: BIM rendering, Three.js canvas geometry.
   ============================================================ */

/* ── 1. Z-INDEX LAYER SCALE ────────────────────────────────────────────── */
/*
  Layer     Property                  Value    Who lives here
  ────────────────────────────────────────────────────────────
  base      --z-base                      1    BIM canvas, normal DOM
  viewport  --z-viewport                 10    Three.js canvas overlays
  chrome    --z-chrome                  100    Topbar, nav rail, toolbar, panels
  panel     --z-panel                   200    Floating side panels (mobile)
  overlay   --z-overlay                 500    Modal backdrops, side drawers
  modal     --z-modal                   600    Modal dialogs, bottom sheets
  toast     --z-toast                  2000    Toast notifications
  supreme   --z-supreme                9999    Loading overlay (first paint only)
*/
:root {
  --z-base:      1;
  --z-viewport:  10;
  --z-chrome:    100;
  --z-panel:     200;
  --z-overlay:   500;
  --z-modal:     600;
  --z-toast:     2000;
  --z-supreme:   9999;
}

/* Retrofit key fixed/absolute elements to layer scale */
.topbar { z-index: var(--z-chrome) !important; }
#toolbar { z-index: var(--z-chrome) !important; }
#nav-rail { z-index: var(--z-chrome) !important; }
#toast-container { z-index: var(--z-toast) !important; }
#app-loading-overlay { z-index: var(--z-supreme) !important; }

/* Panels/drawers stay below modals */
.level-panel { z-index: var(--z-panel); }
.properties-panel { z-index: var(--z-panel); }
#sidebar-expanded { z-index: var(--z-panel); }

/* Modal overlay */
.modal-overlay { z-index: var(--z-overlay) !important; }
.modal { z-index: var(--z-modal) !important; }

/* Wallt chat widget sits above chrome but below modals */
#wallt-widget { z-index: calc(var(--z-modal) - 10) !important; }


/* ── 2. BOTTOM SHEET SYSTEM ──────────────────────────────────────────── */
/*
  .bsheet — shared bottom sheet container
  Snap points: peek (80px handle + header), half (50vh), full (92vh)
  JS (mobile.js) manages .bsheet--peek / .bsheet--half / .bsheet--full
  and drag-to-snap via touch events.
*/

/* Backdrop */
.bsheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bsheet-backdrop.active {
  display: block;
  opacity: 1;
}

/* Sheet base */
.bsheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-panel, #232323);
  border-top: 1px solid var(--border, #3a3a3a);
  border-radius: 16px 16px 0 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Start hidden below fold */
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);

  /* Full-width on all mobile sizes */
  max-width: 100%;
}

/* Drag handle */
.bsheet-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  cursor: grab;
  touch-action: none;
}
.bsheet-handle::after {
  content: '';
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
}
.bsheet-handle:active { cursor: grabbing; }

/* Sheet header — title + close */
.bsheet-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--border, #3a3a3a);
}
.bsheet-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e8e8e8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bsheet-close {
  background: none;
  border: none;
  color: var(--text-muted, #707070);
  font-size: 18px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
}
.bsheet-close:hover { background: var(--bg-panel-hover, #2a2a2a); color: var(--text-error, #f44336); }

/* Sheet body — scrollable content */
.bsheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}

/* Snap positions */
.bsheet--peek  { transform: translateY(calc(100% - 64px)); }   /* just handle visible */
.bsheet--half  { transform: translateY(calc(100% - 50vh)); }
.bsheet--full  { transform: translateY(calc(100% - 92dvh)); }
.bsheet--hidden { transform: translateY(100%); }

/* Tool palette bottom sheet */
#bsheet-tools .bsheet-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px;
  align-content: start;
}

/* Properties bottom sheet */
#bsheet-props .bsheet-body {
  padding: 0;
}
/* Inherit existing properties-panel child styles inside sheet */
#bsheet-props .prop-section {
  padding: 8px 12px;
}

/* Bottom sheet tool button */
.bsheet-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 68px;
  padding: 8px 4px;
  background: var(--bg-panel-hover, #2a2a2a);
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 10px;
  color: var(--text-secondary, #999);
  cursor: pointer;
  font-family: var(--font, system-ui);
  font-size: 10px;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.bsheet-tool-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.bsheet-tool-btn:active,
.bsheet-tool-btn.active {
  background: var(--bg-panel-active, #2f3a4a);
  border-color: var(--border-accent, #4a7dbd);
  color: var(--text-accent, #5b9bd5);
}

/* Mobile toolbar triggers (shown only on touch/mobile) */
.mobile-sheet-trigger {
  display: none;
}

/* Fixed mobile bottom bar (peek strip) */
#mobile-bottom-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: #1a1a1a;
  border-top: 1px solid var(--border, #3a3a3a);
  z-index: var(--z-chrome);
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
}
#mobile-bottom-bar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  background: none;
  border: none;
  color: var(--text-muted, #707070);
  font-size: 10px;
  font-family: var(--font, system-ui);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.12s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
#mobile-bottom-bar button svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round;
}
#mobile-bottom-bar button.active,
#mobile-bottom-bar button:active {
  color: var(--text-accent, #5b9bd5);
  background: rgba(74,125,189,0.1);
}


/* ── 3. BREAKPOINTS ──────────────────────────────────────────────────── */
/*
  320px  — narrowest Android phone (Samsung Galaxy, budget)
  600px  — large phone / small tablet landscape
  1200px — tablet landscape / small laptop
  2560px — 4K / ultrawide desktop
  The existing 768/480/375 queries remain; these layers add/override.
*/

/* ── 320px: Absolute minimum ────────────────────────────────── */
@media (max-width: 320px) {
  :root { --topbar-h: 44px; }

  /* Topbar: logo only, hide all buttons except hamburger */
  .topbar-logo span { display: none; }
  #topbar-right > *:not(#user-menu) { display: none; }
  #discipline-toggle { display: none; }
  #mep-subfilter { display: none; }
  .view-btn { font-size: 10px; padding: 3px 7px; }

  /* Level and props panels slide as bottom sheets */
  .level-panel { display: none !important; }
  .properties-panel { display: none !important; }

  /* Viewport fills whole height below topbar */
  .main-layout {
    height: calc(100dvh - var(--topbar-h) - 56px); /* minus bottom bar */
  }
  .viewport-area { flex: 1; width: 100%; }

  /* Show mobile bottom bar */
  #mobile-bottom-bar { display: flex; }

  /* Modals: full-screen on tiny phones */
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: unset !important;
    border-radius: 0 !important;
    max-height: 100dvh !important;
    margin: 0 !important;
  }

  /* Node editor: palette hidden by default */
  #ne-palette { display: none; }
  #ne-properties { display: none; }

  /* Crafting cards: single column */
  .crafting-grid,
  .thing-grid,
  .recipe-grid { grid-template-columns: 1fr !important; }

  /* Text scale */
  .panel-header { font-size: 9px; }
}

/* ── 600px: Large phone / phablet ───────────────────────────── */
@media (max-width: 600px) {
  /* Topbar */
  .topbar-logo span { display: none; }
  .topbar-center { display: none; }
  #discipline-toggle { display: none; }
  .tb-btn-elevation { display: none; }
  .presence-bar { display: none; }

  /* Show mobile bottom bar */
  #mobile-bottom-bar { display: flex; }

  /* Main layout accounts for bottom bar */
  .main-layout {
    height: calc(100dvh - var(--topbar-h) - 56px);
  }

  /* Panels go to bottom sheet, hide the originals */
  .level-panel { display: none !important; }
  .properties-panel { display: none !important; }

  /* Modals: full-width, 92dvh max */
  .modal {
    width: calc(100vw - 16px) !important;
    max-width: 100vw !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 8px !important;
    max-height: 92dvh !important;
  }
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }

  /* Crafting: 2 cols */
  .crafting-grid,
  .thing-grid { grid-template-columns: 1fr 1fr !important; }

  /* A-400 schedule table: horizontal scroll */
  .schedule-table-wrap { overflow-x: auto; }

  /* Mobile sheet triggers visible */
  .mobile-sheet-trigger { display: flex; }
}

/* ── 1200px: Tablet landscape / small laptop ────────────────── */
@media (max-width: 1200px) {
  /* Level panel narrower */
  .level-panel { width: 200px; }
  .properties-panel { width: 260px; }

  /* Topbar compact */
  .topbar { gap: 4px; padding: 0 8px; }
  .topbar-logo span { display: none; }
  #account-btn-label { display: none; }
  .tb-btn-elevation { display: none; }

  /* Discipline toggle compact */
  #discipline-toggle .disc-btn { font-size: 10px; padding: 4px 8px; }

  /* Node editor: slightly narrower sidebars */
  #ne-palette { width: 220px; min-width: 200px; }
  #ne-properties { width: 220px; min-width: 200px; }

  /* Crafting: 3 cols */
  .crafting-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Two-pane: keep both panels visible but narrower */
  .entry-project-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ── 2560px: 4K / ultrawide ─────────────────────────────────── */
@media (min-width: 2560px) {
  :root {
    /* Scale up panels and type for high-DPI large displays */
    --panel-w: 280px;
    --props-w: 360px;
    --topbar-h: 52px;
    font-size: 15px;
  }

  .topbar { padding: 0 20px; gap: 12px; }
  .topbar-logo { font-size: 17px; }
  .topbar-logo svg { width: 28px; height: 28px; }

  .tb-btn { padding: 6px 14px; font-size: 13px; }

  /* Larger touch targets on pointer:fine screens at this size */
  .tool-btn { min-width: 48px; min-height: 48px; }
  .nav-rail-btn { width: 48px; height: 48px; }

  /* Viewport grid has more room */
  #ne-palette { width: 320px; }
  #ne-properties { width: 300px; }

  .entry-project-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .modal { min-width: 480px; }

  /* Crafting: up to 5 cols */
  .crafting-grid { grid-template-columns: repeat(5, 1fr) !important; }
}


/* ── 4. TOUCH TARGETS — 48px minimum on coarse pointer ──────── */
@media (pointer: coarse) {
  /* Anything clickable needs 48px hit target */
  .tool-btn,
  .nav-rail-btn,
  .tb-btn,
  .bsheet-tool-btn,
  .view-btn,
  #mobile-bottom-bar button {
    min-height: 48px;
    min-width: 48px;
  }

  /* Form elements */
  .prop-input,
  .prop-select,
  select,
  input[type="text"],
  input[type="number"],
  input[type="email"] {
    min-height: 44px;
    font-size: 16px; /* prevents iOS auto-zoom */
  }

  /* List items */
  .level-item,
  .issue-item,
  .schedule-tab,
  .panel-tab,
  .entry-dir-btn {
    min-height: 48px;
  }

  /* Sidebar feature rows */
  .sidebar-feature-row { min-height: 48px; }

  /* Close buttons */
  .close-btn,
  .bsheet-close {
    min-width: 44px;
    min-height: 44px;
  }

  /* Remove hover-only states that are invisible on touch */
  .entry-card-open-btn { display: none !important; }
  .entry-card-menu-btn { display: flex !important; align-items: center !important; }

  /* Larger drag handles */
  .bsheet-handle { height: 36px; }
  .bsheet-handle::after { width: 48px; height: 5px; }
}


/* ── 5. FULL-WIDTH MODALS below 600px ──────────────────────── */
/* Already handled in 600px block; this covers edge cases */
@media (max-width: 599px) {
  /* All modal overlays snap to bottom sheet style */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    border-radius: 16px 16px 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
  }
  /* Property form modals */
  .modal-add-level,
  .modal-add-wall,
  .modal-add-column {
    border-radius: 16px 16px 0 0;
  }
}


/* ── 6. NODE EDITOR MOBILE (Dynamo on iPad) ──────────────────── */
/* iPad Air portrait: 820×1180 */
@media (max-width: 820px) {
  #ne-container {
    position: relative;
  }
  /* Palette becomes overlay drawer from left */
  #ne-palette {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    z-index: var(--z-panel);
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
    width: 240px !important;
    min-width: 240px !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.4);
  }
  #ne-palette.ne-open {
    transform: translateX(0);
  }
  /* Properties overlay from right */
  #ne-properties {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    z-index: var(--z-panel);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
    width: 240px !important;
    min-width: 240px !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.4);
  }
  #ne-properties.ne-open {
    transform: translateX(0);
  }
  /* Toggle buttons for palette/properties on canvas */
  #ne-mobile-palette-btn,
  #ne-mobile-props-btn {
    display: flex;
  }
}

/* Ne toggle buttons — hidden by default, shown on mobile */
#ne-mobile-palette-btn,
#ne-mobile-props-btn {
  display: none;
  position: absolute;
  top: 8px;
  z-index: var(--z-panel);
  background: rgba(30,40,55,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px 10px;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  gap: 4px;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--font, system-ui);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#ne-mobile-palette-btn { left: 8px; }
#ne-mobile-props-btn { right: 8px; }


/* ── 7. CRAFTING SYSTEM MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
  /* Crafting side nav becomes top tabs */
  .crafting-layout {
    flex-direction: column !important;
  }
  .crafting-sidebar {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    overflow-x: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #3a3a3a);
    padding: 4px 8px;
  }
  .crafting-sidebar-btn {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
    padding: 0 16px;
  }
  .crafting-main {
    flex: 1;
    overflow-y: auto;
  }
  /* Recipe graph canvas: full-width */
  .crafting-graph-canvas {
    width: 100% !important;
    height: 50vh !important;
  }
}


/* ── 7b. CRAFTING BOTTOM SHEET ──────────────────────────────────────────── */
/*
  Owns: bcraft-* — the mobile crafting surface inside #bsheet-craft.
  Phases: material picker → recipe panel (slide-in within sheet).
  Does NOT touch desktop crafting workbench layout.
*/

/* Phase containers — slide phases in/out within the sheet */
.bcraft-phase {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.bcraft-phase--hidden {
  display: none;
}

/* Section label */
.bcraft-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted, #707070);
  padding: 8px 16px 4px;
  flex-shrink: 0;
}

/* Material grid: 2-col at 320–599px, 3-col at 600–1199px */
.bcraft-material-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 8px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
@media (min-width: 600px) and (max-width: 1199px) {
  .bcraft-material-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Material card — 48px min tap target enforced via min-height */
.bcraft-material-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 80px;
  padding: 10px 8px;
  background: var(--bg-panel, #232323);
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  /* 48px minimum touch target: card is large enough on its own */
}
.bcraft-material-card:active,
.bcraft-material-card.selected {
  border-color: var(--accent, #5b8af0);
  background: color-mix(in srgb, var(--accent, #5b8af0) 12%, var(--bg-panel, #232323));
}
.bcraft-material-card__thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--bg-input, #1a1a1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  overflow: hidden;
}
.bcraft-material-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.bcraft-material-card__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #e8e8e8);
  line-height: 1.2;
  word-break: break-word;
}
.bcraft-material-card__source {
  font-size: 10px;
  color: var(--text-muted, #707070);
}

/* Empty state */
.bcraft-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 16px;
  color: var(--text-muted, #707070);
  font-size: 13px;
  text-align: center;
}
.bcraft-empty-state svg {
  width: 40px;
  height: 40px;
  opacity: 0.4;
}

/* ── Recipe panel ── */
.bcraft-recipe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #3a3a3a);
  flex-shrink: 0;
}
.bcraft-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent, #5b8af0);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  padding: 0 4px;
}
.bcraft-back-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.bcraft-thing-source {
  font-size: 10px;
  color: var(--text-muted, #707070);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bcraft-recipe-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 8px 12px;
}
.bcraft-recipe-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--bg-panel, #232323);
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.bcraft-recipe-card.selected {
  border-color: var(--accent, #5b8af0);
}
.bcraft-recipe-card__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent, #5b8af0);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.bcraft-recipe-card__meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted, #707070);
}
.bcraft-recipe-card__ops {
  font-size: 12px;
  color: var(--text-secondary, #aaa);
}

/* Quantity stepper */
.bcraft-recipe-detail {
  padding: 10px 12px 0;
  border-top: 1px solid var(--border, #3a3a3a);
  flex-shrink: 0;
}
.bcraft-recipe-detail--hidden {
  display: none;
}
.bcraft-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bcraft-qty-label {
  font-size: 13px;
  color: var(--text-secondary, #aaa);
}
.bcraft-qty-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 8px;
  overflow: hidden;
}
/* 48px tap targets for +/− per task spec */
.bcraft-qty-btn {
  width: 48px;
  height: 48px;
  background: var(--bg-input, #1a1a1a);
  border: none;
  color: var(--text-primary, #e8e8e8);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  flex-shrink: 0;
}
.bcraft-qty-btn:active { background: var(--bg-panel-hover, #2a2a2a); }
.bcraft-qty-val {
  min-width: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e8e8e8);
  padding: 0 4px;
}

/* Ingredient list */
.bcraft-ingredient-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 120px;
  overflow-y: auto;
}
.bcraft-ingredient-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #3a3a3a);
  font-size: 13px;
  color: var(--text-secondary, #aaa);
}
.bcraft-ingredient-list li:last-child { border-bottom: none; }
.bcraft-ingredient-list .ing-qty {
  font-weight: 600;
  color: var(--text-primary, #e8e8e8);
  margin-left: 8px;
}

/* Pinned footer — safe-area-inset-bottom so iPhone home bar doesn't overlap */
.bcraft-footer {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border, #3a3a3a);
  flex-shrink: 0;
  background: var(--bg-panel, #232323);
}
.bcraft-btn {
  flex: 1;
  min-height: 48px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s, transform 0.08s;
}
.bcraft-btn:active { opacity: 0.75; transform: scale(0.97); }
.bcraft-btn--ghost {
  background: none;
  color: var(--text-muted, #707070);
  border: 1px solid var(--border, #3a3a3a);
}
.bcraft-btn--secondary {
  background: var(--bg-input, #1a1a1a);
  color: var(--text-primary, #e8e8e8);
  border: 1px solid var(--border, #3a3a3a);
}
.bcraft-btn--primary {
  background: var(--accent, #5b8af0);
  color: #fff;
}

/* Spawn toast — brief confirmation, sits above modal */
#bcraft-spawn-toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 80px); /* above bottom bar */
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1a2e1a;
  border: 1px solid #2d5a2d;
  color: #6fcf6f;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 20px;
  z-index: var(--z-toast);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
}
#bcraft-spawn-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 8. /demo/nyc-midrise MOBILE ───────────────────────────── */
/* Tour overlay: full screen on small viewports */
@media (max-width: 600px) {
  #demo-tour-overlay {
    border-radius: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    padding: 20px 16px !important;
  }

  /* Mobile camera preset buttons: 2×2 grid */
  #demo-cam-presets {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #demo-cam-presets button {
    min-height: 48px;
    font-size: 13px;
  }

  /* Live session panel: compact */
  #demo-live-panel {
    bottom: 64px !important; /* above mobile bottom bar */
    right: 8px !important;
    width: calc(100vw - 16px) !important;
  }
}

/* ── 9. AUTH MODAL MOBILE (375/600/768px) ─────────────────────────────── */
/* Auth modals (signup, login, reset-password) get full-width treatment */
@media (max-width: 600px) {
  #modal-signup > div,
  #modal-login > div,
  #modal-reset-password > div {
    padding: 24px 20px !important;
    border-radius: 16px 16px 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Stack labels and inputs cleanly */
  #modal-signup input,
  #modal-signup select,
  #modal-login input,
  #modal-login select,
  #modal-reset-password input {
    font-size: 16px !important; /* prevents iOS auto-zoom */
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  /* CTA buttons: full-width */
  #modal-signup button:not(.close-btn),
  #modal-login button:not(.close-btn),
  #modal-reset-password button:not(.close-btn) {
    min-height: 48px !important;
  }
}

/* 375px: tighter padding for narrow screens */
@media (max-width: 375px) {
  #modal-signup > div,
  #modal-login > div,
  #modal-reset-password > div {
    padding: 20px 16px !important;
  }
}

/* 768px: tablet — auth modals stay centered but smaller */
@media (min-width: 601px) and (max-width: 768px) {
  #modal-signup > div,
  #modal-login > div,
  #modal-reset-password > div {
    max-width: 420px !important;
    padding: 28px !important;
  }
}

/* iOS Safari: ensure all form inputs use 16px font to prevent auto-zoom */
@media (max-width: 768px) {
  #modal-signup input[type="email"],
  #modal-signup input[type="text"],
  #modal-login input[type="email"],
  #modal-login input[type="text"],
  #modal-reset-password input[type="email"] {
    font-size: 16px !important;
  }
}