/* Comment block shared by TechBlog guides and site articles (2026-10-10).
   Extracted from techblog.css so article pages can load it without the TechBlog styles. */
.techblog-comments {
    margin-top: 62px;
    padding-top: 26px;
    border-top: 2px solid #112630;
}

.techblog-comments-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.techblog-comments-head p {
    margin: 0 0 4px;
    color: #06637b;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.techblog-comments .techblog-comments-head h2 {
    margin: 0;
    color: #112630;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1.8rem;
    line-height: 1;
    text-transform: none;
}

.techblog-comments-head > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #f2f0e9;
    background: #06637b;
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.techblog-comment-notice {
    margin: 0 0 16px;
    padding: 12px 14px;
    color: #28454f;
    background: #e1ebe5;
    border-left: 3px solid #317b58;
    font-size: .84rem;
}

.techblog-comment-notice.is-error { color: #632e2e; background: #f0e1dc; border-color: #a9483d; }

.techblog-comments-empty {
    margin: 0 0 20px;
    padding: 16px 18px;
    color: #526971;
    background: #e9e6de;
    font-size: .86rem;
    line-height: 1.55;
}

.techblog-comment-list { margin-bottom: 24px; }

.techblog-comment {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 13px;
    padding: 17px 0;
    border-bottom: 1px solid #c7c4ba;
}

.techblog-comment:first-child { border-top: 1px solid #c7c4ba; }

.techblog-comment-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #f2f0e9;
    background: #38515c;
    font-size: .8rem;
    font-weight: 700;
}

.techblog-comment header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.techblog-comment header strong { color: #112630; font-size: .84rem; }
.techblog-comment header span { padding: 2px 5px; color: #06637b; background: #dce9e8; font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.techblog-comment time { margin-left: auto; color: #71848b; font-size: .65rem; }
.techblog-comment > div > p { margin: 7px 0 0; color: #38515c; font-size: .9rem; line-height: 1.62; }

.techblog-comment-compose {
    padding: 20px;
    background: #e9e6de;
    border-top: 2px solid #06637b;
}

.techblog-comment-login strong { display: block; margin-bottom: 5px; color: #112630; }
.techblog-comment-login p { margin: 0 0 10px; color: #526971; font-size: .84rem; line-height: 1.5; }
.techblog-comment-login a { color: #06637b; font-size: .78rem; font-weight: 700; }

.techblog-comment-form-head,
.techblog-comment-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.techblog-comment-form-head { margin-bottom: 8px; }
.techblog-comment-form-head label { color: #112630; font-size: .82rem; font-weight: 700; }
.techblog-comment-form-head span { color: #55666d; font-size: .68rem; }
.techblog-comment-form-head strong { color: #38515c; }

.techblog-comment-compose textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    padding: 13px 14px;
    resize: vertical;
    color: #112630;
    background: #f8f6f0;
    border: 1px solid #bdbab1;
    border-radius: 0;
    outline: 0;
    font: inherit;
    font-size: .88rem;
    line-height: 1.55;
}

.techblog-comment-compose textarea:focus { border-color: #06637b; box-shadow: 0 0 0 2px rgba(6, 99, 123, .12); }
.techblog-comment-form-foot { align-items: end; margin-top: 10px; }
.techblog-comment-form-foot p { max-width: 410px; margin: 0; color: #55666d; font-size: .66rem; line-height: 1.45; }

.techblog-comment-form-foot button {
    min-height: 38px;
    padding: 9px 14px;
    color: #f2f0e9;
    background: #06637b;
    border: 0;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 700;
}

.techblog-comment-form-foot button:hover { background: #112630; }
.techblog-comment-form-foot button:active { transform: translateY(1px); }

.techblog-comment-trap {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.techblog-comment-name {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    padding: 11px 14px;
    color: #112630;
    background: #f8f6f0;
    border: 1px solid #bdbab1;
    border-radius: 0;
    outline: 0;
    font: inherit;
    font-size: .88rem;
}
.techblog-comment-name:focus { border-color: #06637b; box-shadow: 0 0 0 2px rgba(6, 99, 123, .12); }
.techblog-comment-body-title { display: block; margin-bottom: 8px; color: #112630; font-size: .82rem; font-weight: 700; }
.techblog-comment-form-head a { color: #06637b; font-weight: 700; }
.techblog-comment-login a:focus-visible,
.techblog-comment-compose button:focus-visible,
.techblog-comment-form-head a:focus-visible {
    outline: 2px solid #06637b;
    outline-offset: 4px;
}
/* On news articles the heading follows the reader typography, not the TechBlog condensed face. */
.news-story .techblog-comments .techblog-comments-head h2 { font-family: inherit; font-size: 1.6rem; letter-spacing: -.01em; }
@media (max-width: 760px) {
    .techblog-comments { margin-top: 48px; }
    .techblog-comment-compose { padding: 16px; }
    .techblog-comment-form-head,
    .techblog-comment-form-foot { align-items: stretch; flex-direction: column; }
    .techblog-comment-form-head { gap: 4px; }
    .techblog-comment-form-foot { gap: 10px; }
    .techblog-comment-form-foot button { width: 100%; }
    .techblog-comment time { width: 100%; margin-left: 0; }
}
/* redesign.css turns this button white on the beige panel: keep a clear primary action. */
html body:not(.page-home) .techblog-comments .techblog-comment-form-foot button { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #0e2233 !important; }
html body:not(.page-home) .techblog-comments .techblog-comment-form-foot button:hover { background: #06637b !important; }