/* The access screen: one label, one field, one line under it. Centred on the
   space a screen gets, in the shell's palette and nothing of its own. */

.access { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 40vh; }
.access .label { font-size: 11px; letter-spacing: 0.22em; color: var(--fg-mid); min-height: 16.5px; }
.access form { display: flex; align-items: baseline; gap: 10px; width: min(320px, 100%);
  border-bottom: 1px solid var(--line); padding: 4px 2px; }
.access form:focus-within { border-bottom-color: var(--fg); }
.access .prompt { color: var(--fg-dim); }
/* 16px, not the page's 13: under that, iOS zooms the page to the field on
   focus and leaves it zoomed. */
.access input { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; letter-spacing: 0.3em; color: var(--fg); caret-color: var(--fg);
  text-shadow: var(--glow); }
.access .line { display: flex; gap: 10px; font-size: 11px; letter-spacing: 0.22em; min-height: 16.5px;
  color: var(--fg-mid); }
.access .status.no { color: var(--alert); }
.access .status.hold { color: var(--warn); }
.access .count { color: var(--fg-dim); }

/* One cursor. The title keeps its own for good, and while the field has
   focus the field's caret is where typing goes — so the title's steps
   aside, and comes back when the field lets go. */
main:has(.access input:focus) h1 .cur { visibility: hidden; }