/* The sign-in gate: a card on the desk, and a scrap of ruled paper with some
 * handwriting on it. The artwork is decoration; the words and the one link
 * are the shared sign-in's, the same on every app. */

body:has(.signin-screen) > main {
  max-width: none;
  padding: 0;
}

.signin-screen {
  --signin-width: 520px;
  --signin-space: 24px;
  --signin-small: 12px;
  --signin-padding: clamp(24px, 6vw, 52px);
  --signin-title: clamp(40px, 8vw, 60px);
  --signin-sheet: 240px;
  --signin-rule: 1.5px;
  --signin-hand: 2.6px;
  --signin-height: 85svh;
  --signin-leading: 1.1;
  /* The sign-in button, hovered: a touch lighter. */
  --signin-hover: brightness(1.1);
  display: grid;
  place-items: center;
  min-height: var(--signin-height);
  padding: var(--signin-padding) var(--signin-space);
  padding-left: max(var(--signin-space), env(safe-area-inset-left));
  padding-right: max(var(--signin-space), env(safe-area-inset-right));
}

.signin-card {
  width: min(100%, var(--signin-width));
  padding: var(--signin-padding);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: center;
}

.signin-sheet {
  display: block;
  width: min(100%, var(--signin-sheet));
  margin: 0 auto var(--signin-space);
}

.signin-sheet .rule {
  stroke: var(--rule);
  stroke-width: var(--signin-rule);
}

.signin-sheet .rule.margin {
  stroke: var(--margin-rule);
}

.signin-sheet .hand {
  fill: none;
  stroke: var(--accent);
  stroke-width: var(--signin-hand);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signin-card .eyebrow {
  margin-bottom: var(--signin-small);
}

.signin-card h1 {
  margin: 0 0 var(--signin-space);
  font-family: var(--serif);
  font-size: var(--signin-title);
  font-style: italic;
  line-height: var(--signin-leading);
}

.signin-description {
  margin: 0 0 var(--signin-space);
  color: var(--muted);
}

.signin-action {
  display: block;
  min-height: var(--target);
  padding: var(--signin-small) var(--signin-space);
  border-radius: var(--radius-small);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}

.signin-action:hover {
  filter: var(--signin-hover);
}