/* Wallflower: a lilac-grey wall, an aubergine header band, sticky notes in six colours. */
:root {
  --ground: #f2f0f4;
  --surface: #ffffff;
  --well: #f8f7fa;
  --ink: #241c33;
  --muted: #6b6178;
  --line: #ddd8e3;
  --primary: #241c33;
  --primary-ink: #ffffff;
  --accent: #f3c94e;
  --focus: #5b3fb0;
  --error: #a3321f;
  --col: 720px;
  --gutter: clamp(16px, 4vw, 48px);

  /* Note colours, assigned to questions in order */
  --n1: #f3c94e; --n1-ink: #3a2f00;
  --n2: #f2a7b7; --n2-ink: #46121c;
  --n3: #8fc4e8; --n3-ink: #0e2f45;
  --n4: #b9dd8f; --n4-ink: #1d3a0c;
  --n5: #f5b98a; --n5-ink: #4a2306;
  --n6: #cdbdf0; --n6-ink: #2b1a52;
  --note-shadow: 0 1px 1px rgba(0,0,0,.25), 0 10px 18px -8px rgba(0,0,0,.55);

  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --hand: "Shantell Sans", "Chalkboard SE", system-ui, sans-serif;
  color-scheme: light;
}
/* The header band and the board are aubergine */
.band, .board {
  --ground: #241c33; --surface: #2f2642; --well: #1d1629;
  --ink: #eee9f3; --muted: #cfc6dc; --line: #44395a;
  --primary: #f3c94e; --primary-ink: #241c33; --focus: #f3c94e; --error: #ffb4a3;
  color: var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: 400 1rem/1.55 var(--body); padding-bottom: 64px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
a { color: inherit; }

/* Logo lockup */
.lockup { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.lockup img { width: 30px; height: 30px; display: block; }
.lockup span { font: 500 1.3rem/1 var(--display); letter-spacing: -.02em; }

/* Buttons */
.btn {
  font: 600 1rem/1 var(--body); background: var(--primary); color: var(--primary-ink);
  border: 0; border-radius: 8px; padding: 13px 20px; min-height: 44px; cursor: pointer;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn.dashed { background: none; color: var(--ink); border: 1px dashed var(--muted); }
.btn.dashed:hover { border-style: solid; }
.status { margin: 0; font-size: .95rem; color: var(--muted); }
.status.err { color: var(--error); }

/* Fields */
.field, .q textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--well);
  color: var(--ink); font: 400 1rem/1.5 var(--body); padding: 11px 13px;
}
.field:focus, .q textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.label { font: 600 .9rem/1.2 var(--body); color: var(--ink); }

.c1 { --c: var(--n1); --ci: var(--n1-ink); } .c2 { --c: var(--n2); --ci: var(--n2-ink); }
.c3 { --c: var(--n3); --ci: var(--n3-ink); } .c4 { --c: var(--n4); --ci: var(--n4-ink); }
.c5 { --c: var(--n5); --ci: var(--n5-ink); } .c6 { --c: var(--n6); --ci: var(--n6-ink); }
.chip { width: 16px; height: 16px; border-radius: 3px; flex: none; background: var(--c); box-shadow: 0 1px 2px rgba(0,0,0,.2); }

/* Note colours by name, as hosts pick them */
.col-yellow { --c: #f3c94e; --ci: #3a2f00; } .col-pink { --c: #f2a7b7; --ci: #46121c; }
.col-blue { --c: #8fc4e8; --ci: #0e2f45; } .col-green { --c: #b9dd8f; --ci: #1d3a0c; }
.col-orange { --c: #f5b98a; --ci: #4a2306; } .col-lilac { --c: #cdbdf0; --ci: #2b1a52; }
.col-mint { --c: #9fe0cf; --ci: #0f3d33; } .col-white { --c: #fbfaf7; --ci: #241c33; }