/* The words and maps section of the look step: a title and a switch on sight, the rest behind "More options" (review/step3.html,
   app-review-more.js). Two kinds of row open something -- the More options row and the Map look row -- and each shows
   its closed and its open state by a different glyph (a chevron down and one up; one pointing on and one down), so a
   row is never read as open from its label alone. */
.review-title-card .review-maps-toggle { margin: 4px 0 0; }
.text-more { margin: 12px 0; }
.review-more-body { display: grid; gap: 12px; margin-top: 12px; }
.review-more-body > * { min-width: 0; }
.review-more-body > .review-settings, .review-more-body > .cover-card { margin-top: 0; }
.review-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; box-sizing: border-box;
  cursor: pointer; list-style: none; color: var(--ink); }
.review-row::-webkit-details-marker { display: none; }
.text-more > .review-row { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.map-look > .review-row { padding-inline: 0; }
.review-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.review-row-text small { color: var(--muted); }
.review-row .row-glyph { flex: none; color: var(--muted); }
.review-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details[open] > .review-row .glyph-closed, details:not([open]) > .review-row .glyph-open { display: none; }
[dir="rtl"] .review-row .glyph-go { transform: scaleX(-1); }   /* it points on, and on is leftward */
.review-more-count { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--gold);
  font-size: .85rem; font-weight: 650; white-space: nowrap; }
.review-more-count[hidden] { display: none; }
.review-skip { display: flex; justify-content: center; margin: 4px 0 8px; }