/* blog-comments-20261004-1. Loaded once in the page and once in each native
   Halo CommentWidget shadow root. All form events and data remain native. */
.nq-comments {
  --nq-comment-ink:#35425e;
  --nq-comment-muted:#75809b;
  --nq-comment-soft:#8c97ad;
  --nq-comment-line:rgba(133,152,192,.19);
  --nq-comment-surface:rgba(255,255,255,.42);
  --nq-comment-input:rgba(255,255,255,.42);
  --nq-comment-hover:rgba(130,164,235,.1);
  --nq-comment-accent:#6989cc;
  --nq-comment-button:#d9e5ff;
  --nq-comment-button-ink:#304572;
  --nq-comment-focus:rgba(122,162,247,.17);
  --nq-comment-shadow:rgba(85,108,153,.09);
  color:var(--nq-comment-ink);
}
html:is(.dark,[data-theme="dark"]) .nq-comments {
  --nq-comment-ink:#e3e9f5;
  --nq-comment-muted:#a5b0c7;
  --nq-comment-soft:#8795af;
  --nq-comment-line:rgba(148,170,218,.17);
  --nq-comment-surface:rgba(20,27,43,.48);
  --nq-comment-input:rgba(12,19,34,.4);
  --nq-comment-hover:rgba(119,155,225,.12);
  --nq-comment-accent:#9ebaf3;
  --nq-comment-button:#9bb6ed;
  --nq-comment-button-ink:#1c2e52;
  --nq-comment-focus:rgba(130,166,239,.17);
  --nq-comment-shadow:rgba(0,0,0,.16);
}
html.nq-article-motion body.nq-article-motion [id^="comment-content-"].nq-comments,
html body [id^="comment-content-"].nq-comments {
  position:relative;
  min-height:0 !important;
  padding:clamp(22px,3.5vw,38px) !important;
  border:1px solid var(--nq-comment-line) !important;
  border-radius:26px !important;
  background:var(--nq-comment-surface) !important;
  box-shadow:0 18px 50px var(--nq-comment-shadow),inset 0 1px rgba(255,255,255,.16) !important;
  overflow:visible !important;
  scroll-margin-top:110px;
}
.nq-comments .nq-comments-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:26px}
.nq-comments .nq-comments-heading h2{font-family:inherit;font-weight:600;font-size:clamp(21px,2.3vw,26px);line-height:1.45;letter-spacing:-.025em;margin:0 0 7px;color:var(--nq-comment-ink)}
.nq-comments .nq-comments-heading p{font-size:13px;line-height:1.75;color:var(--nq-comment-muted);margin:0}
.nq-comments .nq-comments-count{flex:none;white-space:nowrap;border:1px solid var(--nq-comment-line);border-radius:999px;padding:6px 11px;color:var(--nq-comment-accent);background:var(--nq-comment-hover);font-size:12px;line-height:1.4;margin-top:3px}
comment-widget.nq-comments-widget {
  display:block;
  min-width:0;
  --halo-comment-widget-base-color:var(--nq-comment-ink) !important;
  --halo-comment-widget-base-info-color:var(--nq-comment-muted) !important;
  --halo-comment-widget-base-font-family:inherit !important;
  --halo-comment-widget-base-font-size:14px !important;
  --halo-comment-widget-base-line-height:1.8 !important;
  --halo-comment-widget-base-border-radius:14px !important;
  --halo-comment-widget-component-avatar-size:38px !important;
  --halo-comment-widget-component-avatar-rounded:50% !important;
  --halo-comment-widget-component-form-input-bg-color:var(--nq-comment-input) !important;
  --halo-comment-widget-component-form-input-color:var(--nq-comment-ink) !important;
  --halo-comment-widget-component-form-input-border-color:var(--nq-comment-line) !important;
  --halo-comment-widget-component-form-input-border-color-focus:var(--nq-comment-accent) !important;
  --halo-comment-widget-component-form-input-box-shadow-focus:0 0 0 4px var(--nq-comment-focus) !important;
  --halo-comment-widget-component-form-button-login-bg-color:var(--nq-comment-button) !important;
  --halo-comment-widget-component-form-button-login-bg-color-hover:var(--nq-comment-button) !important;
  --halo-comment-widget-component-form-button-login-border-color:transparent !important;
  --halo-comment-widget-component-form-button-submit-bg-color:var(--nq-comment-button) !important;
  --halo-comment-widget-component-form-button-submit-color:var(--nq-comment-button-ink) !important;
  --halo-comment-widget-component-form-button-submit-border-color:transparent !important;
  --halo-comment-widget-component-form-button-submit-border-color-hover:var(--nq-comment-accent) !important;
  --halo-comment-widget-component-form-button-emoji-color:var(--nq-comment-muted) !important;
  --halo-comment-widget-component-comment-item-action-bg-color-hover:var(--nq-comment-hover) !important;
  --halo-comment-widget-component-comment-item-action-color-hover:var(--nq-comment-accent) !important;
  --halo-comment-widget-component-pagination-button-bg-color-active:var(--nq-comment-button) !important;
  --halo-comment-widget-component-pagination-button-bg-color-hover:var(--nq-comment-hover) !important;
  --halo-comment-widget-component-pagination-button-border-color-active:var(--nq-comment-accent) !important;
}
/* Native shadow components below. Never position the list in a scroll box. */
:host .comment-widget{display:block;min-width:0;color:var(--nq-comment-ink)}
:host .comment-widget__wrapper{margin-top:28px;padding-top:0;overflow:visible;max-height:none}
:host .comment-widget[data-nq-comments-ready] .comment-widget__stats{display:none}
:host .comment-widget__list{display:flex;flex-direction:column;gap:0;overflow:visible;max-height:none}
:host .comment-widget__list>comment-item{display:block;padding:23px 0;border-top:1px solid var(--nq-comment-line)}
:host .form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 12px;position:relative;margin:0;color:var(--nq-comment-ink);overflow:visible}
:host .form__footer{display:contents}
:host .form__account-info{grid-row:1;grid-column:1/-1;display:flex;align-items:center;gap:10px;min-width:0;font-size:13px;color:var(--nq-comment-ink)}
:host .form__account-info img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--nq-comment-line)}
:host .form__account-info:not(:has(img))::before{content:"✦";display:grid;place-items:center;width:32px;height:32px;flex:none;border:1px solid var(--nq-comment-line);border-radius:50%;background:linear-gradient(130deg,rgba(244,159,203,.2),rgba(126,172,239,.23));color:var(--nq-comment-accent)}
:host .form__account-info>span{font-weight:600;overflow-wrap:anywhere}
:host .form__button--logout{margin-left:auto;border:0;background:transparent;color:var(--nq-comment-muted);font-size:11px;cursor:pointer;white-space:nowrap}
:host .form__editor{grid-row:2;grid-column:1/-1;box-sizing:border-box;display:block;width:100%;min-width:0;min-height:128px;margin:0;padding:17px 18px;border:1px solid var(--nq-comment-line);border-radius:17px;background:var(--nq-comment-input);color:var(--nq-comment-ink);font:inherit;font-size:14px;line-height:1.8;resize:vertical;box-shadow:inset 0 1px 2px var(--nq-comment-shadow);transition:border-color .18s,box-shadow .18s}
:host .form__editor::placeholder{color:var(--nq-comment-soft);opacity:1}
:host .form__editor:focus{outline:none;border-color:var(--nq-comment-accent);box-shadow:0 0 0 4px var(--nq-comment-focus)}
:host .form__anonymous-inputs{grid-row:3;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:9px;min-width:0}
:host .form__anonymous-inputs input{flex:1 1 140px;min-width:0;border:1px solid var(--nq-comment-line);border-radius:10px;padding:10px 12px;color:var(--nq-comment-ink);background:var(--nq-comment-input);font:inherit;font-size:12px}
:host .form__anonymous-inputs a{align-self:center;color:var(--nq-comment-accent);font-size:12px}
:host .form__actions{grid-row:4;grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:10px;margin:0;min-width:0}
:host .form:has(.form__account-info) .form__actions{grid-row:3}
:host .form__action--captcha{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-width:0;margin-right:auto}
:host .form__action--captcha input{max-width:130px;min-width:0;border:1px solid var(--nq-comment-line);border-radius:9px;padding:9px;color:var(--nq-comment-ink);background:var(--nq-comment-input)}
:host .form__button--submit,:host .form__button--login{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;box-sizing:border-box;padding:10px 18px;border:1px solid transparent;border-radius:12px;background:var(--nq-comment-button);color:var(--nq-comment-button-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.4);transition:filter .18s,box-shadow .18s}
:host .form__button--submit:hover,:host .form__button--login:hover{filter:brightness(1.04);box-shadow:0 4px 16px var(--nq-comment-focus)}
:host .form__button--submit:disabled,:host .form__button--login:disabled{cursor:not-allowed;opacity:.5;filter:none;box-shadow:none}
:host .form__button--login{grid-row:3;grid-column:1;justify-self:start;min-width:142px}
:host .form:has(.form__button--login):not(:has(.form__account-info)) .form__editor,:host .form:has(.form__button--login):not(:has(.form__account-info)) .form__actions{display:none}
:host .form:has(.form__button--login):not(:has(.form__account-info)) .form__button--login,:host .form:has(.form__button--login):not(:has(.form__account-info)) .nq-comment-register{grid-row:2}
:host .nq-comment-register{grid-row:3;grid-column:2;align-self:center;justify-self:end;color:var(--nq-comment-accent);font-size:12px;line-height:1.6;text-decoration:none;padding:9px 0}
:host .nq-comment-register:hover{text-decoration:underline}
:host .nq-comment-register[hidden]{display:none!important}
:host .nq-comment-login-note{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:11px;color:var(--nq-comment-ink)}
:host .nq-comment-login-note>span{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--nq-comment-line);border-radius:12px;background:linear-gradient(135deg,rgba(242,157,205,.18),rgba(126,174,240,.22));color:var(--nq-comment-accent);font-size:19px}
:host .nq-comment-login-note strong{display:block;font-size:13px;font-weight:600;line-height:1.6}
:host .nq-comment-login-note p{margin:1px 0 0;font-size:11px;line-height:1.7;color:var(--nq-comment-muted)}
:host .emoji-button{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--nq-comment-line);border-radius:11px;color:var(--nq-comment-muted);background:var(--nq-comment-input);cursor:pointer}
:host .form__emoji-panel{z-index:20;max-width:min(320px,calc(100vw - 48px));box-shadow:0 12px 34px var(--nq-comment-shadow);border-radius:14px;overflow:auto}
:host .item{display:flex;align-items:flex-start;gap:13px;min-width:0;background:transparent;color:var(--nq-comment-ink)}
:host .item__avatar{flex:none;width:38px}:host .item__main{flex:1;min-width:0}
:host .item__meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 10px;margin:0 0 8px;font-size:12px;line-height:1.7}
:host .item__author{font-size:13px;font-weight:600;color:var(--nq-comment-ink);overflow-wrap:anywhere}
:host .item__meta-info{font-size:11px;color:var(--nq-comment-soft);line-height:1.7;overflow-wrap:anywhere}
:host .item__content{font-size:14px;line-height:1.9;color:var(--nq-comment-ink);overflow-wrap:anywhere}
:host .item__content pre{font:inherit;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;margin:0;overflow:visible;max-height:none;background:transparent;border:0;padding:0}
:host .item__content a{color:var(--nq-comment-accent);text-underline-offset:3px}
:host .item__actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:10px;color:var(--nq-comment-muted)}
:host .item-action{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:3px 5px;border-radius:7px;color:var(--nq-comment-muted);font-size:11px;cursor:pointer;transition:color .15s,background .15s}
:host .item-action:hover{color:var(--nq-comment-accent);background:var(--nq-comment-hover)}
:host .item-action__icon{width:14px;height:14px;display:flex;align-items:center}:host .item-action__text{font-size:11px}
:host .replies__wrapper{margin:16px 0 0 5px;padding-left:18px;border-left:1px solid var(--nq-comment-line);min-width:0}
:host .replies__list{display:flex;flex-direction:column;gap:19px;overflow:visible;max-height:none}
:host .replies__next-wrapper{margin-top:13px}:host .replies__next-wrapper button{border:0;border-radius:8px;background:var(--nq-comment-hover);padding:7px 11px;color:var(--nq-comment-accent);font:inherit;font-size:11px;cursor:pointer}
:host .form__wrapper{margin:16px 0 8px;min-width:0}:host .item__quote-badge{background:var(--nq-comment-hover);color:var(--nq-comment-accent);border-radius:5px}
:host .pagination{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;list-style:none;padding:23px 0 0;margin:0;border-top:1px solid var(--nq-comment-line)}
:host .pagination__button button,:host .pagination__number button{min-width:35px;min-height:35px;border:1px solid var(--nq-comment-line);border-radius:10px;background:transparent;color:var(--nq-comment-muted);font:inherit;font-size:12px;cursor:pointer}
:host .pagination__number.active button{background:var(--nq-comment-button);border-color:transparent;color:var(--nq-comment-button-ink);font-weight:600}:host .pagination__dot{color:var(--nq-comment-soft)}
:host .loading-block{padding:22px 0;color:var(--nq-comment-muted)}
:host .avatar{border:1px solid var(--nq-comment-line);background:var(--nq-comment-hover)}:host .avatar img{object-fit:cover}:host .avatar__placeholder{color:var(--nq-comment-accent);background:var(--nq-comment-hover)}
:host .form button:focus-visible,:host .form a:focus-visible,:host .item-action:focus-visible,:host .pagination button:focus-visible{outline:2px solid var(--nq-comment-accent);outline-offset:3px}
@media(max-width:600px){html.nq-article-motion body.nq-article-motion [id^="comment-content-"].nq-comments,html body [id^="comment-content-"].nq-comments{padding:21px 16px!important;border-radius:21px!important}.nq-comments .nq-comments-heading{gap:10px;margin-bottom:21px}.nq-comments .nq-comments-heading h2{font-size:21px}.nq-comments .nq-comments-heading p{font-size:12px}.nq-comments .nq-comments-count{font-size:11px;padding:5px 8px}:host .form{gap:12px 9px}:host .form__editor{padding:14px;min-height:132px;font-size:14px;border-radius:14px}:host .form__actions{gap:8px}:host .form__button--submit,:host .form__button--login{font-size:12px;padding:10px 13px}:host .form__button--login{min-width:0}:host .nq-comment-register{font-size:11px}:host .item{gap:9px}:host .item__avatar{width:30px}:host .item__meta{gap:3px 7px}:host .item__content,:host .item__content pre{font-size:13px;line-height:1.85}:host .replies__wrapper{margin-left:2px;padding-left:11px}:host .comment-widget__list>comment-item{padding:20px 0}comment-widget.nq-comments-widget{--halo-comment-widget-component-avatar-size:30px!important}}
@media(max-width:350px){.nq-comments .nq-comments-heading{flex-wrap:wrap;gap:9px}.nq-comments .nq-comments-count{margin:0}:host .form__actions{justify-content:flex-end}:host .form__action--captcha{width:100%}}
@media(prefers-reduced-motion:reduce){:host .form__editor,:host .form__button--submit,:host .form__button--login,:host .item-action{transition:none}}

/* 20261012-mobile-secondary: preserve native comment controls at comfortable touch sizes. */
@media(max-width:600px) {
  :host .form__editor,:host .form__anonymous-inputs input,:host .form__action--captcha input { font-size:16px; }
  :host .form__button--submit,:host .form__button--login,:host .nq-comment-register,
  :host .item-action,:host .replies__next-wrapper button,
  :host .pagination__button button,:host .pagination__number button { min-height:44px; }
  :host .item-action,:host .pagination__button button,:host .pagination__number button { min-width:44px; }
  :host .emoji-button { width:44px;height:44px; }
  :host .item__content,:host .item__content pre { font-size:14px; }
  :host .item-action,:host .item-action__text { font-size:12px; }
  :host .item__actions { gap:4px 8px; }
  :host .replies__wrapper { padding-left:8px; }
}
