/* Alata and semantic colours come from the shared TUNGTEK site shell. */
.blog-comments{box-sizing:border-box;width:min(1060px,calc(100% - 48px));margin:56px auto 80px;padding:34px;border:1px solid var(--line);border-radius:20px;background:var(--card,var(--paper));font-family:var(--font,"Alata",sans-serif);color:var(--ink);scroll-margin-top:calc(var(--site-header-height,96px) + 24px)}
.blog-comments *,.comment-admin *{box-sizing:border-box}
.blog-comments .comments-kicker,.comment-admin .comments-kicker{margin:0 0 10px;color:var(--orange-ink,#9a3412);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.blog-comments h2{margin:0;font:400 clamp(1.7rem,3vw,2.25rem)/1.3 var(--font,"Alata",sans-serif);letter-spacing:-.025em;color:var(--ink)}
.comments-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px}
.comments-count{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:50%;font-size:.9rem;background:var(--light-blue,#eaf0ff);color:var(--blue);padding:0 10px}
.comments-intro,.comments-note{color:var(--muted);font-size:.9rem;line-height:1.7;margin:8px 0 24px}
.comment-form{border-top:1px solid var(--line);padding-top:24px}
.comment-identity{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.comment-avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:12px;background:var(--light-blue,#eaf0ff);color:var(--blue);font-size:1rem}
.comment-identity-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:150px;font-size:.95rem}
.comment-identity-copy small{font-size:.78rem;color:var(--muted)}
.comment-form label{display:block;font-size:.9rem;margin:0 0 7px}
.comment-form input,.comment-form textarea{display:block;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px;line-height:1.65;padding:12px 14px;resize:vertical}
.comment-form input:focus-visible,.comment-form textarea:focus-visible,.comment-button:focus-visible,.comment-link:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.comment-name-field{max-width:400px;margin-bottom:18px}.comment-form textarea{min-height:132px}
.comment-form input:disabled{opacity:.7}.comment-form [hidden],.blog-comments [hidden],.comment-admin [hidden]{display:none!important}
.comment-text-meta{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:.75rem;margin-top:7px}
.comment-text-meta [data-length]{white-space:nowrap;flex-shrink:0}
.comment-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.comment-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;gap:9px;padding:11px 20px;border:1px solid var(--line);border-radius:9px;background:var(--card,var(--paper));color:var(--ink);font:inherit;font-size:.9rem;line-height:1.4;text-decoration:none;cursor:pointer}
.comment-button:hover{border-color:var(--blue);color:var(--blue)}
.comment-button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.comment-button.primary:hover{filter:brightness(.92)}
.comment-button:disabled{opacity:.55;cursor:wait}.comment-button.small{padding:8px 13px;min-height:40px;font-size:.82rem}
.comment-link{background:transparent;border:0;padding:6px 0;color:var(--blue);font:inherit;font-size:.82rem;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.comment-status{font-size:.9rem;line-height:1.7;margin:18px 0 0;padding:14px 16px;border-left:3px solid var(--orange);background:var(--paper);border-radius:5px;color:var(--ink)}
.comment-status[data-error=true]{border-left-color:#d95345}
.comment-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.comments-social{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:20px}.comments-social>span{font-size:.82rem;color:var(--muted)}
.comments-list-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:24px;margin-top:28px}.comments-list-heading h3{margin:0;color:var(--ink);font-size:1.1rem;font-weight:400}
.comments-empty{padding:25px 0 4px;color:var(--muted);font-size:.93rem;line-height:1.8;margin:0}
.comment-item{padding:24px 0;border-bottom:1px solid var(--line)}
.comment-item-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.comment-item-name{font-weight:400;font-size:1rem;overflow-wrap:anywhere}.comment-badge{font-size:.68rem;line-height:1.6;border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--muted)}
.comment-item time{font-size:.75rem;color:var(--muted);margin-left:auto}.comment-item-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0 0;line-height:1.8;font-size:.94rem;color:var(--ink)}
.comments-pending{padding:0 16px;border:1px dashed var(--orange);border-radius:12px;margin-top:24px;background:var(--paper)}
.comments-pending .comment-item:last-child{border-bottom:0}.comments-pending h3{font-size:.85rem;font-weight:400;margin:15px 0 0;color:var(--orange-ink,#9a3412)}
.comments-more{margin-top:20px}.comments-admin-link{display:block;text-align:right;font-size:.8rem;margin-top:22px;color:var(--muted)}
.comment-admin{width:min(1060px,calc(100% - 48px));margin:42px auto 80px;font-family:var(--font,"Alata",sans-serif)}
.comment-admin h1{font-size:clamp(2rem,5vw,3.2rem);color:var(--blue);font-weight:400;line-height:1.2;margin:0 0 20px}.comment-admin h2{font-size:1.3rem;font-weight:400}
.comment-admin-panel{background:var(--card,var(--paper));border:1px solid var(--line);border-radius:16px;padding:26px;margin:24px 0}
.comment-admin-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0}.comment-admin-tabs button[aria-pressed=true]{border-color:var(--blue);background:var(--light-blue);color:var(--blue)}
.comment-admin-config{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.comment-admin .comment-item{padding:24px;background:var(--card,var(--paper));border:1px solid var(--line);border-radius:14px;margin-top:14px}
.comment-admin .comment-article{display:block;color:var(--blue);font-size:.83rem;margin-bottom:15px}.comment-admin .comment-actions{margin-top:16px}.comment-admin .comments-note{margin-bottom:0}
.comment-admin details{color:var(--muted);font-size:.85rem;line-height:1.8}.comment-admin summary{cursor:pointer;color:var(--ink)}.comment-admin code{overflow-wrap:anywhere;font-size:.8rem}
html[data-site-theme=dark] .blog-comments .comments-kicker,html[data-site-theme=dark] .comment-admin .comments-kicker,html[data-site-theme=dark] .comments-pending h3{color:#ffb477}
@media(max-width:640px){.blog-comments{width:calc(100% - 40px);padding:24px 20px;margin:36px auto 50px;border-radius:16px}.comment-admin{width:calc(100% - 40px);margin-top:32px}.comment-admin-panel,.comment-admin .comment-item{padding:20px}.comment-actions .primary{width:100%}.comments-heading{gap:12px}.comment-item time{width:100%;margin:0}.comment-text-meta{gap:12px}.comments-social{align-items:flex-start}.comment-identity-copy{min-width:120px}}
@media(prefers-reduced-motion:reduce){.blog-comments *{scroll-behavior:auto!important}}
@media print{.blog-comments,.comment-admin{display:none!important}}