/* Sign-in: the cover of the book. Screen prefix py-in-. */
.py-frame.py-in {
  min-height: 100dvh; display: grid; place-items: center; padding: var(--py-5) var(--py-4);
  background: var(--py-desk);
}
.py-frame.py-in .py-cover {
  width: min(100%, 30rem); min-height: 36rem;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--py-5);
  padding: var(--py-6) var(--py-6) var(--py-5) calc(var(--py-6) + 1.25rem);
  background: oklch(0.30 0.06 262); color: oklch(0.95 0.01 250);
  border-radius: 4px 10px 10px 4px;
  position: relative;
  box-shadow: 0 30px 50px -30px oklch(0.15 0.05 262 / 0.8), inset 0 0 0 1px oklch(1 0 0 / 0.06);
}
.py-frame.py-in .py-cover::before { /* the cloth spine */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 1.25rem; border-radius: 4px 0 0 4px;
  background: repeating-linear-gradient(0deg, oklch(0.24 0.05 262) 0 3px, oklch(0.27 0.055 262) 3px 6px);
}
.py-frame.py-in .py-cover-brand { display: flex; justify-content: space-between; align-items: center; gap: var(--py-3); }
.py-frame.py-in .py-cover-brand b { font-family: var(--py-f-display); font-stretch: 125%; font-weight: 850; font-size: var(--py-s-4); letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: var(--py-3); }
.py-frame.py-in .py-cover-brand .py-mark { width: 3.25rem; height: 3.25rem; }
.py-frame.py-in .py-cover-brand span { font-size: var(--py-s--1); opacity: 0.8; }
.py-frame.py-in .py-in-label {
  align-self: center;
  background: var(--py-paper); color: var(--py-ink);
  border-radius: 6px; padding: var(--py-5);
  box-shadow: 0 2px 0 oklch(0 0 0 / 0.25);
  display: grid; gap: var(--py-4);
  outline: 2px solid oklch(0.95 0.01 250 / 0.5); outline-offset: 4px;
}
.py-frame.py-in .py-in-label h1 { font-family: var(--py-f-display); font-stretch: 110%; font-weight: 780; font-size: var(--py-s-2); }
.py-frame.py-in .py-in-label p.py-hint { margin-top: -0.5rem; }
.py-frame.py-in .py-in-label .py-btn--ink { min-height: 3rem; }
.py-frame.py-in .py-cover-foot { font-size: var(--py-s--1); opacity: 0.85; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--py-2); }
.py-frame.py-in .py-cover-foot a { color: inherit; }

/* Choosing a business: books on a shelf */
.py-frame.py-in .py-shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--py-2); }
.py-frame.py-in .py-shelf a {
  display: grid; grid-template-columns: 0.6rem minmax(0, 1fr) auto; gap: var(--py-3); align-items: center;
  padding: var(--py-3) var(--py-3) var(--py-3) 0; border-radius: 4px; text-decoration: none;
  background: var(--py-paper-2); border: 1px solid var(--py-ruling);
}
.py-frame.py-in .py-shelf a:hover { border-color: var(--py-ink); }
.py-frame.py-in .py-shelf i { align-self: stretch; border-radius: 4px 0 0 4px; }
.py-frame.py-in .py-shelf b { display: block; font-weight: 700; }
.py-frame.py-in .py-shelf span { font-size: var(--py-s--1); color: var(--py-ink-soft); }
.py-frame.py-in .py-shelf li:nth-child(4n+1) i { background: var(--py-folio); }   /* a spine color by position: */
.py-frame.py-in .py-shelf li:nth-child(4n+2) i { background: var(--py-stamp); }   /* a business's color is not data */
.py-frame.py-in .py-shelf li:nth-child(4n+3) i { background: var(--py-print); }
.py-frame.py-in .py-shelf li:nth-child(4n+4) i { background: oklch(0.68 0.10 160); }

/* The business's own cover: its name is the book's title */
.py-frame.py-in .py-cover-title { font-family: var(--py-f-display); font-stretch: 105%; font-weight: 780; font-size: var(--py-s-3); line-height: 1.05; }
.py-frame.py-in .py-cover-title small { display: block; margin-top: var(--py-1); font-family: var(--py-f-ui); font-stretch: 100%; font-weight: 450; font-size: var(--py-s--1); opacity: 0.8; }

/* What a link is for, said before its one button spends it */
.py-frame.py-in .py-in-lead { font-size: var(--py-s-0); }
.py-frame.py-in .py-in-lead b { font-weight: 700; }
.py-frame.py-in .py-in-paths { display: grid; gap: var(--py-3); }
.py-frame.py-in .py-in-paths details { border-top: 1px solid var(--py-ruling); padding-top: var(--py-3); }
.py-frame.py-in .py-in-paths summary { cursor: pointer; font-weight: 700; }
.py-frame.py-in .py-in-paths details[open] summary { margin-bottom: var(--py-3); }
.py-frame.py-in .py-in-paths form { display: grid; gap: var(--py-4); }
.py-frame.py-in .py-in-done { display: grid; justify-items: start; gap: var(--py-3); }
.py-frame.py-in .py-in-done svg { color: var(--py-ok); }
.py-frame.py-in .py-in-dead svg { color: var(--py-danger); }


@media (max-width: 30rem) { .py-frame.py-in .py-cover { padding: var(--py-5) var(--py-4) var(--py-4) calc(var(--py-4) + 1rem); min-height: 0; } .py-frame.py-in .py-cover::before { width: 1rem; } .py-frame.py-in .py-in-label { padding: var(--py-4); } }