/* BOUWNDARIES — Design Tokens & Base */

:root {
  --black: #000000;
  --white: #FFFFFF;
  --concrete: #F0EDE8;
  --concrete-2: #E6E2DC;
  --dust: #8C8C8A;
  --dust-2: #BCBCB8;
  --line: #0A0A0A;
  --hairline: rgba(10,10,10,0.12);
  --hairline-soft: rgba(10,10,10,0.07);

  /* Phase 2 accent (togglable) */
  --laser: #C8FF00;
  --accent: var(--black); /* default Phase 1: no accent color */

  --u: 8px; /* base unit */
  --maxw: 1440px;

  --ff-display: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --ff-body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --ff-mono: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #root {
  background: var(--white);
  color: var(--black);
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; }

/* RESET: no border radius anywhere by default */
button, input, select, textarea {
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Type ramp */
.t-display {
  font-family: var(--ff-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(48px, 8vw, 120px);
}
.t-display-md {
  font-family: var(--ff-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1;
  font-size: clamp(36px, 5vw, 68px);
}
.t-display-sm {
  font-family: var(--ff-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(28px, 3.4vw, 44px);
}
.t-head {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.t-head-sm {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.t-body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
}
.t-body-sm {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}
.t-eyebrow {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.t-mono {
  font-family: var(--ff-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.t-mono-sm {
  font-family: var(--ff-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.t-cap {
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}

/* Rules / boundary lines */
.rule { height: 1px; background: var(--line); width: 100%; }
.rule-soft { height: 1px; background: var(--hairline); width: 100%; }
.rule-2 { height: 2px; background: var(--line); width: 100%; }

/* Layout primitives */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.sidenav {
  background: var(--black);
  color: var(--white);
  border-right: 1px solid var(--black);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.main {
  min-width: 0;
  background: var(--white);
}

/* Sidebar */
.sn-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.sn-section {
  font-family: var(--ff-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  padding: 16px 20px 6px;
}
.sn-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 80ms linear, color 80ms linear;
}
.sn-item:hover { color: var(--white); background: rgba(255,255,255,0.04); }
.sn-item.active {
  color: var(--white);
  background: rgba(255,255,255,0.06);
  border-left-color: var(--accent-on-dark, var(--white));
}
.sn-item .idx {
  font-family: var(--ff-mono);
  font-weight: 400;
  font-size: 10px;
  opacity: 0.55;
  letter-spacing: 0.04em;
}
.sn-foot {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}

/* Topbar inside main */
.topbar {
  position: sticky;
  top: 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 14px 32px;
  z-index: 20;
  gap: 24px;
}
.crumbs {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--dust);
}
.crumbs .now { color: var(--black); }
.crumbs .sep { color: var(--dust-2); }
.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lang-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lang-toggle button {
  background: transparent;
  border: 0;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--dust);
}
.lang-toggle button.on { background: var(--black); color: var(--white); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--black);
  background: var(--black);
  color: var(--white);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 80ms linear, color 80ms linear;
}
.btn:hover { background: var(--white); color: var(--black); }
.btn-ghost {
  background: transparent;
  color: var(--black);
}
.btn-ghost:hover { background: var(--black); color: var(--white); }
.btn-light {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.btn-light:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 11px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 13px; }
.btn .arr { font-family: var(--ff-mono); font-weight: 400; transform: translateY(-1px); }

/* Inputs */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dust);
}
.input {
  height: 44px;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 0 12px;
  font-family: var(--ff-body);
  font-size: 14px;
}
.input:focus { outline: none; border-color: var(--black); background: var(--concrete); }
textarea.input { padding: 12px; min-height: 96px; resize: vertical; line-height: 1.5; }

/* Cards / surfaces */
.surface {
  background: var(--concrete);
  border: 1px solid var(--line);
}
.surface-w { background: var(--white); border: 1px solid var(--line); }
.surface-b { background: var(--black); color: var(--white); border: 1px solid var(--black); }

/* Grid utilities */
.frame {
  padding: 32px;
}
.frame-lg { padding: 48px; }
.split-7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; }
.split-8-4 { display: grid; grid-template-columns: 8fr 4fr; gap: 32px; }
.split-5-7 { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; }
.split-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* Annotation pieces */
.ann {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dust);
}
.tick {
  width: 8px; height: 8px;
  border-left: 1px solid var(--black);
  border-top: 1px solid var(--black);
  display: inline-block;
}
.regmark::before, .regmark::after,
.regmark > i::before, .regmark > i::after {
  /* corner registration marks via pseudo-borders applied on containers */
}
.regbox {
  position: relative;
}
.regbox::before, .regbox::after,
.regbox > .rg-tl, .regbox > .rg-tr, .regbox > .rg-bl, .regbox > .rg-br {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border: 0 solid var(--black);
}
.regbox > .rg-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.regbox > .rg-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.regbox > .rg-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.regbox > .rg-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.regbox::before, .regbox::after { display: none; }

/* Placeholder image with diagonal stripes */
.placeholder {
  background-color: var(--concrete);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(10,10,10,0.06) 0,
    rgba(10,10,10,0.06) 1px,
    transparent 1px,
    transparent 12px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dust);
  text-align: center;
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.placeholder.dark {
  background-color: #1a1a1a;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 12px
  );
  color: rgba(255,255,255,0.55);
}

/* Phase 2: laser lime accent — when html.phase2 */
html.phase2 {
  --accent: var(--laser);
}
html.phase2 .accent-bg { background: var(--laser); color: var(--black); border-color: var(--laser); }
html.phase2 .accent-fg { color: var(--laser); }
html.phase2 .accent-stroke { stroke: var(--laser) !important; }
html.phase2 .accent-fill { fill: var(--laser) !important; }
.btn.accent { background: var(--laser); color: var(--black); border-color: var(--laser); }
.btn.accent:hover { background: var(--white); color: var(--black); border-color: var(--white); }
html.phase2 .btn.accent { background: var(--laser); color: var(--black); border-color: var(--laser); }
html.phase2 .btn.accent:hover { background: var(--black); color: var(--laser); border-color: var(--laser); }
html.phase2 .sn-item.active { border-left-color: var(--laser); }
html.phase2 .sn-item.active .idx { color: var(--laser); }
html.phase2 .accent-dot { background: var(--laser); }
.accent-bg { background: var(--black); color: var(--white); border-color: var(--black); }
.accent-fg { color: var(--black); }
.accent-dot { background: var(--black); }

/* density */
html.density-compact .frame { padding: 24px; }
html.density-comfy .frame { padding: 48px; }

/* Drawing canvas */
.draw-canvas {
  background-color: var(--white);
  background-image:
    linear-gradient(to right, var(--hairline-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline-soft) 1px, transparent 1px),
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: 0 0;
  cursor: crosshair;
}

/* Misc */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-family: var(--ff-mono);
  font-size: 10px;
  border: 1px solid var(--line);
  background: var(--white);
}

.scroll-y { overflow-y: auto; }

/* Print/hidden chrome on small viewports just shrinks */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 200px 1fr; }
  .frame { padding: 20px; }
  .split-7-5, .split-8-4, .split-5-7, .split-1-1 { grid-template-columns: 1fr; gap: 20px; }
}

/* Selection */
::selection { background: var(--black); color: var(--white); }
html.phase2 ::selection { background: var(--laser); color: var(--black); }

/* Scroll bar in dark sidebar */
.sidenav::-webkit-scrollbar { width: 6px; }
.sidenav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

/* Tag chip */
.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip.dark { background: var(--black); color: var(--white); border-color: var(--black); }
.chip.dust { color: var(--dust); border-color: var(--hairline); }

/* ──────────────────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE LAYER
   Base styles target a 1440-wide canvas. The block below flattens layouts
   for narrow viewports and turns the sidebar into a left-side drawer with
   a hamburger trigger in the topbar. We use attribute selectors with
   !important to defeat the many inline `gridTemplateColumns` in screens.
   ────────────────────────────────────────────────────────────────────────── */

/* Mobile-only elements: hidden by default on desktop */
.mobile-nav-trigger {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  flex: 0 0 auto;
  color: var(--black);
}
.mobile-nav-trigger:hover { background: var(--black); color: var(--white); }
.mobile-nav-backdrop { display: none; }
.sn-close {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  width: 32px; height: 32px;
  font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0;
  align-self: flex-start;
  flex: 0 0 auto;
}
.sn-close:hover { background: rgba(255,255,255,0.1); }

/* ── Tablet (≤ 1024px): tighten chrome, keep sidebar narrower ─────────── */
@media (max-width: 1024px) {
  .app-shell { grid-template-columns: 200px 1fr; }
  .topbar { padding: 12px 20px; gap: 16px; }
  .frame { padding: 28px 20px; }
  .frame-lg { padding: 36px 20px; }
}

/* ── Mobile (≤ 767px): single column, sidebar becomes drawer ──────────── */
@media (max-width: 767px) {
  /* App shell: collapse to single column; sidebar becomes a fixed drawer */
  .app-shell { grid-template-columns: 1fr !important; }
  .sidenav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(82vw, 320px);
    height: 100vh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }
  .sidenav.is-open { transform: translateX(0); }
  .sn-close { display: inline-flex; }
  .mobile-nav-backdrop.is-open {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
  .mobile-nav-trigger { display: inline-flex; }

  /* Chrome */
  .topbar {
    padding: 10px 14px;
    gap: 10px;
    grid-template-columns: 1fr auto;
  }
  .topbar > div:first-child { gap: 10px; }
  .crumbs { font-size: 10px; gap: 6px; letter-spacing: 0.04em; }
  .crumbs > :not(.now):not(.sep) { display: none; } /* drop early crumbs */
  .topbar-right { gap: 8px; }

  /* Frame paddings — global utility classes */
  .frame { padding: 20px 14px; }
  .frame-lg { padding: 24px 14px; }
  html.density-comfy .frame { padding: 24px 14px; }
  html.density-compact .frame { padding: 16px 14px; }

  /* Split utilities → single column */
  .split-7-5, .split-8-4, .split-5-7, .split-1-1 {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  /* Defeat inline grids in the main content — flatten to one column.
     The attribute selector catches React's serialized inline styles like
     `grid-template-columns: 7fr 5fr` regardless of value or spacing.
     Opt-out: add data-keep-cols on grids that should stay multi-column
     (e.g. the canvas stats strip). `:not()` avoids overriding their inline
     style at all — `revert`/`unset` would drop back to the cascade, not
     the inline value, so the explicit-skip pattern is the right one. */
  .main [style*="grid-template-columns"]:not([data-keep-cols]) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Defeat inline horizontal paddings that came from desktop spacing */
  .main [style*="padding: 32px 48px"],
  .main [style*="padding: 48px 32px"],
  .main [style*="padding: 64px 48px"],
  .main [style*="padding: 80px 48px"],
  .main [style*="padding: 48px"],
  .main [style*="padding: 64px 48px 32px"],
  .main [style*="padding: 32px 48px 16px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero in landing has its own min-height that crowds the fold on phones */
  .main [style*="min-height: calc(100vh - 56px)"] {
    min-height: auto !important;
    height: auto !important;
  }

  /* Strip any leftover fixed pixel widths in main content */
  .main [style*="width: 950"],
  .main [style*="width: 1000"],
  .main [style*="width: 1080"],
  .main [style*="width: 1200"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Buttons: primary CTAs span full width for thumb reach;
     small/inline buttons keep their natural width */
  .btn-lg { width: 100%; max-width: 100%; }

  /* Inputs / textareas / form rows */
  .input { width: 100%; max-width: 100%; }

  /* Type ramp — clamp() already covers most; cap top of t-display */
  .t-display { font-size: clamp(40px, 11vw, 64px); }
  .t-display-md { font-size: clamp(28px, 8vw, 44px); }

  /* Sidenav items larger for touch */
  .sidenav .sn-item { font-size: 13px; padding: 12px 18px; }

  /* The waitlist modal already uses max-width:480 + width:100% — fine on mobile.
     Trim its inner horizontal padding so it doesn't overflow on 320–360 px. */
  .main [style*="padding: 36px 40px"] {
    padding: 28px 22px !important;
  }

  /* Service-row "Join waitlist" chip: drop the absolute positioning so it
     stacks below the title instead of overlapping it once the row collapses
     to one column. */
  .service-row-chip {
    position: static !important;
    top: auto !important; right: auto !important;
    display: inline-flex !important;
    margin-top: 10px !important;
  }

  /* Primary/secondary action rows (e.g. material list: Back + WhatsApp).
     Stack and let full-width buttons breathe — kill any inline minWidth. */
  .main [style*="justify-content: flex-end"] {
    flex-wrap: wrap !important;
    justify-content: stretch !important;
  }
  .main [style*="min-width: 220"],
  .main [style*="min-width: 260"],
  .main [style*="min-width: 280"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Drawing step: canvas-first mobile layout (Miro-style) ────────────
     The desktop layout is a `1fr 340px` two-column grid. On mobile we
     flip it to a vertical stack where the canvas owns the dominant top
     ~60% of the viewport and the right panel becomes a compact bottom
     strip (header + scrollable wall props + always-visible Continue).
     The attribute selector matches Step4Draw's outer grid uniquely. */
  .main [style*="grid-template-columns: 1fr 340px"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto !important;
    gap: 0 !important;
    /* 56 topbar + ~49 stepbar ≈ 105; dvh handles mobile browser chrome */
    height: calc(100vh - 100px) !important;
    height: calc(100dvh - 100px) !important;
    overflow: hidden !important;
  }
  /* Canvas column: fills row 1, allow flex children to shrink */
  .main [style*="grid-template-columns: 1fr 340px"] > div:first-child {
    border-right: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* Right panel: bottom strip, capped so canvas always dominates */
  .main [style*="grid-template-columns: 1fr 340px"] > div:last-child {
    max-height: 40vh !important;
    height: auto !important;
    border-top: 1px solid var(--line) !important;
  }
  /* Touch drawing: block native scroll/zoom while finger is on the board */
  .draw-canvas { touch-action: none; }
  /* The empty-state helper card has 32px padding — too big on phones */
  .main [style*="border: 1px dashed var(--line)"][style*="padding: 32"] {
    padding: 16px !important;
  }

  /* Material list — tighter rhythm on mobile.
     The universal flatten leaves 16px gap + per-tile padding, which feels
     loose on a phone. These two rules target the specific grids by their
     unique inline column signatures (so nothing else is affected). */

  /* (a) Estimated-total 4-up tiles (Items / Wall area / Buffer / CO₂):
         drop the 16px gap and halve each tile's vertical padding (12 → 6). */
  .main [style*="grid-template-columns: repeat(4, 1fr)"]:not([data-keep-cols]) {
    gap: 0 !important;
  }
  .main [style*="grid-template-columns: repeat(4, 1fr)"]:not([data-keep-cols]) > * {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* (b) Material table rows (chevron · # · name · qty · unit price · subtotal):
         halve the inter-cell gap when the row flattens to a single column. */
  .main [style*="grid-template-columns: 32px 48px 1fr"]:not([data-keep-cols]) {
    gap: 8px !important;
  }

  /* Canvas bottom stats strip — compact, bottom-aligned on mobile.
     [data-keep-cols] is currently unique to that one dark strip in the
     drawing step, so this scopes cleanly. Three goals:
       • Less padding so the strip stops eating the canvas
       • Each cell flex-column + justify-end so text anchors to the bottom
         (uniform baseline even if one label wraps)
       • Smaller label + nowrap+ellipsis so "Total length"/"Total area"
         stay on a single line in a ~93 px cell */
  .main [data-keep-cols] > div {
    padding: 4px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  .main [data-keep-cols] .t-mono-sm {
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .main [data-keep-cols] .t-mono {
    font-size: 14px !important;
    line-height: 1.15 !important;
    margin-top: 2px !important;
  }

  /* Drawing toolbar (Select/Wall/Window/Door) sits at `bottom: 76px`,
     sized for the desktop 70 px-tall stats strip. After the mobile strip
     was tightened to ~39 px, that left a ~37 px gap. Halve it (target
     ~18 px) by lowering the toolbar to `bottom: 57px` on mobile only.
     z-index:20 in the selector scopes this to the toolbar specifically. */
  .main [style*="bottom: 76px"][style*="z-index: 20"] {
    bottom: 57px !important;
  }
}

/* Very narrow phones (≤ 360px) — give a little more breathing room */
@media (max-width: 360px) {
  .frame, .frame-lg { padding-left: 12px; padding-right: 12px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
}