/* ==========================================================================
   Epochs — the lobby, the home screen, the device settings and the QR sheet.

   This is app.css's LAYER 5: what is scoped to a page. Everything it draws
   with is a token or a component from app.css — no colour, no radius and no
   duration is invented here, and no rule in this file changes a component
   app.css owns. `app/STYLE.md` §7, §8 and §9 are the markup contracts.

   Loaded after app.css, so a rule here may specialise one there and never
   needs `!important` to do it.
   ========================================================================== */

/* --- the page under the topbar --------------------------------------------
   Every route paints into one wrapper. It sets the MEASURE and nothing else:
   a card page on a laptop is unreadable at window width, and a lobby is a
   column of cards whatever the screen. The wrapper carries no state, no hue
   and — the rule of app/STYLE.md §1 — never a style attribute.             */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
}

.page > .banner {
  margin-bottom: var(--space-4);
}

/* --- home ------------------------------------------------------------------
   Three blocks: the name of the game, what to do about it, and the rooms this
   device has seen. Nothing here is a grid — a phone gets one column and a
   laptop gets the same column, centred, because there is nothing to compare. */

.home-title {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.room-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* A room row IS its link: the whole 44px strip is the target, not a word in
   the middle of it. `.btn.ghost` already carries the height and the border. */
.room-row > .btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

/* --- permissions -----------------------------------------------------------
   One label and one segmented control per open permission. The three fixed
   ones are not here at all: they are the master's, and a control that cannot
   move is not a control (`app/STYLE.md` §11).                               */

.perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.perm-row .k {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* --- a checkbox and its sentence -------------------------------------------
   The label IS the target, so it carries the 44px height and the box sits
   inside it. app.css styles inputs but has no plain check row of its own.   */

.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  margin: var(--space-2) 0;
  font-size: var(--text-md);
  cursor: pointer;
}

.check input[type='checkbox'] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--accent);
}

/* --- the settings form inside a tile ---------------------------------------
   `.setting label[for]` and `.setting .field-row` are app.css's; a number
   field is the one shape it has no rule for, and it must not stretch to the
   width of a card — a two-digit answer in a 600px box reads as a mistake.  */

.setting input[type='number'] {
  width: 8ch;
  min-width: 8ch;
}

.setting select {
  width: 100%;
  min-height: var(--tap);
}

/* --- the QR sheet ----------------------------------------------------------
   `app/STYLE.md` §9. The code is a picture of the link printed under it, so
   it is aria-hidden and the input is the accessible content.               */

.sheet-body .field-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.sheet-body .field-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.qr-frame {
  display: flex;
  justify-content: center;
  margin: var(--space-4) 0;
}

/* Real white behind real black, whatever the theme: a camera reads contrast,
   not tokens. The padding is the quiet zone's twin in CSS — the SVG already
   carries four modules of it, and this keeps the corner radius off the code. */
.qr-frame .qr {
  width: min(240px, 70vw);
  height: auto;
  padding: var(--space-3);
  background: #ffffff;
  border-radius: var(--radius-lg);
}

.qr-link {
  font-family: var(--mono);
  font-size: var(--text-xs);
}