/* Public form: one calm column under the initiative's mark.
   Dark is the default and is the logo's own navy, so the mark sits on the page as supplied; light is one click away.
   Orange is the initiative's action colour: navy text on an orange fill, orange for selection and focus. */

:root, :root[data-theme='dark'] {
  color-scheme: dark;
  --page: #0b1246;
  --surface: #121a52;
  --surface-2: #19225e;
  --surface-3: #212b6b;
  --control-bg: #080e3a;
  --line: #252f6b;
  --field-line: #6f78b0;
  --ink: #f3f4fb;
  --ink-2: #b8bedf;
  --ink-3: #8f97c8;
  --brand: #f06812;
  --brand-hover: #ff7f2e;
  --brand-down: #d95a0b;
  --brand-press: #ffffff;
  --brand-ink: #ff8a3d;
  --brand-tint: #b05020;
  --brand-tint-2: #19225e;
  --on-brand: #0b1246;
  --focus: 0 0 0 3px #ff8a3d;            /* opaque ring, 7.5:1 on the navy page */
  --danger: #ff6b7d;
  --danger-tint: rgba(255, 107, 125, 0.12);
  --danger-ink: #ffc2ca;
  --warning: #f0c46a;
  --warning-tint: rgba(240, 196, 106, 0.12);
  --warning-ink: #f6dca2;
  --selection: rgba(255, 138, 61, 0.35);
  --lk-face: #ffffff;
  --lk-orange: #f06812;
  --lk-near: 0.55;
  --lk-far: 0.38;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8bedf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-theme='light'] {
  color-scheme: light;
  --page: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f4fa;
  --surface-3: #e9ebf5;
  --control-bg: #ffffff;
  --line: #e2e5f0;
  --field-line: #8b91b5;
  --ink: #0b1246;
  --ink-2: #4a5180;
  --ink-3: #6b729b;
  --brand: #f06812;
  --brand-hover: #ff7f2e;
  --brand-down: #d95a0b;
  --brand-press: #9a3b00;
  --brand-ink: #b54a00;
  --brand-tint: #fff0e6;
  --brand-tint-2: #fff8f3;
  --on-brand: #0b1246;
  --focus: 0 0 0 3px #b54a00;            /* opaque ring, 5.3:1 on white */
  --danger: #b42318;
  --danger-tint: #fef1f0;
  --danger-ink: #7a1a12;
  --warning: #9a5b00;
  --warning-tint: #fff6e5;
  --warning-ink: #6b3f00;
  --selection: #ffd9bf;
  --lk-face: #0b1246;
  --lk-orange: #f06812;
  --lk-near: 1;
  --lk-far: 0.42;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5180' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

body { background: var(--page); color: var(--ink); }
::selection { background: var(--selection); color: var(--ink); }
* { scrollbar-color: var(--field-line) transparent; }
.select { background-image: var(--chevron); }
a { color: var(--brand-ink); }
/* Pressed: a deeper orange that keeps navy text at 4.5:1 (brand-press is the selected-choice text colour here). */
.btn-primary:active { background: var(--brand-down); }
a:hover { color: var(--ink); }

/* The initiative's mark: the lettering face follows the page (white on navy, navy on white); its two shadow
   copies are the line art's orange, near copy strong and far copy weak. On navy they use the logo's own
   opacities; on white the near copy goes solid so the stack keeps the logo's orange punch. */
.lk-face { fill: var(--lk-face); }
.lk-art { fill: var(--lk-orange); }
.lk-sh1 { fill: var(--lk-orange); fill-opacity: var(--lk-near); }
.lk-sh2 { fill: var(--lk-orange); fill-opacity: var(--lk-far); }

/* Hatched band, from the hatched depth of the logo's speech bubble: orange rules with orange hatching between. */
.hatch {
  height: 12px;
  border-block: 2px solid var(--lk-orange);
  background: repeating-linear-gradient(-45deg, var(--lk-orange) 0 2.5px, transparent 2.5px 9px);
}

.logo-on-dark { display: none; }
:root:not([data-theme='light']) .logo-on-light { display: none; }
:root:not([data-theme='light']) .logo-on-dark { display: block; }

.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 12px; background: none; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus); }

.skip {
  position: absolute; inset-inline-start: 12px; top: -48px; z-index: 10;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--ink); color: var(--page); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--page); }
.skip:hover { color: var(--page); }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 88px; padding-inline: max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-left));
  max-width: 1120px; margin-inline: auto;
}
.council { height: 64px; width: auto; }

.wrap {
  width: 100%; max-width: 600px; margin-inline: auto;
  padding: 24px 16px 56px;
}

.lockup { margin: 0 auto 8px; width: min(100%, 296px); }
.lockup-svg { width: 100%; height: auto; overflow: visible; }

.lead {
  max-width: 36ch; margin: 0 auto;
  text-align: center; font-size: 1.0625rem; line-height: 1.65; font-weight: 500; color: var(--ink-2);
  text-wrap: balance;
}
.lead-q { display: block; margin-bottom: 4px; font-size: 1.1875rem; font-weight: 700; color: var(--ink); }

#state-error { margin-top: 20px; }
.link-btn {
  padding: 0; border: 0; background: none; color: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.form { display: grid; gap: 28px; margin-top: 32px; }
.form .field { gap: 10px; }
.form .label { font-size: 1.0625rem; }

.field-foot .error { flex: 1; }
.field-foot:has(.error[hidden]) { justify-content: flex-end; }

/* Chips in one row share a height even when one label wraps. */
.chips .choice span { height: 100%; }

/* Long answers read as a list, not as centred tiles. */
.options { display: grid; gap: 8px; }
@media (min-width: 560px) { .options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.options .choice span { justify-content: flex-start; text-align: start; padding-inline: 14px; }
.segmented .choice span { padding-inline: 6px; }

.textarea-sm { min-height: 96px; }

.thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.thumb {
  position: relative; display: grid; place-items: center;
  width: 96px; height: 96px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-busy .icon { width: 24px; height: 24px; color: var(--ink-2); }
.thumb .spin { animation: spin 0.9s linear infinite; }
.thumb-remove {
  position: absolute; top: 4px; inset-inline-end: 4px;
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 999px; background: rgba(6, 10, 40, 0.74); color: #fff; cursor: pointer;
}
.thumb-remove .icon { width: 18px; height: 18px; }
.thumb-remove:hover { background: rgba(6, 10, 40, 0.92); }
.thumb-remove:focus-visible { outline: none; box-shadow: var(--focus); }

.send { display: grid; gap: 14px; padding-top: 4px; }
.ts:empty { display: none; }
.ts { min-height: 65px; }
.send-note { text-align: center; font-size: 0.875rem; color: var(--ink-2); }

.done {
  display: grid; justify-items: center; gap: 10px;
  margin-top: 32px; padding: 32px 20px;
  border: 1px solid var(--line); border-radius: 20px;
  text-align: center; outline: none;
}
.done-mark { width: 128px; height: auto; margin-bottom: 4px; overflow: visible; }
.dm-line { fill: none; stroke: var(--lk-orange); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.dm-band { fill: url(#dm-hatch); }
.dm-ink { fill: var(--lk-orange); }
.dm-face, .dm-sh1, .dm-sh2 {
  fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dm-face { stroke: var(--lk-face); animation-delay: 240ms; }
.dm-sh1 { stroke: var(--lk-orange); stroke-opacity: var(--lk-near); animation-delay: 160ms; }
.dm-sh2 { stroke: var(--lk-orange); stroke-opacity: var(--lk-far); animation-delay: 80ms; }
/* The one authored moment: the check is written in, far shadow first, the way the lettering stacks. */
@keyframes draw { to { stroke-dashoffset: 0; } }
.done h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.35; }
.done .btn { margin-top: 10px; }

.foot {
  max-width: 600px; margin: 0 auto; padding: 24px 16px calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  text-align: center; font-size: 0.8125rem; line-height: 1.7; color: var(--ink-2);
}

@media (min-width: 720px) {
  .topbar { height: 108px; padding-inline: 32px; }
  .council { height: 80px; }
  .wrap { padding-top: 32px; }
  .lockup { width: 420px; margin-bottom: 12px; }
  .lead { font-size: 1.125rem; max-width: 44ch; }
  .lead-q { font-size: 1.25rem; }
}