:root {
  --bg: #0e1318;
  --bg-2: #161d24;
  --bg-3: #1f2933;
  --line: #2a3744;
  --fg: #e8eef4;
  --fg-2: #9aa8b6;
  --fg-3: #5d6b78;
  --accent: #6cb7ff;
  --grey:   #5d6b78;
  --blue:   #6cb7ff;
  --amber:  #f0a852;
  --green:  #4ec27a;
  --red:    #e76262;
  --radius: 10px;
  --topbar-h: 46px;
  --bc-h: 30px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 15px;
  overscroll-behavior: none;
}
button {
  font: inherit; color: inherit;
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { background: #243140; }
input { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

#app {
  display: grid;
  grid-template-rows: var(--topbar-h) var(--bc-h) 1fr;
  height: 100%;
  width: 100%;
  /* Clip horizontal overflow at the app boundary — submenu rows scroll
     horizontally individually but the whole page must not. */
  overflow: hidden;
}
/* Grid items need min-width:0 so a wide child (e.g. a stretched submenu
   row) doesn't force the column to expand and create page-level scroll. */
.topbar, .breadcrumb, .stage { min-width: 0; }

/* ─── Top bar ───────────────────────────────────────────────────── */
.topbar {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  position: relative;
  z-index: 30;
  overflow: hidden;
}
.topbar > .brand   { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.topbar > .search  { flex: 1 1 0;    min-width: 0; }   /* takes remaining space, can shrink */
.topbar > .btn-print,
.topbar > .iconbtn { flex: 0 0 auto; }                 /* always natural width, never shrink */
.brand {
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;   /* allow brand to shrink in the topbar grid */
  overflow: hidden;
}
.brand small {
  color: var(--fg-3); font-weight: 400; font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-logo {
  height: 22px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  min-width: 0;
}
.search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  padding: 5px 6px; color: var(--fg); font-size: 13px; min-width: 0;
}
.search input::placeholder { color: var(--fg-3); }
.candidates {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cand {
  background: transparent;
  border: 0;
  color: var(--fg);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.cand:hover { background: var(--bg-2); }
.cand.match { background: rgba(108,183,255,0.10); }
.cand.none { color: var(--fg-3); cursor: default; }

.iconbtn {
  background: var(--bg-3);
  border: 1px solid var(--line);
  width: 32px; height: 32px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}

/* Visible PDF / Print button with text — much easier to find than a bare emoji icon */
.btn-print {
  background: var(--accent);
  color: #06121e;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-print:hover { filter: brightness(1.1); }

/* ─── Project chip (CS / DPX in the unified plant view) ──────────── */
.project-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  padding: 2px 6px;
  border-radius: 3px;
  vertical-align: 1px;
  margin-left: 6px;
  line-height: 1.3;
  white-space: nowrap;
}

/* ─── User pill (topbar) ─────────────────────────────────────────── */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--fg-2);
  border: 1px solid var(--line);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
}
.user-pill:hover { background: var(--bg); color: var(--fg); }
.user-pill .user-email { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.user-pill .user-logout-icon { font-size: 13px; opacity: .7; }
.topbar > .user-pill { flex: 0 0 auto; }

/* ─── Login page ─────────────────────────────────────────────────── */
.login-page {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.login-card .login-logo { height: 32px; display: block; margin: 4px 0 14px 0; }
.login-card h1 {
  margin: 0 0 22px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-2);
  letter-spacing: .3px;
}
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: .4px;
}
.login-card input {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
.login-card input:focus { border-color: var(--accent); }
.login-card button {
  margin-top: 6px;
  background: var(--accent);
  color: #06121e;
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
}
.login-card button:hover { filter: brightness(1.08); }
.login-alert {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}
.login-alert.error {
  background: rgba(255,90,90,.1);
  border: 1px solid rgba(255,90,90,.4);
  color: #ffb7b7;
}

/* ─── 3D plant viewer ────────────────────────────────────────────── */
/* Persistent host: stacked in the same grid cell as the stage so it
   overlays the same area. Hidden until the user picks the 3D view —
   then shown via .visible. Keeping it mounted preserves camera state
   across navigation, and avoids re-downloading the (cached) GLB. */
.plant3d-host {
  grid-row: 3 / 4;
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: none;
  background: #0e1217;
}
.plant3d-host.visible { display: block; }
.stage.hidden         { display: none; }

enerxon-plant-viewer {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  background: #0e1217;
}
enerxon-plant-viewer .plant-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
}
enerxon-plant-viewer .plant-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;            /* lets OrbitControls own all gestures */
}
enerxon-plant-viewer .plant-hud {
  position: absolute;
  left: 10px; bottom: 10px;
  pointer-events: none;
  font-size: 11px;
  color: #c8d2dd;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}

/* View-preset buttons — top-right corner. Compact so they don't
   crowd the canvas; rest at low opacity, brighten on hover. */
enerxon-plant-viewer .plant-views {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  max-width: 260px;
}
enerxon-plant-viewer .plant-views button {
  background: rgba(15,20,28,.78);
  border: 1px solid rgba(255,255,255,.12);
  color: #d9e2ec;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  opacity: .8;
}
enerxon-plant-viewer .plant-views button:hover,
enerxon-plant-viewer .plant-views button:focus {
  opacity: 1;
  background: #1a242f;
  border-color: rgba(255,255,255,.25);
  outline: none;
}
enerxon-plant-viewer .plant-status {
  background: rgba(15,20,28,.75);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 6px 10px;
  display: inline-block;
  transition: opacity .4s;
}
enerxon-plant-viewer .plant-status.faded { opacity: .35; }
enerxon-plant-viewer .plant-help {
  margin-top: 6px;
  opacity: .55;
}

/* Centered loading overlay — shown while the GLB is downloading /
   building. Replaces the dark "looks broken" canvas with clear feedback. */
enerxon-plant-viewer .plant-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,18,23,.0) 0%, rgba(14,18,23,.35) 100%);
  z-index: 5;
}
enerxon-plant-viewer .plant-loader[hidden] { display: none; }
enerxon-plant-viewer .plant-loader-spinner {
  width: 42px; height: 42px;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: var(--accent, #ffb800);
  border-radius: 50%;
  animation: plant-spin 0.9s linear infinite;
}
enerxon-plant-viewer .plant-loader-text {
  font-size: 14px;
  font-weight: 600;
  color: #e8eef5;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  letter-spacing: .3px;
}
enerxon-plant-viewer .plant-loader.error .plant-loader-spinner {
  border-top-color: #ff5252;
  animation: none;
}
@keyframes plant-spin {
  to { transform: rotate(360deg); }
}

/* Fatal init error — visible message instead of a blank dark canvas
   when the WebGL context or the GLTF loader can't be built. */
enerxon-plant-viewer .plant-fatal {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 32px;
  text-align: center;
  color: #e8eef5;
}
enerxon-plant-viewer .plant-fatal-title {
  font-size: 16px; font-weight: 700; color: #ff8a8a;
}
enerxon-plant-viewer .plant-fatal-detail {
  font-size: 12px;
  font-family: ui-monospace, monospace;
  color: var(--fg-3);
  max-width: 600px;
  word-break: break-word;
}
enerxon-plant-viewer .plant-fatal-hint {
  font-size: 12px;
  color: var(--fg-3);
  max-width: 520px;
  margin-top: 8px;
}

/* ─── Breadcrumb ────────────────────────────────────────────────── */
.breadcrumb {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  white-space: nowrap;
  height: var(--bc-h);
  position: sticky;
  top: var(--topbar-h);
  z-index: 25;
}
.breadcrumb::-webkit-scrollbar { height: 3px; }
.breadcrumb .crumb {
  background: transparent;
  border: 0;
  color: var(--fg-2);
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}
.breadcrumb .crumb:hover { background: var(--bg-3); color: var(--fg); }
.breadcrumb .crumb.current { color: var(--fg); font-weight: 700; }
.breadcrumb .sep { color: var(--fg-3); padding: 0 2px; }

/* Root toggle: two pills, no separator between them, joined to look
   like a segmented control. Active pill is filled; inactive is ghost. */
.breadcrumb .crumb-toggle {
  display: inline-flex;
  background: var(--bg-3);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.breadcrumb .crumb-toggle .crumb.root {
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--fg-2);
  background: transparent;
}
.breadcrumb .crumb-toggle .crumb.root:hover {
  background: rgba(255,255,255,.05);
  color: var(--fg);
}
.breadcrumb .crumb-toggle .crumb.root.active {
  background: var(--accent);
  color: #06121e;
  font-weight: 700;
}

/* ─── Submenus (stacked, cascade as you go deeper) ──────────────── */
.submenus {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.submenu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  white-space: nowrap;
}
.submenu-row:last-child { border-bottom: 0; }
.submenu-row::-webkit-scrollbar { height: 3px; }
.submenu-label {
  color: var(--fg-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
  flex-shrink: 0;
  width: 56px;
}
.submenu-pills {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
}
.submenu-btn {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg-2);
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}
.submenu-btn:hover { color: var(--fg); border-color: var(--accent); }
.submenu-btn.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #06121e;
  font-weight: 700;
}

/* Main pane fills the rest after submenus */
.main-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ─── Stage ─────────────────────────────────────────────────────── */
.stage {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.stage-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  gap: 10px;
  flex-shrink: 0;
}
.stage-toolbar h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-toolbar .sub { color: var(--fg-3); font-size: 11px; margin-left: auto; }
.toolbar-actions { display: flex; gap: 10px; align-items: center; }
.open-new { font-size: 11px; }
.stage-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  font-style: italic;
  padding: 40px;
  text-align: center;
}
.stage-empty small { display: block; margin-top: 8px; }

/* STRAIGHT-pipe schematic — inline SVG, no HTTP. Same flex slot as the
   PNG drawing viewer so it fills the stage equivalently. */
.straight-pipe-stage {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 24px;
  box-sizing: border-box;
}
.straight-pipe-drawing {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
}

/* Drawing viewer = PNG render of the PDF + anvaka/panzoom for gestures.
   Why this and not iframe-PDF: iOS Safari doesn't honour pinch on PDFs
   inside iframes. Server renders PDF → PNG (cached); image pinch works
   on every device. Original PDF stays intact for print/export. */
.stage-pdf, .drawing-viewer {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.dv-stage {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  touch-action: none;             /* panzoom owns all gestures */
}
.dv-image {
  display: block;
  position: absolute;
  top: 0; left: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transform-origin: 0 0;
  will-change: transform;         /* GPU-composite during pan/zoom */
}
.dv-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  font-style: italic;
  pointer-events: none;
}

/* ─── Card grid (branch levels) ─────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 16px;
  /* Stage is flex column with overflow hidden; the grid must fill the
     remaining height and scroll its own contents, otherwise long lists
     get clipped. min-height: 0 lets the flex item shrink below content. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Bottom padding so the last row isn't flush with the viewport edge */
  padding-bottom: 24px;
}
.card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, transform 120ms ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card-icon { font-size: 26px; line-height: 1; }
.card-title { font-weight: 700; font-size: 15px; color: var(--fg); }
.card-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.card-status { display: flex; gap: 4px; }

/* ─── "Where to find" — inline inside the Parts (or Spool) submenu row ───
   Builder reads it inline after the part pills: location summary for
   every piece + currently-focused part's detail. Read-only. */
.where-inline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: 4px;
  padding-left: 8px;
  font-size: 11px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.where-icon { font-size: 11px; flex-shrink: 0; }
.where-item {
  color: var(--fg);
  flex-shrink: 0;
}
.where-item.packed   { font-weight: 600; }
.where-item.unpacked { color: var(--fg-3); font-style: italic; }
.where-part {
  color: var(--amber);
  font-weight: 700;
  margin-right: 1px;
}
.where-loc { color: inherit; }
.where-detail {
  color: var(--fg);
  font-size: 11px;
  border-left: 1px solid var(--line);
  padding-left: 12px;
  margin-left: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.part-letter {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
  text-align: center;
}
.part-mk {
  font-family: ui-monospace, SF Mono, monospace;
  font-size: 12px;
  color: var(--fg-2);
}
.part-loc {
  color: var(--fg);
  font-size: 12px;
}

/* ─── Spool drawing overlay (status card on stage) ──────────────── */
.stage-overlay {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 20;
  pointer-events: none;
}
.status-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  min-width: 240px;
  pointer-events: auto;
}
.status-mk {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
}
.action {
  background: var(--amber);
  color: #1a0e02;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}
.action.accept { background: var(--green); color: #02120a; }
.action[disabled] { opacity: .7; cursor: default; }

/* ─── Chips ─────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.grey  { color: var(--grey);  background: rgba(93,107,120,0.15); }
.chip.blue  { color: var(--blue);  background: rgba(108,183,255,0.15); }
.chip.amber { color: var(--amber); background: rgba(240,168,82,0.15); }
.chip.green { color: var(--green); background: rgba(78,194,122,0.18); }

/* ─── Browser narrow (≤1100px) ───────────────────────────────────── */
@media (max-width: 1100px) {
  /* Hide the project metadata next to the brand — keep just the logo —
     so the search input + print + camera buttons stay on-screen. */
  .brand small { display: none; }
}

/* ─── Phone (≤600px) ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root { --topbar-h: 42px; --bc-h: 28px; }

  /* Topbar — keep all 4 items but shrink them; logo always visible */
  .topbar      { padding: 4px 8px; gap: 6px; }
  .brand-logo  { height: 18px; }
  .search      { padding: 0 6px; }
  .search input{ font-size: 12px; padding: 4px 4px; }
  /* Replace the long placeholder with a short one on tiny screens */
  .search input::placeholder { font-size: 11px; }

  /* Print + camera + user pill: shrink */
  .btn-print   { padding: 0 8px; height: 28px; font-size: 11px; gap: 4px; }
  .iconbtn     { width: 28px; height: 28px; font-size: 12px; }
  .user-pill   { height: 28px; padding: 0 8px; font-size: 11px; }
  .user-pill .user-email { max-width: 90px; }

  /* Breadcrumb crumbs shorter */
  .breadcrumb         { padding: 0 8px; }
  .breadcrumb .crumb  { padding: 2px 6px; font-size: 11px; }

  /* Submenu rows compress label width and font */
  .submenu-row    { padding: 2px 8px; gap: 6px; }
  .submenu-label  { width: 44px; font-size: 9px; letter-spacing: .5px; }
  .submenu-btn    { padding: 2px 8px; font-size: 10px; }

  /* Stage toolbar (above PDFs) shrinks */
  .stage-toolbar    { padding: 4px 8px; }
  .stage-toolbar h3 { font-size: 11px; }
  .stage-toolbar .sub { display: none; }

  /* Card grid switches to one column */
  .grid { grid-template-columns: 1fr; padding: 8px; gap: 6px; }

  /* Status overlay full-width at the bottom */
  .stage-overlay { right: 6px; bottom: 6px; left: 6px; }
  .status-card   { min-width: 0; }

  /* Where-info: scrollable inline rather than overflow-hidden */
  .where-inline { font-size: 10px; gap: 8px; }
  .where-detail { padding-left: 8px; font-size: 10px; }
}

/* ─── Tiny phones (≤380px) ───────────────────────────────────────── */
@media (max-width: 380px) {
  /* Free the brand logo from competing with the search by hiding camera */
  .iconbtn { display: none; }   /* drop camera button on tightest screens */
}