/* Shared editorial interactions for articles and galleries. */
.engagement { margin-top:40px; padding-top:28px; border-top:1px solid var(--line); color:var(--ink); font-size:1rem; overflow-wrap:anywhere }
.engagement [hidden], .engagement[hidden] { display:none }
.engagement h2 { margin:0; font-size:1.2rem; font-weight:700; line-height:1.3; letter-spacing:-.025em }
.engagement button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font:inherit; font-size:.875rem; font-weight:600; cursor:pointer; touch-action:manipulation }
.engagement button:hover { background:var(--surface) }
.engagement button:disabled { opacity:.5; cursor:wait }
.engagement :is(button,input,textarea,summary):focus-visible { outline:2px solid var(--ink); outline-offset:4px }
.engagement button[aria-pressed=true] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--paper)); color:var(--ink) }
.engagement svg { display:block; flex-shrink:0 }
.engagement-hint { margin:5px 0 0; color:var(--muted); font-size:.8125rem; line-height:1.5 }
.engagement-rating { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px 24px; border:1px solid var(--line); border-radius:12px; background:var(--surface) }
.engagement-rating h2 { font-size:1.0625rem }
.engagement-votes { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.engagement-votes button { min-width:68px; border-radius:999px; font-variant-numeric:tabular-nums }
.engagement-reactions { padding:28px 0; border-bottom:1px solid var(--line) }
.engagement-emojis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:16px }
.engagement-emojis button { display:flex; flex-direction:column; gap:7px; min-width:0; padding:14px 4px 12px; border-color:transparent; border-radius:12px; background:transparent }
.engagement-emoji { font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size:30px; line-height:1.25 }
.engagement-emoji-label { font-size:.6875rem; font-weight:600; line-height:1.4 }
.engagement-emoji-count { min-width:24px; font-size:.8125rem; line-height:1.5; font-weight:650; font-variant-numeric:tabular-nums }
.engagement-comments { padding-top:32px; scroll-margin-top:24px }
.engagement-comments > h2 { display:flex; align-items:center; gap:12px; margin-bottom:20px; font-size:1.625rem }
.engagement-comment-count { display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:30px; padding:2px 9px; border-radius:999px; color:var(--muted); background:var(--surface); font-size:.875rem; font-weight:600; letter-spacing:0; font-variant-numeric:tabular-nums }
.engagement-composer { margin:0 0 24px; border:1px solid var(--line); border-radius:10px; background:var(--paper); overflow:hidden }
.engagement-composer:focus-within { border-color:var(--ink) }
.engagement .engagement-form { display:block; margin:0; padding:0; border:0; background:transparent }
.engagement-form label { display:block; margin:0 0 6px; font-size:.75rem; font-weight:600 }
.engagement-message > label { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.engagement-form :is(input,textarea) { display:block; box-sizing:border-box; width:100%; min-width:0; min-height:44px; margin:0; border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:var(--paper); color:var(--ink); font:inherit; font-size:1rem; line-height:1.5 }
.engagement-form .engagement-message textarea { min-height:56px; padding:16px; border:0; border-radius:0; resize:none }
.engagement-form .engagement-message textarea:focus-visible { outline:none }
.engagement-form.is-expanded .engagement-message textarea { min-height:96px; resize:vertical }
.engagement-form textarea::placeholder { color:var(--muted) }
.engagement-form-details { padding:14px 16px 16px; border-top:1px solid var(--line); background:var(--surface) }
.engagement-form-note { margin:10px 0 0; color:var(--muted); font-size:.6875rem; line-height:1.5 }
.engagement-form-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.engagement-form-fields input::placeholder { font-size:.75rem; color:var(--muted) }
.engagement-form-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px }
.engagement-challenge:not(:empty) { margin-top:12px }
.engagement-feedback { margin:32px 0; padding-top:0; border-top:0 }
.engagement-feedback .engagement-status { margin:0 0 12px }
.engagement-comments { padding-top:0 }
.engagement-form > .engagement-form-status:not(:empty) { margin:0; padding:12px 16px }
.engagement .engagement-submit { padding:12px 22px; color:var(--paper); border-color:var(--ink); background:var(--ink) }
.engagement .engagement-submit:hover { opacity:.88; background:var(--ink) }
.engagement .engagement-cancel { border-color:transparent; background:transparent; color:var(--muted) }
.engagement .engagement-sort { display:flex; gap:28px; border-bottom:1px solid var(--line) }
.engagement-sort button { min-height:48px; padding:12px 0; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--muted); font-size:.8125rem }
.engagement-sort button[aria-pressed=true] { border-bottom-color:var(--accent); background:transparent; color:var(--ink) }
.engagement-sort button:hover { background:transparent; color:var(--ink) }
.engagement-comment { padding:24px 0; border-bottom:1px solid var(--line); min-width:0 }
.engagement-comment-meta { display:flex; align-items:center; gap:10px; min-width:0 }
.engagement-avatar { display:inline-flex; justify-content:center; align-items:center; flex:0 0 36px; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:var(--surface); font-size:.875rem; font-weight:650 }
.engagement-comment-identity { min-width:0 }
.engagement-comment-identity strong { display:block; font-size:.8125rem; font-weight:650; line-height:1.5 }
.engagement-comment-meta time { display:block; color:var(--muted); font-size:.6875rem; line-height:1.5 }
.engagement-comment-body { margin:14px 0 8px 46px; font-size:.9375rem; line-height:1.65; white-space:pre-wrap }
.engagement-comment-hidden .engagement-comment-body { color:var(--muted); font-style:italic }
.engagement-comment-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; margin-left:46px }
.engagement-comment-actions .engagement-votes { margin-left:auto; gap:4px }
.engagement-comment-actions .engagement-votes button { min-width:48px; padding:8px; border-color:transparent; font-size:.75rem }
.engagement-comment-actions .engagement-votes svg { width:17px; height:17px }
.engagement .engagement-reply { padding:8px 0; border-color:transparent; background:transparent; color:var(--muted); font-size:.75rem }
.engagement .engagement-reply:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px }
.engagement .engagement-show-replies { margin:4px 0 0 46px; padding:8px 0; border:0; background:transparent; font-size:.75rem }
.engagement-replies { margin-left:46px; padding-left:16px; border-left:1px solid var(--line) }
.engagement-replies:empty, .engagement-reply-form:empty { display:none }
.engagement-replies .engagement-comment:last-child { padding-bottom:0; border-bottom:0 }
.engagement-reply-form { margin:16px 0 0 46px; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--surface) }
.engagement-reply-form .engagement-form { padding:0 }
.engagement-reply-context { margin:0 0 16px; font-size:.75rem; font-weight:600 }
.engagement-empty { margin:0; padding:28px 8px; text-align:center; color:var(--muted); font-size:.875rem; line-height:1.65 }
.engagement-comment-list > button { display:flex; margin:24px auto 0 }
.engagement-status, .engagement-form-status { margin:0 0 16px; color:var(--muted); font-size:.8125rem; line-height:1.6 }
.engagement-form-status { margin:16px 0 0 }
.engagement :is(.engagement-status,.engagement-form-status)[role=alert] { padding:12px 14px; border-left:2px solid #b12c2c; background:#fff4f3; color:#8d2525 }
.engagement-status:empty, .engagement-form-status:empty { display:none }
@media(max-width:540px) {
  .engagement { margin-top:28px; padding-top:24px }
  .engagement-rating { padding:18px }
  .engagement-emojis { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
  .engagement-emojis button { padding:12px 4px }
  .engagement-comments > h2 { font-size:1.5rem }
  .engagement .engagement-form { padding:0 }
  .engagement-form-fields { grid-template-columns:minmax(0,1fr); gap:10px }
  .engagement-comment-body, .engagement-comment-actions { margin-left:0 }
  .engagement .engagement-show-replies { margin-left:0 }
  .engagement-replies { margin-left:0; padding-left:12px }
  .engagement-reply-form { margin-left:0; padding:14px }
  .engagement-reply-form .engagement-form { padding:0 }
}