/* =========================================================
   Beyond the Blueprint — Site Meeting Quiz
   Palette + type taken directly from the book cover:
   navy #28347A, lavender panel #C9CAD5, white, near-black ink
   ========================================================= */

:root{
  --navy: #28347A;
  --navy-dark: #1B2258;
  --navy-soft: #3B4FA0;
  --lavender: #C9CAD5;
  --lavender-light: #EEEFF3;
  --white: #FFFFFF;
  --ink: #20222E;
  --ink-soft: #565A6E;

  --a-color: #3B6CD9;   /* Awesome */
  --b-color: #3FA968;   /* Beautiful progress */
  --c-color: #F0973B;   /* Change needed */
  --d-color: #D6393F;   /* Danger */

  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow: 0 20px 50px rgba(17, 22, 60, 0.18);

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-serif: 'Lora', serif;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--navy-dark);
  min-height: 100vh;
  line-height: 1.55;
}

.bg-frame{
  position: fixed;
  inset: 0;
  background: url('assets/blueprint-navy.jpg') center/cover no-repeat, var(--navy-dark);
  z-index: -1;
}
.bg-frame::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(27,34,88,.88), rgba(27,34,88,.94));
}

.app{
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* ---------- header ---------- */
.site-header{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 28px;
  color: var(--white);
}
.site-header__brand .eyebrow{
  display:block;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  color: var(--lavender);
  font-weight: 600;
}
.site-header__brand h1{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin: 2px 0 0;
  letter-spacing: .01em;
}
.site-header__brand h1 span{ color: var(--lavender); font-weight: 600; }

.steps-nav{
  display:flex;
  gap: 10px;
}
.step-dot{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  position: relative;
}
.step-dot em{
  position:absolute; top: 42px; left:50%; transform: translateX(-50%);
  font-style: normal; font-size: .65rem; font-weight: 600;
  color: rgba(255,255,255,.55); white-space: nowrap;
}
.step-dot.is-current{
  background: var(--white); color: var(--navy); border-color: var(--white);
}
.step-dot.is-current em{ color: var(--white); }
.step-dot.is-done{
  background: var(--b-color); color: var(--white); border-color: var(--b-color);
}

/* ---------- stage / screens ---------- */
.stage{ position: relative; }
.screen{ display:none; }
.screen[data-active="true"]{
  display:block;
  animation: fadeIn .35s ease;
}
@keyframes fadeIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

.card{
  background: var(--lavender-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(24px, 5vw, 44px);
  position: relative;
  overflow: hidden;
}
.card--wide{ max-width: 900px; }
.card--intro{ text-align:left; }
.card__cover{
  width: 84px; margin-bottom: 14px; opacity: .9;
}

.card h2{
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  margin: 0 0 14px;
}
.card h3.section-title{
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.1rem;
  margin: 30px 0 8px;
}
.card p{ color: var(--ink); margin: 0 0 14px; }
.card .lead{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--navy-dark);
}
.card .hint{ color: var(--ink-soft); font-size: .92rem; }
.card .hint-inline{ font-weight: 400; color: var(--ink-soft); font-size: .85rem; }

.pull-quote{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--navy);
  border-left: 4px solid var(--navy);
  padding: 4px 0 4px 18px;
  margin: 20px 0;
}
.verse-inline{
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: .95rem;
}
.badge{
  display:inline-block;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.signature{ font-family: var(--font-serif); font-style: italic; margin-top: 24px; }

/* ---------- buttons ---------- */
.card__actions{
  display:flex; gap: 12px; margin-top: 24px; flex-wrap: wrap;
}
.card__actions--center{ justify-content: center; }
.btn{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  border-radius: 999px;
  padding: 13px 26px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform: scale(.97); }
.btn--primary{
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 8px 18px rgba(40,52,122,.35);
}
.btn--primary:hover{ background: var(--navy-soft); }
.btn--ghost{
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn--ghost:hover{ background: rgba(40,52,122,.08); }
.btn--link{
  background: none;
  color: var(--navy);
  text-decoration: underline;
  padding: 13px 4px;
}

/* ---------- form fields ---------- */
.field{ margin-bottom: 20px; }
.field label{
  display:block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--navy-dark);
}
.req{ color: var(--c-color); }
input[type="text"], input[type="date"], select, textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid #c3c5d6;
  background: var(--white);
  color: var(--ink);
}
textarea{ resize: vertical; }
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(40,52,122,.15);
}
.error{
  color: #C0392B;
  background: #FBE7E4;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .9rem;
  margin-top: 10px;
}

/* ---------- step 1 rating grid ---------- */
.rating-grid{ display:flex; flex-direction:column; gap: 10px; margin: 18px 0; }
.rating-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  border: 1.5px solid #dcdeec;
}
.rating-row__label{ font-weight: 600; color: var(--navy-dark); flex: 1 1 220px; }
.rating-row__label small{ display:block; font-weight:400; color: var(--ink-soft); }
.rating-row__options{ display:flex; gap: 8px; }
.rating-btn{
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid #c3c5d6;
  background: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all .15s ease;
}
.rating-btn[data-letter="A"].is-selected{ background: var(--a-color); border-color: var(--a-color); color:#fff; }
.rating-btn[data-letter="B"].is-selected{ background: var(--b-color); border-color: var(--b-color); color:#fff; }
.rating-btn[data-letter="C"].is-selected{ background: var(--c-color); border-color: var(--c-color); color:#fff; }
.rating-btn[data-letter="D"].is-selected{ background: var(--d-color); border-color: var(--d-color); color:#fff; }
.rating-btn:hover{ transform: translateY(-2px); }

.legend{ list-style:none; padding:0; margin: 16px 0; display:flex; flex-direction:column; gap:8px; }
.legend li{ display:flex; align-items:center; gap:10px; color: var(--ink); }
.legend__chip{
  width: 30px; height: 30px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-weight:700; color:#fff; flex: none;
}
.legend__chip--a{ background: var(--a-color); }
.legend__chip--b{ background: var(--b-color); }
.legend__chip--c{ background: var(--c-color); }
.legend__chip--d{ background: var(--d-color); }

/* Compact reminder version — used on the rating grid and Reflect screens so
   people don't have to scroll back up to remember what A/B/C/D mean. */
.legend--compact{
  flex-direction: row; flex-wrap: wrap;
  gap: 6px 18px;
  margin: 4px 0 18px;
  padding: 10px 14px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1.5px solid #dcdeec;
}
.legend--compact li{ font-size: .85rem; font-weight: 600; color: var(--navy-dark); gap: 6px; }
.legend--compact .legend__chip{ width: 22px; height: 22px; font-size: .7rem; }

/* ---------- step 2 summary + pair inputs ---------- */
.summary-list{ display:flex; flex-wrap:wrap; gap: 8px; margin: 18px 0 28px; }
.summary-chip{
  display:flex; align-items:center; gap:8px;
  background: var(--white);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  border: 1.5px solid #dcdeec;
  font-size: .85rem;
  color: var(--ink);
}
.summary-chip__letter{
  width: 24px; height: 24px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-weight:700; font-size:.75rem; color:#fff;
}
.summary-chip--a .summary-chip__letter{ background: var(--a-color); }
.summary-chip--b .summary-chip__letter{ background: var(--b-color); }
.summary-chip--c .summary-chip__letter{ background: var(--c-color); }
.summary-chip--d .summary-chip__letter{ background: var(--d-color); }

.pair-inputs{ display:flex; flex-direction:column; gap: 14px; margin-bottom: 10px; }
.pair-input{
  display:flex; gap: 12px; align-items:flex-start; flex-wrap: wrap;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1.5px solid #dcdeec;
}
.pair-input select{ flex: 1 1 220px; }
.pair-input input[type="text"]{ flex: 2 1 280px; }

/* ---------- results ---------- */
.results-wrap{ text-align:center; }
.results-heading{
  font-family: var(--font-head); color: var(--white);
  font-size: clamp(1.4rem, 3.6vw, 2rem); margin-bottom: 4px;
}
.results-wrap > .hint{ color: var(--lavender); margin-bottom: 22px; }

/* "Back" and "Start a new Site Meeting" sit directly on the dark navy page
   background here (unlike everywhere else, where these buttons sit inside
   a light .card), so they need light colours to stay readable. */
.results-wrap .btn--ghost{
  color: var(--white);
  border-color: rgba(255,255,255,.75);
}
.results-wrap .btn--ghost:hover{ background: rgba(255,255,255,.12); border-color: var(--white); }
.results-wrap .btn--link{ color: var(--white); }
.results-wrap .btn--link:hover{ color: var(--lavender); }

.result-card-viewport{
  width: 100%;
  max-width: 640px;
  margin: 0 auto 28px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.result-card{
  width: 1080px;
  background: var(--lavender-light);
  transform-origin: top left;
  text-align: left;
  font-family: var(--font-body);
  color: var(--ink);
}
.result-card__top{
  display:flex; justify-content:space-between; align-items:flex-start;
  background: var(--lavender);
  padding: 56px 56px 40px;
}
.result-card__eyebrow{
  display:block; text-transform:uppercase; letter-spacing:.14em;
  font-size: 20px; font-weight:600; color: var(--navy-soft);
}
.result-card__title h3{
  font-family: var(--font-head); font-weight: 800; color: var(--navy);
  font-size: 56px; margin: 4px 0 22px; line-height: 1;
}
.result-card__name{ font-size: 30px; font-weight:700; color: var(--ink); margin:0; }
.result-card__date{ font-size: 20px; color: var(--ink-soft); margin: 2px 0 0; }
.result-card__house{ width: 190px; margin-top: -10px; }

.result-card__body{ padding: 44px 56px 10px; }
.result-card__list{ list-style:none; margin:0; padding:0; }
.result-card__list li{
  display:flex; align-items:baseline; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid #d7d9e4;
  font-size: 24px;
}
.result-card__list li:first-child{ padding-top:0; }
.result-item__letter{
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-weight:800; color:#fff; font-size: 20px;
}
.result-item__letter--a{ background: var(--a-color); }
.result-item__letter--b{ background: var(--b-color); }
.result-item__letter--c{ background: var(--c-color); }
.result-item__letter--d{ background: var(--d-color); }
.result-item__label{ font-weight: 700; color: var(--navy-dark); }
.result-item__comment{ font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); font-size: 20px; }

.result-card__extra{
  font-family: var(--font-serif); font-style: italic; font-size: 22px;
  color: var(--navy-dark); margin: 26px 0 0;
}

.result-card__focus{ margin-top: 40px; padding-top: 30px; border-top: 3px solid var(--navy); }
.result-card__focus-label{ font-size: 22px; color: var(--ink-soft); margin: 0; }
.result-card__focus-area{
  font-family: var(--font-head); font-weight: 800; color: var(--navy);
  font-size: 34px; text-transform: uppercase; margin: 4px 0 26px;
}
.result-card__focus-grid{ display:flex; flex-direction:column; gap: 20px; }
.result-card__focus-grid strong{ display:block; color: var(--navy-dark); font-size: 20px; margin-bottom: 4px; }
.result-card__focus-grid p{ margin:0; font-size: 22px; }
.result-card__focus-grid ol{ margin: 4px 0 0; padding-left: 22px; font-size: 22px; }
.result-card__next{ margin-top: 30px; font-size: 24px; color: var(--navy-dark); }

.result-card__footer{
  background: var(--navy);
  padding: 34px 56px 40px;
  margin-top: 40px;
  display:flex; flex-direction:column; align-items:center; gap: 20px;
}
.result-card__verse{
  color: var(--white); font-family: var(--font-serif); font-style: italic;
  font-size: 22px; text-align:center; max-width: 760px;
}
.result-card__logo{ width: 190px; opacity: .95; }

@media (max-width: 640px){
  .site-header{ justify-content:center; text-align:center; }
  .steps-nav{ display:none; }
  .rating-row{ flex-direction: column; align-items:stretch; }
  /* Without this, the label keeps its desktop "flex: 1 1 220px" — and once the
     row above switches to a column layout, that 220px basis applies to HEIGHT
     instead of width, stretching each card and leaving a big empty gap above
     the A/B/C/D buttons. Resetting it here keeps the label its natural height. */
  .rating-row__label{ flex: none; margin-bottom: 10px; }
  .rating-row__options{ justify-content: space-between; }
}

/* ---------- footer ---------- */
.site-footer{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  max-width: 880px;
  margin: 48px auto 0;
  padding: 26px 32px;
  color: var(--lavender);
  font-size: .95rem;
}
.site-footer__house{ width: 84px; opacity: .95; justify-self: start; }
.site-footer__logo-link{ display:block; justify-self: end; }
.site-footer__logo{ width: 230px; opacity: .95; display:block; }
.site-footer__text{
  display:flex; flex-direction:column; gap: 4px;
  text-align:center;
}
.site-footer__title{
  font-family: var(--font-head); font-weight: 700; font-size: 1.4rem;
  color: var(--white); text-decoration: none;
}
.site-footer__title:hover{ text-decoration: underline; }
.site-footer__subtitle{
  font-family: var(--font-serif); font-style: italic;
  color: var(--lavender); font-size: 1.05rem;
}

@media (max-width: 640px){
  .site-footer{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 18px;
  }
  .site-footer__house{ justify-self: center; }
  .site-footer__logo-link{ justify-self: center; }
}