/* Community interaction surfaces — Design System V4 consumer.
   Theme identity is owned by tokens.css; this file contains no theme palette. */

.community-engagement{
  --community-panel-bg:var(--ds-surface-panel);
  --community-soft-bg:var(--ds-surface-subtle);
  --community-control-bg:var(--ds-surface-interactive);
  --community-control-hover:var(--ds-surface-interactive-hover);
  --community-control-border:var(--ds-border-default);
  --community-input-bg:var(--ds-field-bg);
  --community-input-border:var(--ds-field-border);
  --community-star-idle:var(--ds-text-muted);
  --community-action-shadow:var(--ds-shadow-control);
  position:relative;
  overflow:hidden;
  margin-top:48px;
  padding:clamp(22px,2.4vw,34px);
  border:1px solid var(--community-control-border);
  border-radius:var(--ds-radius-panel);
  background:var(--community-panel-bg);
  color:var(--ds-text-strong);
  box-shadow:var(--ds-shadow-panel);
}
.community-engagement::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:clamp(22px,3vw,44px);
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 52%,transparent),transparent);
  pointer-events:none;
}
.community-engagement__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--ds-divider);
}
.community-engagement__head-copy{min-width:0}
.community-engagement__head-copy>span{
  display:block;
  margin-bottom:5px;
  color:var(--ds-text-link);
  font-size:var(--fs-label);
  font-weight:var(--fw-extrabold);
}
.community-engagement__head-copy h2{
  margin:0;
  color:var(--ds-text-strong);
  font-size:clamp(1.35rem,2vw,1.8rem);
  line-height:1.5;
}
.community-engagement__head-copy p{
  max-width:720px;
  margin:7px 0 0;
  color:var(--ds-text-default);
  font-size:var(--fs-body-sm);
  line-height:1.8;
}
.community-engagement__head-tools{
  display:grid;
  justify-items:end;
  gap:10px;
}
.community-engagement__auth-actions{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.community-engagement__auth-actions[hidden]{display:none!important}
.community-engagement__auth{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:var(--ds-control-height-md);
  padding:9px 15px;
  border:1px solid transparent;
  border-radius:var(--ds-radius-control);
  text-decoration:none;
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-extrabold);
  transition:
    transform var(--ds-transition-fast),
    background-color var(--ds-transition-fast),
    border-color var(--ds-transition-fast),
    box-shadow var(--ds-transition-fast);
}
.community-engagement__auth:hover{transform:translateY(-1px)}
.community-engagement__auth:focus-visible{
  outline:2px solid var(--ds-border-active);
  outline-offset:3px;
  box-shadow:var(--ds-shadow-focus);
}
.community-engagement__auth--primary{
  border-color:var(--ds-action-primary-border);
  background:var(--ds-action-primary-bg);
  color:var(--ds-action-primary-text);
  box-shadow:var(--ds-shadow-control);
}
.community-engagement__auth--primary:hover{background:var(--ds-action-primary-hover)}
.community-engagement__auth--primary:active{background:var(--ds-action-primary-active)}
.community-engagement__auth--secondary{
  border-color:var(--ds-action-secondary-border);
  background:var(--ds-action-secondary-bg);
  color:var(--ds-action-secondary-text);
}
.community-engagement__auth--secondary:hover{
  border-color:var(--ds-border-active);
  background:var(--ds-action-secondary-hover);
}
.community-engagement__auth--secondary:active{background:var(--ds-action-secondary-active)}
.community-engagement__about{
  color:var(--ds-text-link);
  font-size:var(--fs-label);
  font-weight:var(--fw-bold);
  text-decoration:none;
}
.community-engagement__about:hover{
  color:var(--ds-text-link-hover);
  text-decoration:underline;
  text-underline-offset:3px;
}

.community-engagement__actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(110px,1fr)) minmax(210px,1.35fr);
  gap:10px;
  padding:24px 0;
}
.community-engagement__actions>button{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  min-height:60px;
  padding:9px 12px;
  border:1px solid var(--community-control-border);
  border-radius:var(--ds-radius-card);
  background:var(--community-control-bg);
  color:var(--ds-text-strong);
  box-shadow:var(--community-action-shadow);
  font:inherit;
  cursor:pointer;
  transition:
    background-color var(--ds-transition-fast),
    border-color var(--ds-transition-fast),
    box-shadow var(--ds-transition-fast),
    transform var(--ds-transition-fast);
}
.community-engagement__actions>button:hover,
.community-engagement__actions>button.is-active{
  border-color:var(--ds-border-active);
  background:var(--community-control-hover);
}
.community-engagement__actions>button:hover{transform:translateY(-1px)}
.community-engagement__actions>button:active{transform:translateY(0)}
.community-engagement__actions>button:focus-visible,
.community-rating button:focus-visible,
.community-comment-form button:focus-visible,
.community-comment__actions button:focus-visible,
.community-picker__close:focus-visible,
.community-picker__item:focus-visible{
  outline:2px solid var(--ds-border-active);
  outline-offset:2px;
  box-shadow:var(--ds-shadow-focus);
}
.community-engagement__actions>button span{
  color:var(--ds-text-link);
  font-size:1.12rem;
}
.community-engagement__actions>button strong{
  color:var(--ds-text-strong);
  font-size:.92rem;
}
.community-engagement__actions>button small{
  color:var(--ds-text-muted);
  font-variant-numeric:tabular-nums;
}

.community-engagement__rating{
  display:grid;
  align-content:center;
  gap:4px;
  min-height:60px;
  padding:8px 14px;
  border-inline-start:1px solid var(--ds-divider);
  color:var(--ds-text-strong);
}
.community-engagement__rating>span{
  color:var(--ds-text-default);
  font-size:.78rem;
  font-weight:var(--fw-extrabold);
}
.community-rating{
  display:flex;
  direction:ltr;
  gap:2px;
}
.community-rating button{
  border:0;
  padding:2px;
  background:transparent;
  color:var(--community-star-idle);
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
}
.community-rating button:hover,
.community-rating button.is-active{color:var(--signal)}
.community-engagement__rating small{color:var(--ds-text-muted)}
.community-engagement__status{
  min-height:22px;
  margin:0 0 4px;
  color:var(--ds-text-link);
  font-size:.9rem;
}

.community-discussion{
  padding-top:24px;
  border-top:1px solid var(--ds-divider);
}
.community-discussion>header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.community-discussion h3{
  margin:0;
  color:var(--ds-text-strong);
  font-size:1.28rem;
  line-height:1.5;
}
.community-discussion>header>[data-stat="comments"]{
  min-width:30px;
  padding:4px 8px;
  border-radius:var(--ds-radius-pill);
  background:var(--ds-info-bg);
  color:var(--ds-info);
  text-align:center;
  font-size:.8rem;
}
.community-comments{
  display:grid;
  gap:10px;
}
.community-comments .comments-empty{
  margin:0;
  padding:14px 0 18px;
  color:var(--ds-text-default);
  line-height:1.8;
}
.community-comment{
  padding:16px;
  border:1px solid var(--community-control-border);
  border-radius:var(--ds-radius-card);
  background:var(--community-soft-bg);
  color:var(--ds-text-strong);
}
.community-comment header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}
.community-comment header a{
  color:var(--ds-text-strong);
  font-weight:var(--fw-extrabold);
  text-decoration:none;
}
.community-comment time{
  color:var(--ds-text-muted);
  font-size:.78rem;
}
.community-comment p{
  margin:0;
  line-height:1.8;
  white-space:pre-wrap;
}
.community-comment--accepted{
  border-color:var(--ds-success-border);
  background:var(--ds-success-bg);
}
.community-comment__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.community-comment__actions button{
  min-height:34px;
  padding:5px 9px;
  border:1px solid var(--ds-action-secondary-border);
  border-radius:var(--ds-radius-control);
  background:var(--ds-action-secondary-bg);
  color:var(--ds-action-secondary-text);
  font:inherit;
  font-size:.8rem;
  font-weight:var(--fw-extrabold);
  cursor:pointer;
}
.community-comment__actions button:hover{
  border-color:var(--ds-border-active);
  background:var(--ds-action-secondary-hover);
}
.community-answer-badge{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:5px 9px;
  border-radius:var(--ds-radius-pill);
  background:var(--ds-success-bg);
  color:var(--ds-success);
  font-size:.8rem;
}

.community-comment-form{
  display:grid;
  gap:11px;
  margin-top:18px;
}
.community-comment-form label{
  display:grid;
  gap:7px;
}
.community-comment-form label span{
  color:var(--ds-text-default);
  font-size:.9rem;
  font-weight:var(--fw-extrabold);
}
.community-comment-form textarea,
.community-report-form select,
.community-report-form textarea{
  width:100%;
  border:1px solid var(--ds-field-border);
  border-radius:var(--ds-radius-input);
  background:var(--ds-field-bg);
  color:var(--ds-field-text);
  caret-color:var(--accent);
  font:inherit;
}
.community-comment-form textarea{
  min-height:132px;
  padding:11px 12px;
  resize:vertical;
  line-height:1.7;
}
.community-comment-form textarea::placeholder,
.community-report-form textarea::placeholder{color:var(--ds-field-placeholder)}
.community-comment-form textarea:hover,
.community-report-form select:hover,
.community-report-form textarea:hover{
  border-color:var(--ds-field-border-hover);
  background:var(--ds-field-bg-hover);
}
.community-comment-form textarea:focus,
.community-report-form select:focus,
.community-report-form textarea:focus{
  outline:none;
  border-color:var(--ds-field-border-focus);
  box-shadow:var(--ds-shadow-focus);
}
.community-comment-form button,
.community-report-form button{
  min-height:var(--ds-control-height-md);
  padding:9px 18px;
  border:1px solid var(--ds-action-primary-border);
  border-radius:var(--ds-radius-control);
  background:var(--ds-action-primary-bg);
  color:var(--ds-action-primary-text);
  font:inherit;
  font-weight:var(--fw-extrabold);
  cursor:pointer;
}
.community-comment-form button{
  justify-self:start;
}
.community-comment-form button:hover,
.community-report-form button:hover{background:var(--ds-action-primary-hover)}
.community-comment-form button:active,
.community-report-form button:active{background:var(--ds-action-primary-active)}

.community-picker{
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  padding:18px;
  background:var(--ds-surface-overlay);
  backdrop-filter:blur(4px);
}
.community-picker__panel{
  width:min(520px,100%);
  max-height:min(680px,85vh);
  overflow:auto;
  padding:22px;
  border:1px solid var(--ds-border-default);
  border-radius:var(--ds-radius-panel);
  background:var(--ds-surface-panel);
  color:var(--ds-text-strong);
  box-shadow:var(--ds-shadow-float);
}
.community-picker__panel>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.community-picker__panel h2{
  margin:0;
  font-size:1.3rem;
  line-height:1.5;
}
.community-picker__close{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--ds-action-secondary-border);
  border-radius:var(--ds-radius-control);
  background:var(--ds-action-secondary-bg);
  color:var(--ds-action-secondary-text);
  font-size:1.4rem;
  cursor:pointer;
}
.community-picker__list{
  display:grid;
  gap:8px;
}
.community-picker__item{
  display:flex;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--ds-action-secondary-border);
  border-radius:var(--ds-radius-control);
  background:var(--ds-action-secondary-bg);
  color:var(--ds-action-secondary-text);
  text-align:start;
  font:inherit;
  cursor:pointer;
}
.community-picker__item:hover{
  border-color:var(--ds-border-active);
  background:var(--ds-action-secondary-hover);
}
.community-picker__item small,
.community-picker__status,
.community-picker__empty{
  color:var(--ds-text-muted);
}
.community-picker__profile{
  display:inline-flex;
  margin-top:10px;
  color:var(--ds-text-link);
  font-weight:var(--fw-extrabold);
}
.community-picker__status{
  min-height:22px;
  margin:12px 0 0;
  font-size:.88rem;
}

.community-report-form{
  display:grid;
  gap:14px;
}
.community-report-form label{
  display:grid;
  gap:7px;
}
.community-report-form label>span{
  color:var(--ds-text-default);
  font-size:.88rem;
  font-weight:var(--fw-extrabold);
}
.community-report-form select,
.community-report-form textarea{
  padding:10px 12px;
}
.community-report-form textarea{
  resize:vertical;
  line-height:1.7;
}

@media(max-width:900px){
  .community-engagement__head{
    grid-template-columns:1fr;
    align-items:start;
  }
  .community-engagement__head-tools{
    width:100%;
    justify-items:start;
  }
  .community-engagement__actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .community-engagement__rating{
    grid-column:1/-1;
    border-inline-start:0;
    border-top:1px solid var(--ds-divider);
    padding-top:14px;
  }
}
@media(max-width:560px){
  .community-engagement{
    padding:18px;
    margin-inline:-4px;
    border-radius:var(--ds-radius-card);
  }
  .community-engagement__head{
    gap:16px;
    padding-bottom:18px;
  }
  .community-engagement__auth-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .community-engagement__auth{
    width:100%;
    padding-inline:10px;
  }
  .community-engagement__actions{
    grid-template-columns:1fr 1fr;
    padding:18px 0;
  }
  .community-engagement__actions>button{
    grid-template-columns:auto 1fr;
    min-height:58px;
  }
  .community-engagement__actions>button small{grid-column:2}
  .community-comment-form textarea{min-height:120px}
  .community-comment header{
    display:grid;
    gap:4px;
  }
}