/* The Trashcanon, phone layout.
   Loaded after styles.css, and only on a narrow screen or a phone turned on
   its side, by the media attribute on its <link>. A tablet keeps the desktop
   layout, which already fits it. Everything here is spacing and arrangement.
   The tokens, faces, shadows, callouts and banner all come from styles.css,
   so the look is the same object held closer.

   A GM uses this at a table, one-handed, in bad light. The pull button lives
   where a thumb already is, and body copy is a size up from desktop. */

:root { --gutter: 16px; }

/* Room under the last block for the pinned pull button, so the footer is
   never trapped behind it. */
body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* ---------- header ---------- */

.site-header {
  min-height: 60px;
  padding: 8px var(--gutter);
  border-bottom-width: 4px;
  gap: 12px;
}
.wordmark { font-size: 19px; }
.btn-mailing {
  min-height: 44px;
  padding: 0 14px;
  font-size: 12px;
  box-shadow: 4px 4px 0 var(--ink);
}

/* ---------- hero ---------- */

/* The body box steps aside so the hero is one grid: the eyebrow on a line of
   its own, the stamp beside the title, the lede under both. The title and the
   stamp are sized from the viewport so the longest section name, PERSONNEL,
   still leaves the stamp room at 320px. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 10px;
  padding: 20px var(--gutter) 22px;
}
.hero-body { display: contents; }
.eyebrow {
  grid-column: 1 / -1;
  white-space: nowrap;
  font-size: min(11px, 2.55vw);
  letter-spacing: 0.12em;
}
.hero h1 { grid-row: 2; font-size: min(8.8vw, 60px); }
.lede { grid-row: 3; grid-column: 1 / -1; font-size: 15px; }
.stamp {
  grid-row: 2;
  grid-column: 2;
  margin: 0;
  padding: 6px 8px 5px;
  gap: 3px;
  border-width: 2px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.45);
}
.stamp-main { font-size: min(13px, 3.4vw); letter-spacing: 0.04em; }
.stamp-sub { font-size: min(7px, 1.9vw); letter-spacing: 0.14em; }

/* ---------- banner ---------- */

.banner { height: 34px; }
.banner span { font-size: 15px; padding-left: 16px; }

/* ---------- query bar ---------- */

.query { margin-top: 16px; padding: 14px; gap: 12px; }
.query-heading { font-size: 12px; letter-spacing: 0.16em; padding: 7px 4px; }
.query-row { flex-direction: column; align-items: stretch; gap: 10px; }

/* Three generators, three equal segments on one row. */
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
a.tab {
  justify-content: center;
  min-height: 48px;
  padding: 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.query-actions { justify-content: center; }
.seed { font-size: 11px; }

/* The one control a GM reaches for over and over, pinned where the thumb is.
   It is the same button the query bar holds on desktop, moved, so there is
   still exactly one way to pull. */
.btn-pull {
  position: fixed;
  z-index: 10;
  left: var(--gutter);
  right: calc(var(--gutter) + 5px);
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  justify-content: center;
  min-height: 56px;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: 16px;
}

/* ---------- dossier ---------- */

.dossier { margin-top: 16px; }

.filestrip { gap: 4px 12px; padding: 8px 12px; font-size: 11px; letter-spacing: 0.12em; }

.entity { align-items: flex-start; gap: 12px; padding: 16px 0 14px; }
.entity-id { flex: 1; }
.entity h2 { font-size: clamp(28px, 8.5vw, 44px); line-height: 1.05; }

/* Label over value, with the reroll or lock right beside the value it acts
   on, instead of the label column taking half the width and leaving the
   value three words wide. */
.meta { flex-direction: column; align-items: stretch; gap: 10px; }
.meta-item {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto;
  column-gap: 4px;
  align-items: center;
}
.meta dt { grid-column: 1 / -1; font-size: 11px; }
.meta dd { grid-column: 1; }
.meta-item > [data-control] { display: flex; grid-column: 2; grid-row: 2; margin: -10px 0; }

.cols { gap: 28px; padding-top: 20px; }
.col { gap: 28px; }
.block { gap: 10px; }
.block-head { padding-bottom: 4px; }
.block-head h3 { font-size: 14px; letter-spacing: 0.16em; }

.body { font-size: 16px; color: #33332e; }
.slogan { font-size: 22px; }

.callout { padding: 14px; gap: 12px; }
.callout-head { gap: 6px; }
.callout-head h3 { font-size: 12px; letter-spacing: 0.14em; padding: 7px 6px; }
.callout p { font-size: 17px; }

.pair { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tint { padding: 12px 14px; }

.meter li { height: 38px; font-size: 14px; }

.rows li { align-items: center; min-height: 44px; padding: 10px 12px; }

/* Quiet on desktop is too quiet held at arm's length. */
.btn-icon { color: var(--muted); }
.btn-icon--dark { color: #a8a8a0; }
.btn-icon svg { width: 16px; height: 16px; }

/* ---------- footer ---------- */

.site-footer { padding: 22px var(--gutter) 8px; }
.footer-note { font-size: 10px; }

/* ---------- the narrowest phones ---------- */

/* Below this the wordmark and the call to action no longer share a row, so
   the button takes its own rather than pushing the page sideways. */
@media (max-width: 359px) {
  .site-header { flex-wrap: wrap; padding-bottom: 14px; }
  .btn-mailing { width: 100%; justify-content: center; }
}