/* Search Engine Watch — the conversation (comments) on articles, from the redesign mock-up (2026-09-18).
   Selectors start at #comments.conversation so they hold inside the article page's own styles; colours go through
   the tokens below, which css/dark.css redefines for dark mode. Loaded after css/article-v2.css. */

#comments.conversation{
  --cv-card:#FFFFFF;--cv-alt:#F5F6F7;--cv-chip:#ECEEEF;--cv-input:#FAFBFB;--cv-line:#E2E5E7;
  --cv-ink:#191B1C;--cv-text:#3E4347;--cv-muted:#6B7176;--cv-on-ink:#FFFFFF;
  --cv-green:#0E7333;--cv-green-dk:#0A5A28;--cv-yellow:#F0C137;--cv-err:#C62828;
  --cv-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --cv-body:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  margin-top:52px;padding-top:26px;border-top:2px solid var(--cv-ink);font-family:var(--cv-body)}
#comments.conversation *{box-sizing:border-box}
#comments.conversation [hidden]{display:none}

/* ---------- heading ---------- */
#comments.conversation .conversation__head{margin-bottom:14px}
#comments.conversation .conversation__head h2{font-family:var(--cv-display);font-weight:900;font-size:21px;line-height:1.2;letter-spacing:-.01em;color:var(--cv-ink);margin:0;text-wrap:balance}
#comments.conversation .conversation__count{color:var(--cv-green)}
#comments.conversation .conversation__note{font-family:var(--cv-body);font-size:13.5px;color:var(--cv-muted);margin:0}

/* ---------- the writing box ---------- */
#comments.conversation .comment-respond{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:10px;padding:18px 20px;margin:8px 0 26px}
#comments.conversation .chead{display:flex;gap:12px;align-items:center;margin-bottom:12px}
#comments.conversation .cv-you{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--cv-chip);color:var(--cv-ink);display:grid;place-items:center;font-family:var(--cv-display);font-weight:700;font-size:13px}
#comments.conversation .chead__text{min-width:0}
#comments.conversation .conversation__form-title{font-family:var(--cv-display);font-weight:700;font-size:14.5px;line-height:1.3;color:var(--cv-ink);margin:0;padding:0;border:0}
#comments.conversation .ccancel{font-family:var(--cv-body);font-weight:400;font-size:12px;margin-left:8px}
#comments.conversation .ccancel a{color:var(--cv-green);font-weight:600}
#comments.conversation .who2{display:block;font-family:var(--cv-body);font-size:12px;line-height:1.5;color:var(--cv-muted)}
#comments.conversation form.cform{margin:0}
#comments.conversation .cform__text{margin:0}
#comments.conversation textarea,#comments.conversation .cpreview{width:100%;display:block;border:1px solid var(--cv-line);background:var(--cv-input);color:var(--cv-ink);border-radius:8px;padding:12px 14px;font-family:var(--cv-body);font-size:14px;line-height:1.6;min-height:96px}
#comments.conversation textarea{resize:vertical}
#comments.conversation textarea:focus{outline:none;border-color:var(--cv-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--cv-green) 22%,transparent)}
#comments.conversation textarea::placeholder{color:var(--cv-muted)}
#comments.conversation .cpreview{background:var(--cv-alt);color:var(--cv-text)}
#comments.conversation .cpreview p{margin:0 0 10px;font-family:var(--cv-body);font-size:14px;line-height:1.6;color:var(--cv-text)}
#comments.conversation .cpreview p:last-child{margin-bottom:0}
#comments.conversation .cpreview.is-empty{color:var(--cv-muted);font-style:italic}
#comments.conversation .crow{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
#comments.conversation .crow input{flex:1 1 160px;min-width:0;border:1px solid var(--cv-line);background:var(--cv-input);color:var(--cv-ink);border-radius:999px;padding:10px 16px;font-family:var(--cv-body);font-size:12.5px;min-height:40px}
#comments.conversation .crow input:focus{outline:none;border-color:var(--cv-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--cv-green) 22%,transparent)}
#comments.conversation .crow input::placeholder{color:var(--cv-muted)}
#comments.conversation .cform__consent{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-family:var(--cv-body);font-size:12px;line-height:1.5;color:var(--cv-muted)}
#comments.conversation .cform__consent input{margin:2px 0 0;accent-color:var(--cv-green);flex:0 0 auto}
#comments.conversation .cform__consent label{margin:0;font-weight:400;font-size:12px;color:var(--cv-muted)}
#comments.conversation .cfoot{display:flex;margin-top:14px}
#comments.conversation .cbtns{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;width:100%}
#comments.conversation .cbtns .cf-turnstile,#comments.conversation .cbtns .cf-turnstile-br{order:-1;margin-right:auto}
#comments.conversation .cbtn{font-family:var(--cv-display);font-weight:700;font-size:13.5px;line-height:1;border-radius:999px;padding:12px 20px;min-height:44px;cursor:pointer;border:1px solid var(--cv-ink);background:none;color:var(--cv-ink);transition:background-color .15s ease-out,color .15s ease-out}
#comments.conversation .cbtn--solid{background:var(--cv-ink);color:var(--cv-on-ink)}
#comments.conversation .cbtn--solid:hover{opacity:.88}
#comments.conversation .cbtn--ghost:hover{background:var(--cv-ink);color:var(--cv-on-ink)}
#comments.conversation .cbtn:focus-visible{outline:2px solid var(--cv-ink);outline-offset:2px}

/* ---------- the comments ---------- */
#comments.conversation .conversation__list,#comments.conversation .conversation__list .children{list-style:none}
#comments.conversation .conversation__list{margin:0;padding:0}
#comments.conversation .cmt{display:flex;gap:10px;align-items:flex-start;padding:8px 0;margin:0;border:0;background:none;list-style:none}
#comments.conversation .cmt__avatar{width:36px;height:36px;flex:0 0 36px;max-width:none;margin:0;display:grid;place-items:center;border-radius:50%;object-fit:cover;background:var(--cv-chip);color:var(--cv-ink);font-family:var(--cv-display);font-weight:700;font-size:12px}
#comments.conversation .children .cmt__avatar{width:28px;height:28px;flex:0 0 28px;font-size:10.5px}
#comments.conversation .cbody{flex:1;min-width:0}
#comments.conversation .bubble{display:inline-block;background:var(--cv-alt);border:1px solid var(--cv-line);border-radius:2px 14px 14px 14px;padding:10px 14px;max-width:100%}
#comments.conversation .bubble .ch{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
#comments.conversation .bubble .ch .cmt__name{font-family:var(--cv-display);font-weight:700;font-size:13.5px;line-height:1.3;color:var(--cv-ink)}
#comments.conversation .bubble .ch .cmt__date{font-family:var(--cv-body);font-size:11.5px;color:var(--cv-muted)}
#comments.conversation .bubble .ch .abadge{font-family:var(--cv-display);font-weight:700;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--cv-yellow);color:#17181A;padding:1px 7px;border-radius:999px}
#comments.conversation .cmt__pending{font-family:var(--cv-body);font-size:12px;line-height:1.5;color:var(--cv-err);margin:4px 0 0}
#comments.conversation .cmt__body{margin:0}
#comments.conversation .cmt__body p,#comments.conversation .cmt__body li{font-family:var(--cv-body);font-size:13.5px;line-height:1.6;letter-spacing:0;color:var(--cv-text);margin:4px 0 0;max-width:60ch}
#comments.conversation .cmt__body p:first-child{margin-top:4px}
#comments.conversation .cmt__body ul,#comments.conversation .cmt__body ol{margin:6px 0 0;padding-left:20px}
#comments.conversation .cmt__body p a,#comments.conversation .cmt__body li a{color:var(--cv-green);background:none;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;font-weight:600}
#comments.conversation .cmt__body p a:hover,#comments.conversation .cmt__body li a:hover{color:var(--cv-green-dk);background:none;text-decoration-color:currentColor}
#comments.conversation .cmt__body blockquote{margin:6px 0 0;padding-left:12px;border-left:2px solid var(--cv-line);font-size:13.5px;color:var(--cv-muted)}

/* Like · Reply */
#comments.conversation .cacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:5px 0 0 8px;font-family:var(--cv-display);font-size:12px;color:var(--cv-muted);font-variant-numeric:tabular-nums}
#comments.conversation .cacts button,#comments.conversation .cacts a,#comments.conversation .cacts a.comment-reply-link{display:inline-flex;align-items:center;background:none;border:0;padding:4px 4px;font-family:var(--cv-display);font-weight:700;font-size:12px;line-height:1;color:var(--cv-muted);text-decoration:none;cursor:pointer}
#comments.conversation .cacts button:hover,#comments.conversation .cacts a:hover,#comments.conversation .cacts a.comment-reply-link:hover{color:var(--cv-ink);background:none;text-decoration:none}
#comments.conversation .cacts button:focus-visible,#comments.conversation .cacts a:focus-visible{outline:2px solid var(--cv-ink);outline-offset:2px;border-radius:4px}
#comments.conversation .cmt__like[aria-pressed="true"]{color:var(--cv-green)}
#comments.conversation .cmt__likes{font-family:var(--cv-display);font-weight:700;font-size:12px;color:var(--cv-muted)}
#comments.conversation .dot::before{content:"\00B7"}
#comments.conversation .children{margin:6px 0 0 17px;padding:0 0 0 20px;border-left:2px solid var(--cv-line)}
#comments.conversation .cmt .comment-respond{margin:12px 0 10px}
/* replying moves the writing box next to that comment (WordPress puts it after the comment) */
#comments.conversation .conversation__list > .comment-respond{margin:4px 0 20px 46px}
#comments.conversation .children > .comment-respond{margin:4px 0 16px 38px}

@media(max-width:980px){
  /* touch targets (Apple HIG review, 2026-09-11) */
  #comments.conversation .cacts button,#comments.conversation .cacts a,#comments.conversation .cacts a.comment-reply-link{min-height:44px;padding:4px 8px}
  #comments.conversation .cacts{margin-left:2px;gap:2px}
}
@media(max-width:640px){
  #comments.conversation{margin-top:38px;padding-top:22px}
  #comments.conversation .comment-respond{padding:16px 14px;border-radius:8px}
  #comments.conversation .cbtns{justify-content:stretch}
  #comments.conversation .cbtn{flex:1 1 auto;justify-content:center;display:inline-flex;align-items:center}
  #comments.conversation .children{margin-left:8px;padding-left:12px}
  #comments.conversation .conversation__list > .comment-respond{margin-left:18px}
  #comments.conversation .children > .comment-respond{margin-left:10px}
}

/* last word: hidden means hidden (the preview box and the empty like count) */
#comments.conversation [hidden]{display:none}
#comments.conversation .cpreview[hidden],#comments.conversation textarea[hidden],#comments.conversation .cmt__likes[hidden]{display:none}