.entry-box .comments {
    container: comments / inline-size;
    &>header h2 {text-align:center;color:var(--h1-color);margin-bottom:1.5em;}
}
.entry-box div.form-nForm {
    max-width:640px;margin:2em auto;box-sizing: border-box;
    padding-right:27px;
    .nf-field-desc {display:none;}
    .nf-element:has(>button.nf-field-desc-button) {position:relative;z-index:10;}
    button.nf-field-desc-button {position:absolute;right:-24px;top:14px;border:none;background-color:transparent;cursor:pointer;outline:none;width:20px;aspect-ratio:1;svg {width:100%;height:100%;fill:#000040;object-fit:cover;vertical-align:top;}}
    footer {text-align:center;}
}
.container-popup-desc {
    opacity:1;
    transition:opacity .3s;
    &:not(.show) {opacity:0;}
    .nf-field-desc {font-size:.9em;}
}
@starting-style {
    .container-popup-desc {
        opacity: 0;
    }
}

.blank-comments {text-align:center;font-size:2em;line-height:1.5em;color:#97afeb;user-select:none;}
.comments-area {margin-bottom:2em;}

.list-comments {list-style:none;--left-indent:40px;}
.list-comments li {display:flex;&>* {flex:0 0 40px;&:is(.comment) {flex:1 0 0;}}}
.list-comments li>.comment {background-color:#fff;border-radius:10px;padding:1em;color:#00164d;margin-bottom:.5em;}

.list-comments div.indent {
    position:relative;z-index:0;
    --div-left:calc(var(--left-indent) / 2);
    &::before {content:'';position:absolute;top:0;left:var(--div-left);width:2px;height:30px;background-color:#abbcff;}
    &::after {content:'';top:30px;left:var(--div-left);position:absolute;width:calc(20px - 4px);height:10px;border-color:#abbcff;border-width:0 0 2px 2px;border-style:solid;z-index:0;border-bottom-left-radius:10px;}
}
.list-comments div.indent:has(+div.indent) {
    &:not(.line)::before {content:none;}
    &.line::before {height:100%;}
    &::after {content:none;}
}

.list-comments .description {
    line-height:1.4em;
}
.list-comments header {
    border-bottom:1px solid #e5f0ff;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:1px 10px;
    align-items:center;
    padding-bottom:10px;
    margin-bottom:1em;
    span.company, b {color:var(--g1-color);font-family:var(--gfont2-family), serif;font-size:18px;}
    b {font-weight:500;}
    span.company {font-weight:300;}
    span.company:not(:empty) {position:relative;padding-left:10px;&::before {content:'';position:absolute;inset:0 auto 0 0;margin-block:auto;background-color:currentColor;width:2px;max-height:15px;}}
    time {font-size:13px;}
}
.list-comments li>.inactive {
    color:#999;
    span.company, b {color:currentColor;}
    .wait {font-style:italic;font-size:.9em;background-color:#ecd9d9;color:#990f0f;padding:4px;border-radius:3px;margin-top:1em;}
}
.list-comments li:not(.levelLast)>div.indent::before {
    height:100%;
}

@container comments (width < 600px) {
    .list-comments {--left-indent:0;}
    .list-comments div.indent {flex-basis:20px;}
}
@container comments (width < 512px) {
    .list-comments li>.comment {padding:10px;border-radius:4px;font-size:15px;}
    .list-comments header {
        grid-template-columns:auto 1fr;margin-bottom:.5em;padding-bottom:2px;
        time {grid-column-start: span 2;}
        span.company, b {font-size:1em;}
    }
    .list-comments div.indent {
        flex-basis:10px;
        &::after {width:6px;border-bottom-left-radius:4px;}
    }
}