/* THE ROW GRAMMAR — settings as sentences. Bold label / gray status
   sentence / underlined verb right. Hairline dividers, no boxes-in-boxes.
   Ink pill toggles readable without color. Inline expansion via <details>.
   From plans/gather-design-evolution.md §2 + the Airbnb 324/328 pattern. */

.g-rows { display: flex; flex-direction: column; }
.g-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 2px; border-bottom: 1px solid var(--paper-edge);
}
.g-row:last-child { border-bottom: 0; }
.g-row-main { flex: 1; min-width: 0; }
.g-row-label { font-weight: var(--weight-bold); color: var(--ink); font-size: 16px; }
/* The status line IS the report: "Lodgings assigned for 14 of 17." */
.g-row-status { color: var(--ink-faint); font-size: 14px; margin-top: 2px; line-height: 1.5; }
.g-row-status b { color: var(--ink-soft); }
.g-row-verb {
  color: var(--ink); font-size: 14px; font-weight: var(--weight-semibold);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}

/* Ink pill toggle pair — state readable without color. */
.g-toggle { display: inline-flex; border: 1px solid var(--paper-edge); border-radius: 999px; overflow: hidden; }
.g-toggle button, .g-toggle span {
  padding: 4px 12px; font-size: 13px; background: transparent; border: 0;
  color: var(--ink-faint); cursor: pointer;
}
.g-toggle .on { background: var(--ink); color: var(--paper); }

/* ── Your settings — the personal sentences page ─────────────── */
.settings-rows { margin-top: 20px; text-align: left; }
/* button_to wraps each pill in a form; collapse it so the pills sit
   side by side inside the toggle. */
.settings-theme-form { display: contents; }
.settings-theme-toggle { align-self: center; }
.settings-back { margin-top: 28px; font-size: 14px; }
.settings-back a { color: var(--ink-faint); }
.settings-back a:hover { color: var(--ink); }

/* Inline expansion — details, never a modal. */
.g-row details { width: 100%; }
.g-row details > summary { list-style: none; cursor: pointer; }
.g-row details > summary::-webkit-details-marker { display: none; }
.g-row details[open] .g-row-expand { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--paper-edge); }

/* One-switch pill — On fills ink, Off stays quiet. Settings rows. */
.g-toggle-btn {
  border: 1px solid var(--paper-edge);
  background: transparent;
  color: var(--ink-faint);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  align-self: center;
  flex: none;
}
.g-toggle-btn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── ON A PHONE, THE SENTENCE GETS ITS OWN LINE ────────────────────────
   The row is label + explanation on the left and a control on the right.
   That reads well at desk width. At 390px the control keeps its ~130px
   and the explanation is left with about 230px, so "Guests see and
   message their hosts only, plus support." breaks into three lines of
   three words while the space under the toggle sits empty.

   The label and the control belong on one line — that pairing is the
   whole grammar of the row, and separating them would be worse. The
   sentence does not: it is prose, it wants a full measure, and it reads
   fine one line down. display:contents dissolves the middle wrapper so
   all three can be ordered against the row. (Aug 11) */
@media (max-width: 600px) {
  .g-rows .g-row { flex-wrap: wrap; align-items: center; row-gap: 0; }
  .g-rows .g-row-main { display: contents; }
  .g-rows .g-row-label { flex: 1 1 auto; order: 1; }
  .g-rows .g-row-control,
  .g-rows .g-row-verb { order: 2; }
  .g-rows .g-row-status { flex: 1 0 100%; order: 3; margin-top: 6px; }
}