/* The page an account has about itself: what it is called, what Roblox account
   is linked to it, and what ground it holds. Narrower than the catalog measure
   -- it is three short sections and a list, not a grid. */
.holder {
  max-width: 46rem;
}

.holder__eyebrow {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.holder__title {
  margin: 0.25rem 0 0;
}

/* Alert and notice read as the same shape with different edges, so a holder
   learns one place to look for what just happened. */
.holder__alert,
.holder__notice {
  margin: 1.25rem 0 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
}

.holder__alert {
  border-color: var(--rust);
}

.holder__notice {
  border-color: var(--sand);
}

.holder__section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.holder__heading {
  margin: 0 0 1rem;
  font-size: 1.1rem;
}

.holder__aside,
.holder__empty {
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/* The one form on the site that changes a record. Boxed like the verification
   form so a reader knows the shape of "this does something" wherever they meet
   it. */
.holder__form {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
}

.holder__field {
  margin-bottom: 1.5rem;
}

/* Label above value rather than beside it, and the fieldset legends the same:
   the options are whole sentences and would wrap badly beside their term. */
.holder__field label,
.holder__choice legend {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.holder__field input {
  width: 100%;
  max-width: 24rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.holder__field input:focus-visible,
.holder__option input:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 1px;
}

.holder__hint {
  margin: 0.5rem 0 0;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

/* The refusal, beside the field it is about and in the alert's colour, so the
   reason and the control are read together. */
.holder__error {
  margin: 0.5rem 0 0;
  color: var(--sand);
  font-size: 0.95rem;
}

.holder__choice {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}

/* One option per line, the control aligned with the first line of its
   sentence. The whole row is the label, so the sentence is the click target. */
.holder__option {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.holder__option input {
  flex: none;
  margin: 0;
  accent-color: var(--sand);
}

.holder__submit {
  appearance: none;
  border: 0;
  border-radius: 4px;
  background: var(--rust);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
}

.holder__submit:hover {
  background: #d05f31;
}

/* The link form is a choice and a button, and reads as the section's own
   rather than as a second boxed form on the page. */
.holder__link-form {
  margin-top: 1rem;
}

.holder__link-form .holder__option {
  max-width: 40rem;
  margin-bottom: 1rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.holder__parcels {
  margin: 0;
  padding-left: 1.1rem;
}

.holder__parcels li {
  margin-bottom: 0.35rem;
}

/* Matches the session bar's control so the two read as one system. Named as
   well as matched by form, because the link form's submit is an input rather
   than a button_to's button and has to be the same control. */
.holder form.button_to {
  margin: 1rem 0 0;
}

.holder__button,
.holder form.button_to button {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--sand);
  font: inherit;
  padding: 0.4rem 1.1rem;
  cursor: pointer;
}

.holder__button:hover,
.holder form.button_to button:hover {
  border-color: var(--sand);
}

.holder__button--quiet {
  color: var(--ink-muted);
}

/* Unlinking undoes something, so it does not look like the button that adds:
   quiet at rest, rust on hover. */
.holder__button--danger,
.holder form.button_to button.holder__button--danger {
  color: var(--ink-muted);
}

.holder__button--danger:hover,
.holder__button--danger:focus,
.holder form.button_to button.holder__button--danger:hover {
  border-color: #e27a4c;
  color: #e27a4c;
}

/* The "walk it" link beside each held parcel (viewer plan R11), and the note
   on the one the viewer above is showing. */
.holder__record-link,
.holder__walk {
  margin-left: 0.6rem;
  font-size: 0.9rem;
}

.holder__focus {
  color: var(--ink-muted);
  font-size: 0.9rem;
}