/* index.collab.css — public terminal site (index.html): collab intake form. One of the index.*.css files, linked in order from index.html. */
/* Two layers, so it is never a question of which rule wins: "page" holds the normal stylesheet rules, "element" holds exact
   styles for single elements. Anything in "element" beats anything in "page", whatever the selectors look like. */
@layer page, element;

@layer page {
/* ─────────────────────────────────────────
   COLLAB INTAKE
   ───────────────────────────────────────── */
.collab-form {
  background: var(--bg-surface); border: 1px solid var(--border); padding: 20px;
}
.collab-form h3 {
  font-size: 13px; font-weight: normal; color: var(--text-bright); margin-bottom: 4px;
}
.collab-form p {
  font-size: 11px; color: var(--text-dim); margin-bottom: 16px;
}
.collab-form input, .collab-form textarea {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-mono); font-size: 12px;
  padding: 8px 10px; outline: none; margin-bottom: 8px; resize: vertical;
}
.collab-form input:focus, .collab-form textarea:focus { border-color: var(--accent); }
.collab-form textarea { min-height: 80px; }
.collab-form label {
  font-size: 10px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 1px; display: block; margin-bottom: 4px;
}
.collab-form .required { color: var(--danger); }
.collab-success {
  color: var(--accent); font-size: 12px; padding: 12px 0;
}
}

/* exact styles for single elements built in index.html (these used to be inline). "element" is the top layer: it always beats "page". */
@layer element {
  .collab-form__div { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
  #collab-roadmap { font-size: 11px; color: var(--text-dim); }
  #roadmap-status { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
  #roadmap-preview { background: var(--bg-elevated); border: 1px solid var(--border); padding: 10px; font-size: 11px; max-height: 150px; overflow-y: auto; margin-bottom: 8px; white-space: pre-wrap; }
  .collab-form__div-2 { margin-top: 8px; }
}

/* exact styles for single elements built in index.collab.js (these used to be inline). "element" is the top layer: it always beats "page". */
@layer element {
  .submitCollab__span { color: var(--danger); }
}