/* ---------------------------------------------------------------------------
   The shell on a phone.

   **Loaded only on a touch screen up to 900px wide** — the `media` attribute on
   its <link> in base.html is `(pointer: coarse) and (max-width: 900px)`, so a
   desktop browser never applies a line of it, however narrow the window. The
   same contract as table-mobile.css: everything here overrides app.css, and
   the desktop shell is exactly what app.css says it is.

   Why: the 240px rail beside a 390px screen left the content 150px and pushed
   every page out to ~700px, so the browser zoomed the whole site out to fit.
   Here the rail becomes a tab bar along the bottom — six icons, which is what
   a phone's thumb expects to find there — the topbar keeps only what fits,
   and the document scrolls rather than `.main`, so the browser's own bars can
   collapse on scroll the way they do on every other site.
   --------------------------------------------------------------------------- */

:root { --tabbar-h: 58px; }

.app {
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar"
    "main";
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  transition: none;
}

.main {
  overflow: visible;
  padding: 16px 14px calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom));
  background-attachment: scroll;
}

/* Nothing in it, and a phone has no room for a strip of nothing. */
.footer { display: none; }

/* --- the rail, as a tab bar ----------------------------------------------- */
.sidebar {
  position: fixed;
  inset: auto 0 0 0;
  top: auto;
  z-index: 20;
  height: auto;
  overflow: visible;
  border-right: 0;
  border-top: 1px solid var(--edge);
  padding-bottom: env(safe-area-inset-bottom);
}

.sidebar-logo { display: none; }

.sidebar-nav,
html.sidebar-collapsed .sidebar-nav {
  flex-direction: row;
  justify-content: space-around;
  gap: 0;
  padding: 0 4px;
}

.sidebar-nav a,
html.sidebar-collapsed .sidebar-nav a {
  flex: 1;
  min-width: 0;
  height: var(--tabbar-h);
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: 0;
  font-size: 10.5px;
  letter-spacing: .01em;
}

/* The labels stay, collapsed or not: the rail's collapse is a desktop choice
   about width, and under an icon there is room for a word. */
html.sidebar-collapsed .sidebar-nav a > span { display: block; }

.sidebar-nav a > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-nav .nav-icon { width: 21px; height: 21px; }

/* The active tab: tinted, with the bar along its top edge where the rail had
   it down the left. */
.sidebar-nav a.active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.sidebar-nav a.active::before,
html.sidebar-collapsed .sidebar-nav a.active::before {
  display: block;
  inset: 0 22% auto 22%;
  width: auto;
  height: 3px;
  border-radius: 0 0 3px 3px;
}

/* No hover on a finger: a tapped tab would otherwise keep a wash. */
.sidebar-nav a:hover { background: transparent; color: var(--muted); }
.sidebar-nav a.active:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary-ink);
}

/* --- topbar ---------------------------------------------------------------- */
.topbar {
  padding: 0 12px;
  gap: 10px;
}

/* There is no rail to collapse. */
.sidebar-toggle { display: none; }

.topbar-left { display: none; }

.topbar-right {
  flex: 1;
  min-width: 0;
  gap: 10px;
}

/* The "you are in a game" chip leads, takes what room is left, and clips its
   wording rather than pushing the account controls off the screen. */
.playing {
  min-width: 0;
  margin-right: auto;
}

.playing__what {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions { flex-shrink: 0; }

.topbar-user { padding: 3px; }
.topbar-user-name { display: none; }
.topbar-user-avatar { width: 30px; height: 30px; }

/* --- pages ------------------------------------------------------------------
   Most of the pages are already grids of `auto-fit` columns and fold to one on
   their own; what is below is the handful that had a width of their own. */

/* **A table scrolls sideways inside its panel** rather than being reflowed.
   The hand list is eight columns of things you compare down the page — pips,
   verbs, a result — and stacking each row into a card would lose exactly the
   reading it exists for. The rows keep their shape; the panel lets you pan. */
.panel:has(> .data-table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table th,
.data-table td { padding-left: .7rem; padding-right: .7rem; }
.data-table th.sortable a { padding-left: .7rem; padding-right: .7rem; }
.data-table td { white-space: nowrap; }

/* The two rate cards on Overview sit half a row each; on a phone a half is a
   column too narrow for its own figures. */
.play-card { flex-basis: 100%; }

/* The structure picker's wide rows lay their facts out in one line; let them
   wrap under the name instead of running off the card. */
.structure--wide .structure__facts {
  flex-wrap: wrap;
  gap: .35rem 1.2rem;
}

/* The push/fold drill: the tally goes under the heading rather than beside
   it, and the three answers wrap rather than squeezing. The keyboard hints
   are for a keyboard. */
.drill-head { flex-direction: column; gap: .9rem; }
.drill-tally { align-self: stretch; justify-content: space-between; }
.spot-card,
.verdict-card { flex-basis: 100%; padding: 1.1rem; }
.spot__actions { flex-wrap: wrap; }
.drill-btn { flex: 1 1 auto; justify-content: center; }
.drill-btn kbd { display: none; }

/* A game's page sets its two tables side by side with a 24rem floor, which is
   wider than the phone; one column. */
.hand-columns { grid-template-columns: minmax(0, 1fr); }

/* Under 16px iOS zooms the whole page in when a field takes focus, and does
   not zoom back out — the same rule table-mobile.css applies to the bet box. */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea { font-size: 16px; }