.comments{--menu-button-size:var(--font-size-root);font-size:var(--font-size-small);container-type:inline-size;& h3{margin:0}}.comments__title{margin:0}.comment__part{font-size:var(--font-size-smaller);color:var(--color-text-secondary);transition:var(--transition-mode) color;white-space:nowrap;font-family:var(--font-family-mono), monospace;&:before{content:"•";padding-right:calc(.25 * var(--rhythmic-unit))}}.comments__empty{margin:var(--rhythmic-unit) 0 0 0;color:var(--color-text-secondary);transition:var(--transition-mode) color}.comments__list{row-gap:calc(2 * var(--rhythmic-unit));margin:calc(2 * var(--rhythmic-unit)) 0 0;flex-direction:column;display:flex}.comment{row-gap:calc(.25 * var(--rhythmic-unit));flex-direction:column;display:flex;position:relative;&:hover,&:focus-within{& .comment__menu{opacity:1}}}.comment__meta{align-items:center;gap:calc(.5 * var(--rhythmic-unit));flex-wrap:wrap;display:flex}.comment__author{white-space:nowrap;font-weight:650}.comment__author--anonymous{color:var(--color-text-secondary);transition:var(--transition-mode) color;font-style:italic}.comment__date{font-size:var(--font-size-smaller);color:var(--color-text-secondary);transition:var(--transition-mode) color;white-space:nowrap;&:before{content:"•";padding-right:calc(.25 * var(--rhythmic-unit))}}.comment__menu{gap:calc(.25 * var(--rhythmic-unit));opacity:0;height:var(--font-size-root);color:var(--color-text-secondary);transition:var(--transition) opacity;display:flex;&:before{content:"•";color:var(--color-text-secondary);font-size:.9em;line-height:var(--font-size-root);padding-inline-end:calc(.25 * var(--rhythmic-unit))}}.comment__menu-button{appearance:none;width:var(--menu-button-size);height:var(--menu-button-size);cursor:pointer;-webkit-user-drag:none;transition:var(--transition-mode) color;background:0 0;border:none;padding:0;display:block;position:relative;&,&:visited{color:var(--color-text-secondary)}&:hover,&:focus-visible,&:active{color:var(--color-link--no-animation)}&:before{content:"";mask:var(--button-icon,none) no-repeat center;background:currentColor;position:absolute;inset:0;mask-size:contain}}.comment__menu-button--reply{--button-icon:url(/static/images/icons/reply.svg)}.comments__form .comment{border-inline-start:4px solid var(--color-border);transition:var(--transition-mode) border-color;padding-inline-start:calc(1.25 * var(--rhythmic-unit));padding-inline-end:calc(2.5 * var(--rhythmic-unit));& .comment__text{background:0 0;border:none;padding:0}& .comment__menu,& .comment__status-badge{display:none}}.comment__reply-clear{appearance:none;cursor:pointer;width:24px;height:24px;right:calc(.25 * var(--rhythmic-unit));background:0 0;border:none;padding:0;position:absolute;top:0;&:before{content:"";pointer-events:none;user-select:none;transition:var(--transition-mode) background-color;background:var(--color-text--no-animation);position:absolute;inset:0;mask:url(/static/images/icons/cross.svg) 50%/contain no-repeat}&:hover,&:focus,&:active{&:before{background:var(--color-error)}}}:dir(rtl){& .comment__reply-clear{right:auto;left:calc(.25 * var(--rhythmic-unit))}}.comment__text{padding:var(--rhythmic-unit);background:var(--color-surface);border-radius:0 var(--border-radius) var(--border-radius) var(--border-radius);margin:2px 0 0;&>p:first-child{margin-top:0}}.comment--level-1,.comment--level-2,.comment--level-3,.comment--level-4,.comment--level-5,.comment--level-6{margin-inline-start:calc(2 * var(--rhythmic-unit))}.comments__form{margin:calc(3 * var(--rhythmic-unit)) 0 0;align-items:stretch;row-gap:var(--rhythmic-unit);flex-direction:column;width:100%;max-width:600px;display:flex;& .btn{width:100%}& label{flex-direction:column;display:flex}}.comments__honeypot{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;left:-9999px;overflow:hidden}.comment__field{--field-bg:var(--color-bg);width:100%;padding:calc(.75 * var(--rhythmic-unit));border:var(--border);border-radius:var(--border-radius);transition:var(--transition) border-color, var(--transition) opacity;background:var(--field-bg);color:inherit;outline:none;margin:0;&:autofill{box-shadow:0 0 0 1000px var(--field-bg) inset}&:not([disabled]){&:hover,&:focus{border-color:var(--color-accent)}}&::placeholder{color:color-mix(in sRGB, var(--color-text-secondary), var(--color-bg) 50%)}&:focus{--field-bg:color-mix(in sRGB, var(--color-surface), var(--color-bg) 20%)}&[disabled]{--field-bg:var(--color-surface);opacity:.6;cursor:not-allowed}&:user-invalid,&.comment__field--invalid{&,&:hover,&:focus{border-color:var(--color-error)}}}.comment__field-error{font-size:var(--font-size-smaller);line-height:var(--rhythmic-unit);color:var(--color-error);min-height:var(--rhythmic-unit);transition:var(--transition) opacity;display:block;&:empty{opacity:0}}.comments__alert{display:none}.comment__field--textarea{min-width:100%;max-width:100%;min-height:130px}[data-theme=dark] .comment__field{--field-bg:color-mix(in sRGB, var(--color-contrast), var(--color-bg) 97%);&:focus{--field-bg:var(--color-surface)}&[disabled]{opacity:.3}}@container (width>=370px){.comment--level-2,.comment--level-3,.comment--level-4,.comment--level-5,.comment--level-6{margin-inline-start:calc(4 * var(--rhythmic-unit))}}@container (width>=420px){.comment--level-3{margin-inline-start:calc(6 * var(--rhythmic-unit))}.comment--level-4{margin-inline-start:calc(8 * var(--rhythmic-unit))}.comment--level-5{margin-inline-start:calc(10 * var(--rhythmic-unit))}.comment--level-6{margin-inline-start:calc(12 * var(--rhythmic-unit))}}@media (width>=450px){.comments__form .btn{width:auto}}