/* FieldSync — phone layout.
 *
 * The rest of the app is built for the iPad an official actually scores on,
 * and it is right for that. A phone is half the width, and the tablet layout
 * does not gracefully degrade into it — it broke in a specific, measurable
 * way. Measured on a Galaxy Note 10+ (411px CSS wide, 358px inside the card),
 * the check-in table's own column widths came out:
 *
 *     Order 80px + Check In 194px  ->  Athlete 84px
 *
 * 84px cannot hold "Freya Lindqvist", so the browser force-broke it INSIDE
 * the surname: "Freya Lindqvi / st". The fix is not smaller type; it is
 * giving the name the width, taken back off two columns that were not using
 * it. Measured after: Athlete 168px, zero wrapped names.
 *
 * Loaded LAST so it wins without touching six other stylesheets, and capped
 * at 560px so no tablet is affected — the iPad Air is 820px and the widest
 * phone in landscape is under 560. Selectors name specific tables rather than
 * matching on inline widths, so no other screen is caught by accident.
 *
 * Deliberately NOT touched: the Easy Mode sheet's MARK columns. Those were
 * already tuned for a phone at a 700px breakpoint in styles.css, where the
 * comment explains that a mark column needs ~104px because an English mark
 * ("137-04.25") is wider than a metric one and a circled best needs the
 * border and padding inside the cell. That sheet is genuinely wider than a
 * phone and already scrolls inside its own wrapper (app-shell.css). Squeezing
 * those columns here would clip real marks — a worse bug than scrolling. What
 * IS adjusted below is only the furniture around them: a POS column holding
 * one digit in 56px, and an affiliation wrapping to two lines and so setting
 * the height of every row.
 */
@media (max-width: 560px) {

  /* ── Card headers: stack instead of competing ───────────────────────────
     A three-line title sharing a row with a button column squeezed "Warm Up
     Timer" down to "Warm / Up / Timer" and still left the title wrapping. On
     a phone they get their own rows and the buttons split the width evenly. */
  .cardHd {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  .cardHd > div:last-child { width: 100%; flex-wrap: wrap; }
  .cardHd > div:last-child .btn { flex: 1 1 auto; white-space: nowrap; }
  .cardTitle { font-size: 19px; line-height: 1.25; }
  .cardHd .muted { font-size: 12.5px; line-height: 1.3; }

  /* ── Check-in table ─────────────────────────────────────────────────────
     table-layout:fixed so these widths are honoured exactly rather than being
     renegotiated against content, and !important because the widths they
     override are inline style attributes on the <th>, which no stylesheet can
     otherwise outrank.

     The budget, on a 358px card: 38 order + 152 check-in = 168 for the name.
     Affiliation and Walk-Up are already display:none at this width (the
     affiliation renders under the name instead), so nothing else is competing. */
  #checkinTable { table-layout: fixed; }
  #checkinTable thead th:first-child { width: 38px !important; }
  #checkinTable #checkinWalkupTh { width: 62px !important; }
  #checkinTable #checkinStartHeightTh { width: 104px !important; }
  #checkinTable thead th:last-child { width: 152px !important; }
  #checkinTable th, #checkinTable td { padding-left: 7px; padding-right: 7px; }

  /* "ORDER" needs 44px of glyphs and has 38px of column, so it ran straight
     into "ATHLETE" with no gap. A phone gets the conventional short form. */
  #checkinTable thead th:first-child { font-size: 0; }
  #checkinTable thead th:first-child::after {
    content: "#";
    font-size: 11px;
    letter-spacing: normal;
  }

  /* A name may wrap between words; it may never split inside one, which is
     what made the roster look broken rather than merely tight. break-word
     stays as a last resort so a freak 25-character single token still cannot
     push the table sideways. */
  #checkinBody td:nth-child(2) {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
  #checkinBody td:nth-child(2) b { font-size: 15px; line-height: 1.2; }
  .checkinAffInline { font-size: 12px; line-height: 1.25; display: block; }

  /* Tag chip and Here button share one row and must stay on it — wrapping
     puts them in a column and doubles the height of every row. 92px still
     clears the 44px minimum tap target by a wide margin, and app-shell.css
     keeps the 52px height that makes it thumb-friendly, so this trims width
     the label never used rather than shrinking the target. */
  .checkinActionCell { flex-wrap: nowrap; gap: 5px; justify-content: flex-end; }
  .checkinActionCell .nfcChip { min-width: 40px; flex: 0 0 auto; padding: 0 5px; font-size: 15px; }
  .checkinActionCell .checkBtn { min-width: 92px; flex: 0 0 auto; padding: 0 9px; white-space: nowrap; }

  /* ── Easy score sheet: the furniture, not the marks ─────────────────────
     POS holds a single digit and was given 56px. Reclaiming 22px of that is
     22px more of the next mark column, which is the column an official is
     actually reaching for.

     The affiliation was wrapping ("Summit Athletic / Club", "Harborview /
     College") and, because it sits under the name in the same cell, it set
     the height of the whole row — four athletes filled the screen on an
     eight-athlete flight. One line with an ellipsis gets that back. The name
     above it is never truncated: it stays the thing you identify the row by,
     and the affiliation only has to disambiguate two athletes who share one. */
  #easySheetTable th.easyPosTh { width: 34px !important; min-width: 34px !important; }
  #easySheetTable thead th { font-size: 10.5px; letter-spacing: .02em; }
  #easySheetTable td.easyAthleteCell .muted {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
  }

  /* ── Standard scoring: the attempts table ───────────────────────────────
     Same disease as check-in, same cure. The column holds one digit but the
     word "ATTEMPT" is 58px of header, and a column cannot be narrower than
     its widest cell — so 80px went to a "1" and the athlete was left 138px,
     enough to cut "Harborview College" down to "Harborview". Shrinking the
     header text is what lets the column shrink: 44px here hands the athlete
     174px, and "ATT" is still the same word to anyone reading a score sheet. */
  #attemptsTable thead th:first-child { width: 44px !important; font-size: 0; }
  #attemptsTable thead th:first-child::after {
    content: "ATT";
    font-size: 10.5px;
    letter-spacing: .04em;
  }
  #attemptsTable th, #attemptsTable td { padding-left: 7px; padding-right: 7px; }
  #attemptsTable td:nth-child(2) {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
  #attemptsTable td:nth-child(2) b { font-size: 15px; line-height: 1.2; }
  #attemptsTable td:nth-child(2) .muted { font-size: 12px; line-height: 1.25; }

  /* ── Buttons: never break a label mid-phrase ────────────────────────────
     "Save Order" sat in a 220px flex row next to "Cancel". Both are
     shrinkable, both were squeezed, and the label came out as "Save / Order".
     A button label is a phrase, not prose: it should never wrap. Holding it
     on one line means the width has to come from somewhere, so it comes off
     the horizontal padding — 20px was tablet-generous and 14px still reads as
     a button. Measured: "Save Order" needs 118px at 14px padding, which is
     exactly what the flex row was already giving it. */
  .btn { white-space: nowrap; padding-left: 14px; padding-right: 14px; }

  /* ── Edit Running Order ─────────────────────────────────────────────────
     This is the one table that runs the name and affiliation together on one
     line, so a long pair wrapped into "Freya Lindqvist Northbay / State".
     Stacking the affiliation under the name is both tidier and what every
     other table on the page already does. */
  #editOrderBody td:nth-child(3) .muted { display: block; font-size: 12px; line-height: 1.25; }

  /* ── Headlines sized off the wrong axis ─────────────────────────────────
     .rsHeadline is clamp(28px, 5vh, 50px) — keyed to viewport HEIGHT. A phone
     is tall and narrow, so it scores nearly as much height as a tablet and
     gets nearly the same headline, in a third of the width: "Let's run a
     great meet." came out over three lines and pushed the search box 470px
     down an 788px screen. On a phone the constraint is width, so key it to
     width. */
  .rsHeadline { font-size: clamp(22px, 6.6vw, 30px) !important; }
  .rsSubhead { font-size: 14px; line-height: 1.45; }

  /* ── Clear the bottom navigation ────────────────────────────────────────
     #runBottomNav is fixed and 106px tall, so without this the last athlete
     in the list cannot be scrolled out from under it. */
  #runEasyView .tableWrap,
  #runCheckinView .tableWrap { padding-bottom: 84px; }
}