/* Comments on food and guide pages (PRD Comments v1). Own file, pc- classes only, so the
   Tailwind bundle is untouched. Colours follow the site tokens in tailwind.config.mjs. */
.pc { margin-top: 3rem; max-width: 46rem; border-top: 1px solid #e2e8f0; padding-top: 2rem; color: #0b1b30; }
.pc-h { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.5rem; line-height: 1.25; font-weight: 600; margin: 0; }
.pc-note { margin: .375rem 0 0; font-size: .875rem; color: #475569; }
.pc-meta { font-size: .875rem; color: #475569; }
.pc-report { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.pc-report-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.pc-chip { min-height: 44px; padding: .5rem .9rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #0b1b30; font: inherit; font-size: .9375rem; cursor: pointer; }
.pc-chip:hover { border-color: #94a3b8; }
.pc-chip[aria-pressed="true"] { background: #173155; border-color: #173155; color: #fff; }
.pc-chip:focus-visible, .pc-btn:focus-visible, .pc-link:focus-visible, .pc-text:focus-visible { outline: 2px solid #173155; outline-offset: 2px; }
.pc-form { margin-top: 1.25rem; }
.pc-label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .375rem; }
.pc-text { display: block; width: 100%; box-sizing: border-box; padding: .625rem .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; font: inherit; font-size: 1rem; line-height: 1.5; background: #fff; color: #0b1b30; resize: vertical; }
.pc-form-foot { margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.pc-btn { min-height: 44px; padding: .5rem 1.1rem; border: 0; border-radius: .5rem; background: #173155; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.pc-btn:hover { background: #112743; }
.pc-btn-ghost { margin-top: 1rem; background: #fff; color: #173155; border: 1px solid #cbd5e1; }
.pc-btn-ghost:hover { background: #f8fafc; }
.pc-item { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #f1f5f9; scroll-margin-top: 6rem; }
.pc-by { margin: 0; font-size: .9375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; min-height: 44px; }
.pc-by a { color: #173155; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.pc-by a:hover { text-decoration: underline; }
.pc-body { margin: .375rem 0 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; }
.pc-actions { margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.pc-inline { display: inline; margin: 0; }
.pc-link { min-height: 44px; padding: 0 .25rem; border: 0; background: none; color: #173155; font: inherit; font-size: .9375rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; display: inline-flex; align-items: center; }
.pc-replies { margin-top: .75rem; margin-left: .75rem; padding-left: 1rem; border-left: 2px solid #e2e8f0; }
.pc-reply { margin-top: .75rem; scroll-margin-top: 6rem; }
.pc-reply-box { margin: 0; }
.pc-reply-box[open] { flex-basis: 100%; }
.pc-reply-box .pc-form { margin-top: .5rem; }
.pc-reply-box > summary { list-style: none; }
.pc-reply-box > summary::-webkit-details-marker { display: none; }
.pc-pending { opacity: .85; }
.pc-tag { display: inline-block; margin-left: .375rem; padding: .125rem .5rem; border-radius: 999px; background: #fef3c7; color: #78350f; font-size: .8125rem; font-weight: 600; }
:target.pc-item, :target.pc-reply { background: #f8fafc; border-radius: .5rem; }
.pc-signin { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.pc-google { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: #0b1b30; border: 1px solid #cbd5e1; }
.pc-google:hover { background: #f8fafc; }
.pc-order { margin: 1.25rem 0 0; }
.pc-helpful { box-sizing: border-box; min-height: 44px; display: inline-flex; align-items: center; gap: .375rem; padding: 0 .625rem; margin-left: -.625rem; border: 4px solid transparent; background-clip: padding-box; border-radius: 999px; background: none; color: #475569; font: inherit; font-size: .875rem; cursor: pointer; }
.pc-helpful svg { width: 18px; height: 18px; flex: none; }
.pc-helpful:hover { color: #173155; background: #f1f5f9; }
.pc-helpful:focus-visible { outline: 2px solid #173155; outline-offset: 2px; }
.pc-helpful[aria-pressed="true"] { color: #173155; font-weight: 600; background: #e3ecf8; box-shadow: inset 0 0 0 1px #b9cce6; }
.pc-helpful[aria-pressed="true"]:hover { background: #d6e3f4; }
.pc-helpful[aria-pressed="true"] svg { fill: #dbe4f0; }
.pc-count { font-variant-numeric: tabular-nums; }