/* Plain pages (legal, delete account, card receiver) in the app's look, values from tokens.css (decisions/0019) */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-md)/var(--lh-body) var(--font);
}
a { color: var(--accent); text-underline-offset: 2px; }
.wrap { max-width: 640px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-7); }
.wrap.wide { max-width: 760px; }

header.site { display: flex; align-items: center; min-height: var(--tap); margin-bottom: var(--s-6); }
header.site a.brand { font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--ink); text-decoration: none; }
footer.site { margin-top: var(--s-6); padding: var(--s-4) var(--s-4) 0; color: var(--ink-2); font-size: var(--fs-sm); }
footer.site a { display: inline-block; margin-right: var(--s-4); padding: var(--s-2) 0; }

h1 { font-size: var(--fs-xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); margin: 0 0 var(--s-2); }
h2 { font-size: var(--fs-md); line-height: var(--lh-tight); font-weight: var(--fw-bold); margin: var(--s-5) 0 var(--s-2); }
p, li { color: var(--ink); }
.muted { color: var(--ink-2); }
[hidden] { display: none !important; }

/* Surface card like VisitkaCard in the app */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--s-5) var(--s-4);
}
/* Large title on the background, the text in a card below, like the app screens */
.legal main > h1 { margin-bottom: var(--s-1); }
.legal main > h1 + .muted { margin: 0 0 var(--s-5); font-size: var(--fs-sm); }
.legal .panel > :first-child { margin-top: 0; }
.legal .panel > :last-child { margin-bottom: 0; }

.state { text-align: center; padding: var(--s-6) var(--s-4); }
.state h1 { font-size: var(--fs-lg); }
.state.error h1 { color: var(--danger); }

/* Business card faces, the Light, Accent and Ink looks of the app */
.bizcard {
  aspect-ratio: 7 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.bizcard[data-look="Accent"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.bizcard[data-look="Ink"] { background: var(--ink); color: var(--bg); border-color: transparent; }
.bizcard .name { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: 0; overflow-wrap: anywhere; }
.bizcard .sub { margin: var(--s-1) 0 0; color: inherit; opacity: 0.85; overflow-wrap: anywhere; }

/* Contact rows in one card with hairlines, like the contact screen */
.rows { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.rows:empty { display: none; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--tap); padding: var(--s-3) var(--s-4); }
.row + .row { border-top: 1px solid var(--line); }
.row .label { display: block; font-size: var(--fs-xs); color: var(--ink-2); }
.row .value { overflow-wrap: anywhere; color: var(--ink); }
.row a.value { color: var(--accent); }

button, .button {
  font: inherit; font-weight: var(--fw-medium); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; flex: none; white-space: nowrap;
  min-height: var(--tap); padding: 0 var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
button:hover, .button:hover { background: var(--surface-2); }
button.copied { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button.primary:hover { background: var(--accent); opacity: 0.9; }

/* The App Store button at the very bottom of a shared card, iPhone only */
.getapp { margin-top: var(--s-6); text-align: center; }
.getapp p { margin: 0 0 var(--s-3); font-size: var(--fs-sm); }
.getapp .button { width: 100%; }

/* The card frame shown at once while the card loads */
.loading-line { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin: 0 0 var(--s-4); color: var(--ink-2); font-size: var(--fs-sm); }
.spinner { width: var(--s-4); height: var(--s-4); border-radius: 50%; border: 2px solid var(--surface-2); border-top-color: var(--accent); flex: none; }
.skeleton { gap: var(--s-2); }
.bar { display: block; height: var(--s-3); width: 40%; border-radius: var(--r-pill); background: var(--surface-2); }
.bar.wide { width: 65%; height: var(--s-4); }
.row .bar { width: 55%; }
@media (prefers-reduced-motion: no-preference) {
  .bar { animation: pulse 1.2s ease-in-out infinite alternate; }
  .spinner { animation: spin 0.8s linear infinite; }
  @keyframes pulse { from { opacity: 1; } to { opacity: 0.45; } }
  @keyframes spin { to { transform: rotate(360deg); } }
}