/*
  The only thing this page needs beyond the shared look: the two way switch at the top that says which form
  you are filling in. Built for a phone first, so the two buttons share the width and stay big enough to tap.
*/
.form-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 24px;
}

/* This file is loaded after the shared styles, so its display rule would otherwise beat the shared
   "hidden" one and leave the switch on screen after the message has been sent. */
.form-picker.hidden { display: none; }

.form-tab {
  width: 100%;
  margin: 0;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.form-tab:hover { border-color: var(--muted); }

/* The chosen one is filled in, so which form you are on is obvious without reading the labels. */
.form-tab.chosen {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}