/* ============================================================
   Mobile layout — the five live site/*.html pages only.
   NOT linked from slice-0-1.html; nothing here may touch a file
   under app/css/ that slice-0-1.html shares, so every fix lives
   here instead and simply hands control back to the existing
   sheets above it once the phone case no longer applies.

   Mobile-first, on purpose: every rule below starts as the phone
   rule with no media guard, because this file is loaded last and
   phones are what it exists to fix. A `@media (min-width: …)`
   then hands each piece back to the wider layout the other sheets
   already draw — never the other way round, and never a stack of
   `max-width` patches.

   Two breakpoints, two different reasons:
     - 40rem (640px) is this file's own line between a call/queue
       ROW and a call/queue CARD. Deliberately not shell.css's 52rem
       nav breakpoint — an iPad in portrait (768px) has no room for
       the 13.5rem rail (so it still gets the bottom tab bar, via
       shell.css, untouched) but has ample room for the table (so
       the table returns here well before the rail does).
     - 52rem matches list.css's own toolbar-wrap breakpoint, only
       for the one cosmetic fix that rides on it (.count below).
   ============================================================ */

/* ---------- 1 & 3: calls/queue rows become cards below 40rem ----------
   Every existing class (.c-when, .c-who, .c-num, .c-why, .c-len,
   .c-state, .c-owner, .c-back, .c-work) stays exactly as calls.js and
   queue.js emit it. list.css/queue.css already hide .c-who, .c-num,
   .c-len, .c-owner and .c-back below 52rem and already show
   `.c-why .sub` there -- this section only turns the remaining table
   into a stack of cards and lets the status pill (.c-state / .c-work)
   sit beside the time instead of in an off-screen column. */
table.calls { display: block; }
table.calls thead { display: none; }
table.calls tbody { display: grid; gap: var(--sp-50); }

table.calls tbody tr {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "when state" "why why";
  align-items: center;
  column-gap: var(--sp-70);
  row-gap: var(--sp-70);
  padding: var(--sp-75) var(--sp-80);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.c-when {
  grid-area: when;
  font-size: var(--fs-70);
  color: var(--text-faint);
}
.c-why { grid-area: why; }
.c-state, .c-work { grid-area: state; }

/* .c-state holds up to two pills as plain inline siblings (calls.js
   emits them side by side, relying on list.css's own white-space:nowrap
   to keep them on one line at the widths list.css was built for). A
   card is narrower than that pair needs, so stack them instead of
   letting the row force the card wider than the screen -- the actual
   bug this file exists to fix. */
.c-state {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--sp-30);
}
.c-state .pill + .pill { margin-left: 0; margin-top: 0; font-size: var(--fs-66); }

/* The subject is the headline here, not a truncated column: let it
   wrap instead of ellipsing mid-word, and give it the weight a
   headline needs. Queue rows already wrap their own `.why` at this
   width (queue.css, more specific than this) -- this only fixes the
   plain calls table, which never got that treatment. */
.c-why .why {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: var(--fs-120);
  line-height: 1.3;
  font-weight: 600;
}

/* Caller info (phone, duration) is reference data for the detail page,
   not the list -- bury it well below the subject line. list.css already
   shows `.c-why .sub` below its own 52rem breakpoint; this only shrinks
   it further for the card view specifically. */
.c-why .sub {
  font-size: var(--fs-70);
  color: var(--text-faint);
}

@media (min-width: 40rem) {
  table.calls { display: table; }
  table.calls thead { display: table-header-group; }
  table.calls tbody { display: table-row-group; }

  table.calls tbody tr {
    display: table-row;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .c-when { font-size: inherit; }

  .c-why .why {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
  }
  .c-why .sub { font-size: var(--fs-74); }

  .c-state { display: block; }
  .c-state .pill + .pill { margin-left: var(--sp-30); margin-top: 0; font-size: var(--fs-68); }
}

/* ---------- 2: tap targets, brought up to 44px on any coarse pointer ----------
   Keyed on pointer type, via the same `@media (hover: none) and
   (pointer: coarse)` query tokens.css already uses above for its own
   16px input-zoom fix -- not on viewport width. An iPad in portrait is
   768px wide, past this file's own 40rem card breakpoint, but it is
   still a touch device and still needs a 44px target; a mouse at any
   width, including a narrow one, never does. Because the rule now lives
   only inside this media query, a fine-pointer device simply keeps
   whatever height list.css/shell.css/detail.css/queue.css already give
   these controls -- no reset back to a "desktop" size is needed here.

   Padding and min-height, never font-size -- tokens.css already pins
   form controls to 16px on coarse pointers to stop iOS zooming on
   focus, and changing a control's font-size here would fight that. */
@media (hover: none) and (pointer: coarse) {
  .chip, .qact, .btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .icon-btn { width: 44px; height: 44px; }
  #propSel, .search input { min-height: 44px; }
}

/* ---------- 4: .count breathing room when it wraps to its own row ----------
   Rides on list.css's own 52rem toolbar-wrap breakpoint, not the
   40rem one above -- that's the width where .count starts landing on
   its own line flush against the edge. */
.count { margin-right: var(--sp-50); }

@media (min-width: 52rem) {
  .count { margin-right: 0; }
}