/* Puts Clarity Draw (/clarity-test/) and Bonded Draw (/bonded-draw/) in the shared site look.
   Load after luv1111-pastel-mystic.css (and bonded.css). Only colours, type and decoration
   change here; the apps' screens, ids and behaviour are untouched. */

:root {
  --bg: #fbf7f2;
  --panel: #fffdfa;
  --panel-strong: #fffdfa;
  --ink: #1d3a4a;
  --ink-deep: #1d3a4a;
  --muted: #5b6a73;
  --accent: #1f5570;
  --accent2: #ff9ec7;
  --accent3: #a8dcef;
  --line: rgba(29, 58, 74, 0.12);
  --shadow: 0 18px 50px rgba(29, 58, 74, 0.08);
}

html, body {
  background: var(--lv-paper) !important;
  background-image: none !important;
}
body.lv { font-family: var(--lv-font); color: var(--lv-ink); }
body.lv::before, .app::before, .app::after, .screen.active::before, .panel::before,
.hero h1::after, .screen.active > h1::after { content: none !important; display: none !important; }

/* Page band behind the app column, like the home hero */
.lv-appband {
  background:
    radial-gradient(ellipse 70% 50% at 90% 0%, var(--lv-sky-soft), transparent 60%),
    radial-gradient(ellipse 60% 45% at 5% 30%, var(--lv-pink-soft), transparent 55%),
    var(--lv-paper);
}
.app { max-width: 640px; padding: 8px 18px 56px; min-height: 0; }
.brand { display: none; }

.hero { padding: 40px 0 22px; }
.eyebrow { color: var(--lv-navy); font-weight: 700; letter-spacing: 0.14em; }
.hero h1, .screen > h1, .app h1 { font-family: var(--lv-serif); font-weight: 500; color: var(--lv-ink); letter-spacing: -0.02em; }
.hero h1 { font-size: clamp(2.2rem, 7vw, 3.1rem); line-height: 1.1; }
.hero p { color: var(--lv-ink-soft); font-size: 1.1rem; }
.app h2 { font-family: var(--lv-serif); font-weight: 500; color: var(--lv-ink); }

/* Buttons: bright pastel pink, navy writing */
.app button, .app .btn {
  border: none;
  border-radius: 999px;
  background: var(--lv-pink);
  color: var(--lv-btn-ink);
  font-family: var(--lv-font);
  font-weight: 700;
  padding: 16px 22px;
  box-shadow: 0 8px 22px rgba(255, 134, 186, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
.app button:hover, .app .btn:hover { background: var(--lv-pink-hover); }
.app button:active, .app .btn:active { transform: translateY(1px); }
.app button:focus-visible, .app .btn:focus-visible { outline: 3px solid var(--lv-navy); outline-offset: 2px; }
.app button:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.app .ghost, .app button.ghost, .app .btn.ghost {
  background: var(--lv-sky);
  color: var(--lv-btn-ink);
  box-shadow: 0 8px 22px rgba(143, 209, 234, 0.35);
  border: none;
}
.app .ghost:hover { background: var(--lv-sky-hover); }

/* Choice list */
.app .choice {
  background: var(--lv-white);
  border: 1.5px solid var(--lv-line);
  color: var(--lv-ink);
  border-radius: 16px;
  box-shadow: none;
  text-align: left;
}
.app .choice:hover { background: var(--lv-pink-soft); }
.app .choice.selected { background: var(--lv-pink-soft); border-color: var(--lv-pink-hover); box-shadow: 0 0 0 2px rgba(255, 134, 186, 0.25) inset; }

/* Panels and fields */
.panel {
  background: var(--lv-white);
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  box-shadow: var(--lv-shadow);
  backdrop-filter: none;
}
.pill {
  display: inline-block;
  background: var(--lv-sky-soft);
  color: var(--lv-btn-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.field label { color: var(--lv-ink); font-weight: 700; }
.field textarea, .field select, .field input {
  background: var(--lv-paper);
  border: 1.5px solid var(--lv-line);
  border-radius: var(--lv-radius-sm);
  color: var(--lv-ink);
}
.field textarea:focus, .field select:focus, .field input:focus { outline: 2px solid var(--lv-navy); outline-offset: 1px; border-color: transparent; }
.small { color: var(--lv-muted); }
.price { color: var(--lv-ink); font-family: var(--lv-serif); font-weight: 500; }
.progress { background: var(--lv-sky-soft); border-radius: 999px; height: 8px; overflow: hidden; margin: 6px 0 18px; }
.progress > div { background: var(--lv-pink); height: 100%; border-radius: 999px; }

/* Cards */
.card {
  background: linear-gradient(150deg, var(--lv-pink-soft), var(--lv-lavender) 55%, var(--lv-sky-soft));
  border: 1px solid var(--lv-line);
}
.app button.card {
  border-radius: 20px;
  padding: 8px;
  border: 1px solid var(--lv-line);
  background: linear-gradient(150deg, var(--lv-pink-soft), var(--lv-lavender) 55%, var(--lv-sky-soft));
  color: var(--lv-ink);
  box-shadow: var(--lv-shadow);
}
.app button.card:hover { background: linear-gradient(150deg, #fcd3e5, var(--lv-lavender) 55%, #d3edf8); }
.app button.card.revealed { background: #fff; padding: 0; }
.card-back::before, .back-orbit, .back-brand { color: var(--lv-navy); }

.reading { color: var(--lv-ink-soft); }
.notice { background: var(--lv-sky-soft); border-color: rgba(31, 85, 112, 0.18); color: var(--lv-ink); }
.danger { background: #fff0f5; border-color: #f4bcd2; color: #6d2a46; }
.footer { color: var(--lv-muted); font-size: 0.8rem; }

/* Bonded additions */
.bd-reading h2 { color: var(--lv-navy); }
.bd-check { color: var(--lv-ink-soft); }
.bd-check input { accent-color: var(--lv-navy); }
.bd-error { color: #a3305f; }