/* lib/intake.css: the intake form's styles, shared by the dashboard's Intake tab
   (index.html) and the texted intake link page (intake-link.html). index.html loads
   it at the same point in its cascade where these rules used to sit inline. */

/* ═══════════════════════════════════════════════════════
   INTAKE TAB
   ═══════════════════════════════════════════════════════
   Two visual registers on purpose. The chrome — toolbar, list, banners — is
   dashboard dark like every other tab. The form itself is a light document,
   carried over from intake.bethelresidency.com: sixty fields of long-form data
   entry read better on paper-coloured stock than on near-black, and it is the
   same thing that prints. Everything under .intake-doc is scoped so none of
   those light styles can leak into the rest of the dashboard. */

.intake-pane { display: none; }
.intake-pane.active { display: block; }

/* ── notices ─────────────────────────────────────────── */
.intake-notice { display: none; }
.intake-notice.show {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--gold);
  background: var(--bg2);
  color: var(--text);
}
.intake-notice.error { border-left-color: var(--red); }
.intake-notice.warn { border-left-color: var(--gold); }
.intake-notice.info { border-left-color: var(--blue); }

/* ── gate ────────────────────────────────────────────── */
.intake-gate-card {
  max-width: 620px;
  margin: 2.5rem auto;
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 2.5rem 2.25rem;
  text-align: center;
}
.intake-gate-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.intake-gate-card h2 {
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 1rem;
}
.intake-gate-card p {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
  text-align: left;
}
.intake-gate-card strong { color: var(--text); }
.intake-gate-advice {
  text-align: left;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-dim);
  background: rgba(240, 180, 41, 0.07);
  border-left: 3px solid var(--gold);
  padding: 0.85rem 1rem;
  margin: 1.25rem 0 1.5rem;
}
.intake-gate-advice strong { color: var(--gold); display: block; margin-bottom: 0.25rem; }
.intake-gate-foot {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.intake-known {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* ── buttons ─────────────────────────────────────────── */
.intake-btn-primary,
.intake-btn-ghost {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1.35rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.intake-btn-primary { background: var(--gold); border: 1px solid var(--gold); color: var(--bg); }
.intake-btn-primary:hover { background: #d4a012; }
.intake-btn-primary:disabled { opacity: 0.55; cursor: default; }
.intake-btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
.intake-btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.intake-linkbtn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.65rem;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 0.5rem;
}
.intake-linkbtn:hover { color: var(--red); }

/* ── list ────────────────────────────────────────────── */
.intake-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.intake-toolbar-titles { flex: 1; min-width: 220px; }
.intake-h1 { font-family: var(--display); font-size: 1.1rem; letter-spacing: 3px; color: var(--text); }
.intake-sub { font-family: var(--mono); font-size: 0.62rem; color: var(--text-dim); margin-top: 3px; }
.intake-listbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.intake-search {
  flex: 1;
  max-width: 320px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.55rem 0.85rem;
  outline: none;
}
.intake-search:focus { border-color: var(--gold); }
.intake-count { font-family: var(--mono); font-size: 0.65rem; color: var(--text-dim); }

.intake-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-bottom: none;
}
.intake-row:last-child { border-bottom: 1px solid var(--border); }
.intake-row:hover { background: var(--bg3); }
.intake-row-main { flex: 1; min-width: 0; }
.intake-row-name {
  font-size: 0.95rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intake-row-meta { font-family: var(--mono); font-size: 0.62rem; color: var(--text-dim); margin-top: 2px; }
.intake-status {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.intake-status-approved { color: var(--green); border-color: var(--green); }
.intake-status-denied { color: var(--red); border-color: var(--red); }
.intake-status-waitlist,
.intake-status-pending-review { color: var(--gold); border-color: var(--gold); }
.intake-row-open {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
}
.intake-row-open:hover { border-color: var(--gold); color: var(--gold); }
.intake-row-del {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
}
.intake-row-del:hover { color: var(--red); }
.intake-empty {
  padding: 3rem 1rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  border: 1px dashed var(--border);
}

/* ── form chrome ─────────────────────────────────────── */
.intake-formbar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.intake-form-heading { flex: 1; min-width: 180px; }
.intake-form-title { font-family: var(--display); font-size: 1.15rem; letter-spacing: 2px; color: var(--text); }
.intake-progress-text { font-family: var(--mono); font-size: 0.62rem; color: var(--text-dim); margin-top: 2px; }
.intake-save-status {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.intake-save-status.saving { color: var(--gold); }
.intake-save-status.saved { color: var(--green); }
.intake-save-status.offline { color: var(--gold); }
.intake-save-status.error { color: var(--red); }

.intake-progress { height: 3px; background: var(--bg3); margin-bottom: 1.25rem; }
.intake-progress-fill { height: 3px; background: var(--gold); width: 0; transition: width 0.35s ease; }

.intake-bar {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: rgba(240, 180, 41, 0.12);
  border: 1px solid var(--gold);
  color: var(--gold);
}
.intake-bar-btn {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.85rem;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--bg);
  cursor: pointer;
}
.intake-bar-btn.secondary { background: transparent; color: var(--gold); }
/* The conflict bar has to explain itself in a sentence, so it needs normal
   sentence casing and line height rather than the bar's clipped mono shout. */
.intake-bar-text {
  flex: 1;
  min-width: 220px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

/* ── the form document (light, scoped) ───────────────── */
.intake-doc {
  --doc-navy: #0f1f3d;
  --doc-gold: #c9a84c;
  --doc-cream: #faf7f2;
  --doc-white: #ffffff;
  --doc-text: #1a1a2e;
  --doc-muted: #1a1a2e;
  --doc-line: #d4c9b0;
  max-width: 880px;
  margin: 0 auto;
}
.intake-doc .if-section {
  background: var(--doc-white);
  border: 1px solid var(--doc-line);
  border-radius: 14px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.intake-doc .if-section-head {
  background: var(--doc-navy);
  padding: 0.9rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  cursor: pointer;
  user-select: none;
}
.intake-doc .if-section-icon {
  width: 30px; height: 30px;
  background: rgba(201, 168, 76, 0.2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.intake-doc .if-section-title {
  flex: 1;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 500;
  color: #fff;
  margin: 0;
}
.intake-doc .if-section-badge {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.intake-doc .if-section-badge.complete { background: rgba(45, 122, 79, 0.35); color: #6ee7a0; }
.intake-doc .if-chevron { color: var(--doc-gold); font-size: 0.85rem; transition: transform 0.25s; }
.intake-doc .if-section.collapsed .if-chevron { transform: rotate(-90deg); }
.intake-doc .if-section.collapsed .if-section-body { display: none; }

.intake-doc .if-section-body {
  padding: 1.35rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.intake-doc .if-wide { grid-column: 1 / -1; }
.intake-doc .if-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: #f0ebe0;
  margin: 0.35rem 0;
}
.intake-doc .if-group { display: flex; flex-direction: column; gap: 0.35rem; }
.intake-doc .if-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--doc-muted);
}
.intake-doc .if-req { color: #7a5c0c; margin-left: 2px; } /* darker gold: readable on the white form (6.2:1) */
.intake-doc .if-hint { font-size: 0.72rem; color: var(--doc-muted); font-style: italic; }

.intake-doc input,
.intake-doc select,
.intake-doc textarea {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--doc-text);
  background: var(--doc-cream);
  border: 1.5px solid var(--doc-line);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  width: 100%;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.intake-doc input:focus,
.intake-doc select:focus,
.intake-doc textarea:focus {
  border-color: var(--doc-navy);
  background: var(--doc-white);
  box-shadow: 0 0 0 3px rgba(15, 31, 61, 0.08);
}
.intake-doc textarea { resize: vertical; min-height: 80px; }
.intake-doc select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.4rem;
}

.intake-doc .if-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.intake-doc .if-choices label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--doc-text);
  background: var(--doc-cream);
  border: 1.5px solid var(--doc-line);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}
.intake-doc .if-choices input {
  width: auto;
  border: none;
  background: none;
  padding: 0;
  box-shadow: none;
  accent-color: var(--doc-navy);
}
.intake-doc .if-choices label:has(input:checked) {
  background: var(--doc-navy);
  border-color: var(--doc-navy);
  color: #fff;
}