/* The contribution screen follows the supplied navy, cyan and orange event palette. */
.prompt-brand,
.prompt-tagline,
.screen-menu-toggle { display: none; }

.screen-tools { display: contents; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body[data-page="prompt"] {
  --text: #ffffff;
  min-height: 100svh;
  color: var(--text);
  background: #001339;
  isolation: isolate;
}

body[data-page="prompt"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('/assets/idea-background-v2.png') center / cover no-repeat;
  pointer-events: none;
}

body[data-page="prompt"] .header {
  height: clamp(104px, 9.2vw, 164px);
  margin: 0;
  padding: clamp(16px, 1.15vw, 24px) 3.6% 0;
  border: 0;
  align-items: flex-start;
}

body[data-page="prompt"] .brand,
body[data-page="prompt"] > footer { display: none; }

body[data-page="prompt"] .prompt-brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 22px);
  flex-shrink: 0;
}

.prompt-brand img {
  width: clamp(54px, 4.85vw, 90px);
  height: auto;
  display: block;
}

.prompt-wordmark {
  font-size: clamp(32px, 3.15vw, 58px);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 1px #0008;
}

.prompt-wordmark b { color: var(--orange); }
.prompt-wordmark small {
  display: block;
  margin-top: 10px;
  padding-left: 3px;
  font-size: clamp(8px, .91vw, 16px);
  font-weight: 600;
  letter-spacing: .25em;
}

body[data-page="prompt"] .prompt-tagline {
  display: block;
  margin: clamp(16px, 1.9vw, 36px) 0 0;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--orange);
  color: var(--accent);
  font-size: clamp(10px, .93vw, 17px);
  letter-spacing: .25em;
  white-space: nowrap;
}

body[data-page="prompt"] main { max-width: none; }
.idea-screen {
  padding: clamp(36px, 5vw, 88px) 24px 58px;
  text-align: center;
}

.idea-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0;
  color: var(--accent);
  font-size: clamp(10px, .96vw, 17px);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.5;
}

.idea-eyebrow strong { font-weight: 600; letter-spacing: .22em; }
.idea-eyebrow > span:first-child,
.idea-eyebrow > span:last-child {
  width: clamp(28px, 3.7vw, 64px);
  height: 1px;
  background: var(--accent);
}
.idea-eyebrow > span:last-child { background: linear-gradient(90deg, var(--cyan), transparent); }

.idea-screen h1 {
  margin: clamp(28px, 2.45vw, 44px) 0 0;
  font-size: clamp(54px, 6.35vw, 116px);
  font-weight: 400;
  letter-spacing: -.047em;
  line-height: 1.01;
  text-shadow: 0 2px 14px #0005;
}
.idea-screen h1 em { display: inline-block; margin-top: 1px; color: var(--orange); }
.idea-description {
  margin: clamp(24px, 1.93vw, 36px) auto 0;
  color: #edf5ff;
  font-size: clamp(16px, 1.43vw, 26px);
  line-height: 1.3;
  text-shadow: 0 2px 8px #000;
}

.idea-contribution {
  width: min(61.8%, 1140px);
  margin: clamp(36px, 3.55vw, 64px) auto 0;
}
.idea-input-shell {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  min-height: clamp(82px, 6.35vw, 118px);
  padding: 12px clamp(16px, 1.45vw, 27px) 12px clamp(24px, 2.45vw, 43px);
  border: 3px solid transparent;
  border-radius: clamp(26px, 2.35vw, 42px);
  background: linear-gradient(115deg, #001e52, #001339) padding-box,
    linear-gradient(125deg, #00bed5, #78eaff 34%, #ff612b 75%, #ff612b) border-box;
  box-shadow: 0 0 30px #00bed525, 0 16px 38px #0004;
  transition: box-shadow .2s;
}
.idea-input-shell:focus-within { box-shadow: 0 0 0 3px #00bed530, 0 0 35px #00bed540; }
.idea-input-shell:has(textarea:focus-visible) { outline: 2px solid var(--accent); outline-offset: 5px; }
.pencil-icon { width: clamp(23px, 1.85vw, 33px); height: auto; flex-shrink: 0; color: var(--cyan); }
.idea-input-shell textarea {
  display: block;
  flex: 1;
  width: 0;
  height: 1.35em;
  min-height: 1.35em;
  max-height: 160px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: none;
  resize: none;
  font-size: clamp(20px, 1.67vw, 30px);
  line-height: 1.35;
  color: #fff;
  scrollbar-width: thin;
  scrollbar-color: #00bed5 transparent;
}
.idea-input-shell textarea::placeholder { color: #a5b9db; opacity: 1; }
.idea-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  width: auto;
  min-width: clamp(122px, 10vw, 164px);
  height: clamp(56px, 4.4vw, 80px);
  padding: 15px 18px;
  border: 1px solid #ff926b;
  border-radius: clamp(12px, 1vw, 18px);
  color: #001339;
  background: linear-gradient(125deg, #ff784b, #ff612b);
  box-shadow: 0 0 20px #ff612b30, inset 0 0 14px #ff926b4d;
  transition: background .2s, transform .2s;
}
.idea-submit:hover:enabled { background: #ff926b; transform: translateX(2px); }
.idea-submit:disabled { opacity: .65; }
.idea-submit-label { font-size: clamp(14px, 1.1vw, 18px); font-weight: 700; }
.idea-submit svg { width: 25px; height: auto; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.submit-spinner { display: none; width: 24px; height: 24px; border: 2px solid #00133940; border-top-color: #001339; border-radius: 50%; animation: submit-spin .8s linear infinite; }
.idea-submit[aria-busy="true"] svg { display: none; }
.idea-submit[aria-busy="true"] .submit-spinner { display: block; }
@keyframes submit-spin { to { transform: rotate(360deg); } }

.idea-form-extras {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px 20px;
  padding: 0 22px;
  margin-top: 12px;
  text-align: left;
  visibility: hidden;
}
#contribute:focus-within .idea-form-extras,
#contribute.has-idea .idea-form-extras,
.idea-form-extras:has(details[open]) { visibility: visible; }
.idea-details { flex: 1; min-width: 0; }
.idea-details summary { width: fit-content; color: #b8cdec; font-size: 12px; line-height: 20px; cursor: pointer; list-style: none; }
.idea-details summary::-webkit-details-marker { display: none; }
.idea-details summary span { display: inline-block; margin-left: 8px; color: var(--accent); }
.idea-details[open] summary span { transform: rotate(45deg); }
.idea-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.idea-details-content { margin-top: 14px; padding: 24px; border: 1px solid #00bed580; border-radius: 15px; background: #001339f5; }
.idea-details-content fieldset { margin-bottom: 0; }
.idea-question { display: none; grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.5; color: #7fe5f1; text-shadow: 0 1px 5px #000; }
#contribute:focus-within .idea-question,
#contribute.has-idea .idea-question,
.idea-form-extras:has(details[open]) .idea-question { display: block; }
.idea-count { color: #a5b9db; font-size: 11px; line-height: 20px; white-space: nowrap; }
.idea-contribution .message { margin: 12px 16px 0; text-align: left; background: #001339ed; padding: 8px 12px; border-radius: 5px; }

.idea-wall-note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  width: fit-content;
  max-width: 100%;
  margin: clamp(21px, 1.7vw, 30px) auto 0;
  font-size: clamp(10px, .79vw, 14px);
  font-weight: 500;
  letter-spacing: .19em;
  line-height: 1.4;
  text-align: left;
}
.idea-wall-note img { width: 32px; height: 50px; object-fit: contain; flex-shrink: 0; }
.note-line { width: clamp(50px, 7.3vw, 124px); height: 1px; background: linear-gradient(90deg, transparent, #00bed5); margin-right: 16px; }
.note-line:last-child { margin-right: 0; margin-left: 8px; transform: rotate(180deg); }
.idea-wall-note:hover { color: var(--accent); }

body[data-page="prompt"] .screen-menu-toggle {
  display: block;
  position: fixed;
  z-index: 5;
  right: 20px;
  bottom: 14px;
  width: 36px;
  height: 32px;
  padding: 0;
  border: 1px solid #00bed550;
  border-radius: 8px;
  color: #7fe5f1;
  background: #001339df;
  font-size: 13px;
  letter-spacing: 2px;
}
body[data-page="prompt"] .screen-tools {
  display: none;
  position: fixed;
  z-index: 5;
  right: 20px;
  bottom: 56px;
  width: 260px;
  padding: 20px;
  border: 1px solid #00bed566;
  border-radius: 14px;
  background: #001339fa;
  box-shadow: 0 12px 45px #0008;
}
body[data-page="prompt"].menu-open .screen-tools { display: block; }
body[data-page="prompt"] .header nav { display: grid; height: auto; width: auto; margin: 0 0 20px; gap: 8px; }
body[data-page="prompt"] .header nav a { padding: 10px 2px; gap: 12px; }
body[data-page="prompt"] .header-end { justify-content: space-between; }

#success.idea-success {
  padding: 28px 32px;
  border: 1px solid #00bed5;
  border-radius: 24px;
  background: #001339f5;
  box-shadow: 0 0 35px #00bed530;
}
.idea-success-mark { color: var(--accent); font-size: 34px; }
#success.idea-success h2 { margin: 12px 0; font-size: clamp(26px, 2.5vw, 40px); font-weight: 400; letter-spacing: -.035em; }
#success.idea-success p { margin: 0 0 20px; color: #b8cdec; }
.idea-success-actions { display: flex; justify-content: center; gap: 12px; }
.idea-success-actions .primary,
.idea-success-actions #another { width: auto; margin: 0; gap: 20px; }

/* Creation and approval are a private step before the public wall. */
body[data-page="prompt"].preview-active .idea-intro { display: none; }
body[data-page="prompt"].preview-active .idea-screen { padding-top: 14px; padding-bottom: 28px; }
body[data-page="prompt"].preview-active .idea-contribution { width: min(100%, 650px); margin-top: 0; }
body[data-page="prompt"].preview-active .idea-wall-note { margin-top: 18px; }
.generation-panel {
  position: relative;
  padding: 24px 28px 18px;
  border: 1px solid #00bed5a6;
  border-radius: 24px;
  background: linear-gradient(145deg, #002677f5, #001339fa 65%);
  box-shadow: 0 0 38px #00bed525, 0 16px 50px #0008;
}
.generation-private { display: block; margin-bottom: 9px; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.generation-heading h2 { margin: 0 0 9px; font-size: clamp(25px, 2.3vw, 36px); line-height: 1.13; font-weight: 500; letter-spacing: -.03em; outline: none; }
.generation-heading p { max-width: 470px; margin: 0 auto; color: #b8cdec; font-size: 13px; line-height: 1.5; }
.generation-preview { display: block; width: auto; max-width: 100%; height: min(32svh, 320px); margin: 18px auto 0; object-fit: contain; border-radius: 12px; border: 1px solid #00bed566; background: #001339; }
.generation-idea { display: none; margin: 11px auto 0; max-width: 470px; color: #dbeaff; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.generation-panel[data-phase="preview"] .generation-idea,
.generation-panel[data-phase="publishing"] .generation-idea { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.generation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 19px; }
.generation-actions button { min-height: 47px; justify-content: center; font-size: 13px; line-height: 1.35; padding: 12px; }
.generation-feedback { margin: 12px 0 0; color: #91dbe8; font-size: 11px; line-height: 1.45; }
.generation-feedback:empty { display: none; }
.generation-panel[data-phase="failed"] { padding-top: 34px; padding-bottom: 28px; }
.generation-panel[data-phase="failed"] .generation-private { color: var(--orange); }
.generation-panel[data-phase="failed"] .generation-actions { margin-top: 25px; }
.generation-loader { position: relative; display: grid; place-items: center; width: 180px; height: 174px; margin: 24px auto 10px; }
.generation-orbit { position: absolute; width: 160px; height: 160px; border: 1px solid #00bed533; border-top: 3px solid var(--cyan); border-bottom: 3px solid var(--orange); border-radius: 50%; animation: submit-spin 2.6s linear infinite; box-shadow: 0 0 24px #00bed520; }
.generation-dna { display: flex; flex-direction: column; gap: 7px; width: 64px; }
.generation-dna i { position: relative; display: block; height: 5px; width: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--cyan), #edf9ff66, var(--orange)); animation: dna-twist 1.8s ease-in-out infinite; }
.generation-dna i::before,
.generation-dna i::after { content: ''; position: absolute; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px #00bed5aa; }
.generation-dna i::before { left: -3px; }
.generation-dna i::after { right: -3px; background: var(--orange); box-shadow: 0 0 9px #ff612baa; }
.generation-dna i:nth-child(2) { animation-delay: -.15s; }
.generation-dna i:nth-child(3) { animation-delay: -.3s; }
.generation-dna i:nth-child(4) { animation-delay: -.45s; }
.generation-dna i:nth-child(5) { animation-delay: -.6s; }
.generation-dna i:nth-child(6) { animation-delay: -.75s; }
.generation-dna i:nth-child(7) { animation-delay: -.9s; }
.generation-dna i:nth-child(8) { animation-delay: -1.05s; }
.generation-dna i:nth-child(9) { animation-delay: -1.2s; }
.generation-dna i:nth-child(10) { animation-delay: -1.35s; }
@keyframes dna-twist { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.2); opacity: .5; } }
.generation-panel[data-phase="publishing"] .generation-loader { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; margin: 0; }
.generation-panel[data-phase="publishing"] .generation-dna { display: none; }
.generation-panel[data-phase="publishing"] .generation-orbit { width: 26px; height: 26px; border-width: 2px; }

@media (min-width: 701px) and (max-width: 1100px) {
  .idea-contribution { width: 78%; }
  .idea-screen { padding-top: 60px; }
  .idea-description { font-size: 18px; }
  .idea-details .theme-options { grid-template-columns: 1fr 1fr 1.3fr; }
}

@media (min-width: 701px) and (max-height: 760px) {
  .idea-screen { padding-top: 30px; padding-bottom: 32px; }
  .idea-screen h1 { margin-top: 28px; font-size: min(6.35vw, 94px); }
  .idea-description { margin-top: 24px; }
  .idea-contribution { margin-top: 35px; }
}

@media (max-width: 700px) {
  body[data-page="prompt"]::before {
    background: linear-gradient(180deg, #00133966, #001339cc 27%, #001339cc 64%, #00133966), url('/assets/idea-background-v2.png') 82% center / cover no-repeat;
  }
  body[data-page="prompt"] .header { height: auto; min-height: 130px; padding: 20px 6% 0; justify-content: center; gap: 18px; }
  body[data-page="prompt"] .prompt-brand { gap: 12px; }
  .prompt-brand img { width: 48px; }
  .prompt-wordmark { font-size: clamp(29px, 7.7vw, 40px); }
  .prompt-wordmark small { font-size: clamp(7px, 1.9vw, 10px); margin-top: 8px; letter-spacing: .21em; }
  body[data-page="prompt"] .prompt-tagline { margin: 0; padding-bottom: 9px; font-size: 8px; letter-spacing: .23em; }
  .idea-screen { padding: 58px 6% 65px; }
  .idea-eyebrow { gap: 10px; font-size: 8px; letter-spacing: .1em; }
  .idea-eyebrow strong { letter-spacing: .14em; }
  .idea-eyebrow > span:first-child,
  .idea-eyebrow > span:last-child { width: 18px; flex-shrink: 0; }
  .idea-eyebrow > span:nth-child(2) { max-width: 280px; }
  .idea-screen h1 { margin-top: 30px; font-size: clamp(30px, 8.6vw, 58px); letter-spacing: -.048em; line-height: 1.12; }
  .idea-description { margin-top: 25px; max-width: 340px; font-size: 15px; line-height: 1.5; }
  .idea-description br { display: none; }
  .idea-contribution { width: 100%; margin-top: 35px; }
  .idea-input-shell { min-height: 76px; gap: 13px; padding: 11px 11px 11px 19px; border-width: 2px; border-radius: 24px; }
  .pencil-icon { width: 21px; }
  .idea-input-shell textarea { font-size: 17px; }
  .idea-submit { min-width: 104px; height: 49px; padding: 10px 11px; gap: 7px; border-radius: 12px; }
  .idea-submit-label { font-size: 13px; }
  .idea-submit svg { width: 20px; }
  .idea-form-extras { padding: 0 6px; gap: 10px; }
  .idea-details summary { font-size: 10px; }
  .idea-count { font-size: 10px; }
  .idea-details-content { padding: 17px; }
  .idea-details .theme-options { grid-template-columns: 1fr; }
  .idea-details .theme-options label span { font-size: 11px; padding: 10px; }
  .idea-wall-note { margin-top: 30px; gap: 13px; font-size: 9px; letter-spacing: .15em; }
  .idea-wall-note img { width: 27px; height: 42px; }
  .note-line { width: 26px; margin: 0; }
  .note-line:last-child { margin: 0; }
  #success.idea-success { padding: 24px 20px; }
  .idea-success-actions { flex-direction: column; }
  .idea-success-actions #another { min-height: 44px; }
  body[data-page="prompt"].preview-active .idea-screen { padding: 14px 5% 40px; }
  .generation-panel { padding: 20px 16px 17px; border-radius: 20px; }
  .generation-heading h2 { font-size: 25px; }
  .generation-heading p { font-size: 12px; }
  .generation-preview { height: min(29svh, 260px); margin-top: 15px; }
  .generation-actions { gap: 9px; margin-top: 15px; }
  .generation-actions button { font-size: 12px; min-height: 48px; padding: 10px; }
  .generation-loader { height: 156px; margin-top: 20px; }
  .generation-orbit { width: 146px; height: 146px; }
  body[data-page="prompt"].preview-active .idea-wall-note { font-size: 8px; gap: 10px; }
}

@media (max-width: 400px) { .idea-input-shell .pencil-icon { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .idea-submit .submit-spinner { animation: none; border-style: dotted; }
  .generation-orbit, .generation-dna i { animation: none; }
  .generation-dna i:nth-child(3n) { transform: scaleX(.4); }
  .generation-dna i:nth-child(3n + 1) { transform: scaleX(.7); }
}