/* /core/assets/comments.css — the comments section (core/components/comments.php), 1.15.0 Phase 13;
 * replies, the guest fields, the notice and the trap, 1.17.0 Phase 12.
 *
 * Pushed by Template::commentsBlock(), so it loads with a theme's own components/comments.php too.
 * Every rule is wrapped in :where() (zero specificity), so any rule a theme writes outranks it, and
 * every colour, radius and font reads the theme contract's --cms-* tokens (site/themes/README.md
 * section 6) with a neutral fallback. Scoped under .cms-comments. */

:where(.cms-comments){margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--cms-line, rgba(128,128,128,.3));color:var(--cms-text, inherit);font-family:var(--cms-font, inherit)}
:where(.cms-comments__heading){margin:0 0 1rem;font-size:1.25rem;color:var(--cms-ink, inherit)}
:where(.cms-comments__count){font-weight:400;color:var(--cms-muted, inherit)}
:where(.cms-comments__list){list-style:none;margin:0;padding:0}
:where(.cms-comments__item){padding:1rem 0;border-bottom:1px solid var(--cms-line, rgba(128,128,128,.3));scroll-margin-top:1rem}
:where(.cms-comments__item:target){padding-inline:.75rem;border-radius:var(--cms-radius-sm, .4rem);background:var(--cms-sunk, rgba(128,128,128,.06))}
:where(.cms-comments__meta){display:flex;flex-wrap:wrap;gap:.25rem .75rem;align-items:baseline;margin:0 0 .4rem;font-size:.9rem}
:where(.cms-comments__author){font-weight:600;color:var(--cms-ink, inherit)}
:where(.cms-comments__date){color:var(--cms-muted, inherit);text-decoration:none}
:where(.cms-comments__date:hover){text-decoration:underline}
:where(.cms-comments__body){line-height:1.6;overflow-wrap:anywhere}
:where(.cms-comments__body > :first-child){margin-top:0}
:where(.cms-comments__body > :last-child){margin-bottom:0}
:where(.cms-comments__empty, .cms-comments__note){margin:1rem 0 0;color:var(--cms-muted, inherit)}
:where(.cms-comments__more){margin:1rem 0 0;font-weight:600}
:where(.cms-comments a){color:var(--cms-accent, inherit)}
:where(.cms-comments a:focus-visible, .cms-comments__input:focus-visible, .cms-comments__submit:focus-visible){outline:2px solid var(--cms-accent, #2563eb);outline-offset:2px}
:where(.cms-comments__form){display:grid;gap:.5rem;margin:1.25rem 0 0}
:where(.cms-comments__label){font-weight:600;color:var(--cms-ink, inherit)}
:where(.cms-comments__input){box-sizing:border-box;width:100%;min-height:7rem;padding:.6rem .75rem;border:1px solid var(--cms-line, rgba(128,128,128,.45));border-radius:var(--cms-radius-sm, .4rem);background:var(--cms-surface, transparent);color:inherit;font:inherit;resize:vertical}
:where(.cms-comments__item[data-depth="1"]){margin-inline-start:clamp(1rem, 5vw, 2.5rem);padding-inline-start:.75rem;border-inline-start:2px solid var(--cms-line, rgba(128,128,128,.3))}
:where(.cms-comments__reply-to){color:var(--cms-muted, inherit)}
:where(.cms-comments__actions){margin:.4rem 0 0;font-size:.9rem}
:where(.cms-comments__notice){margin:0 0 1rem;padding:.6rem .75rem;border-radius:var(--cms-radius-sm, .4rem);background:var(--cms-sunk, rgba(128,128,128,.06))}
:where(.cms-comments__replying){margin:0;color:var(--cms-muted, inherit)}
:where(.cms-comments__field){box-sizing:border-box;width:100%;max-width:28rem;padding:.5rem .75rem;border:1px solid var(--cms-line, rgba(128,128,128,.45));border-radius:var(--cms-radius-sm, .4rem);background:var(--cms-surface, transparent);color:inherit;font:inherit}
:where(.cms-comments__field:focus-visible){outline:2px solid var(--cms-accent, #2563eb);outline-offset:2px}
:where(.cms-comments__check){display:flex;gap:.5rem;align-items:center;margin:0}
/* The trap stays out of sight with full specificity, unlike every rule above: a theme rule that
 * outranked it would show a person a field that marks their comment as spam when filled. */
.cms-comments__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
:where(.cms-comments__submit){justify-self:start;padding:.55rem 1rem;border:0;border-radius:var(--cms-radius-sm, .4rem);background:var(--cms-accent, #2563eb);color:var(--cms-accent-contrast, #fff);font:inherit;font-weight:600;cursor:pointer}

/* iOS zooms the page into a field whose text is under 16 px and does not zoom back (owner, 2026-10-16):
   on a touch screen every field is at least 16 px, and a mouse keeps this sheet's sizes. Never
   maximum-scale or user-scalable=no in the viewport tag, which would stop pinch-zoom. */
@media (pointer:coarse){
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea, [contenteditable]:not([contenteditable="false"]){font-size:max(16px, 1em) !important}
}