/* Argument Workshop: the engine's shared styles (style.css) with the Workshop's skin on top. Parchment, the
   Mapper's lapis blue, the Builder's terracotta, and the gold of their brooches. Calmer than the Skeptic's infomercial. */

:root {
  --bg: #faf5ea;
  --surface: #fffdf8;
  --ink: #2b2620;
  --muted: #776b5e;
  --line: #e6dac2;
  --lapis: #24468c;
  --lapis-dark: #1a3266;
  --lapis-soft: #e3e9f6;
  --terra: #b5452b;
  --terra-dark: #8c3219;
  --terra-soft: #f9e4da;
  --gold: #d9a43a;
  --gold-soft: #fbf0d4;
  --accent: var(--lapis);
  --accent-dark: var(--lapis-dark);
  --accent-soft: var(--lapis-soft);
  --sun: var(--gold);
  --sun-soft: var(--gold-soft);
  --sun-line: #c9952a;
  --sun-dark: #a87a1c;
  --visitor: #f1eadb;
  --win: #3d7a46;
}
/* Each guide brings their own colour to the session. */
body.with-builder { --accent: var(--terra); --accent-dark: var(--terra-dark); --accent-soft: var(--terra-soft); }

/* A true meander (Greek key) along the top of the masthead and the footer, after Angela's example (2026-10-30): one
   unbroken ribbon, as wide as its gaps, on a grid 5 bands high and 7 wide. Each key rises from the bottom the full height,
   crosses the top, comes down halfway, turns in, and drops back to the bottom to run on into the next; a rail above and
   below. */
.meander {
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='36' viewBox='0 0 28 36'%3E%3Cg fill='%23d9a43a'%3E%3Crect width='28' height='4'/%3E%3Crect y='32' width='28' height='4'/%3E%3C/g%3E%3Cpath d='M0 26H2V10H22V18H10V26H28' fill='none' stroke='%23d9a43a' stroke-width='4'/%3E%3C/svg%3E") repeat-x left top;
}
.site-nav { background: var(--lapis-dark); }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { background: var(--gold); color: var(--ink); }

.masthead { padding: 30px 16px 6px; }
.masthead h1 { color: var(--lapis-dark); }
.masthead h1 .amp { color: var(--terra); font-style: italic; font-weight: 600; }

/* ---------- Start screen ---------- */
.ws-start { display: grid; gap: 26px; margin-top: 18px; }
.ws-pitch { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; align-items: center; }
.ws-pitch h2 { font: 700 2.2rem/1.15 var(--display); margin: 0 0 10px; color: var(--lapis-dark); }
.ws-pitch p { font-size: 1.12rem; margin: 0; }
.pitch-map { margin: 0; padding: 12px 14px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 5px 5px 0 var(--gold-soft); }
.pitch-map figcaption { text-align: center; font-size: 0.82rem; font-style: italic; color: var(--muted); margin-top: 4px; }

.guides { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.guide {
  position: relative;
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 4px 18px;
  align-items: center;
  padding: 18px 20px 18px 10px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.guide:hover { background: var(--surface); transform: translateY(-2px); }
.guide img { width: 100%; height: auto; grid-row: span 3; filter: drop-shadow(0 6px 8px rgba(60, 40, 20, 0.15)); }
.guide .g-name { font: 700 1.7rem/1.1 var(--display); margin: 0; }
.guide .g-role { font: 600 0.8rem var(--serif); text-transform: uppercase; letter-spacing: 0.14em; margin: 0; }
.guide .g-blurb { margin: 0; font-size: 1rem; }
.guide.mapper .g-name, .guide.mapper .g-role { color: var(--lapis); }
.guide.builder .g-name, .guide.builder .g-role { color: var(--terra); }
.guide.mapper:hover, .guide.mapper[aria-pressed="true"] { border-color: var(--lapis); box-shadow: 5px 5px 0 var(--lapis-soft); }
.guide.builder:hover, .guide.builder[aria-pressed="true"] { border-color: var(--terra); box-shadow: 5px 5px 0 var(--terra-soft); }
.guide[aria-pressed="true"]::after {
  content: "✓"; position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold); color: var(--ink); font: 700 0.9rem var(--serif);
}

.ws-form {
  width: 100%; max-width: 620px; justify-self: center;
  background: var(--surface); border: 2px solid var(--accent); border-radius: 10px;
  padding: 22px 24px; box-shadow: 6px 6px 0 var(--gold-soft);
}
.ws-form h3 { font: 700 1.5rem var(--display); margin: 0; color: var(--accent); }
.ws-form .whose { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ws-form .whose button { flex: 1; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.ws-form .whose button[aria-pressed="true"] { background: var(--lapis-soft); border-color: var(--lapis); font-weight: 600; }
.ws-form .go { width: 100%; margin-top: 22px; padding: 13px; font: 700 1.25rem var(--display); letter-spacing: 0.02em; }
.ws-form .go.build { background: var(--terra); border-color: var(--terra); }
.ws-form .go.build:hover { background: var(--terra-dark); }
#suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#suggestions button { font: 400 0.88rem var(--serif); padding: 4px 12px; border-radius: 999px; background: var(--gold-soft); border: 1px solid var(--gold); color: var(--ink); }
#suggestions button:hover { background: var(--gold); }

.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: step; }
.how div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.how h4 { margin: 0 0 4px; font: 700 1.2rem var(--display); }
.how h4::before {
  counter-increment: step; content: counter(step);
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%;
  background: var(--accent); color: #fff; font: 700 0.9rem var(--serif); vertical-align: 2px;
}
.how p { margin: 0; font-size: 0.95rem; }
.ws-start .testimonials { grid-area: auto; }
.ws-start .testimonials blockquote { border-left-color: var(--gold); }
.ws-start .fineprint { grid-area: auto; }

/* ---------- Session ---------- */
.progress li.current { color: var(--accent); font-weight: 700; }
.msg.skeptic { border-left-color: var(--accent); }
.msg .avatar { width: 40px; height: 40px; object-fit: contain; }
.msg.guide-mapper { border-left-color: var(--lapis); }
.msg.guide-builder { border-left-color: var(--terra); }
.msg .q { font-weight: 600; margin-top: 8px; }
.choices button { background: var(--gold-soft); border-color: var(--gold); }
.choices button:hover { background: var(--gold); }
.choices button.picked { background: var(--gold); font-weight: 600; }
.handoff {
  display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; gap: 12px;
  margin: 6px 0; padding: 12px 16px; text-align: center; font-style: italic; color: var(--muted);
  background: linear-gradient(90deg, var(--lapis-soft), var(--terra-soft)); border-radius: 8px;
}
.handoff img { width: 80px; height: auto; }
/* The reply box full width; under it on the right, "I'm done", the help button and Reply, all three the same size,
   Reply filled in (Angela, 2026-11-09; the help button next to Reply, 2026-11-10). */
.say textarea { width: 100%; }
.say-under { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.say-under button { white-space: nowrap; font-size: 0.9rem; padding: 5px 12px; }
.say-under .done { background: transparent; color: var(--accent); }
.say-under .done:hover { background: var(--accent-soft); }
.ledger h3 { font: 700 1.25rem var(--display); margin: 0 0 4px; text-align: center; }
.ledger .map-sub { text-align: center; font-size: 0.88rem; margin: 0 0 6px; }
.am-end-stop text.am-note { fill: var(--muted); font-weight: 400; font-style: italic; }

/* ---------- Done ---------- */
.ws-done { display: grid; gap: 22px; justify-items: center; }
.ws-done .congrats { font: 700 1.9rem var(--display); color: var(--accent-dark); margin: 0; text-align: center; }   /* (the guide's own colour, not always the Mapper's: 2026-11-10) */
.two-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; }
.two-maps .ledger h3 small { display: block; font: 400 0.85rem var(--serif); color: var(--muted); }
.two-maps .mapped { border-top: 4px solid var(--lapis); }
.two-maps .built { border-top: 4px solid var(--terra); }
.what-changed { max-width: 780px; width: 100%; }
.what-changed ul { margin: 8px 0 0; padding-left: 22px; }

footer { background: var(--lapis-dark); color: #e9edf7; }
footer a { color: var(--gold); }

@media (max-width: 800px) {
  .guides, .how, .two-maps, .ws-pitch { grid-template-columns: 1fr; }
  .guide { grid-template-columns: 120px 1fr; }
  .ws-pitch h2 { font-size: 1.8rem; }
  .handoff { grid-template-columns: 50px 1fr 50px; }
  .handoff img { width: 50px; }
}

/* The Mapper's four steps, all on one row */
#how-map { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { #how-map { grid-template-columns: 1fr; } }
/* The start page in full-width bands, alternating parchment and a deeper tint, each with its content centred: the
   pitch, the choice of guide, the form, how it works, and the testimonials. */
body:has(#start:not([hidden])) { overflow-x: clip; }
.ws-start { gap: 0; margin-top: 18px; }
.band { margin-inline: calc(50% - 50vw); padding: 38px max(16px, calc(50vw - 520px)); border-top: 1px solid var(--line); }
/* The masthead stays parchment; the bands below alternate, starting with a tint. */
.band-hero, .band-form, .band-quotes { background: #f3ead6; }
.band-title { font: 700 1.7rem var(--display); color: var(--lapis-dark); text-align: center; margin: 0 0 20px; }
.band-title::after { content: ""; display: block; width: 60px; height: 2px; margin: 8px auto 0; background: var(--gold); }
.band-form .ws-form { margin: 0 auto; }
.band-quotes .testimonials { margin: 0; }
main:has(#start:not([hidden])) + footer { margin-top: 0; }
@media (max-width: 800px) {
  .band { padding-block: 28px; }
}

/* ---------- The live page (beyond the mockup) ---------- */
/* The start button: the Workshop's, not the Skeptic's loud one (style.css #start-form button). */
#start-form button.go { font: 700 1.25rem var(--display); text-transform: none; letter-spacing: 0.02em; }
#start-form .whose button { margin-top: 0; padding: 10px; font: 500 1rem var(--serif); text-transform: none; }
.band-form .ws-form { margin: 0 auto; }
/* The map's "stops here" mark, and its legend chip */
.lg-stop { font: italic 0.8rem var(--serif); color: var(--muted); }
/* The end screen */
.ws-done .end-map { width: 100%; }
#end-summary { max-width: 780px; width: 100%; }
footer .meander { margin: -22px -16px 16px; }
/* "All done.": the conversation closed, with the way to the end screen (as the Skeptic's closed note) */
.closed-note { margin-top: 20px; padding: 16px; text-align: center; background: var(--gold-soft); border: 1px dashed var(--gold); border-radius: 8px; }
.closed-note p { margin: 0 0 12px; }
.closed-note strong { color: var(--accent); }
/* The end screen: no tagline under the title (Angela, 2026-10-30) */
body:has(#end:not([hidden])) .masthead .tagline { display: none; }
/* The end screen's heading names the argument, so it can run long */
#end-title { font-size: 1.6rem; max-width: 34em; text-wrap: balance; }
/* The end screen after a handover: each map labelled */
.end-map-label { margin: 0 0 -12px; font: italic 1.05rem var(--serif); color: var(--muted, #6b6b6b); text-align: center; }
.end-actions button.build, .closed-note button.build { background: var(--terra); border-color: var(--terra); color: #fff; }
/* The handover card: the Builder introduced, at the end of a Mapper session on their own argument */
.handover { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0; padding: 14px 16px; text-align: left; background: var(--terra-soft); border: 1px solid var(--terra); border-radius: 10px; }
.handover-pic { width: 64px; height: auto; flex: none; }
.handover p { margin: 0 0 8px; }
.handover .handover-title { font: 600 1.15rem var(--display); color: var(--terra-dark); }
.handover button { margin-top: 4px; }
.ws-done .handover { max-width: 40em; width: 100%; box-sizing: border-box; }
/* The guides' pictures the same height on their cards (the new cat, 2026-11-05, is narrower and taller than the fox) */
.guide img { width: auto; max-width: 100%; height: 300px; object-fit: contain; justify-self: center; }
@media (max-width: 800px) { .guide img { height: 220px; } }