/* ==========================================================================
   section-feedback.css, end-of-section "Was this section clear?" invite
   --------------------------------------------------------------------------
   A quiet, hairline-topped block at the end of every reader section. Voting
   opens an optional note. Terracotta is ink only (the chosen vote, the note
   caret) - never a bar. Behaviour lives in section-feedback.js.
   ========================================================================== */

.section-feedback {
  border-top: 1px solid var(--bdr);
  margin: 30px 0 6px;
  padding: 20px 0 4px;
  text-align: left;
}

/* The [hidden] attribute must beat the explicit display on .sf-thanks etc.,
   so a freshly rendered block shows only the question + votes. */
.section-feedback [hidden] { display: none !important; }

.sf-ask {
  font-family: var(--font-serif, 'Literata', Georgia, serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--tx1);
  margin: 0 0 14px;
}

.sf-votes { display: flex; gap: 10px; flex-wrap: wrap; }

.sf-vote {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  background: transparent;
  color: var(--tx1);
  border: 1px solid var(--bdr2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sf-vote:hover { border-color: var(--tx2); }
.sf-vote.is-on {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--ac-tx, #231207);
}
.sf-vote:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

.sf-note { margin-top: 12px; max-width: 520px; }

.sf-note-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--bdr2);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--tx);
  font-family: var(--font-serif, 'Literata', Georgia, serif);
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  min-height: 54px;
}
.sf-note-input::placeholder { color: var(--tx3); font-style: italic; }
.sf-note-input:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

.sf-note-email {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--bdr2);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--tx);
  font-family: var(--font-serif, 'Literata', Georgia, serif);
  font-size: 13.5px;
  line-height: 1.4;
}
.sf-note-email::placeholder { color: var(--tx3); font-style: italic; }
.sf-note-email:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

.sf-note-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.sf-reassure {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--tx3);
}
.sf-reassure[data-sf-error] { color: var(--rd, #d98b6f); }

.sf-send {
  flex: 0 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--tx1);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sf-send:hover { background: var(--ac); color: var(--ac-tx, #231207); }
.sf-send:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.sf-send:disabled { opacity: 0.6; cursor: default; }

.sf-thanks {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-serif, 'Literata', Georgia, serif);
  font-style: italic;
  font-size: 15px;
  color: var(--tx2);
}
.sf-thanks svg { flex: 0 0 auto; color: var(--gn, #7bab6a); }