/* Page-specific styles for the pip calculator.
   Base layout, colours and the tool grid come from styles.css. */

/* Restore the standard meaning of the HTML hidden attribute.
   The shared .field rule (display: flex) would otherwise out-specify it. */
[hidden] { display: none !important; }

.span2 { grid-column: 1 / -1; }

/* ---------- results ---------- */

.results .result + .result { margin-top: 0; }

.rvalue {
  overflow-wrap: anywhere;
}

/* ---------- data table ---------- */

.pip-table {
  margin-top: 40px;
}

.pip-table h2 {
  font-size: 20px;
  margin: 0 0 12px;
}

.table-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 720px;
  overflow-wrap: anywhere;
  margin: 0 0 12px;
}

.pip-table .table-note:last-child {
  margin: 12px 0 0;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

#pipTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 14px;
}

#pipTable th,
#pipTable td {
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

#pipTable th:first-child,
#pipTable td:first-child {
  text-align: left;
}

#pipTable thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#pipTable tbody tr:last-child td {
  border-bottom: 0;
}

#pipTable tbody tr:hover {
  background: var(--accent-soft);
}

#pipTable td.num {
  font-variant-numeric: tabular-nums;
}

#pipTable td.pair {
  font-weight: 600;
}

/* ---------- responsive ---------- */

/* Two input columns are dropped by default, not by a media query.
   Why unconditional: iOS Safari in "Request Desktop Website" mode reports a
   ~980px viewport, so a max-width rule never matches there and the table
   keeps its seven columns and its horizontal scrollbar. Hiding by default and
   restoring only on genuinely wide screens makes the narrow layout the safe
   fallback rather than something a browser has to opt into.

   Nothing is lost: every pip-value cell already names its quote currency
   ("10.00 USD"), so the Quote column repeats it, and contract size is a
   reference figure that /api/instruments returns in full. */
#pipTable .c-contract { display: none !important; }
#pipTable .c-quote { display: none !important; }

/* Short heading for phone width, same trick as the risk/reward table. */
#pipTable .th-short { display: none; }

@media (max-width: 900px) {
  #pipTable .th-long { display: none !important; }
  #pipTable .th-short { display: inline !important; }

  .pip-table h2 { font-size: 18px; }

  /* The lot sizes stay in the column heading on wide screens; at phone width
     "(1.0)" would set the column width, so only the word is kept. Likewise the
     currency code leaves the cells - the note above already states that every
     figure is in the quote currency. */
  #pipTable .lot-suffix { display: none !important; }
  #pipTable .ccy { display: none !important; }

  #pipTable {
    font-size: 12.5px;
    min-width: 0;
  }

  #pipTable th,
  #pipTable td { padding: 7px 6px; }

  .table-note { font-size: 13px; }
}

/* Wide desktop gets the two reference columns back. 1100px is comfortably
   past any phone, tablet or desktop-mode mobile viewport, so this only ever
   fires for a real monitor. */
@media (min-width: 1100px) {
  #pipTable .c-contract { display: table-cell !important; }
  #pipTable .c-quote { display: table-cell !important; }
}