/* The feedback form (feedback.html). Its own file so style.css, which every
   page names by version, does not have to move for one page. */
.fb { max-width: 640px; }
.fb-form { margin: 30px 0 0; }
.fb-form[hidden], .fb-set[hidden], .fb-field[hidden] { display: none; }

.fb-set { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.fb-field { margin: 0 0 22px; }
.fb-label { display: block; margin: 0 0 8px; padding: 0; font-size: 15px; font-weight: 620; color: var(--ink); }
.fb-opt { font-weight: 400; color: var(--text-3); }
.doc .fb-hint { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-3); }

/* The choices: radio buttons drawn as pills. The input stays in the page for
   the keyboard and for screen readers; only its drawing is hidden. */
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-chip { position: relative; cursor: pointer; }
.fb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.fb-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 17px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 15.5px; font-weight: 560; line-height: 1.25; color: var(--text-2); transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.fb-chip:hover span { border-color: var(--ink); color: var(--ink); }
.fb-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.fb-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

.fb-input { display: block; width: 100%; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); font: 400 17px/1.45 var(--font); color: var(--ink); }
.fb-input::placeholder { color: var(--text-3); }
.fb-input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.fb-input[aria-invalid="true"] { border-color: #c4392f; }
.fb-area { min-height: 156px; resize: vertical; }
.fb-select { max-width: 340px; height: 52px; padding-block: 0; padding-right: 44px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%230b0c0f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 17px center; }

/* Off-screen, not display:none: some bots skip fields that are not rendered. */
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.doc .fb-with { margin: 0 0 18px; padding: 11px 15px; border-radius: 12px; background: rgba(11, 12, 15, .04); font-size: 14px; line-height: 1.5; color: var(--text-2); max-width: none; }
.fb-with[hidden] { display: none; }
.fb-with b { font-weight: 620; color: var(--ink); }
.fb-check:not(:empty) { margin: 0 0 16px; }

.fb-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.fb-send .btn { min-width: 150px; }
.fb-send .btn:disabled { opacity: .55; cursor: default; }
.doc .fb-status { flex: 1 1 220px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.fb-status[data-tone="bad"] { color: #a82b22; }
.fb-form > .fine { margin-top: 22px; }

.fb-done { margin: 30px 0 0; padding: 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.fb-done[hidden] { display: none; }
.fb-done:focus { outline: none; }
/* .doc h2.h3 gives a section heading 44px above it; inside this card that is a hole. */
.doc .fb-done h2.h3 { margin: 0 0 8px; }
.fb-done p:last-of-type { margin-bottom: 0; }
.fb-done .doc-cta { margin-top: 20px; }
.doc .fb-left-note { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); max-width: none; }
.fb-left-note[hidden] { display: none; }

@media (max-width: 560px) {
  .fb-chip, .fb-chip span { width: 100%; }
  .fb-select { max-width: none; }
  .fb-send .btn { width: 100%; }
  .fb-done { padding: 22px; }
}