/* vista-card.css - the VISTA site card's panel (vista-card.js), shared by Host Sites and Recruitment (VISTA split, SPEC 5.1).
   Moved from vista.html. Every selector sits under .pm.vcard so Recruitment's own prospect panel (also .pm) is untouched,
   written as ":where(.pm.vcard) X" so it weighs exactly what "X" weighed on vista.html: the shared rrcc-ui.css still
   wins and loses where it did. A page links this after its own styles and before rrcc-ui.css. */
:where(.pm.vcard) .edbtn{border-color:#eeddb2!important;background:#fbf3df!important;color:#7a5a0e!important;font-weight:800}
:where(.pm.vcard) .edbtn.due{box-shadow:0 0 0 2px #f3e3b3}
:where(.pm.vcard) .edhint{font-size:11.5px;color:#8a8f99;margin:6px 0 0}
:where(.pm).vcard{background:#fff;border-radius:16px;max-width:580px;width:100%;box-shadow:0 22px 55px rgba(0,0,0,.32)}
:where(.pm.vcard) .pm-h{padding:18px 20px 16px;border-bottom:1px solid #eef0f3;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
:where(.pm.vcard) .pm-h h2{margin:0 0 3px;font-size:19px;color:#1f2a44}:where(.pm.vcard) .pm-h .sub{color:#9aa1ab;font-size:12.5px}
:where(.pm.vcard) .pm-x{border:none;background:#f3f5f9;border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:17px;color:#475569;flex:none}
:where(.pm.vcard) .pm-x:hover{background:#fdecec;color:#b8232a}
:where(.pm.vcard) .pm-body{padding:16px 20px 20px}
:where(.pm.vcard) .pm-sec{margin:0 0 18px}:where(.pm.vcard) .pm-sec:last-child{margin-bottom:0}
:where(.pm.vcard) .pm-sec h3{margin:0 0 8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280}
:where(.pm.vcard) .pm-contact{font-size:13.5px;color:#334155}:where(.pm.vcard) .pm-contact a{color:#b8232a}
:where(.pm.vcard) .stagerow{display:flex;flex-wrap:wrap;gap:7px}
:where(.pm.vcard) .stagechip{border:1px solid #ccd1d9;background:#fff;color:#334155;border-radius:10px;padding:9px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;min-height:40px;text-align:left;box-shadow:0 1px 1px rgba(15,23,42,.03)}
:where(.pm.vcard) .stagechip:hover{border-color:#b8232a;color:#b8232a}
:where(.pm.vcard) .stagechip.on{background:#1f2a44;border-color:#0f1830;color:#fff;cursor:default;box-shadow:inset 0 3px 7px rgba(0,0,0,.28),0 0 0 2px rgba(31,42,68,.14)}
:where(.pm.vcard) .stagechip.on:before{content:"\2713";margin-right:7px;font-weight:900}
:where(.pm.vcard) .stagechip:disabled{opacity:1}
:where(.pm.vcard) .nextstep{border:1px solid #cfd7e4;background:#f6f8fb;border-radius:12px;padding:12px;margin:10px 0 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
:where(.pm.vcard) .nextstep-copy{min-width:0;color:#475569;font-size:12px;line-height:1.35}:where(.pm.vcard) .nextstep-copy strong{display:block;color:#1f2a44;font-size:13px;margin-bottom:2px}
:where(.pm.vcard) .nextstep .btn{flex:none;max-width:270px}
:where(.pm.vcard) .emailconfirm{margin-top:10px;padding:11px;border:1px solid #f1c7c9;border-radius:11px;background:#fff7f7;color:#475569;font-size:12.5px;line-height:1.4}
:where(.pm.vcard) .emailconfirm[hidden]{display:none}:where(.pm.vcard) .emailconfirm strong{display:block;color:#1f2a44;margin-bottom:7px}:where(.pm.vcard) .emailconfirm .emailbtns{margin-top:8px}:where(.pm.vcard) .emailconfirm [role="status"]{min-height:1.2em;margin-top:7px;font-weight:700}
:where(.pm.vcard) .milestones{display:grid;gap:6px;margin:0;padding:0;list-style:none}
:where(.pm.vcard) .milestones li{display:flex;justify-content:space-between;gap:12px;padding:7px 9px;border:1px solid #edf0f4;border-radius:9px;background:#f8fafc;font-size:12px;color:#475569}
:where(.pm.vcard) .milestones time{white-space:nowrap;color:#1f2a44;font-weight:700}
:where(.pm.vcard) .intake-note{margin-top:7px;padding:7px 9px;border-radius:9px;background:#eff6ff;color:#1e3a8a;font-size:11.5px;line-height:1.35}
:where(.pm.vcard) .pm-row{display:flex;gap:8px;flex-wrap:wrap}:where(.pm.vcard) .pm-row input{flex:1;min-width:150px;padding:8px 11px;border:1px solid #ccd1d9;border-radius:9px;font:inherit}
:where(.pm.vcard) .muted{color:#9aa1ab;font-size:13px;margin:0}
:where(.pm.vcard) .fld{display:flex;gap:10px;padding:5px 0;font-size:13px;border-top:1px solid #f1f3f6}
:where(.pm.vcard) .fld:first-child{border-top:none}
:where(.pm.vcard) .fld .fl{flex:0 0 180px;max-width:180px;font-weight:700;color:#475569}
:where(.pm.vcard) .fld .fv{flex:1;min-width:120px;color:#1f2a44;white-space:pre-wrap;overflow-wrap:anywhere}
:where(.pm.vcard) .fld .fv a{color:#b8232a}
:where(.pm.vcard) .note{background:#f7f8fa;border:1px solid #eef0f3;border-radius:9px;padding:8px 11px;font-size:13px;margin-bottom:7px;white-space:pre-wrap;overflow-wrap:anywhere}
:where(.pm.vcard) .note .nm{color:#9aa1ab;font-size:11px;margin-top:4px}
:where(.pm.vcard) textarea.ntext{width:100%;border:1px solid #ccd1d9;border-radius:9px;padding:9px 11px;font:inherit;min-height:62px;resize:vertical;box-sizing:border-box}
:where(.pm.vcard) .btn{font:inherit;font-weight:700;font-size:13px;padding:8px 14px;border-radius:9px;border:1px solid #d7dbe0;background:#fff;color:#1f2a44;cursor:pointer}
:where(.pm.vcard) .btn:hover{border-color:#b8232a;color:#b8232a}
:where(.pm.vcard) .btn.primary{background:#1f2a44;border-color:#1f2a44;color:#fff}:where(.pm.vcard) .btn.primary:hover{background:#0f1830;color:#fff}
:where(.pm.vcard) .btn.danger{color:#b8232a;border-color:#f0b8b8}:where(.pm.vcard) .btn.danger:hover{background:#b8232a;color:#fff;border-color:#b8232a}
:where(.pm.vcard) .emailbtns{display:flex;gap:8px;flex-wrap:wrap}
/* A document row wraps (final review, task 8a). Its details used to sit beside the name with white-space:nowrap
   and the name had no min-width, so a long file name was squeezed to a 12 px column, one letter per line. Now a
   name too long for the line takes a line of its own and wraps there, and the details go below it when they do not
   fit beside it (on a phone, below a long name). Details wider than the row break onto a second line. */
:where(.pm.vcard) .docrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:6px 0;border-top:1px solid #f1f3f6;font-size:13px}
:where(.pm.vcard) .docrow:first-child{border-top:none}
:where(.pm.vcard) .doclink{color:#b8232a;font-weight:700;text-decoration:none;overflow-wrap:anywhere;flex:0 1 auto;min-width:0}
:where(.pm.vcard) .doclink:hover{text-decoration:underline}
:where(.pm.vcard) .docedit{color:#475569;font-weight:600;font-size:11px;text-decoration:none;border:1px solid #dfe3ea;border-radius:6px;padding:1px 7px;flex:none}
:where(.pm.vcard) .docedit:hover{background:#f3f5f9;color:#b8232a;border-color:#f0c9c9}
:where(.pm.vcard) .docmeta{color:#9aa1ab;font-size:11px;margin-left:auto;min-width:0;overflow-wrap:anywhere}
:where(.pm.vcard) .docdel{border:none;background:#f3f5f9;color:#475569;border-radius:6px;width:24px;height:24px;cursor:pointer;flex:none;font-size:15px;line-height:1}
:where(.pm.vcard) .docdel:hover{background:#fdecec;color:#b8232a}
/* On a phone the file link (20 px tall), Edit (37x21) and Remove (24 px wide) are finger-sized (review finding 4):
   44 px each way, contents centred. The link keeps its text size; the space comes from its box, not a bigger font.
   The wider Remove would drop onto a line of its own at the left, so on a phone it ends the name's line and the
   details take their own line below. */
@media (max-width:820px){
  :where(.pm.vcard) .doclink,:where(.pm.vcard) .docedit,:where(.pm.vcard) .docdel{display:inline-flex;align-items:center;min-width:44px;min-height:44px;box-sizing:border-box}
  :where(.pm.vcard) .doclink{padding:0 4px}
  :where(.pm.vcard) .docedit,:where(.pm.vcard) .docdel{justify-content:center}
  :where(.pm.vcard) .docedit{font-size:12px;padding:0 10px}
  :where(.pm.vcard) .docdel{margin-left:auto}
  :where(.pm.vcard) .docmeta{order:1;flex-basis:100%;margin-left:0}
}
:where(.pm.vcard) .docactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* A site's contacts (2026-10-01): a list, first contact first, edited in place. */
:where(.pm.vcard) .ctlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
:where(.pm.vcard) .ct{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;padding:8px 10px;border:1px solid #edf0f4;border-radius:9px;background:#f8fafc}
:where(.pm.vcard) .ct-name{font-weight:700;color:#1f2a44}:where(.pm.vcard) .ct-role{color:#6b7280;font-size:12.5px}
:where(.pm.vcard) .ct-how{flex-basis:100%;font-size:13px;color:#334155;overflow-wrap:anywhere}:where(.pm.vcard) .ct-how a{color:#b8232a}
/* Tap to call and tap to email are finger-sized (final review, task 8c): they were 16 px tall inline links. */
:where(.pm.vcard) .ct-how a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;box-sizing:border-box}
:where(.pm.vcard) .ctline{margin-top:8px;font-size:13px;color:#334155}
:where(.pm.vcard) .ctacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
:where(.pm.vcard) .ctacts .btn,:where(.pm.vcard) .ctrow .btn{min-height:44px}
:where(.pm.vcard) .ctedit{display:flex;flex-direction:column;gap:8px}
:where(.pm.vcard) .ctrow{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border:1px solid #e6e8ec;border-radius:10px;background:#fbfcfd}
:where(.pm.vcard) .ctrow input{min-width:0;min-height:44px;padding:8px 11px;border:1px solid #ccd1d9;border-radius:9px;font:inherit;font-size:14px;box-sizing:border-box}
:where(.pm.vcard) .ctrow .ctdel{grid-column:1/-1;justify-self:end}
:where(.pm.vcard) .ctmsg{margin:8px 0 0;font-size:12.5px;font-weight:700;color:#b8232a;min-height:1.2em}
@media (max-width:560px){:where(.pm.vcard) .ctrow{grid-template-columns:1fr}:where(.pm.vcard) .ctrow input{font-size:16px}}
/* VISTA years and the renewal timeline (2026-10-01), from the VISTA Dashboard's data. */
:where(.pm.vcard) .rnyears{font-size:13px;color:#334155;margin:0 0 8px}:where(.pm.vcard) .rnyears b{color:#1f2a44}
:where(.pm.vcard) .rnterm{font-size:12.5px;color:#475569;margin:0 0 8px;line-height:1.45}
:where(.pm.vcard) .rnsteps{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
:where(.pm.vcard) .rnstep{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:8px 10px;border:1px solid #edf0f4;border-radius:9px;background:#f8fafc;font-size:13px}
:where(.pm.vcard) .rnstep .rnlab{font-weight:700;color:#1f2a44;flex:1 1 200px}
:where(.pm.vcard) .rnstep .rnstate{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;border-radius:999px;padding:2px 8px;background:#eef1f5;color:#475569}
:where(.pm.vcard) .rnstep.st-due{border-color:#f0d9a8;background:#fffaf0}:where(.pm.vcard) .rnstep.st-due .rnstate{background:#fdf3e3;color:#8a5a12}
:where(.pm.vcard) .rnstep.st-done .rnstate{background:#dcfce7;color:#15803d}
:where(.pm.vcard) .rnstep .rndate{flex-basis:100%;font-size:12px;color:#64748b}
:where(.pm.vcard) .rnstep .btn{min-height:44px}
:where(.pm.vcard) .rndec{display:flex;flex-direction:column;gap:6px;margin-top:6px}
:where(.pm.vcard) .rndec select,:where(.pm.vcard) .rndec textarea{font:inherit;font-size:14px;padding:8px 10px;border:1px solid #ccd1d9;border-radius:9px;min-height:44px;box-sizing:border-box;width:100%}
:where(.pm.vcard) .rndec textarea{min-height:60px;resize:vertical}
:where(.pm.vcard) .rndec .btn{min-height:44px;align-self:flex-start}
:where(.pm.vcard) .rnmsg{font-size:12.5px;font-weight:700;color:#1f2a44;min-height:1.2em;margin:4px 0 0}
:where(.pm.vcard) .rnnote{font-size:12.5px;color:#64748b;margin:6px 0 0}
@media (max-width:560px){:where(.pm.vcard) .rndec select,:where(.pm.vcard) .rndec textarea{font-size:16px}}
/* Package 2 (e), 2026-10-03: a logged call, the emails already sent, Rename, and a toast after a move. */
:where(.pm.vcard) .calltag{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#1e3a8a;background:#dbeafe;border-radius:999px;padding:1px 7px;margin-right:6px;vertical-align:1px}
:where(.pm.vcard) .emhist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#475569}
:where(.pm.vcard) .emhist li{padding:6px 9px;border:1px solid #edf0f4;border-radius:8px;background:#f8fafc}
:where(.pm.vcard) .notebtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}:where(.pm.vcard) .notebtns .btn{min-height:44px}
:where(.pm.vcard) .callform{margin-top:8px}:where(.pm.vcard) .callform[hidden]{display:none}
:where(.pm.vcard) .renamebox{margin-top:8px}:where(.pm.vcard) .renamebox[hidden]{display:none}
:where(.pm.vcard) .renameform{display:flex;gap:8px;flex-wrap:wrap}:where(.pm.vcard) .renameform input{flex:1;min-width:180px;min-height:44px;padding:8px 11px;border:1px solid #ccd1d9;border-radius:9px;font:inherit;font-size:14px;box-sizing:border-box}
:where(.pm.vcard) .renameform .btn,:where(.pm.vcard) .pm-h .btn{min-height:44px}
:where(.pm.vcard) .pm-h .btn.rnm{margin-top:8px;font-size:12px;padding:6px 12px}
@media (max-width:560px){:where(.pm.vcard) .renameform input{font-size:16px}}
@media (max-width:820px){:where(.pm.vcard) .fld .fl{flex-basis:100%;max-width:none}:where(.pm.vcard) .stagerow{display:grid;grid-template-columns:1fr}:where(.pm.vcard) .stagechip{width:100%}:where(.pm.vcard) .nextstep{align-items:stretch;flex-direction:column}:where(.pm.vcard) .nextstep .btn{width:100%;max-width:none}:where(.pm.vcard) .milestones li{align-items:flex-start;flex-direction:column;gap:2px}}
/* Tags the panel draws (the VAD badge on a document), as the board draws them. */
:where(.pm.vcard) .srctag{font-size:9px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-radius:999px;padding:2px 6px}
:where(.pm.vcard) .srctag.interest{color:#0f766e;background:#ccfbf1}
/* The VISTA split (2026-10-04): stage chips in two labelled rows, the line naming the other board, the recruitment list. */
:where(.pm.vcard) .vc-stagegroup{margin:0 0 10px}
:where(.pm.vcard) .vc-stagegroup-h{margin:0 0 6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
:where(.pm.vcard) .vc-where{margin:6px 0 0;padding:7px 10px;border:1px solid #cfd7e4;border-radius:9px;background:#f6f8fb;color:#334155;font-size:12.5px;font-weight:700}
:where(.pm.vcard) .vc-where a{color:#b8232a;display:inline-flex;align-items:center;min-height:32px;padding:0 4px}
:where(.pm.vcard) .cold-line{font-size:12.5px;color:#475569;font-weight:700;margin:0 0 8px}
:where(.pm.vcard) .note b{text-transform:capitalize}
@media (max-width:820px){
  .pm.vcard .stagechip,.pm.vcard .btn,.pm.vcard .cbtn,.pm.vcard .pm-x,.pm.vcard .vc-where a{min-height:44px}
  .pm.vcard input,.pm.vcard select,.pm.vcard textarea{min-height:44px;font-size:16px;box-sizing:border-box}
  .pm.vcard input[type="file"]{min-height:0}
}