/* Contacts converter tool — shared by /csv-to-vcf and /vcf-to-csv. Uses guide.css tokens. */
.tool-hero { padding:18px 0 0; }
.tool-hero h1 { font-size:42px; }
.tool-hero .lead { margin-top:12px; font-size:17px; max-width:720px; }
.tool-hero .lead strong { color:var(--emerald); }

.cv { margin:22px 0 10px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg,#f7fcfa,#fff 220px); box-shadow:0 30px 70px -48px rgba(11,28,19,.35); padding:22px; min-width:0; }
.cv[hidden], .cv [hidden] { display:none !important; }

/* input */
.cv-in { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; }
.cv.has-file .cv-in { display:none; }
.cv-drop { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; min-height:196px; padding:24px 18px; border:2px dashed #b9dccd; border-radius:16px; background:#fff; cursor:pointer; transition:border-color .15s, background .15s; }
.cv-drop:hover, .cv-drop.over { border-color:var(--emerald); background:#f1faf6; }
.cv-drop:focus-within { outline:3px solid rgba(6,122,88,.25); outline-offset:2px; }
.cv-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.cv-drop .ico { width:44px; height:44px; border-radius:12px; background:var(--emerald); color:#fff; display:flex; align-items:center; justify-content:center; }
.cv-drop .t1 { font-family:var(--disp); font-weight:600; font-size:19px; color:var(--ink); line-height:1.25; }
.cv-drop .t2 { font-size:13.5px; color:var(--ink3); }
.cv-drop .pick { font-weight:600; font-size:14px; color:#fff; background:var(--emerald); padding:9px 18px; border-radius:10px; }
.cv-side { display:flex; flex-direction:column; gap:10px; min-width:0; }
.cv-side label.lbl { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); }
.cv-side textarea { width:100%; flex:1; min-height:112px; resize:vertical; font:13.5px/1.5 var(--mono); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff; }
.cv-side textarea:focus { outline:2px solid rgba(6,122,88,.35); border-color:var(--emerald); }
.cv-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.cv-btn { font:600 14px var(--body); border-radius:10px; padding:9px 16px; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink); }
.cv-btn:hover { border-color:var(--emerald); color:var(--emerald); }
.cv-btn.ghost { border-color:transparent; background:transparent; color:var(--emerald); padding-left:4px; padding-right:4px; text-decoration:underline; text-underline-offset:3px; }
.cv-private { display:flex; gap:8px; align-items:flex-start; margin:14px 2px 0; font-size:13px; color:var(--ink2); line-height:1.5; }
.cv-private svg { flex:none; margin-top:2px; color:var(--emerald); }
.cv.has-file .cv-private { margin-top:16px; }

.cv-err { margin:12px 0 0; padding:10px 14px; border-radius:10px; background:#fff4e5; border:1px solid #f5d29a; color:#7a4a00; font-size:14px; }
.cv.is-busy { cursor:progress; }
.cv.is-busy .cv-drop { opacity:.6; }

/* work area */
.cv-file { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.cv-file .nm { font-weight:600; color:var(--ink); overflow-wrap:anywhere; min-width:0; }
.cv-file .kind { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--emerald); border:1px solid #bfe3d4; border-radius:6px; padding:2px 7px; }
.cv-file .cv-btn { margin-left:auto; padding:6px 12px; font-size:13px; }

.cv-opts { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 16px; align-items:end; }
.cv-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.cv-field > span { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); }
.cv-field select { width:100%; min-width:0; font:15px var(--body); color:var(--ink); padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.cv-field small { font-size:12.5px; color:var(--ink3); line-height:1.45; }
.cv-seg { display:flex; flex-wrap:wrap; gap:6px; }
.cv-seg label { position:relative; }
.cv-seg input { position:absolute; opacity:0; inset:0; }
.cv-seg span { display:block; font-size:14px; font-weight:600; padding:9px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink2); cursor:pointer; white-space:nowrap; }
.cv-seg input:checked + span { background:var(--ink); border-color:var(--ink); color:#fff; }
.cv-seg input:focus-visible + span { outline:3px solid rgba(6,122,88,.35); }
.cv-checks { grid-column:1 / -1; display:flex; gap:8px 22px; flex-wrap:wrap; font-size:14px; color:var(--ink2); }
.cv-checks label { display:flex; gap:7px; align-items:center; cursor:pointer; }
.cv-checks input { accent-color:var(--emerald); width:16px; height:16px; }

.cv-mapwrap { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.cv-mapwrap summary { cursor:pointer; font-weight:600; font-size:14.5px; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:10px; }
.cv-mapwrap summary::-webkit-details-marker { display:none; }
.cv-mapwrap summary::after { content:'+'; font-family:var(--mono); color:var(--ink3); }
.cv-mapwrap[open] summary::after { content:'\2013'; }
.cv-mapwrap .hint { font-size:13px; color:var(--ink3); margin:6px 0 10px; }
.cv-map { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; margin-top:6px; }
.cv-col { display:flex; flex-direction:column; gap:3px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; min-width:0; }
.cv-col.on { border-color:#9fd3bd; background:#f5fbf8; }
.cv-col-h { font-weight:600; font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-col-s { font-family:var(--mono); font-size:11.5px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-col select { margin-top:4px; width:100%; font:13px var(--body); padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
.cv-headrow { font-size:13px; color:var(--ink2); display:flex; gap:7px; align-items:center; margin-top:10px; }
.cv-headrow input { accent-color:var(--emerald); }

.cv-stats { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 10px; }
.cv-chip { font-size:13px; padding:5px 10px; border-radius:999px; background:var(--soft); color:var(--ink2); }
.cv-chip b { color:var(--ink); font-weight:600; }
.cv-chip.ok { background:#e2f6ee; color:#05603f; } .cv-chip.ok b { color:#05603f; }
.cv-chip.bad { background:#fdecea; color:#9b2c1f; } .cv-chip.bad b { color:#9b2c1f; }
.cv-chip.mute { background:transparent; border:1px dashed var(--line); }

.cv-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; background:#fff; max-width:100%; }
.cv-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; }
.cv-table th { text-align:left; font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); padding:9px 12px; border-bottom:1px solid var(--line); background:#fafcfb; }
.cv-table td { padding:8px 12px; border-bottom:1px solid #f0f3f1; vertical-align:top; color:var(--ink); overflow-wrap:anywhere; }
.cv-table tr:last-child td { border-bottom:0; }
.cv-table .ph { display:block; font-family:var(--mono); font-size:13px; white-space:nowrap; }
.cv-table .ph small { display:block; font-family:var(--body); font-size:11.5px; color:var(--ink3); white-space:normal; }
.cv-table .ph.fixed { color:#05603f; }
.cv-table .ph.fixed::before { content:'\2713  '; }
.cv-table .ph.bad { color:#9b2c1f; }
.cv-table .ph.bad::before { content:'!  '; font-weight:700; }
.cv-table .ph.none, .cv-table .mute { color:var(--ink3); }
.cv-more { font-size:12.5px; color:var(--ink3); margin:8px 2px 0; min-height:1em; }

.cv-go { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
.cv-dl { display:inline-flex; align-items:center; gap:10px; font:700 15.5px var(--body); color:#fff; background:var(--emerald); border:0; border-radius:12px; padding:14px 22px; cursor:pointer; box-shadow:0 12px 28px -14px rgba(6,122,88,.6); max-width:100%; }
.cv-dl span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-dl:hover { filter:brightness(1.06); }
.cv-dl:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.cv-done { font-size:14px; color:var(--ink2); }

/* content blocks below the tool */
.cv-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0 4px; }
.cv-facts div { border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-size:14px; color:var(--ink2); line-height:1.5; }
.cv-facts b { display:block; font-family:var(--disp); font-size:17px; color:var(--ink); margin-bottom:4px; }
.fixrow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center; margin:14px 0; font-family:var(--mono); font-size:14px; }
.fixrow .a, .fixrow .b { border:1px solid var(--line); border-radius:10px; padding:10px 12px; overflow-wrap:anywhere; }
.fixrow .a { color:#9b2c1f; background:#fffafa; }
.fixrow .b { color:#05603f; background:#f5fbf8; }
.fixrow .arrow { color:var(--ink3); }
.plat { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:16px 0 6px; }
.plat > div { border:1px solid var(--line); border-radius:16px; padding:18px 20px; min-width:0; }
.plat h3 { font-family:var(--disp); font-size:18px; margin:0 0 8px; color:var(--ink); }
.plat ol, .plat ul { margin:0; padding-left:20px; }
.plat li { font-size:14.5px; color:#333f39; margin:6px 0; }
.plat p { font-size:14.5px; margin:8px 0 0; }
.errs { width:100%; border-collapse:collapse; margin:14px 0; font-size:14.5px; }
.errs th, .errs td { text-align:left; vertical-align:top; padding:11px 12px; border-bottom:1px solid var(--line); }
.errs th { font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); }
.errs td:first-child { font-weight:600; color:var(--ink); width:36%; }
.errs td { color:#333f39; }
code, .code { font-family:var(--mono); font-size:.92em; background:var(--soft); border-radius:5px; padding:1px 5px; overflow-wrap:anywhere; }
pre.code { display:block; padding:12px 14px; border-radius:10px; overflow-x:auto; font-size:12.5px; line-height:1.55; margin:12px 0; white-space:pre; }
.tooly-note { border:1px solid var(--line); border-left:4px solid var(--emerald); border-radius:12px; padding:16px 20px; margin:30px 0 6px; background:#fff; }
.tooly-note p { margin:0; font-size:15.5px; }

@media (max-width:760px) {
  .tool-hero h1 { font-size:32px; }
  .cv { padding:14px; border-radius:18px; margin-left:-4px; margin-right:-4px; }
  .cv-in { grid-template-columns:1fr; }
  .cv-drop { min-height:160px; }
  .cv-opts { grid-template-columns:1fr; }
  .cv-facts, .plat { grid-template-columns:1fr; }
  .errs td:first-child { width:auto; }
  .errs, .errs tbody, .errs tr, .errs td { display:block; }
  .errs thead { display:none; }
  .errs tr { border-bottom:1px solid var(--line); padding:8px 0; }
  .errs td { border:0; padding:4px 0; }
  .cv-dl { width:100%; justify-content:center; }
}
@media (max-width:600px) { .wrap { padding:0 16px; } }