/* 口コミ返信（/reviews）。色・余白は staff.css の :root の変数だけを使う */
[hidden] { display: none !important; }
.review-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--card-border); border-radius: var(--radius-s); overflow: hidden; margin-bottom: var(--space-3); }
.review-tabs button { min-height: var(--tap); border: 0; border-left: var(--card-border); background: var(--surface); color: var(--ink); font-size: var(--font-sub); font-weight: var(--weight-bold); padding: 0 var(--space-1); white-space: nowrap; }
.review-tabs button:first-child { border-left: 0; }
.review-tabs button[aria-selected="true"] { background: var(--ink); color: var(--on-primary); }
.tab-count:not(:empty) { margin-left: var(--space-1); }
.sync-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.sync-line .sub-text { margin: 0; }
.review-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.review-card { background: var(--surface); border: var(--card-border); border-radius: var(--radius-l); padding: var(--space-4); }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: var(--stroke); stroke-linejoin: round; }
.stars svg.on { fill: var(--ink); }
.review-meta { font-size: var(--font-sub); color: var(--ink-sub); }
.review-flags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.review-comment { margin: var(--space-3) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-comment.is-empty { color: var(--ink-sub); font-size: var(--font-sub); }
.reply-block { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.reply-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: var(--font-sub); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.reply-label span { font-weight: var(--weight-body); color: var(--ink-sub); font-size: var(--font-min); }
.reply-text { width: 100%; min-height: 120px; padding: var(--space-3); border: var(--card-border); border-radius: var(--radius-s); background: var(--bg); color: var(--ink); font: inherit; font-size: var(--font-body); line-height: var(--leading-body); resize: none; overflow: hidden; }
.reply-posted { margin: 0; padding: var(--space-3); background: var(--bg); border-radius: var(--radius-s); white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-working { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); color: var(--ink-sub); font-size: var(--font-sub); }
.review-actions { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.review-actions .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.review-actions .button { min-height: var(--tap); font-size: var(--font-sub); }
.review-actions .button.primary { min-height: var(--button-height); font-size: var(--font-body); }
.button:disabled { opacity: .45; }
.review-dialog .dialog-title { font-size: var(--font-heading); line-height: var(--leading-heading); margin: 0 0 var(--space-3); }
.review-dialog .button + .button { margin-top: var(--space-3); }
.post-preview { margin: var(--space-3) 0 var(--space-4); padding: var(--space-3); max-height: 40svh; overflow: auto; background: var(--bg); border: var(--card-border); border-radius: var(--radius-s); white-space: pre-wrap; overflow-wrap: anywhere; }
.hint-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.chip-button { min-height: 36px; padding: 0 var(--space-3); border: var(--card-border); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--font-sub); }
.chip-button[aria-pressed="true"] { background: var(--ink); color: var(--on-primary); }
.field-label { display: block; font-size: var(--font-sub); font-weight: var(--weight-bold); margin-bottom: var(--space-1); }
.text-input { width: 100%; min-height: var(--tap); padding: 0 var(--space-3); border: var(--card-border); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--font-body); margin-bottom: var(--space-4); }
.review-toast { display: flex; align-items: center; gap: var(--space-4); }
.review-toast[hidden] { display: none; }
.toast-undo { min-height: var(--tap); border: 0; background: transparent; color: var(--on-primary); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: var(--space-1); }
#post-note, #past-note { margin: 0 0 var(--space-3); }