/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.35 var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* She taps between clients; a stray long-press selecting text or a
     double-tap zoom is friction, not a feature. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ── Layout: the app frame ────────────────────────────────────────────── */
/* A fixed-height frame with its own scrolling region keeps the tab bar put
   without position: fixed, which iOS standalone mode mis-places when the
   keyboard opens. */
.app {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100dvh;
}

.app-main {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top);
  padding-bottom: 24px;
}

/* ── Typography ───────────────────────────────────────────────────────── */
.kicker {
  font: 600 12px var(--font-body);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.muted { color: var(--muted); }

/* ── Components ───────────────────────────────────────────────────────── */
.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, var(--stripe-a) 0 4px, var(--stripe-b) 4px 8px);
  font: 400 9px ui-monospace, monospace;
  color: #9C8A91;
}

.empty-card {
  margin: 18px var(--gutter) 0;
  padding: 14px 16px;
  border: 2px dashed var(--verniz-dash);
  border-radius: var(--radius-card);
}
.empty-card__title { font: 600 15px var(--font-body); color: var(--verniz); }
.empty-card__body { margin-top: 2px; font: 400 13px var(--font-body); color: var(--muted); }

/* ── Responsive ───────────────────────────────────────────────────────── */
/* Phone is the base. On a laptop (she'll open her link there too) the app
   stays a phone-width column instead of stretching a tab bar across 1500px. */
@media (min-width: 600px) {
  body { background: var(--line); }
  .app, .sheet-frame, .plain {
    max-width: 480px;
    margin: 0 auto;
    background: var(--cream);
    box-shadow: 0 0 0 1px var(--line);
  }
  .sheet-frame { background: var(--sheet-backdrop); }
  .plain { background: var(--cream); }
  .plain--verniz { background: var(--verniz); }
}