/* 占い師の「良かった」の札と口コミの欄、一覧カードの「良かった N」。値は theme.css の tokens だけを使う */
.voice-total{color:var(--teal);font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.voice-chips{display:flex;flex-wrap:wrap;gap:var(--s-3)}
/* Slack のリアクションの形: 線の親指 + 良かった + 件数。押すと面と親指を塗り、もう一度で戻る */
.voice-chip{display:inline-flex;align-items:center;gap:var(--s-2);min-height:calc(var(--s-6) + var(--s-3));padding:0 var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-family:var(--font-sans);font-size:var(--t-14);font-weight:500;line-height:var(--lh-tight);letter-spacing:var(--ls-1);cursor:pointer;transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.voice-chip:hover{border-color:var(--teal);box-shadow:0 0 0 var(--s-1) var(--teal-ring)}
.voice-chip:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 var(--s-1) var(--teal-ring)}
.voice-chip .hi{flex:none;color:var(--muted);transition:color var(--dur) var(--ease)}
.voice-chip .voice-thumb-on{display:none}
.voice-n{min-width:var(--s-5);padding:0 var(--s-2);border-radius:var(--r-pill);background:var(--surface-2);color:var(--muted);font-size:var(--t-13);font-variant-numeric:tabular-nums;text-align:center;line-height:var(--s-5)}
.voice-chip.is-on{border-color:var(--teal);background:var(--mint-faint);color:var(--teal-ink);box-shadow:none}
.voice-chip.is-on .voice-thumb{display:none}
.voice-chip.is-on .voice-thumb-on{display:block;color:var(--teal)}
.voice-chip.is-on .voice-n{background:var(--surface);color:var(--teal-ink)}
/* 押した瞬間だけ親指が小さく跳ねる（取り消しでは跳ねない） */
.voice-chip.is-pop .voice-thumb-on{animation:voice-pop var(--dur) var(--ease)}
.voice-chip.is-pop .voice-n{animation:voice-up var(--dur) var(--ease)}
@keyframes voice-pop{0%{transform:scale(.7) rotate(-12deg)}60%{transform:scale(1.15) rotate(0)}100%{transform:none}}
@keyframes voice-up{0%{transform:translateY(var(--s-1));opacity:.4}100%{transform:none;opacity:1}}

/* 口コミの欄: 札の下に 本文 → 性別・年代・送る の 1 行 */
.voice-form{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
.voice-field{display:grid;gap:var(--s-1)}
.voice-form textarea{width:100%;min-height:calc(var(--s-8) + var(--s-6));padding:var(--s-3) var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:var(--t-14);line-height:var(--lh-snug);resize:vertical;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.voice-form textarea::placeholder{color:var(--faint)}
.voice-form textarea:hover{border-color:var(--faint)}
.voice-form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-ring)}
.voice-left{justify-self:end;color:var(--faint);font-size:var(--t-12);font-variant-numeric:tabular-nums}
.voice-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.voice-row select{height:44px;padding:0 var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r-md);background-color:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:var(--t-14);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.voice-row select:hover{border-color:var(--faint)}
.voice-row select:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-ring)}
.voice-ts{flex-basis:100%;min-height:0}
.voice-ts:empty{display:none}
.voice-send{height:44px;margin-left:auto;padding:0 var(--s-5);border:1px solid var(--teal);border-radius:var(--r-md);background:var(--teal);color:var(--surface);font-family:var(--font-sans);font-size:var(--t-14);font-weight:500;letter-spacing:var(--ls-1);cursor:pointer;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.voice-send:hover:not(:disabled){background:var(--teal-ink);border-color:var(--teal-ink)}
.voice-send:focus-visible{outline:none;box-shadow:0 0 0 3px var(--teal-ring)}
.voice-send:disabled{opacity:.4;cursor:default}
.voice-err{margin:0;color:var(--ink-2);font-size:var(--t-13)}
.voice-sent{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-5) 0 0;color:var(--teal-ink);font-size:var(--t-14);font-weight:500}
.voice-sent .hi{flex:none;color:var(--teal)}
.is-sent .voice-sent{animation:voice-up var(--dur) var(--ease)}

/* 承認された口コミ: 新しい順に 5 件。本文の改行は保つ */
.voice-texts{display:grid;gap:var(--s-4);margin:var(--s-5) 0 0;padding:0;list-style:none}
.voice-text{display:grid;gap:var(--s-1);padding-top:var(--s-4);border-top:1px solid var(--line)}
.voice-text p{margin:0;color:var(--ink-2);font-size:var(--t-14);line-height:var(--lh-body);white-space:pre-line;overflow-wrap:anywhere}
.voice-text small{color:var(--muted);font-size:var(--t-12)}

/* 一覧の占い師カード: 名前の行の右端に 親指 + 合計 */
.card-good{display:inline-flex;align-items:center;gap:var(--s-1);margin-left:auto;flex:none;color:var(--teal);font-size:var(--t-12);font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
.card-good .hi{flex:none}

@media (prefers-reduced-motion:reduce){.voice-chip,.voice-chip .hi,.voice-send,.voice-form textarea,.voice-row select{transition:none}.voice-chip.is-pop :is(.voice-n,.voice-thumb-on),.is-sent .voice-sent{animation:none}}