/* REVIEW2: 這場要你看的事 under 摘要 and the list badge (review-ui.js), loaded with that module like referrals.css. Rows, not
   boxes: a hairline between cards, no fill, every text on the column edge; accent only on the toggle and the clips */
.r-review:empty { display: none; }
.r-review { margin: 0 0 16px; }
.rv-line { margin: 0; font-size: var(--fs-13); line-height: 20px; color: var(--text-3); }
.rv-line.clean { padding-bottom: 8px; } /* 8 px more than the host's 16 before what follows (a margin would collapse into it) */
/* the list badge at the end of the meta row (after length and faces, 8 px: the row's 12 px gap less 4), in the row's own
   size, so every row's summary starts on the same x */
.c-meta .rv-n { margin: 0 0 0 -4px; font-size: inherit; line-height: 20px; }
/* the chevron hangs in the gutter (its 16 px and the 8 px gap), so 「這場有 N 件要你看」 starts on the column edge; where the
   gutter is narrower than that (phones, 16 px) it trails the text instead */
.rv-tog { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0; margin: 0 0 0 -24px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--fs-13); font-weight: 600; color: var(--accent); cursor: pointer; text-align: left; }
.rv-tog:hover span { text-decoration: underline; text-underline-offset: 3px; }
.rv-tog:focus-visible { outline: none; box-shadow: var(--ring); }
.rv-tog .chev { width: 16px; height: 16px; flex: none; transform: rotate(-90deg); transition: transform 150ms var(--ease); }
.rv-tog[aria-expanded="true"] .chev { transform: none; }
@media (max-width: 600px) { .rv-tog { margin-left: 0; } .rv-tog .chev { order: 1; } }
.rv-cards { display: grid; margin-top: 4px; border-bottom: 1px solid var(--line); }
.rv-card { padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-13); line-height: 20px; }
.rv-t { font-weight: 400; color: var(--text); }
.rv-b { margin: 4px 0 0; color: var(--text-3); overflow-wrap: anywhere; }
.rv-b mark { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text-2); border-radius: var(--r-sm); padding: 0 2px; }
.rv-b + .rv-note { margin-top: 2px; }
/* the speaker card's listening row: a small label and the clips as plain links, so it does not read as the answers below */
.rv-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; }
.rv-lab { font-size: var(--fs-12); line-height: 16px; color: var(--text-3); }
.rv-clip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--fs-13); color: var(--accent); cursor: pointer; }
.rv-clip svg { width: 12px; height: 12px; flex: none; }
.rv-clip:hover { text-decoration: underline; text-underline-offset: 3px; }
.rv-clip:focus-visible { outline: none; box-shadow: var(--ring); }
/* the answers: the app's small ghost button without its resting fill (the fill comes with hover, .btn.ghost:hover), the
   first one's text pulled onto the column edge by its own 8 px padding */
.rv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0 0 -8px; }
.rv-acts .btn.ghost:not(:hover) { background: none; }
.rv-full { margin-top: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--fill); color: var(--text-2); }
.rv-full b { display: block; font-weight: 400; font-size: var(--fs-12); line-height: 16px; color: var(--text-3); }
.rv-full p { margin: 4px 0 0; }
/* 核對 in 設定: each choice with its one line underneath */
.set-opt small { display: block; font-size: var(--fs-12); line-height: 16px; font-weight: 400; color: var(--text-3); }
#set-verify .set-opt { padding-top: 6px; padding-bottom: 6px; }
/* actions sit under the card title in weight: body size, regular, secondary text (critic round 3) */
.rv-acts .btn { font-size: var(--fs-13); font-weight: 400; color: var(--text-2); }
.rv-acts .btn:hover { color: var(--text); }