/* app.css — the pre-install pages: the landing form, the exit-iframe hop and
   the verified-install result. No framework, no component library.

   These are the only pages a merchant sees OUTSIDE the Shopify admin, so they
   are the app's front door and they carry the brand plainly. Everything here
   is an alias onto brand.css, which every page loads first — this file holds
   no colour of its own. */

:root {
  --bg:        var(--brand-alt);
  --surface:   #ffffff;
  --line:      var(--brand-line);
  --ink:       var(--brand-ink);
  --ink-soft:  var(--brand-body);
  --ink-faint: var(--brand-muted);
  /* Accent-as-text is always the darkened orange; the raw brand orange is
     2.96:1 on white and cannot carry a label or a link. */
  --accent:    var(--brand-accent-strong);
  --accent-bg: var(--brand-accent-tint);
  --accent-line: var(--brand-accent-line);
  --warn:      #8a6116;
  --warn-bg:   #fdf5e6;
  --danger:    #8f2c2c;
  --danger-bg: #fdeded;
  /* Square corners everywhere — design-system.md §3. */
  --radius:    0;
  --mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 20px 48px;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 var(--brand-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 640px; margin: 0 auto; }

.head { margin-bottom: 20px; }
.head .cts-logo { margin-bottom: 18px; }
.head h1 {
  font-family: var(--brand-font-display);
  font-size: 26px;
  font-weight: 600;
  margin: 0;
  letter-spacing: var(--brand-ls-heading);
  line-height: 1.12;
  text-wrap: balance;
}
.head .sub { margin: 4px 0 0; color: var(--ink-faint); font-size: 14px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

/* --- loading / error states ---------------------------------------------- */

.state { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); }

.spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--ink-faint);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.error {
  background: var(--danger-bg);
  border: 1px solid #edc9c4;
  border-radius: var(--radius);
  padding: 16px 18px;
}
.error h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--danger); }
.error p  { margin: 0; color: var(--ink-soft); }
.error .code { display: block; margin-top: 10px; font: 12px var(--mono); color: var(--ink-faint); }

/* --- the verified result -------------------------------------------------- */

.badge {
  display: inline-block;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.lede { margin: 14px 0 20px; color: var(--ink-soft); }

.facts {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 16px;
  margin: 0 0 24px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
}
.facts dt { color: var(--ink-faint); font-size: 13px; }
.facts dd { margin: 0; word-break: break-all; }

code {
  font: 13px var(--mono);
  background: var(--brand-alt);
  border-radius: var(--radius);
  padding: 1px 5px;
}

.ttl {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-faint);
  margin: 0 0 10px;
}
.ttl .count { font-weight: 400; }

.scopes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.scopes li {
  font: 12px var(--mono);
  background: var(--brand-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 8px;
  color: var(--ink-soft);
}

.warn {
  margin: 18px 0 0;
  background: var(--warn-bg);
  border: 1px solid #eed7ac;
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--warn);
  font-size: 14px;
}

.foot { margin: 18px 2px 0; color: var(--ink-faint); font-size: 13px; }
.foot a { color: var(--accent); }

/* --- the direct-visit form ------------------------------------------------ */

.form { display: grid; gap: 8px; max-width: 380px; }
.form label { font-size: 13px; color: var(--ink-faint); }
.form input {
  /* Never below 16px: iOS zooms the viewport on focus otherwise, which throws
     the merchant out of the layout mid-install. design-system.md §2. */
  font: 400 16px/1.5 var(--brand-font-sans);
  padding: 10px 12px;
  border: 1px solid #8d867c;
  border-radius: var(--radius);
  background: #fff;
  color: var(--brand-copy);
}
/* The focus ring is the raw brand orange. That is a decorative marker beside
   the field rather than something carrying text, and it sits on a 3px offset
   against white, so the 2.96:1 figure does not apply to it the way it would
   to a label. */
.form input:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
  border-color: var(--brand-accent-strong);
}
/* Primary button: ink, with the accent as the hover — design-system.md.
   The label flips to ink on hover because white on the orange is 2.96:1. */
.form button {
  justify-self: start;
  font: 600 15px/1 var(--brand-font-sans);
  color: #fff;
  background: var(--brand-ink);
  border: 0;
  border-radius: var(--radius);
  padding: 13px 22px;
  cursor: pointer;
  transition: background .18s var(--brand-ease-standard), color .18s var(--brand-ease-standard);
}
.form button:hover {
  background: var(--brand-accent);
  color: var(--brand-on-accent);
}
.form button:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }