/* The host's own pages: sign-in, workspaces, account, install, connect, first board, members, admin. Every value is a
   token from tokens.css. The pages are one column that fills its width up to a column limit, one clear action
   per page, and read at 390 and 1440 pixels without a sideways scroll. */

.host {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-4);
  line-height: var(--lh-body);
}

.host-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--top-h);
  padding: 0 var(--s4);
  border-bottom: var(--hair) solid var(--line);
  background: var(--surface-chrome);
}

.host-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
  font-weight: var(--fw-semi);
  text-decoration: none;
}

.host-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.host-main {
  box-sizing: border-box;
  width: min(100%, var(--menu-w));
  margin: 0 auto;
  padding: var(--s8) var(--s4);
  overflow-wrap: anywhere;
}

.host-wide { width: min(100%, calc(var(--menu-w) * 1.5)); }

.host h1 {
  margin: 0 0 var(--s5);
  font-size: var(--fs-6);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.host h2 {
  margin: var(--s7) 0 var(--s3);
  font-size: var(--fs-5);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.host p {
  margin: 0 0 var(--s4);
  text-wrap: pretty;
}

.host a { color: var(--link); text-decoration-line: underline; text-decoration-color: var(--link-line); text-decoration-thickness: var(--link-thick); text-underline-offset: var(--link-offset); }

.host a:focus-visible,
.host button:focus-visible,
.host input:focus-visible,
.host select:focus-visible {
  outline: var(--ring) solid var(--focus);
  outline-offset: var(--ring-gap);
}

/* forms */

.host-form { display: grid; gap: var(--s5); }

.host-field { display: grid; gap: var(--s2); }

.host-field label,
.host-choices legend { font-weight: var(--fw-med); }

.host-field input,
.host-field select {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--s3);
  border: var(--hair) solid var(--line-field);
  border-radius: var(--r-1);
  background: var(--surface-field);
  color: var(--ink);
  font: inherit;
}

.host-field input:user-invalid { border-color: var(--r-2); }

.host-error {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-1);
  background: var(--r-t);
  color: var(--r-2);
}

.host-warn,
.host-notice {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-1);
  background: var(--a-t);
  color: var(--ink);
}

.host-notice h2 { margin-top: 0; }

.host-choices { display: grid; gap: var(--s3); margin: 0; padding: 0; border: 0; }
.host-choices legend { padding: 0; margin-bottom: var(--s3); }

.host-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s3);
  align-items: center;
  min-height: var(--tap);
  padding: var(--s3) var(--s4);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-card);
}

.host-choice:has(input:checked) { background: var(--sky-tint); border-color: var(--ink-3); }
.host-choice:has(input:focus-visible) { outline: var(--ring) solid var(--focus); outline-offset: var(--ring-gap); }
.host-choice input { margin: 0; }
.host-choice-name { font-weight: var(--fw-med); }
.host-choice-meta { grid-column: 2; color: var(--ink-2); font-size: var(--fs-3); }

/* buttons */

.host-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--s5);
  border: var(--hair) solid transparent;
  border-radius: var(--r-1);
  font: inherit;
  font-weight: var(--fw-med);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-std);
}

.host-btn-primary { background: var(--sky); color: var(--sky-on); }
.host a.host-btn-primary { color: var(--sky-on); text-decoration: none; }
.host-btn-quiet { background: var(--surface-control); border-color: var(--line-2); color: var(--ink); }

/* Continue with Google: a quiet button with Google's G mark, then a divider with "or" before the email field. */

.host a.host-btn-google { gap: var(--s3); width: 100%; background: var(--surface-control); border-color: var(--line-2); color: var(--ink); text-decoration: none; }

.host-btn-mark { flex: none; }

.host-divider {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s5) 0;
  color: var(--ink-2);
}

.host-divider::before,
.host-divider::after {
  content: "";
  flex: 1;
  height: var(--hair);
  background: var(--line);
}

/* The install button under the person's name on the account page; it fills the width on a phone. */

.host-install { margin: 0 0 var(--s5); }

@media (max-width: 767px) {
  .host-install .host-btn { width: 100%; }
}

/* lists and rows */

.host-list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }

.host-row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  min-height: var(--tap);
  padding: var(--s2) var(--s4);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface-card);
  color: var(--ink);
  text-decoration: none;
}

.host a.host-row { text-decoration: none; }
.host-row-name { font-weight: var(--fw-med); }
.host-row-meta { color: var(--ink-2); font-size: var(--fs-3); }

/* copyable blocks */

.host-block { margin-top: var(--s6); }
/* Sign out stands apart from the agent form above it, so it never reads as one of that form's buttons. */
.host-signout { margin-top: var(--s8); padding-top: var(--s6); border-top: var(--hair) solid var(--line); }
.host-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.host-block-head h2 { margin: 0; }

.host-code {
  box-sizing: border-box;
  margin: var(--s2) 0;
  padding: var(--s3) var(--s4);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface-well);
  font-family: var(--mono);
  font-size: var(--fs-3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.host .host-where { margin: 0; color: var(--ink-2); font-size: var(--fs-3); }

/* Hover tints only where a pointer hovers, so a tap on a phone leaves no tint behind. */
@media (hover: hover) {
  .host a:hover { text-decoration-thickness: var(--link-thick-hover); }
  .host-btn-quiet:hover { background: var(--surface-hover); }
  .host a.host-row:hover { background: var(--surface-hover-row); }
}