/* Quiz page styles. Colours and fonts are the brand's, taken as-is from
   brand_context/visual-identity/tokens.json (palette locked, identity.md).

   Contrast on Paper Cream #FBF7EB, measured in research Pitfall 7:
   Granite 14.40, Wine 8.81, Inkwell 8.86, Pine 8.24, Walnut 5.84,
   Slate Mist 3.97, Brass 3.55.
   So all body, label and button text is Granite, Walnut or a jewel.
   Slate Mist and Brass are for decoration or type of 24px and up only.

   Flat colour only, nothing glowing, no pastels, no app-style card chrome
   (identity.md anti-patterns). Dark surfaces, if ever added, are Walnut. */

:root {
  --paper-cream: #FBF7EB;
  --linen: #E8DECF;
  --pale-oak: #CBB698;
  --walnut: #7A5A3E;
  --granite: #252428;
  --slate-mist: #7C7A7E;
  --wine: #7A2A3D;
  --inkwell: #2A476B;
  --pine: #2A5240;
  --brass: #A67B3E;

  /* One jewel per screen. Result screens swap this with .accent-*. */
  --accent: var(--wine);
}

/* DM Sans ships as one variable font (weight axis 100 to 1000), so a single
   file serves 400, 500 and 700. */
@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/dm-serif-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-400.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-400i.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sacramento";
  src: url("fonts/sacramento-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.accent-wine { --accent: var(--wine); }
.accent-inkwell { --accent: var(--inkwell); }
.accent-pine { --accent: var(--pine); }

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

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

body {
  margin: 0;
  background: var(--paper-cream);
  color: var(--granite);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
}

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

/* ---- type ---- */

h1,
h2 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  color: var(--granite);
  margin: 0 0 1rem;
  text-wrap: balance; /* no one-word last lines on headings; browsers without it just wrap normally */
}

h1 {
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

h2 {
  font-size: 1.75rem;
  line-height: 1.15;
}

p {
  margin: 0 0 1rem;
}

.kicker {
  margin: 0 0 1.5rem;
  color: var(--walnut);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.subline {
  font-size: 1.25rem;
  line-height: 1.45;
  margin-bottom: 1.5rem;
}

.count {
  color: var(--walnut);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.privacy {
  margin: 1.5rem 0 0;
  color: var(--walnut);
  font-size: 1rem;
  line-height: 1.45;
}

/* One decorative word at most. Never a label, never a button. */
.script {
  font-family: "Sacramento", cursive;
  font-size: 1.75rem;
  color: var(--accent);
}

/* Brass appears only as a hairline. */
.rule {
  border: 0;
  border-top: 1px solid var(--brass);
  margin: 1.5rem 0;
}

/* ---- buttons and links ---- */

.btn {
  display: inline-block;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border: 2px solid var(--accent);
  border-radius: 0.25rem;
  background: var(--accent);
  color: var(--paper-cream);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--granite);
  border-color: var(--granite);
  color: var(--paper-cream);
}

.btn[disabled] {
  background: var(--linen);
  border-color: var(--walnut);
  color: var(--granite);
  cursor: default;
}

.btn-block {
  display: block;
  width: 100%;
}

/* Text-style buttons: Back, skip, Try again fallback. Still 44px tall to tap. */
.link-btn {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--granite);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--accent);
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--inkwell);
  outline-offset: 2px;
}

/* Headings that script moves focus to after a screen change: no ring, they are not controls. */
[tabindex="-1"]:focus {
  outline: none;
}

/* ---- question screens ---- */

.progress {
  margin: 0 0 1.25rem;
  color: var(--walnut);
  font-size: 1rem;
  font-weight: 500;
}

.answers {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.answer {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.875rem 1rem;
  border: 2px solid var(--walnut);
  border-radius: 0.25rem;
  background: var(--linen);
  color: var(--granite);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.answer:hover,
.answer[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--paper-cream);
}

/* ---- result and ask ---- */

.result {
  border-top: 4px solid var(--accent);
  padding-top: 1.25rem;
}

.result-kicker {
  margin: 0 0 0.5rem;
  color: var(--walnut);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.result-name {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--accent);
  margin: 0 0 1.25rem;
}

.why p {
  margin-bottom: 0.875rem;
}

.ask {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pale-oak);
}

.field {
  margin: 0 0 1rem;
}

label {
  display: block;
  margin: 0 0 0.375rem;
  color: var(--granite);
  font-size: 1rem;
  font-weight: 500;
}

input[type="email"],
input[type="text"] {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.75rem;
  border: 2px solid var(--walnut);
  border-radius: 0.25rem;
  background: var(--paper-cream);
  color: var(--granite);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.125rem;
}

/* Honeypot: off-screen, not display:none, so a naive bot still fills it. The
   script also sets aria-hidden and tabindex=-1 on it. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip {
  margin-top: 0.5rem;
}

/* ---- messages: sent, queued, error, skipped ---- */

.notice {
  border-left: 4px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1rem;
  margin: 0 0 1.5rem;
}

.notice-error {
  --accent: var(--wine);
}

.noscript {
  background: var(--linen);
  color: var(--granite);
  border: 2px solid var(--walnut);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
}

@media (min-width: 40rem) {
  main {
    padding-top: 4rem;
  }

  h1 {
    font-size: 2.75rem;
  }

  .result-name {
    font-size: 3rem;
  }
}