/* Start in Brno (views/brno.js) and the "who are you" step of onboarding. */

.brno-banner { background: linear-gradient(135deg, #eef2ff 0%, #fff 70%); }
.dark .brno-banner { background: linear-gradient(135deg, var(--d-brand-bg) 0%, var(--d-surface) 70%); }

/* The showcase switch: dashed, so nobody takes it for a setting. */
.brno-demo {
  border: 1px dashed #c7d2fe; border-radius: 10px; padding: .4rem .5rem .5rem;
  background: rgba(255, 255, 255, .6);
}
.brno-demo-label {
  display: block; font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #818cf8; margin-bottom: .3rem;
}
.dark .brno-demo { border-color: var(--d-border); background: transparent; }

/* textarea.input is the Markdown editor's monospace; questions are prose. */
textarea.input.brno-text { font-family: inherit; min-height: 5rem; }

.brno-question { cursor: pointer; }
.brno-question:hover { border-color: #c7d2fe; }
.dark .brno-question:hover { border-color: var(--d-brand); }

.brno-accepted { border-color: #86efac; }
.dark .brno-accepted { border-color: #166534; }

/* The little calendar leaf beside an upcoming event. */
.brno-date {
  flex-shrink: 0; width: 2.5rem; border: 1px solid #e5e7eb; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; padding: .15rem 0;
  font-size: .625rem; text-transform: uppercase; color: #6b7280; line-height: 1.2;
}
.brno-date strong { font-size: .95rem; color: #111827; }
.dark .brno-date { border-color: var(--d-border); color: var(--d-text2); }
.dark .brno-date strong { color: var(--d-text); }

/* Onboarding: local student or newcomer. */
.onboard-role {
  width: 100%; display: flex; align-items: center; gap: .75rem; text-align: left;
  padding: .75rem .9rem; border: 1px solid #e5e7eb; border-radius: 12px;
  background: transparent; cursor: pointer; transition: border-color .15s, background .15s;
}
.onboard-role:hover { border-color: #a5b4fc; }
.onboard-role.selected { border-color: #6366f1; background: #eef2ff; }
.onboard-role small { display: block; font-size: .75rem; color: #6b7280; }
.dark .onboard-role { border-color: var(--d-border); }
.dark .onboard-role.selected { border-color: var(--d-brand); background: var(--d-brand-bg); }
.dark .onboard-role small { color: var(--d-text2); }