/* Gate UI for the owned pages (My Shelf / My Palette / My Recipe Book).
   Relies on the CSS custom properties defined in each page's inline :root
   (--royal, --teal-ink, --bench, --ink, --ink-soft, --line-dark, --card-bg). */

/* .wrap (centred, max-width, padded page container) is defined once in site.css. */
.wrap h1 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 30px;
  margin: 0 0 6px;
  color: var(--ink);
}

.acct-gate {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.acct-gate input {
  flex: 0 1 260px;
}

/* The gate's buttons are plain <button> elements; style them to match .btn. */
.acct-gate button,
.acct-actions button {
  font-family: 'Archivo', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: var(--royal);
  color: #fff;
  transition: opacity .15s;
}

.acct-gate button:hover,
.acct-actions button:hover {
  opacity: .88;
}

/* "Send me an edit link" is the secondary action — distinguish it in teal. */
#acctSend {
  background: var(--teal-ink);
}

.acct-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 13.5px;
}

#acctNote {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

#acctNote[readonly] {
  background: #faf8f1;
  color: var(--ink-soft);
}

.acct-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

/* "Edit your own" — returns a signed-in user to their collection. Styled as a
   quiet secondary (outline) action so it reads as navigation, not a primary CTA. */
#acctMine {
  font-family: 'Archivo', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border: 1px solid var(--royal);
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--royal);
  transition: background .15s, color .15s;
}

#acctMine:hover {
  background: var(--royal);
  color: #fff;
}

.acct-msg {
  color: var(--teal-ink);
  font-size: 13px;
  font-weight: 600;
}