/* Copyright (c) 2026 Moiz Saeed (Bubble Laboratories). All rights reserved.
   SPDX-License-Identifier: LicenseRef-Folio-1.0 (Folio License 1.0, see LICENSE) */
/* The empty state, dressed as a front door. Folio's own idiom: paper, the serif,
   restraint. Nothing here is visible once a document is open. */

.try-wrap {
  max-width: 30rem;
  margin: 1.25rem auto 0;
  text-align: center;
}

.try-lede {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 0.35rem;
}

.try-sub,
.try-or,
.try-foot {
  font-family: var(--sans, -apple-system, system-ui, sans-serif);
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  margin: 0;
}

.try-sub { font-size: 0.82rem; line-height: 1.5; }
.try-or  { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 1.6rem 0 0.6rem; }
.try-foot { font-size: 0.72rem; line-height: 1.6; margin-top: 2rem; }

.try-open {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font-family: var(--sans, -apple-system, system-ui, sans-serif);
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.try-open:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-color: color-mix(in srgb, var(--ink) 32%, transparent);
}

.try-samples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.try-sample {
  background: none;
  border: 0;
  padding: 0.3rem 0;
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease;
}
.try-sample:hover { border-bottom-color: color-mix(in srgb, var(--ink) 35%, transparent); }

/* the whole page is a drop target, so say so while something is over it */
body.drag-over #empty { outline: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); outline-offset: -18px; }

/* The app's own buttons (Open…, Welcome Guide) call the Mac; on the web the
   front door above does both, so they would only say the same thing twice. */
#empty .empty-actions { display: none; }

/* a phone: keep the small print off the screen's edge */
.try-wrap { padding: 0 1.25rem; box-sizing: border-box; }