/* Pick professors, then write to all of them (Professors cards + selection bar + views/write.html) */

/* ---- Cards: checkbox, ⋯ menu ---- */
.prof-select { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; align-self: center; cursor: pointer; }
.prof-select-none { cursor: default; }
.prof-select-box { width: 20px; height: 20px; margin: 0; accent-color: var(--text-primary); cursor: pointer; }
.prof-horizontal-card.is-selected { border-color: var(--text-primary); box-shadow: 0 0 0 1px var(--text-primary); }

.prof-more { position: relative; }
.prof-more-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; }
.prof-more-btn:hover, .prof-more-btn[aria-expanded="true"] { color: var(--text-primary); border-color: var(--text-muted); }
.prof-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 210px; padding: 6px; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16); }
.prof-more-menu[hidden] { display: none; }
.prof-more-menu a, .prof-more-menu button { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; padding: 0 10px; border: none; border-radius: 8px; background: transparent; color: var(--text-primary); font: inherit; font-size: 0.88rem; text-decoration: none; text-align: left; cursor: pointer; }
.prof-more-menu a:hover, .prof-more-menu button:hover { background: var(--bg-primary); }
.prof-more-menu i { width: 16px; text-align: center; color: var(--text-secondary); }

/* ---- Results toolbar and selection bar ---- */
.fp-select-all { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--text-secondary); cursor: pointer; margin-left: auto; margin-right: 0.75rem; }
.fp-select-all[hidden] { display: none; }
.fp-select-all input { width: 18px; height: 18px; margin: 0; accent-color: var(--text-primary); }
.fp-select-bar { position: sticky; bottom: 16px; z-index: 50; margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--text-primary); color: var(--bg-surface); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }
.fp-select-bar[hidden] { display: none; }
.fp-select-count { font-weight: 600; font-size: 0.95rem; }
.fp-select-actions { display: flex; gap: 0.5rem; }
.fp-select-clear { background: transparent; color: var(--bg-surface); border: 1px solid currentColor; opacity: 0.85; }
.fp-select-go { background: var(--bg-surface); color: var(--text-primary); border: none; font-weight: 600; }

/* ---- Write flow ---- */
.wf { max-width: 1040px; }
.wf-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.wf-back { padding-left: 0; }
.wf-steps { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.wf-steps li { display: flex; align-items: center; gap: 0.45rem; padding: 0 0.6rem 0 0; font-size: 0.88rem; color: var(--text-secondary); }
.wf-steps li + li::before { content: ''; width: 18px; height: 1px; background: var(--border-color); margin-right: 0.4rem; }
.wf-step-num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--border-color); color: var(--text-secondary); }
.wf-steps li.is-current, .wf-steps li.is-done { color: var(--text-primary); }
.wf-steps li.is-current { font-weight: 600; }
.wf-steps li.is-current .wf-step-num, .wf-steps li.is-done .wf-step-num { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-surface); }

.wf-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.wf-title { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--text-primary); }
.wf-sub { margin: -0.4rem 0 0; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }
.wf-note { margin: 0; font-size: 0.86rem; color: var(--text-secondary); line-height: 1.5; }
.wf-note a { color: var(--text-primary); font-weight: 600; }
.wf-error { padding: 0.65rem 0.85rem; border-radius: 10px; background: #fdecec; color: #8a1c1c; font-size: 0.88rem; }
.theme-dark .wf-error { background: #3a1616; color: #f5c2c2; }
.wf-progress { font-size: 0.9rem; color: var(--text-secondary); }

.wf-ways { display: grid; gap: 0.6rem; }
.wf-ways-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wf-way { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border: 1px solid var(--border-color); border-radius: 12px; cursor: pointer; background: var(--bg-surface); }
.wf-way.is-on { border-color: var(--text-primary); box-shadow: 0 0 0 1px var(--text-primary); }
.wf-way input { margin: 0.2rem 0 0; accent-color: var(--text-primary); width: 18px; height: 18px; flex: none; }
.wf-way-text { display: flex; flex-direction: column; gap: 0.2rem; }
.wf-way-title { font-weight: 600; color: var(--text-primary); }
.wf-way-desc { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.45; }

.wf-field { display: flex; flex-direction: column; gap: 0.35rem; max-width: 560px; }
.wf-field label { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.wf-field-narrow { max-width: 280px; }

.wf-review { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.wf-list { flex: 1 1 230px; display: flex; flex-direction: column; gap: 0.4rem; max-height: 560px; overflow-y: auto; }
.wf-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 56px; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-surface); text-align: left; font: inherit; cursor: pointer; color: var(--text-primary); }
.wf-row.is-on { border-color: var(--text-primary); box-shadow: 0 0 0 1px var(--text-primary); }
.wf-row-text { display: flex; flex-direction: column; min-width: 0; }
.wf-row-text small { color: var(--text-secondary); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-ready { flex: none; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #e6f2eb; color: #1a5e3c; }
.wf-editor { flex: 999 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.wf-editor .wf-field { max-width: none; }
.wf-editor textarea { resize: vertical; line-height: 1.55; }
.wf-to { display: flex; flex-direction: column; gap: 2px; }
.wf-to span, .wf-to small { font-size: 0.8rem; color: var(--text-secondary); }
.wf-editor-nav { display: flex; gap: 0.5rem; }

.wf-summary { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 0.85rem 1rem; border-radius: 12px; background: var(--bg-primary); }
.wf-summary div { display: flex; flex-direction: column; gap: 2px; }
.wf-summary span { font-size: 0.78rem; color: var(--text-secondary); }
.wf-summary strong { font-size: 0.95rem; color: var(--text-primary); }

.wf-actions { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.25rem; }
.wf-actions-center { justify-content: center; }
.wf-done { align-items: center; text-align: center; padding: 2.5rem 1.5rem; }
.wf-done-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e6f2eb; color: #1a5e3c; font-size: 1.4rem; }
.wf-done .wf-sub { margin: 0; max-width: 520px; }

/* ---- First-run setup (components/setupFlow.js) ---- */
body.su-open { overflow: hidden; }
.su-overlay { position: fixed; inset: 0; z-index: 2000; background: var(--bg-primary); overflow-y: auto; display: flex; justify-content: center; padding: 48px 16px; box-sizing: border-box; }
.su-card { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 1rem; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 18px; padding: 2rem; box-sizing: border-box; align-self: flex-start; }
.su-top { display: flex; align-items: center; gap: 0.75rem; }
.su-brand { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); margin-right: auto; }
.su-count { font-size: 0.85rem; color: var(--text-secondary); }
.su-progress { display: flex; gap: 6px; }
.su-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--border-color); }
.su-seg.is-on { background: var(--text-primary); }
.su-card h1 { margin: 0.5rem 0 0; font-size: 1.6rem; line-height: 1.25; color: var(--text-primary); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.su-sub { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.su-badge { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #e6f2eb; color: #1a5e3c; }
.su-goals { display: flex; flex-direction: column; gap: 0.6rem; }
.su-goal { display: flex; gap: 0.8rem; align-items: center; min-height: 64px; padding: 0.8rem 1rem; border: 1px solid var(--border-color); border-radius: 12px; cursor: pointer; }
.su-goal.is-on { border-color: var(--text-primary); box-shadow: 0 0 0 1px var(--text-primary); }
.su-goal input { width: 18px; height: 18px; margin: 0; accent-color: var(--text-primary); flex: none; }
.su-goal span { display: flex; flex-direction: column; gap: 2px; }
.su-goal small { color: var(--text-secondary); }
.su-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.su-chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: 0.9rem; cursor: pointer; }
.su-chip.is-on { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-surface); }
.su-field { display: flex; flex-direction: column; gap: 0.35rem; }
.su-field label { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.su-own-row { display: flex; gap: 0.5rem; }
.su-drop { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 2rem 1rem; border: 2px dashed var(--border-color); border-radius: 14px; text-align: center; cursor: pointer; color: var(--text-primary); }
.su-drop i { font-size: 1.6rem; color: var(--text-secondary); }
.su-drop small { color: var(--text-secondary); }
.su-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.su-drop:focus-within { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.su-file { display: flex; gap: 0.75rem; align-items: center; padding: 1rem; border: 1px solid var(--border-color); border-radius: 12px; }
.su-file i { color: #1a5e3c; font-size: 1.3rem; }
.su-file span { display: flex; flex-direction: column; }
.su-file small { color: var(--text-secondary); }
.su-error { margin: 0; padding: 0.6rem 0.85rem; border-radius: 10px; background: #fdecec; color: #8a1c1c; font-size: 0.88rem; }
.su-actions { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.25rem; }
.su-foot { margin: 0; text-align: center; font-size: 0.82rem; color: var(--text-secondary); }

/* Professors: one Show menu instead of status chips */
.fp-status { display: flex; align-items: center; gap: 0.5rem; }
.fp-status label { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); }
.fp-status select { width: auto; min-width: 260px; min-height: 40px; }

/* ---- Me → About you → Fill in from my CV (components/cvFill.js) ---- */
.cvf-open { margin-top: 0.6rem; }
.cvf-overlay { position: fixed; inset: 0; z-index: 1900; background: rgba(17, 17, 17, 0.45); display: flex; justify-content: center; align-items: flex-start; padding: 64px 16px; overflow-y: auto; box-sizing: border-box; }
.cvf-card { width: 100%; max-width: 640px; background: var(--bg-surface); border-radius: 18px; padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); box-sizing: border-box; }
.cvf-card h2 { margin: 0; font-size: 1.3rem; color: var(--text-primary); }
.cvf-sub { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.cvf-list { display: flex; flex-direction: column; }
.cvf-item { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.85rem 0; border-top: 1px solid var(--border-color); cursor: pointer; }
.cvf-item input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--text-primary); flex: none; }
.cvf-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cvf-field { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.cvf-value { color: var(--text-primary); white-space: pre-line; line-height: 1.45; }
.cvf-now { font-size: 0.8rem; color: var(--text-secondary); }
.cvf-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* Template picker + "New template" */
.wf-template-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wf-template-row select { flex: 1; min-width: 200px; }

/* Review: attach the CV to every email */
.wf-attach { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.5rem 0.85rem; border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; color: var(--text-primary); font-size: 0.92rem; }
.wf-attach input { width: 18px; height: 18px; margin: 0; accent-color: var(--text-primary); flex: none; }

/* Connect your sending email, step by step (components/connectFlow.js; reuses the setup overlay) */
.cf-detect { padding: 0.8rem 1rem; border-radius: 12px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem; line-height: 1.5; }
.cf-detect.is-known { background: #e6f2eb; color: #14492f; }
.cf-detect a { color: inherit; }
.cf-detect .smtp-steps { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.cf-part { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.cf-list { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; line-height: 1.5; color: var(--text-primary); }
.cf-sample { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-primary); }
.cf-sample small { color: var(--text-secondary); }
.cf-sample code { align-self: flex-start; padding: 0.5rem 0.8rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-surface); font-size: 1.15rem; letter-spacing: 2px; }
.cf-code { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 1.15rem; letter-spacing: 2px; min-height: 52px; }
.cf-count { color: var(--text-secondary); font-size: 0.85rem; }
.cf-lock { margin: 0; display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; color: var(--text-secondary); }
.cf-server { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.75rem; }
.cf-done { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; padding: 0.5rem 0; }
.cf-done .su-sub { max-width: 460px; }
.cf-done-actions { justify-content: center; }
@media (max-width: 760px) {
  .cf-overlay { padding: 16px 12px; }
  .cf-overlay .su-card { padding: 1.25rem; }
  .cf-server { grid-template-columns: 1fr; }
  .cf-overlay .su-actions > * { flex: 1 1 auto; justify-content: center; }
}
.cf-inline-code { padding: 1px 6px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); font-size: 0.9em; letter-spacing: 1px; white-space: nowrap; }
.cf-link { border: none; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Setup: the topic dropdown (same look as Professors) and the picked topics */
.su-ms { position: relative; }
.su-picked { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.su-picked[hidden], #su-topic-error[hidden] { display: none; }