/* フィードバック（入口 / 3種のフォーム）。すべて body.tp の下だけで効く。 */

/* ── 入口 ─────────────────────────────────── */
/* 共通の .tp-row-title / .tp-row-sub は display 指定が無い（＝inline）ため、
   題が短い行だと副題が同じ行に並んでしまう。共通CSSは触らない約束なので、
   この画面の中だけ縦積みにする。 */
body.tp [data-screen="feedback"] .tp-row-title,
body.tp [data-screen="feedback"] .tp-row-sub { display: block; }

body.tp .tp-fb-pending {
  margin: calc(var(--tp-2) * -1) 0 var(--tp-3);
  color: var(--tp-warn);
}

/* ── フォーム本体 ───────────────────────────── */
body.tp .tp-fb-body {
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: var(--tp-6);
}
body.tp .tp-fb-body.tp-fb-centered {
  display: grid;
  place-items: center;
  padding-bottom: var(--tp-4);
}

body.tp .tp-fb-lead { margin-bottom: var(--tp-4); }

body.tp .tp-fb-sec + .tp-fb-sec { margin-top: var(--tp-6); }
body.tp .tp-fb-sectitle {
  margin-bottom: var(--tp-1);
  padding-left: var(--tp-3);
  border-left: 3px solid var(--tp-accent);
  color: var(--tp-accent);
}

body.tp .tp-fb-q { margin: var(--tp-5) 0 0; }
body.tp .tp-fb-qlabel {
  margin-bottom: var(--tp-2);
  font-size: 14px; font-weight: 700; letter-spacing: .01em; line-height: 1.5;
  color: var(--tp-text);
}
body.tp .tp-fb-hint {
  margin-left: var(--tp-2);
  font-size: 11.5px; font-weight: 500;
  color: var(--tp-text-mute);
}

/* ── 5段階評価 ─────────────────────────────
   幅いっぱいに5等分。指で押しやすいよう縦48px以上を確保する。 */
body.tp .tp-fb-rate {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--tp-1);
}
body.tp .tp-fb-dot {
  -webkit-appearance: none; appearance: none;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r-sm);
  background: var(--tp-surface);
  color: var(--tp-text-dim);
  font-family: var(--f-display); font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
body.tp .tp-fb-dot:hover { background: var(--tp-surface-2); }
body.tp .tp-fb-dot:active { transform: translateY(1px); }
body.tp .tp-fb-dot:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 2px; }
body.tp .tp-fb-dot.on {
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  color: var(--tp-accent-ink);
}

body.tp .tp-fb-ends {
  display: flex; justify-content: space-between; gap: var(--tp-2);
  margin-top: var(--tp-1);
  font-size: 11px; line-height: 1.4;
  color: var(--tp-text-mute);
}
body.tp .tp-fb-ends span:last-child { text-align: right; }

/* ── チップ（複数選択）─────────────────────── */
body.tp .tp-fb-chips { display: flex; flex-wrap: wrap; gap: var(--tp-2); }
body.tp .tp-fb-chip {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: var(--tp-1);
  min-height: 40px;
  padding: 0 var(--tp-3);
  border: 1px solid var(--tp-line-lit);
  border-radius: var(--tp-r-pill);
  background: var(--tp-surface);
  color: var(--tp-text-dim);
  font-family: inherit; font-size: 13.5px; font-weight: 700; text-align: left;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
body.tp .tp-fb-chip:hover { background: var(--tp-surface-2); }
body.tp .tp-fb-chip:focus-visible { outline: 2px solid var(--tp-focus); outline-offset: 2px; }
body.tp .tp-fb-chip .tp-fb-chip-ico {
  width: 15px; height: 15px;
  margin-left: -2px;
  opacity: 0;
  transition: opacity .12s ease;
}
body.tp .tp-fb-chip[aria-pressed="true"] {
  border-color: var(--tp-accent);
  background: rgba(216, 178, 90, .14);
  color: var(--tp-accent);
}
body.tp .tp-fb-chip[aria-pressed="true"] .tp-fb-chip-ico { opacity: 1; }

/* ── 自由記述 ─────────────────────────────── */
body.tp .tp-fb-q .tp-textarea { min-height: 84px; overflow-y: auto; }
body.tp .tp-fb-q .tp-textarea.tall { min-height: 120px; }

/* ── 名前 ─────────────────────────────────── */
body.tp .tp-fb-name {
  margin-top: var(--tp-6);
  padding-top: var(--tp-4);
  border-top: 1px solid var(--tp-line);
}
body.tp .tp-fb-name .tp-note { display: flex; align-items: center; gap: var(--tp-2); }
body.tp .tp-fb-name .tp-note .tp-ico { width: 16px; height: 16px; color: var(--tp-accent); }

/* ── 送信バー ─────────────────────────────── */
body.tp .tp-fb-foot {
  position: relative;
  border-top: 1px solid var(--tp-line);
  background: var(--tp-surface);
}
body.tp .tp-fb-progress {
  position: absolute; left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--tp-line);
  overflow: hidden;
}
body.tp .tp-fb-bar {
  display: block;
  height: 100%;
  background: var(--tp-accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .12s linear;
}
/* 送信後は「フォームのどこまで来たか」を出す意味がないので消す */
body.tp .tp-fb-foot.done .tp-fb-progress { display: none; }

body.tp .tp-fb-error { margin: 0 0 var(--tp-1); }

body.tp .tp-fb-formfoot,
body.tp .tp-fb-donefoot {
  display: flex; align-items: center; gap: var(--tp-3);
}
body.tp .tp-fb-count {
  flex: 1 1 auto; min-width: 0;
  font-size: 12px; color: var(--tp-text-dim);
}
body.tp .tp-fb-send { flex: 0 0 auto; }
body.tp .tp-fb-send .tp-ico { width: 17px; height: 17px; }
body.tp .tp-fb-donefoot .tp-btn { flex: 1 1 0; }

/* ── 送信後 ───────────────────────────────── */
body.tp .tp-fb-done { max-width: 420px; text-align: center; }
body.tp .tp-fb-done-ico { display: block; color: var(--tp-accent); }
body.tp .tp-fb-done-ico .tp-ico { width: 44px; height: 44px; }
body.tp .tp-fb-done .tp-h2 { margin: var(--tp-4) 0 var(--tp-2); }
body.tp .tp-fb-done .tp-sub { line-height: 1.75; }

/* 狭い端末では5段階の数字を少しだけ詰める */
@media (max-width: 359px) {
  body.tp .tp-fb-dot { min-height: 44px; font-size: 15px; }
  body.tp .tp-fb-chip { font-size: 12.5px; min-height: 38px; }
}