/* Letback — mobile layout layer.
 *
 * The design handoff had no width breakpoints at all: type scaled via clamp()
 * but every container, grid and the fixed nav were desktop-width, so phones got
 * ~60-90px of horizontal overflow. This file adds the missing responsive
 * behaviour WITHOUT touching the desktop design — every rule is inside a
 * max-width media query, so above 860px the original layout is byte-identical.
 *
 * All the source styling is inline, which outranks any stylesheet, so these
 * overrides need !important and target elements by their inline-style
 * signatures. That reads oddly but it is precise: the markup is frozen (the
 * design tool is no longer generating it), so these selectors are stable.
 */

@media (max-width: 860px) {

  /* ---- safety net: nothing may scroll the page sideways --------------- */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  img, canvas, svg { max-width: 100% !important; }

  /* ---- page containers: 52px/36px side padding is too wide for a phone  */
  [style*="margin:0 auto"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ---- the fixed nav: let it wrap onto two rows instead of overflowing  */
  nav[style*="position:fixed"],
  div[style*="position:fixed"][style*="z-index:50"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 16px !important;
    padding: 10px 14px !important;
  }
  /* the link cluster inside the nav */
  nav[style*="position:fixed"] > div,
  div[style*="position:fixed"][style*="z-index:50"] > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 16px !important;
  }
  /* keep the ALL TOOLS dropdown panel inside the viewport */
  nav[style*="position:fixed"] details > div,
  div[style*="position:fixed"] details > div {
    left: auto !important;
    right: 0 !important;
    min-width: min(252px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
  }
  /* the nav is taller once wrapped, so push the first section down */
  body > section:first-of-type,
  #dc-root > div[style*="max-width"] { padding-top: 128px !important; }

  /* ---- every grid becomes a single column ---------------------------- */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* the miner's result row is the flagship UI: keep score beside the name
     rather than stacking all five cells */
  [style*="grid-template-columns:52px 1fr auto auto auto"] {
    grid-template-columns: 44px 1fr !important;
    gap: 10px 12px !important;
    padding: 14px 14px !important;
  }

  /* ---- long mono strings may wrap, but leave deliberate single-line
     ellipsis truncation (text-overflow) exactly as authored ----------- */
  [style*="white-space:nowrap"]:not(button):not(a):not([style*="text-overflow"]) {
    white-space: normal !important;
  }

  /* ---- the hero visual panel shouldn't eat the whole screen ---------- */
  [style*="height:540px"] { height: 360px !important; }

  /* ---- flex toolbars and button rows wrap --------------------------- */
  [style*="display:flex"] { flex-wrap: wrap !important; }

  /* ---- inputs and textareas stay inside the viewport ---------------- */
  input:not([type="range"]):not([type="file"]), textarea, select {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---- tighten the biggest card paddings ---------------------------- */
  [style*="padding:34px 36px"],
  [style*="padding:38px 40px"],
  [style*="padding:40px 44px"] { padding: 22px 18px !important; }
}

/* Very narrow phones: drop the remaining side padding a little further. */
@media (max-width: 400px) {
  [style*="margin:0 auto"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}