﻿/* Portal entry 2.0.0. An inline entrance; the process drawing owns the transition. */
:where(.portal-entry) {
  --portal-entry-width: 350px;
  --portal-entry-gap: 10px;
  --portal-entry-space: 28px;
}
.portal-entry { width: min(100%, var(--portal-entry-width)); margin-top: var(--portal-entry-space); }
.portal-entry__form { display: grid; gap: var(--portal-entry-gap); }
.portal-entry__label { font-size: var(--website-font-size-small); color: var(--website-color-ink-2); }
.portal-entry__input-row { display: flex; border-bottom: 1px solid var(--website-color-ink); background: var(--website-color-sheet); }
.portal-entry__input {
  min-width: 0; flex: 1; padding: 12px; border: 0; border-radius: 0;
  background: transparent; color: var(--website-color-ink); font: inherit;
  font-size: var(--website-font-size-small);
}
.portal-entry__input::placeholder { color: var(--website-color-ink-2); opacity: 1; }
.portal-entry__submit {
  display: grid; place-items: center; width: 46px; min-height: 46px; flex: 0 0 auto;
  border: 0; background: var(--website-color-button); color: var(--website-color-button-ink);
  font: inherit; font-size: 24px; cursor: pointer;
}
.portal-entry__submit:disabled { opacity: .55; cursor: progress; }
.portal-entry :focus-visible { outline: 2px solid var(--website-color-ink); outline-offset: 3px; }
.portal-entry__status { margin: 0; font-size: var(--website-font-size-small); }
.portal-entry__status:empty { display: none; }
.portal-entry__login { margin: var(--portal-entry-gap) 0 0; color: var(--website-color-ink-2); font-size: var(--website-font-size-small); }
.portal-entry__login a { color: inherit; text-underline-offset: 3px; }
