/* "Send feedback" (feedback-form.js): the same form in Settings and on /feedback. */
.fb-holder { display: grid; gap: 12px; width: 100%; }
.fb-holder > .s-text { display: grid; gap: 2px; }
.fb-form { display: grid; gap: 12px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-kind { border: 0; border-radius: var(--r-pill); padding: 8px 13px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(var(--fg-rgb),.12); font: 600 .88rem var(--body); cursor: pointer; transition: background .2s, box-shadow .2s, transform .25s var(--spring); }
.fb-kind:hover { transform: translateY(-1px); }
.fb-kind[aria-checked="true"] { background: var(--yellow); color: var(--on-accent); box-shadow: none; }
.fb-box { position: relative; }
.fb-text { display: block; box-sizing: border-box; width: 100%; min-height: 110px; resize: vertical; padding: 12px 14px 26px; border: 0; border-radius: var(--r-m); background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(var(--fg-rgb),.12); font: 1rem/1.4 var(--body); }
.fb-text:focus { outline: none; box-shadow: inset 0 0 0 2px var(--purple-deep); }
.fb-count { position: absolute; right: 12px; bottom: 8px; color: var(--muted); font-size: .72rem; }
.fb-hint { margin: -4px 2px 0; color: var(--muted); font-size: .8rem; }
.fb-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.fb-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.fb-check input { width: 18px; height: 18px; accent-color: var(--ink); }
.fb-send { padding: 12px 20px; }
.fb-status { margin: 0; padding: 10px 14px; border-radius: var(--r-m); font-size: .9rem; font-weight: 600; }
.fb-status.ok { background: rgba(0,182,255,.12); color: var(--t-blue); box-shadow: inset 0 0 0 1.5px rgba(0,182,255,.5); }
.fb-status.bad { background: rgba(255,0,184,.12); color: var(--t-pink); box-shadow: inset 0 0 0 1.5px rgba(255,0,184,.5); }

/* the page of its own */
.feedback-card { width: min(560px, calc(100% - 32px)); margin: clamp(24px, 6vh, 64px) auto 40px; box-sizing: border-box; padding: clamp(22px, 4vw, 36px); border-radius: var(--r-l); background: var(--paper-2); box-shadow: var(--shadow); }
.feedback-card h1 { margin: 0 0 6px; font-family: var(--display); font-size: clamp(1.8rem, 5vw, 2.3rem); letter-spacing: -0.045em; line-height: 1.05; }
.feedback-card .lede { margin: 0 0 18px; color: var(--muted); }
.feedback-card .peek { width: 3.6rem; height: 3.6rem; margin-bottom: 8px; }