/* ============================================================
   ENTRY — the way into the product
   Sign-in is a two-part composition on the full-screen entry surface.
   ============================================================ */

.entry-login {
  position: relative;
  z-index: 1;
  padding: 48px 0;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(390px, .86fr);
  align-items: center;
  gap: clamp(54px, 8vw, 138px);
  width: min(1180px, calc(100vw - 80px));
  min-height: 100dvh;
  margin: 0 auto;
}

.entry-login-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  align-items: center;
  justify-content: center;
  min-width: 0;
}


.entry-login-paper {
  width: min(430px, 100%);
  padding: 46px 48px 42px;
  color-scheme: light;
  --ink: #23201C;
  --ink-light: #4F4941;
  --ink-secondary: #6F675E;
  --ink-faint: #6F675E;
  --border: rgba(35, 32, 28, .14);
  --border-strong: rgba(35, 32, 28, .24);
  background:
    linear-gradient(145deg, rgba(255,255,255,.46), transparent 56%),
    #FBF8F1;
  border: 1px solid rgba(35, 32, 28, .12);
  box-shadow:
    0 22px 54px rgba(41, 29, 19, .24),
    0 4px 12px rgba(41, 29, 19, .13);
  transform: rotate(-.12deg);
}
.entry-login-copy { margin-bottom: 28px; }
.entry-login-copy h2 {
  margin: 0 0 13px;
  font: 600 32px/1.08 var(--serif);
  letter-spacing: -.025em;
  color: #23201C;
}
.entry-login-copy p {
  margin: 0;
  font: 450 14px/1.5 var(--sans);
  color: #4F4941;
}
.entry-login-paper .login-field { margin-bottom: 18px; }
.entry-login-paper .login-field label {
  font: 650 10px/1.3 var(--sans);
  letter-spacing: .12em;
}
.entry-login-paper .login-field input {
  background: rgba(255,255,255,.72);
  font-family: var(--sans);
}
.entry-login-paper .login-btn {
  width: 100%;
  margin-top: 0;
  color: #FFF;
  background: #35597F;
  border-radius: 4px;
  box-shadow: 0 5px 12px rgba(53,89,127,.22);
}
.entry-login-paper .login-btn:hover { background: #294B70; }
.entry-login-paper .login-assurance {
  margin: 0 0 16px;
  color: #625B53;
}
.entry-login-paper .auth-mode-toggle { margin-top: 22px; }

[data-theme="dark"] .entry-login-paper {
  --ink: #23201C;
  --ink-light: #4F4941;
  --ink-secondary: #6F675E;
  --ink-faint: #6F675E;
  --border: rgba(35, 32, 28, .14);
  --border-strong: rgba(35, 32, 28, .24);
  color: #23201C;
}
[data-theme="dark"] .entry-login-paper :is(input, textarea) { color: #23201C; }
[data-theme="dark"] .entry-login-paper input::placeholder { color: #716A62; opacity: 1; }

/* ============================================================
   ENTRY SCREENS — a real desk before the real desk
   The approved demonstration Desk comes into focus beneath the sharp logo.
   Sign-in keeps the same scene and invariant cream paper in either theme.
   ============================================================ */

/* The brand mark for dark grounds: the wordmark in the app serif with the
   four canonical sticky notes (brand/stickies.png — colors sampled from the
   canonical logo artwork, never redrawn in CSS). */
.brand-mark-dark {
  position: relative;
  display: inline-block;
  margin: 0;
}
.brand-mark-word {
  position: relative;
  z-index: 2;
  font: 500 clamp(58px, 5.4vw, 84px)/1.05 var(--serif);
  letter-spacing: -.02em;
  color: #F0EBE1;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .65);
  white-space: nowrap;
}
.brand-mark-stickies {
  position: absolute;
  z-index: 1;
  width: 54%;
  left: 47%;
  bottom: 72%;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
}
.brand-mark-large .brand-mark-word { font-size: clamp(62px, 6vw, 96px); }

#entry-screen { position: relative; min-height: 100dvh; background: #2c1e16; isolation: isolate; }
body #entry-screen .login-screen { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100dvh; height: auto; background: transparent; }
body #entry-screen .hidden { display: none; }
body:not([data-app-screen="entry"]) #entry-screen { display: none; }
body[data-app-screen="entry"] { margin: 0; background: #2c1e16; }
body[data-app-screen="entry"] :is(#app-shell, #desks-landing) { display: none !important; }
body:not([data-app-screen="workspace"]) :is(#desk-view-root, #pocket-navigation, #pocket-editor, #pocket-library, #pocket-writing-overview) { display: none !important; }
.entry-status { position: absolute; inset: auto 16px 24px; color: #F0EBE1; text-align: center; }
body[data-entry-phase="pending"] .product-promise-screen { cursor: default; }

/* Present the approved 1280 × 678 image with its 46px screenshot header
   outside the frame. Cover sizing uses the remaining 632px of the scene.
   svh keeps the crop steady when a phone keyboard opens. */
.entry-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.entry-scene-image {
  position: absolute;
  top: 0;
  left: 50%;
  width: max(100vw, 202.532vh);
  width: max(100vw, 202.532svh);
  max-width: none;
  height: auto;
  transform: translate(-50%, -6.785%);
}
.entry-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 44%, rgba(20,14,10,.65), rgba(20,14,10,.38) 75%);
}
body[data-app-screen="entry"] .entry-scene {
  animation: entry-focus 950ms ease-out both;
}
@keyframes entry-focus {
  from { filter: blur(12px); }
  to { filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-app-screen="entry"] .entry-scene { animation: none; }
}

/* ── Screen one — the promise ── */
.product-promise-screen {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  cursor: pointer;
}
.product-promise-screen:focus-visible {
  outline: 3px solid #7FA6CC;
  outline-offset: -4px;
}

.product-promise-stage {
  position: relative;
  width: 100%;
  min-height: 100dvh;
}

.product-promise-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;

  pointer-events: none;
}
.product-promise-brand { margin: 0; }
.product-promise-brand p {
  margin: 22px 0 0;
  font: 400 clamp(19px, 1.8vw, 24px)/1.4 var(--serif);
  font-style: italic;
  color: #F0EBE1;
  opacity: .92;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .7);
}


/* The two-part composition needs its own minimum columns (360 + 390) plus the
   gap and the page's 80px margins; below about 859px they no longer fit and the
   paper hangs off the right edge. iPad portrait (820 and 834) sits inside that
   band, so the stacked arrangement starts at 860px. */
@media (max-width: 860px) {
  .login-screen { height: auto; overflow-y: auto; }
  .entry-login {
    grid-template-columns: 1fr;
    gap: 28px;
    width: min(470px, calc(100vw - 30px));
    padding: 76px 0 34px;
  }

  .entry-login-brand { gap: 18px; }
  .entry-login .entry-desk-introduction { max-width: 320px; font-size: 18px; }

  .entry-login-paper { width: 100%; padding: 34px 28px 30px; }
}

@media (orientation: portrait) {
  .entry-scene-image { left: 10%; transform: translate(-10%, -6.785%); }
}

.entry-retry { z-index: 2; margin: auto; max-width: 340px; font: 15px/1.45 var(--sans, sans-serif); }
.entry-retry button { min-height: 44px; padding: 8px 20px; background: #FBF8F1; color: #23201C; border: 0; border-radius: 6px; font: inherit; cursor: pointer; }