@import 'default.css';

/* ── Public landing page ("/") ─────────────────────────────────────────────
   Served from the embedded `site` tree, not the app shell — but it links this
   stylesheet so it inherits the same tokens, buttons and .login-card as the
   real login page. The front door should not look like a different product.
   ─────────────────────────────────────────────────────────────────────── */

.landing {
  display: grid;
  min-height: 100dvh;
  /* Mobile-first: the card is first in source order, so it leads here. Someone
     arriving to sign in should not scroll past marketing copy to find the field. */
  grid-template-rows: auto auto;
}

/* ── Left panel ───────────────────────────────────────────────────────────
   Same colour-context technique as .app-shell__header in layouts/app-shell.css:
   map the --appheader* namespace onto the semantic vars so every component
   inside the panel re-colours itself through the cascade.
   ─────────────────────────────────────────────────────────────────────── */

.landing__pitch {
  --textColor:        var(--appheaderColor);
  --textMuted:        var(--appheaderMutedColor);
  --bgColor:          var(--appheaderBgColor);
  --bgSurface:        var(--appheaderBgColor);
  --borderColor:      var(--appheaderBorderColor);
  --accentColor:      var(--appheaderLinkColor);
  --accentColorHover: var(--appheaderLinkHoverColor);
  --focusRing:        0 0 0 3px var(--appheaderOutlineColor);

  --brandLogoColorLeftFront:  hsl(48, 96%, 78%);
  --brandLogoColorLeftBack:   hsl(43, 96%, 56%);
  --brandLogoColorRightFront: hsl(48, 100%, 92%);
  --brandLogoColorRightBack:  hsl(45, 96%, 68%);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
  background: var(--bgColor);
  color: var(--textColor);
}

.landing__pitch-inner {
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.landing__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.landing__logo {
  height: 2rem;
  width: auto;
}

.landing__wordmark {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.landing__headline {
  /* Display type lives here rather than in root_vars.css: the landing page is
     the only place in the product that wants it, and a global --text-4xl would
     invite the app views to grow headlines they have no room for. */
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--textColor);
}

.landing__lede {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--textMuted);
  max-width: 32rem;
}

.landing__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.landing__features li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.landing__features li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accentColor);
  /* Nudge onto the text baseline — a 6px dot centred on `baseline` sits low. */
  transform: translateY(-2px);
}

.landing__footnote {
  font-size: var(--text-xs);
  color: var(--textMuted);
  border-top: 1px solid var(--borderColor);
  padding-top: var(--space-4);
  max-width: 32rem;
}

/* ── Right panel: the door ────────────────────────────────────────────── */

.landing__door {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  background: var(--bgColor);
}

/* .login-card supplies the surface, border, radius and gap. Only the two
   things that differ from the login page are set here. */
.landing__card {
  max-width: 25rem;
  gap: var(--space-5);
}

.landing__card-sub {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--textMuted);
}

/* Reserve the line's height so the card does not jump when the preview or the
   validation hint appears on the first keystroke. */
.landing__preview {
  min-height: 1.25em;
  word-break: break-all;
}

.landing__recent-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.landing__recent-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--textColor);
  text-decoration: none;
}

.landing__recent-link:hover {
  background: var(--bgSurfaceHover);
  color: var(--textColor);
}

.landing__recent-link:focus-visible {
  outline: none;
  box-shadow: var(--focusRing);
}

.landing__recent-slug {
  font-weight: 500;
}

.landing__recent-hint {
  font-size: var(--text-xs);
  color: var(--textMuted);
}

/* ── Desktop: side by side, no scroll ─────────────────────────────────── */

@media (min-width: 60rem) {
  .landing {
    grid-template-rows: none;
    /* Pitch gets the extra width; the card is fixed-ish and does not want it. */
    grid-template-columns: 1.15fr 1fr;
  }

  /* Source order is door-then-pitch (see index.html). Explicit placement swaps
     them visually on desktop — pitch left, door right.

     The row must be named too, not just the column. With `grid-column` alone the
     door is auto-placed into row 1, the placement cursor then sits past column 1,
     and the pitch gets pushed to a second row — which is exactly the stacked
     layout this breakpoint exists to undo. */
  .landing__pitch { grid-area: 1 / 1; padding: var(--space-10); }
  .landing__door  { grid-area: 1 / 2; }
}