/* ============================================================
   LUMEN MOBILE REDESIGN ,  new folder, desktop untouched.
   Loaded only on small screens via media attribute in app/index.html.
   ============================================================ */
@media (max-width: 820px) {
  :root {
    --m-touch: 44px;
    --m-gap: 12px;
    --m-radius: 14px;
  }

  /* Larger, comfortable tap targets everywhere */
  button, .btn, .ibtn, a, [role="button"] {
    min-height: var(--m-touch) !important;
    min-width: var(--m-touch) !important;
  }

  /* Override lumen-mobile pinned sizes */
  .top-nav .ibtn {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
  }
  .ibtn, .btn.icon {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
  }
  .btn, .btn.sm, .btn.primary {
    height: auto !important;
    min-height: var(--m-touch) !important;
    padding: 8px 14px !important;
  }
  #homeDesk .dash-qa .btn,
  #homeDesk .dash-qa .btn.primary {
    min-height: var(--m-touch) !important;
    height: auto !important;
  }
  .net-badge { min-height: var(--m-touch) !important; }

  /* Prevent horizontal overflow */
  html, body { overflow-x: hidden !important; }
  img, video, canvas, svg { max-width: 100% !important; height: auto !important; }

  /* Cards and panels breathe */
  .card, .panel, .tile, .box {
    border-radius: var(--m-radius) !important;
    padding: var(--m-gap) !important;
    margin-bottom: var(--m-gap) !important;
  }

  /* Typography tuned for small screens */
  body { font-size: 15px !important; line-height: 1.55 !important; }
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }

  /* Forms: full width inputs */
  input, textarea, select {
    width: 100% !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  /* …except the boxes, which are not fields.

     A checkbox and a radio are a fixed mark, not a line of text. The
     rule above handed them the field's whole width, so inside a label
     that sits beside a word they took the entire line and pushed that
     word into a column a few pixels wide. That is what made the
     whiteboard's settings read as "Expor / t PNG", "Temp / lates" and
     "Rese / t view", and what turned the Compact / Medium choice into
     two rows with a sliver of a third: the mark was as wide as the
     label, so the label had nowhere to stand.

     They keep their own size, and they do not inherit the field's
     padding either - padding on a checkbox is the padding of a box
     drawn around a mark, and it is why the mark read as an empty
     square in a row of its own. */
  input[type="checkbox"],
  input[type="radio"] {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    flex: none !important;
    accent-color: var(--accent);
  }

  /* Bottom safe-area padding for fixed bars */
  .view, main, #app {
    padding-bottom: calc(var(--safe-b, 0px) + 12px) !important;
  }

  /* Reduce dense grids to single column */
  .grid, .tool-grid, .cards {
    grid-template-columns: 1fr !important;
    gap: var(--m-gap) !important;
  }

  /* Scrollable horizontal rows keep momentum */
  .row, .topbar {
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
  }

  /* The rail is a COLUMN, not a row.

     It was in the list above, so it was given a horizontal scroll
     snap - which it cannot use, because it scrolls vertically. Worse,
     the rail's own rule clips its overflow, so with the snap asking
     for horizontal movement and the clip refusing it, the column of
     icons could not be reached at all: the rail was a list with no
     way to scroll it. It scrolls vertically here, and the snap goes
     with the content. */
  .rail {
    scroll-snap-type: none !important;
  }
}