/* ==========================================================================
   THE DOUBT STRIP
   Written against the SITE's tokens (--surface-*, --text-*), not the
   community's --cmx-* ones, because it renders on a notes page and must follow
   whichever theme that page is in. --surface-line is the hairline token; there
   is no --border, and using one would have invalidated every border
   declaration here silently.
   ========================================================================== */
.dsWrap {
  margin: var(--s-6) 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-line);
  background: var(--surface-1);
  overflow: hidden;
}

.dsBar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
}
.dsBar__who { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.dsBar__who b { font-size: var(--fs-body-lg); color: var(--text-hi); font-weight: 700; }
.dsBar__label { font-size: var(--fs-sm); color: var(--text-lo); }

/* Overlapped, so five faces read as a group rather than a list. */
.dsBar__faces { display: flex; flex: none; }
.dsBar__faces .ycAv { margin-left: -.55rem; box-shadow: 0 0 0 2px var(--surface-1); }
.dsBar__faces .ycAv:first-child { margin-left: 0; }

/* ── questions ──────────────────────────────────────────────────────────── */
.dsQs { border-top: 1px solid var(--surface-line); display: grid; }
.dsQs[hidden] { display: none; }
.dsQ {
  display: grid; gap: .3rem;
  padding: var(--s-3) var(--s-5); text-decoration: none;
  border-bottom: 1px solid var(--surface-line);
  transition: background-color var(--dur) var(--ease-out);
}
.dsQ:hover { background: var(--surface-2); }
.dsQ__body { font-size: var(--fs-sm); color: var(--text-hi); line-height: var(--lh-body); }
.dsQ__meta {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-lo);
}
.dsQ__unit {
  padding: .05rem .4rem; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-mid);
  font-family: var(--font-mono); font-size: .58rem;
}
/* Answered is the state worth colouring — it is the proof that asking here
   works, which is the only thing a cold visitor is deciding. */
.dsQ__solved { color: var(--y-green); font-weight: 600; }
.dsQ__open   { color: var(--accent-ink); font-weight: 600; }
.dsQ.is-solved { background: linear-gradient(90deg, rgb(62 158 95 / .06), transparent 40%); }

.dsQs__all {
  padding: var(--s-3) var(--s-5); font-size: var(--fs-sm); font-weight: 600;
  color: var(--accent-ink); text-decoration: none;
}
.dsQs__all:hover { text-decoration: underline; }

/* ── the ask form ───────────────────────────────────────────────────────── */
.dsAsk { border-top: 1px solid var(--surface-line); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-3); }
.dsAsk[hidden] { display: none; }
.dsAsk textarea {
  width: 100%; padding: .8rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--surface-line); background: var(--surface-0); color: var(--text-hi);
  font: inherit; font-size: var(--fs-sm); line-height: var(--lh-body); resize: vertical;
  outline: none;
}
.dsAsk textarea:focus { border-color: var(--y-yellow); }
.dsAsk__row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.dsAsk__unit {
  padding: .5rem .8rem; border-radius: var(--radius);
  border: 1px solid var(--surface-line); background: var(--surface-0); color: var(--text-hi);
  font: inherit; font-size: var(--fs-xs);
}
.dsAsk__count { font-family: var(--font-mono); font-size: .6rem; color: var(--text-lo);
  margin-left: auto; }
.dsAsk__note { margin: 0; font-size: var(--fs-xs); color: var(--text-lo); line-height: var(--lh-body); }
.dsAsk__note b { color: var(--text-mid); }
.dsAsk__err { margin: 0; font-size: var(--fs-xs); color: var(--y-red); }
.dsAsk__err[hidden] { display: none; }

@media (max-width: 46rem) {
  .dsBar { padding: var(--s-3) var(--s-4); }
  .dsQ, .dsQs__all, .dsAsk { padding-inline: var(--s-4); }
  .dsAsk__count { margin-left: 0; }
  /* 16px — below it iOS zooms the page on focus. */
  .dsAsk textarea { font-size: 1rem; }
}

/* ── BUTTONS ────────────────────────────────────────────────────────────────
   Its own, not .cmxBtn. A notes page does not load community.css — and should
   not: that file carries a body-class-scoped token block and a global
   scrollbar restyle that have no business on a document page. Reusing its
   classes here produced default browser buttons, grey and square, because the
   rules simply were not there. A partial that renders outside its own
   stylesheet has to bring its own styles.
   ══════════════════════════════════════════════════════════════════════════ */
.dsBtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1rem; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--surface-line); background: var(--surface-2);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--text-hi);
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
              filter var(--dur) var(--ease-out);
}
.dsBtn:hover { border-color: var(--y-yellow); }
.dsBtn--go {
  background: var(--y-yellow); border-color: transparent; color: var(--y-black);
  box-shadow: var(--glow-yellow);
}
/* No translate on hover — see the note at .cmxRoom in community.css. Moving an
   element on its own hover is a feedback loop, not a flourish. */
.dsBtn--go:hover { filter: brightness(1.06); }
.dsBtn[hidden] { display: none; }