/* The one-time code: six characters, monospaced, spread like a constellation */
/* (Kept ahead of the base .form input rules, as in the original file:
   the two selectors tie on specificity, so their order is load-bearing.) */
@layer components {

.form input.form__code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: 0.6em; text-align: center; text-transform: uppercase;
}

.form label { display: block; margin: 1rem 0 0.2rem; color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.88rem; }
.form label:first-child { margin-top: 0; }
.form input[type="text"], .form input[type="email"], .form input[type="password"],
.form input[type="number"], .form input[type="datetime-local"],
.form input[type="date"], .form input[type="time"],
.form select, .form textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.65rem;
  background: var(--paper-high);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--gold-dim);
}
.form input[type="submit"], .button {
  margin-top: 1.5rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.4rem;
  background: var(--paper-high);
  border: 1.5px solid var(--gold-dim);
  border-radius: 999px;
  color: var(--gold);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.button--filled { background: var(--gold-bright); border-color: var(--gold-bright); color: #443307; }
/* Hover is a promise only a pointer can keep. On touch, WebKit leaves the
   last-tapped element "hovered", so a pressed button would hold its gold
   until the next tap landed somewhere else — said only where hovering is
   real. The press itself answers through :active, which lets go. */
@media (hover: hover) {
  .form input[type="submit"]:hover, .button:hover {
    background: var(--gold-bright); border-color: var(--gold-bright); color: #443307;
  }
  .button--filled:hover { background: var(--paper-high); color: var(--gold); }
}
.form input[type="submit"]:active, .button:active {
  background: var(--gold-bright); border-color: var(--gold-bright); color: #443307;
}
.button--filled:active { background: var(--paper-high); color: var(--gold); }
.button--small { margin-top: 0.5rem; min-height: 2.25rem; padding: 0.25rem 0.8rem; font-size: 0.85rem; }
.form__row { display: flex; gap: 1rem; }
.form__row > div { flex: 1; }
/* The terms line at the door: a box and its sentence, side by side. */
.form label.accord {
  display: grid; grid-template-columns: auto 1fr; gap: 0.55rem;
  align-items: start; margin: 1.1rem 0 0; font-size: 0.92rem;
}
.form label.accord input { accent-color: var(--gold); margin-top: 0.15rem; }
.form label.accord a { color: var(--gold); }
.form__hint { color: var(--ink-dim); font-size: 0.85rem; font-style: italic; margin: 0.3rem 0 0; }
.form__errors { color: var(--alert); font-size: 0.9rem; margin-bottom: 1rem; }
.form__errors p { margin: 0.2rem 0; }

/* How the Seer may reach you: one channel a row, the same shape whether
   iOS is holding the control or the form is — the doorway's room and the
   account panel wear it alike. The words share one left edge, and each
   row's control — the push button, the email box — rides the right, the
   way the phone's own settings rows sit. The second column exists only
   when a row places a control in it, so rows without one keep the full
   measure. Each selector is said twice — bare, and under .form — so the
   grid outweighs the plain .form label where a form stands. A hidden
   row is the utilities' business ([hidden] has the last word there). */
.reachable__channel, .form .reachable__channel {
  display: grid; grid-template-columns: 1fr; gap: 0.15rem 1rem;
  align-items: center; margin: 0 0 1.2rem; line-height: 1.5;
  font-family: inherit; font-size: inherit; color: inherit;
}
.reachable__channel:last-of-type, .form .reachable__channel:last-of-type { margin-bottom: 0; }
label.reachable__channel { cursor: pointer; }
/* The hairline between push and email, worn by the email row itself —
   only where a push row actually stands above it. */
.reachable__channel--ruled { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.reachable__channel strong { color: var(--ink); font-weight: 600; }
.reachable__control { grid-row: 1; grid-column: 2; }
.reachable__channel .button--small { margin-top: 0; }
.reachable__note { grid-column: 1; color: var(--ink-dim); font-size: 0.9rem; }
.reachable__channel input[type="checkbox"], .form .reachable__channel input[type="checkbox"] {
  width: 1.1rem; height: 1.1rem; min-height: 0; accent-color: var(--gold);
}
.reachable__aside { margin-top: 1.1rem; }

/* The astrologer's plumbing, folded away. Nobody knows their own degrees;
   the place answers for them. Open only when the maps come up empty. */
.by-hand { margin-top: 1.25rem; }
.by-hand summary {
  color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.85rem;
  cursor: pointer;
}
@media (hover: hover) {
  .by-hand summary:hover { color: var(--ink); }
}
.by-hand[open] summary { margin-bottom: 0.25rem; }

/* Saying you don't know the hour — a plain box under the field it empties,
   sitting closer to it than a label of its own would. */
.form .hour-unknown {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.55rem 0 0; cursor: pointer;
}
.form .hour-unknown input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; min-height: 0; accent-color: var(--gold);
}

/* The account's morning-call form: its rows are reachable__channel now,
   the same shape as the doorway's. */
.morning-call { display: grid; gap: 1.1rem; max-width: 34rem; }

.button--danger, .form input[type="submit"].button--danger {
  border-color: var(--alert); color: var(--alert); background: transparent;
}
@media (hover: hover) {
  .button--danger:hover, .form input[type="submit"].button--danger:hover {
    background: var(--alert); border-color: var(--alert); color: var(--paper-high);
  }
}
.button--danger:active, .form input[type="submit"].button--danger:active {
  background: var(--alert); border-color: var(--alert); color: var(--paper-high);
}

.form__tags { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.3rem; }
.form__tag { display: flex; gap: 0.4rem; align-items: center; font-size: 0.95rem; }

@media (max-width: 760px) {
  .form input[type="submit"],
  .button {
    width: 100%;
  }
  .form__row {
    display: block;
  }
}

}