/* Tradello — legibility and touch floor.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * 6 Aug 2026. An audit of every page at 360, 390, 768 and 1280px found 810
 * formatting defects. They fell into exactly three families, and each family
 * had one cause, so each is fixed once here rather than page by page:
 *
 *   TINY       160 places rendering label text at 8.5–11px. On a phone that is
 *              not "small", it is unreadable. Trade counts, stage chips, value
 *              captions and grade badges — the very things a buyer scans.
 *
 *   TAPTARGET  187 links and chips under 34px tall on a phone. Apple asks for
 *              44px, Google for 48dp. A 15px footer link is a coin toss.
 *
 *   OVERFLOW   /manage was 871px wide inside a 390px screen, so the admin
 *              console scrolled sideways and the charts ran off the edge. The
 *              cause is the classic CSS Grid trap: a grid item defaults to
 *              min-width:auto, so one long unbreakable string inside it forces
 *              the whole column wider than the screen.
 *
 * Loaded LAST, after each page's own <style>, so these floors win at equal
 * specificity. font-size uses !important deliberately: a floor that any page
 * can accidentally undercut is not a floor.
 *
 * Nothing here changes the desktop design. Every rule is inside a width query
 * except the grid safety, which is invisible until something would overflow.
 */

/* ------------------------------------------------------------------ */
/* 1. Nothing may force the page wider than the screen.                */
/* ------------------------------------------------------------------ */
html, body { max-width: 100%; }

/* A grid or flex child will not shrink below its content unless told it may.
   This is the single line that stops one long word taking the layout with it. */
.app > *, .shell > *, .row > *, .wrap > *, .grid > *, .kpis > *,
.stiles > *, .main, .side, .bar, .bar .track {
  min-width: 0;
}

/* Long unbroken strings — references, URLs, emails — must wrap rather than
   push. Confined to content, so it cannot affect nav or buttons. */
.wrap p, .wrap li, .card, .lead, .li, .tbl td, .route .val, .note, .empty {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* A genuinely wide table scrolls inside its own box, not the whole page. */
.tbl, .tblwrap, .table-scroll { max-width: 100%; overflow-x: auto; }

/* ------------------------------------------------------------------ */
/* 2. Legibility floor — phones and small tablets.                     */
/* ------------------------------------------------------------------ */
@media (max-width: 560px) {
  /* Micro-labels found at 8.5–11px by tools/formatcheck.cjs. */
  .flab, .l, .dc, .gp, .ptag, .pl, .tc, .gr, .fl, .badge, .stage,
  .mtag, .mmcred, .tdl-mm-cred, .lb, .ct, .sub, .meta, .small,
  small, figcaption {
    font-size: 12px !important;
    line-height: 1.45;
  }

  /* Body copy and list items never below 15px — this is the text people
     actually read, and 13px prose on a phone is why people zoom. */
  p, li, td, .val, .txt { font-size: 15px; line-height: 1.6; }

  /* Headings stay proportionate rather than shrinking into the body copy. */
  h1 { font-size: 26px; line-height: 1.25; }
  h2 { font-size: 19px; line-height: 1.3; }
  h3 { font-size: 16px; }
}

/* ------------------------------------------------------------------ */
/* 3. Touch targets — anything meant to be tapped gets a real hit area. */
/* ------------------------------------------------------------------ */
@media (max-width: 560px) {
  /* Rows of links and buttons become FLEX rows first.
     
     6 Aug 2026 — my own bug, found by the COLLIDE check I had named in
     tools/formatcheck.cjs and never written. Padding an inline element does
     not grow the line box it sits in, so two padded inline links on wrapped
     lines climb over each other. On /suppliers the nav links overlapped by
     100%. Making the CONTAINER a flex row with a real gap makes overlap
     structurally impossible, rather than hoping the padding happens to fit. */
  nav .nav, nav .right, .footrow, .footrow .right, .cta, .demofoot,
  .strip, .links, .more, .navlinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    row-gap: 10px;
  }

  /* Two full-width buttons stack. Side by side on a phone they wrap to two
     lines each, align on their BASELINE rather than their top, and the taller
     one sits on top of the shorter one — which is exactly what the home page
     was doing. */
  .demofoot, .cta {
    flex-direction: column;
    align-items: stretch;
  }
  .demofoot .btn, .cta .btn, .cta .ghost {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0;
  }

  /* A link that is a direct child of one of those flex rows can safely have a
     hit area, because the row accounts for its full height. */
  nav .nav > a, nav .right > a, .footrow > a, .footrow .right > a,
  .cta > a, .demofoot > a, .more > a, .link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    line-height: 1.3;
  }

  /* An INLINE link inside a run of text keeps its normal line box. It is read
     as part of a sentence, and giving it a height or forcing it onto its own
     row would break the sentence. A little extra leading is enough to make it
     comfortably tappable without changing how it reads. */
  footer, footer .wrap, .legalrow { line-height: 1.9; }

  /* Filter chips and area pills — the main way anyone navigates the shelf. */
  .chip, .pill {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Buttons and the buy controls. Nothing that takes money should be fiddly. */
  .btn, .buy, button, input[type="submit"], .go, .ghost {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  /* Checkbox rows ("Add to basket") need a tappable label, not a 13px box. */
  .pick, label.pick { display: inline-flex; align-items: center; min-height: 40px; }
  .pick input[type="checkbox"] { width: 20px; height: 20px; margin-right: 8px; }

  /* Form fields big enough to hit, and 16px so iOS does not zoom on focus. */
  input[type="text"], input[type="email"], input[type="search"],
  select, textarea, .srch {
    min-height: 44px;
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------ */
/* 3b. The stragglers the first pass missed.                           */
/* Found by re-running tools/formatcheck.cjs after the rules above.    */
/* ------------------------------------------------------------------ */
@media (max-width: 560px) {
  /* THE IMPORTANT ONE. A 13x13px consent checkbox on the page that takes
     money. Nobody should have to aim to agree to terms. */
  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px; min-width: 22px; vertical-align: middle;
  }
  input[type="checkbox"] + label, label > input[type="checkbox"] { vertical-align: middle; }
  /* .tick is the consent row on /pack — a checkbox and a separate <label for>,
     not a wrapping label, so the ROW is what has to be tappable. */
  .agree, .consent, .terms-row, .tick {
    min-height: 44px; display: flex; align-items: flex-start; gap: 12px;
  }
  .tick label { flex: 1; padding-top: 2px; }

  /* The consent row on the payment page. The box itself is 22px, which is the
     platform standard — what has to be tappable is the whole ROW, so the label
     wrapping it gets the 44px, not the box. */
  label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 4px 0; cursor: pointer;
  }

  /* Breadcrumbs, back links, logos and inline calls to action. All were
     14–31px tall, which on a phone is a guess rather than a tap. */
  /* The wordmark in the top bar is the "go home" link on every page and it
     carries no class of its own, so a class-based rule never reached it. It
     rendered 175x24 — wide, but only 24px tall. Target it by position. */
  .crumb a, .tbback, .maplink, .sample a, .allin a,
  a.logo, a.tblogo, .tbin > a, .topbar a, .tbmid a, .more a, .morewrap a,
  footer .right a, .footrow .right a {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    /* 44px, not 24px. Everything here is border-box, so a min-height BELOW the
       element's natural height does nothing at all — these links measured 38px
       on a 390px screen with this rule already applied, which is why they still
       felt like a guess. 44px is the first value that actually bites. */
    min-height: 44px;
  }

  /* A link that sits on its own line and acts as a button gets a button's
     hit area, whatever it happens to be called. */
  .wrap > a, section > a, .hd > a, .cta > a { min-height: 44px; }
}

/* ------------------------------------------------------------------ */
/* 3c. Multi-column grids that never collapse on a phone.              */
/* ------------------------------------------------------------------ */
/*
 * .dbody on the home page is a hard two-column grid with no breakpoint at all.
 * At 390px each column holds about 135px of text, so a sentence renders one
 * word per line — "Those come / from the / contractor / once you are / in the
 * / conversation". .steps is worse: four columns on a phone.
 *
 * A column of prose needs ~45 characters to read as a sentence. Below that it
 * is a word list.
 */
@media (max-width: 560px) {
  .dbody, .steps, .stats, .stiles, .cols, .split, .two, .three {
    grid-template-columns: 1fr !important;
  }
  /* An item that spanned both columns must span the single one. */
  .fi.full, .full, [style*="grid-column"] { grid-column: 1 / -1 !important; }

  /* Admin dashboards can keep two, but never six. */
  .kpis { grid-template-columns: 1fr 1fr !important; }
}

/* ------------------------------------------------------------------ */
/* 4. FILTER ROWS SCROLL SIDEWAYS INSTEAD OF STACKING INTO A WALL.     */
/* ------------------------------------------------------------------ */
/*
 * The shelf has 39 trades. Wrapped, that is about twenty rows of chips, and
 * with Grade, Stage and Market above it the filter block filled an entire
 * phone screen and then some — you scrolled for a minute before reaching a
 * single lead. The filters were burying the product they exist to reveal.
 *
 * One swipeable line per filter is the pattern people already know from every
 * shopping app. Five short rows instead of twenty-five.
 */
@media (max-width: 560px) {
  .frow, .chips, .areawrap, .strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-left: 16px;
    padding-bottom: 2px;
  }
  .frow::-webkit-scrollbar, .chips::-webkit-scrollbar,
  .areawrap::-webkit-scrollbar, .strip::-webkit-scrollbar { display: none; height: 0; }

  /* .picker on /trades is a FORM — two selects and a button — not a chip
     strip. Squeezed onto one line the selects overlapped each other by 14px.
     A three-field form on a phone stacks; that is all it ever wants to do. */
  .picker {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .picker > select, .picker > button, .picker > input, .picker > .go {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }

  /* A chip in a scroller must not shrink or wrap, or the row collapses. */
  .frow > *, .chips > *, .areawrap > *, .strip > * { flex: 0 0 auto; }
  .chip, .pill { white-space: nowrap; }

  /* The row label stays put while the chips move under it. */
  .flab { position: sticky; left: 0; z-index: 2; padding-right: 8px;
          background: linear-gradient(90deg, var(--bg, #f6f8fa) 78%, transparent); }

  /* A little breathing room at the end so the last chip is not flush. */
  .areawrap, .frow, .chips { padding-right: 16px; }
}