/* Frontend v2: self-service (article, comments), search, maintenance and error views. Prefix: sk-article-*, sk-comment-*, sk-attachment-*, sk-state-* */

/* ---- Article page ---- */
.sk-article-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sk-article-head .sk-btn { margin-left: auto; }
.sk-article-page .sk-divider { margin: 16px 0; }
.sk-body .sk-article-meta { gap: 8px 20px; }
.sk-body .sk-article-meta > li { align-items: center; gap: 8px; }
.sk-article-meta .fas { color: var(--sk-muted); }
.sk-item-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sk-body .sk-article-page .sk-item-list a { display: inline-block; padding: 1px 10px; background: var(--sk-subtle); border: 1px solid var(--sk-border); border-radius: 999px; color: var(--sk-muted); font-size: 12.5px; line-height: 1.6; }
.sk-body .sk-article-page .sk-item-list a:hover { border-color: var(--sk-accent); color: var(--sk-accent); }
.sk-body .sk-article-body { max-width: 75ch; font-size: 16px; line-height: 1.7; }
.sk-article-body img { max-width: 100%; height: auto; }
.sk-article-section-title { margin: 28px 0 12px; font-size: 16px; font-weight: 600; }

/* ---- Attachments ---- */
.sk-attachments { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 4px; padding: 0; list-style: none; }
.sk-body .sk-attachments > li { display: block; width: 168px; max-width: 100%; margin: 0; }
.sk-body .sk-attachments > li a.sk-attachment { display: block; padding: 0; overflow: hidden; background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); color: var(--sk-text); text-decoration: none; cursor: pointer; }
.sk-body .sk-attachments > li a.sk-attachment:hover { border-color: var(--sk-accent); background: var(--sk-surface); }
.sk-attachment__preview { position: relative; height: 84px; text-align: center; }
.sk-attachment__thumb { display: flex; align-items: center; justify-content: center; height: 100%; background: var(--sk-subtle); border-bottom: 1px solid var(--sk-border); color: var(--sk-muted); transition: opacity .15s; }
.sk-attachment__thumb img { max-width: 100%; max-height: 100%; object-fit: cover; }
.sk-attachment__fileicon { font-size: 40px; }
.sk-attachment__hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--sk-accent); opacity: 0; transition: opacity .15s; }
.sk-attachment:hover .sk-attachment__thumb { opacity: .3; }
.sk-attachment:hover .sk-attachment__hover { opacity: 1; }
.sk-attachment__name, .sk-attachment__size { padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-attachment__name { padding-top: 8px; font-size: 14px; font-weight: 500; }
.sk-attachment__size { padding-bottom: 8px; }

/* ---- Share + rating footer bar ---- */
.sk-article-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 10px 14px; background: var(--sk-subtle); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); font-size: 14px; color: var(--sk-muted); }
.sk-article-share, .sk-rate { display: flex; align-items: center; gap: 8px; }
.sk-body .sk-article-share__btn { border: 1px solid var(--sk-border-strong); background: var(--sk-surface); }
.sk-rate__group { display: inline-flex; }
.sk-body .sk-rate__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; background: var(--sk-surface); border: 1px solid var(--sk-border-strong); color: var(--sk-text); cursor: pointer; }
.sk-rate__btn + .sk-rate__btn { margin-left: -1px; }
.sk-rate__btn:first-child { border-radius: var(--sk-radius) 0 0 var(--sk-radius); }
.sk-rate__btn:last-child { border-radius: 0 var(--sk-radius) var(--sk-radius) 0; }
.sk-body .sk-rate__btn:hover { background: var(--sk-subtle); }
.sk-rate__icon--good { color: var(--sk-ok-fg); }
.sk-rate__icon--neutral { color: var(--sk-warn-fg); }
.sk-rate__icon--bad { color: var(--sk-err-fg); }

/* ---- Related ---- */
.sk-related-list { max-width: 75ch; }
.sk-body .sk-related-list .sk-list__link { display: block; padding: 10px 0; }

/* ---- Comments ---- */
.sk-comment-toggle { display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.sk-comment-toggle__icon { margin-left: auto; color: var(--sk-muted); }
.sk-comment-form-wrap { margin-top: 16px; }
.sk-comment-replying { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sk-comment-replying.sp-hidden { display: none; }
.sk-comment-replying[style*="display: block"] { display: flex !important; }
.sk-comment-form__captcha-label { margin-bottom: 12px; font-weight: 600; }
.sk-comment-ordering { display: flex; align-items: center; gap: 4px; margin: 20px 0 12px; }
.sk-comment-ordering__loading { margin-left: 8px; }
.sk-comment-ordering__loading.sp-hidden { display: none; }
.sk-comments { display: flex; flex-direction: column; gap: 12px; }
.sk-body .sk-comment { padding: 14px 16px; }
.sk-comment .sk-comments { margin-top: 12px; }
.sk-comment .sk-comment { background: var(--sk-subtle); }
.sk-comment__row { display: flex; align-items: flex-start; gap: 12px; }
.sk-comment__avatar-col { flex: none; }
.sk-comment__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.sk-comment__avatar--lg { width: 40px; height: 40px; }
.sk-comment__body { flex: 1; min-width: 0; }
.sk-comment__header { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.sk-comment__name { font-weight: 600; }
.sk-body .sk-comment__badge { padding: 1px 8px; font-size: 12px; }
.sk-comment__text { margin: 6px 0 8px; line-height: 1.6; overflow-wrap: anywhere; }
.sk-comment__text.sp-hidden { display: none; }
.sk-comment__hidden { display: inline-block; margin: 6px 0 8px; font-style: italic; cursor: pointer; }
.sk-comment__options { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--sk-muted); }
.sk-comment__rate { display: inline-flex; align-items: center; gap: 8px; }
.sk-comment__rate-btn { color: var(--sk-muted); cursor: pointer; }
.sk-comment__rate-btn:hover, .sk-comment__rate-btn .fas.sp-text-secondary { color: var(--sk-accent); }
.sk-comment__reply { color: var(--sk-muted); cursor: pointer; }
.sk-comment__reply:hover { color: var(--sk-accent); }
.sk-comment__more { margin-top: 12px; }
.sk-more-comments { margin-top: 16px; }

/* ---- Search ---- */
.sk-search-summary { margin: 0 0 16px; color: var(--sk-muted); }
.sk-search-summary strong { color: var(--sk-text); }

/* ---- Error + maintenance states ---- */
.sk-state { max-width: 520px; margin: 24px auto; padding: 32px 24px; text-align: center; }
.sk-state__icon { margin-bottom: 12px; font-size: 40px; color: var(--sk-muted); }
.sk-state__title { margin: 0 0 16px; font-size: 20px; }
.sk-state__text { margin: 0; font-size: 16px; line-height: 1.6; }
.sk-state__return { margin-top: 16px; color: var(--sk-muted); }
.sk-body .sk-state__return a { color: var(--sk-accent); font-weight: 500; }
.sk-state__alert { text-align: left; }
.sk-state__alert.sp-alert-with-icon { display: flex; gap: 12px; }

@media (max-width: 479px) {
    .sk-body .sk-attachments > li { width: calc(50% - 6px); }
    .sk-article-actions { padding: 10px 12px; }
}