/* Kommentarer, samtalstyper och sammanfattning – telefonforsaljare.nu */
.tf-report, .tf-summary, .tf-card { --tf-ink:#1f2933; --tf-muted:#6b7785; --tf-line:#e3e8ee; --tf-accent:#2563eb; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tf-ink); box-sizing: border-box; }
.tf-report *, .tf-summary *, .tf-card * { box-sizing: border-box; }

/* Färg per samtalstyp: --c = text/ram, --bg = ljus bakgrund */
.tf-t-scam       { --c:#b42318; --bg:#fee4e2; }
.tf-t-telesales  { --c:#b54708; --bg:#fef0c7; }
.tf-t-ping       { --c:#6941c6; --bg:#ebe9fe; }
.tf-t-robot      { --c:#475467; --bg:#eaecf0; }
.tf-t-survey     { --c:#175cd3; --bg:#d1e9ff; }
.tf-t-charity    { --c:#0e7090; --bg:#cff9fe; }
.tf-t-collection { --c:#93370d; --bg:#fde2cc; }
.tf-t-private    { --c:#067647; --bg:#d3f8df; }
.tf-t-other      { --c:#344054; --bg:#f2f4f7; }

/* Formulär */
.tf-report { max-width: 560px; margin: 16px 0 24px; padding: 18px; background:#fff; border:1px solid var(--tf-line); border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.tf-report h3 { margin:0 0 12px; padding:0; font-size:18px; line-height:1.3; color:var(--tf-ink); }
.tf-form fieldset { border:0; margin:0 0 14px; padding:0; }
.tf-form legend { font-weight:600; font-size:14px; margin:0 0 8px; padding:0; border:0; width:auto; line-height:1.4; }
.tf-chips { display:flex; flex-wrap:wrap; gap:8px; }
.tf-chip { position:relative; margin:0; cursor:pointer; }
.tf-chip input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.tf-chip span { display:inline-block; padding:9px 14px; border:1.5px solid var(--tf-line); border-radius:999px; font-size:14px; background:#fff; transition:background .12s, border-color .12s, color .12s; user-select:none; }
.tf-chip:hover span { border-color:var(--c); }
.tf-chip input:checked + span { background:var(--bg); border-color:var(--c); color:var(--c); font-weight:600; }
.tf-chip input:focus-visible + span { outline:3px solid rgba(37,99,235,.45); outline-offset:2px; }
.tf-field { display:block; margin:0 0 12px; font-size:14px; font-weight:600; }
.tf-field small { font-weight:400; color:var(--tf-muted); }
.tf-field input, .tf-field textarea { display:block; width:100%; max-width:100%; margin-top:5px; padding:10px 12px; font:inherit; font-weight:400; color:var(--tf-ink); background:#fff; border:1px solid #cfd6df; border-radius:10px; height:auto; box-shadow:none; }
.tf-field input:focus, .tf-field textarea:focus { outline:none; border-color:var(--tf-accent); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.tf-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.tf-submit { display:block; width:100%; margin-top:14px; padding:12px 16px; font:inherit; font-weight:600; color:#fff; background:var(--tf-accent); border:0; border-radius:10px; cursor:pointer; }
.tf-submit:hover { background:#1d4ed8; }
.tf-notice { padding:12px 14px; border-radius:10px; margin:0 0 14px; font-size:14px; }
.tf-ok  { background:#d3f8df; color:#067647; }
.tf-err { background:#fee4e2; color:#b42318; }

/* Badge */
.tf-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.4; color:var(--c); background:var(--bg); white-space:nowrap; }

/* Sammanfattning */
.tf-summary { margin:14px 0 18px; padding:16px 18px; background:#fff; border:1px solid var(--tf-line); border-radius:14px; }
.tf-lead { margin:0 0 10px; font-size:16px; clear:none; }
.tf-bar { display:flex; height:10px; overflow:hidden; border-radius:999px; background:var(--tf-line); }
.tf-seg { display:block; height:100%; background:var(--c); }
.tf-legend { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; }
.tf-legend li { margin:0; padding:0; }
.tf-dot { display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:50%; background:var(--c); }
.tf-n { color:var(--tf-muted); }
.tf-note { margin:10px 0 0; font-size:12px; color:var(--tf-muted); clear:none; }

/* Kommentarskort */
.tf-card { margin:0 0 12px; padding:14px 16px; background:#fff; border:1px solid var(--tf-line); border-radius:12px; }
.tf-card header { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:8px; }
.tf-company { font-size:15px; }
.tf-time { margin-left:auto; font-size:12px; color:var(--tf-muted); }
.tf-text { margin:0 0 8px; font-size:14px; line-height:1.55; clear:none; overflow-wrap:anywhere; }
.tf-card footer { font-size:12px; color:var(--tf-muted); }

@media (max-width:480px) { .tf-report { padding:14px; border-radius:12px; } .tf-chip span { padding:10px 14px; } }
@media (prefers-reduced-motion:reduce) { .tf-chip span { transition:none; } }