/* ===== PERSON DETAIL CARD (T5.2) ===== */
.detail{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:760px}
.dhead{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.dhead .av{width:64px;height:64px;border-radius:999px;overflow:hidden;background:var(--muted-bg);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--primary);font-family:var(--font-head);font-size:1.3rem;margin-bottom:0;flex:0 0 auto}
.dhead .av img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.dhead h2{margin:0 0 3px;font-size:1.35rem}
.dhead .role{color:var(--muted);font-size:.9rem;margin:0}
.detail .why{background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:10px;padding:12px 14px;font-size:.86rem;margin-bottom:16px;color:var(--fg)}
.detail .why b{color:var(--primary)}
.dsec{margin-bottom:16px}
.dsec h4{font-family:var(--font-head);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 6px}
.dsec p{margin:0;font-size:.9rem;white-space:pre-wrap}
.gatebox{border:1px dashed var(--primary);border-radius:12px;padding:16px;background:#fafbff}
.gatebox.closed{border-style:solid;border-color:var(--border);background:var(--muted-bg)}
.gatebox .st{font-size:.82rem;color:var(--primary);font-weight:600;margin:0 0 10px}
.gatebox.closed .st{color:var(--muted)}
.gatebox .tg{font-size:.88rem;margin:0}
.hint{font-size:.76rem;color:var(--muted);margin:10px 0 0}
.upd{font-size:.74rem;color:var(--muted);margin-top:14px}
.progs{display:flex;gap:6px;flex-wrap:wrap}
.progs .tag{background:var(--accent-soft);color:var(--primary);font-weight:600}

/* ===== MATCHING SECTIONS ===== */
/* .sect-label and .dot are defined canonically in global.css — no redefinition here */

/* Matching sections use the same .people-grid single-column list as the people block (#5.5) */
/* Each section gets a bottom gap before the next */
.block{margin-bottom:28px}

/* «Кого встретить» (#/people/meet): each section is a white card so the rows
   sit on a proper подложка, not bare on the page. */
#app[data-route="people"] .regatta-module .block{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:6px 18px 10px;margin-bottom:16px;
}

/* ===== MODAL / OVERLAY (mock contact request + meeting) ===== */
.overlay{position:fixed;inset:0;background:rgba(17,17,17,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal{background:var(--card);border-radius:var(--radius);padding:24px;max-width:440px;width:100%;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.modal h3{margin:0 0 6px;font-size:1.15rem}
.modal .modal-sub{color:var(--muted);font-size:.86rem;margin:0 0 14px}
.modal .modal-x{position:absolute;top:14px;right:16px;font-size:1.1rem;color:var(--muted);cursor:pointer;border:0;background:none;line-height:1}
.modal label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin:10px 0 4px}
.modal textarea,.modal input,.modal select{
  width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 11px;font:inherit;font-size:.88rem;color:var(--fg);background:var(--card);
}
.modal textarea{min-height:84px;resize:vertical}
.modal .modal-actions{margin-top:16px;display:flex;gap:8px}
.modal .modal-done{font-size:.92rem;text-align:center;padding:18px 4px;color:var(--fg)}
.modal .modal-done .ok{color:var(--success);font-size:1.6rem;display:block;margin-bottom:8px}