/* Responsive layer shared by every page.
 *
 * Loaded after each page's inline <style>, so these rules win without needing
 * !important. Desktop layout is untouched; everything here is inside a query.
 *
 * Two rules drive the whole file:
 *   1. Nothing may exceed the viewport width - horizontal scrolling a whole
 *      page is the single worst mobile failure.
 *   2. Anything tappable is at least 44px tall (Apple HIG / WCAG 2.5.5).
 */

/* ---- universal safety: never let a wide child stretch the page ---------- */
html, body { max-width: 100%; }
img, canvas, svg, table { max-width: 100%; }

/* Wide data tables scroll inside their own box, never the page body. */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ======================= TABLET AND BELOW ============================== */
@media (max-width: 900px) {
  main { padding-left: 14px; padding-right: 14px; }
  .card { padding: 15px 14px; }
}

/* ======================= PHONES ======================================== */
@media (max-width: 640px) {

  /* --- typography: 16px on inputs stops iOS zooming in on focus --------- */
  body { font-size: 15px; }
  input, select, textarea { font-size: 16px !important; }

  /* --- header: wrap cleanly, keep it out of the way -------------------- */
  header { padding: 9px 14px; gap: 8px; }
  h1 { font-size: 16px; }
  header .pill { font-size: 10px; padding: 3px 8px; }
  /* The pro header holds a clock, a timestamp and two buttons. On a phone the
     timestamps are noise that would push the content down a whole row. */
  #clock, #updated, #chartMeta { font-size: 10.5px; }
  #updated { display: none; }

  /* --- 44px tap targets ------------------------------------------------
   * `header a` is included because the pro dashboard's "Plan view" link sits
   * directly in the header rather than inside <nav>. */
  nav a, header a, .btn, button, .quick button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .quick button { padding: 0 15px; font-size: 13px; }
  .btn { padding: 0 14px; }
  button.go { min-height: 50px; width: 100%; font-size: 16px; }
  .btn.paper { width: 100%; min-height: 50px; font-size: 15px; }

  /* --- plan page: the capital form goes full width --------------------- */
  .inputs { gap: 11px; }
  .field { flex-grow: 1; flex-shrink: 1; flex-basis: 100%; }
  .field input, .field select { width: 100%; }
  .field.small { flex-basis: calc(50% - 6px); }
  .field.small input, .field.small select { width: 100%; }
  .quick { gap: 7px; }

  /* --- order ticket: 4 across does not fit 375px, so 2 x 2 ------------- */
  .row { grid-template-columns: repeat(2, 1fr) !important; gap: 9px; }
  .box .v { font-size: 17px; }

  /* --- the three outcome boxes stay side by side but shrink to fit ----- */
  .money { grid-template-columns: repeat(3, 1fr) !important; gap: 7px; }
  .mbox { padding: 9px 5px; }
  .mbox .k { font-size: 9px; letter-spacing: .3px; }
  .mbox .v { font-size: 16px; }

  /* --- pro dashboard: five metric cells become a readable grid --------- */
  .grid5, .grid6 { grid-template-columns: repeat(3, 1fr) !important; gap: 7px; }
  .stats { grid-template-columns: repeat(2, 1fr); }

  /* --- paper account KPIs scroll as a row instead of wrapping raggedly - */
  .papbar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .kpi { min-width: 0; }
  .kpi .v { font-size: 16px; }
  .papbar .spacer { display: none; }
  .papbar .btn { grid-column: span 1; }

  /* --- TABLES -> CARDS -------------------------------------------------
   * A 9-column table is unreadable at 375px even with scrolling. Each row
   * becomes a stacked card, with the column name rendered from data-label.
   * Cells with no label (action buttons) span the full width.
   */
  .ptab, .ptab thead, .ptab tbody, .ptab tr, .ptab th, .ptab td { display: block; }
  .ptab thead { display: none; }
  .ptab tr {
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px 12px;
    margin-bottom: 9px;
  }
  .ptab td {
    text-align: right;
    border: 0;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 26px;
  }
  .ptab td::before {
    content: attr(data-label);
    text-align: left;
    color: var(--dim);
    font-size: 10px;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: system-ui, sans-serif;
  }
  /* first cell = the instrument, shown as the card heading */
  .ptab td:first-child {
    justify-content: flex-start;
    font-size: 15px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .ptab td:first-child::before { content: none; }
  .ptab td:last-child { padding-top: 9px; }
  .ptab td:last-child::before { content: none; }
  .ptab td:last-child .btn { width: 100%; }

  /* --- watchlist keeps a real table (13 columns of numbers), but scrolls */
  #watch { font-size: 12px; }
  #watch th, #watch td { padding: 6px 7px; white-space: nowrap; }

  /* --- misc ------------------------------------------------------------ */
  .glos { grid-template-columns: 1fr; }
  .steps li { font-size: 13.5px; }
  ul.lessons li { font-size: 13.5px; }
  .why { font-size: 12.5px; }
  .verdict { font-size: 14px; padding: 13px 14px; }
  .trade { padding: 14px 13px; }
  .trade .sym { font-size: 18px; }
  canvas { height: auto; }
}

/* ---- genuinely tiny screens only. 375px phones are handled above, and
   stacking there would waste a lot of vertical space. ------------------- */
@media (max-width: 340px) {
  .money { grid-template-columns: 1fr 1fr; }
  .money .mbox:first-child { grid-column: span 2; }
  .grid5, .grid6 { grid-template-columns: repeat(2, 1fr) !important; }
  .field.small { flex-basis: 100%; }
}

/* ---- landscape phones: reclaim vertical space -------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  header { position: static; }
  main { padding-top: 10px; }
}