/* Chrome extension (Figma frame 21:1417): the four set-up steps, then the
   settings beside what it reads. Figma rounds each line of text to whole
   pixels, so the rows' line heights are px: 78 px set-up rows, 77 px rows
   below, as drawn. */

/* bordered lists of rows */
.rows { margin: 0; padding: 0; list-style: none; border: 1px solid #e8e0d5; border-radius: 16px; background: #fff; overflow: hidden; }
.rows > li:not(:last-child) { border-bottom: 1px solid #e8e0d5; }
.rows .row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.rows a.row { transition: background-color .15s ease; }
.rows a.row:hover { background: #fbf8f4; }
.rows .row-text { display: flex; flex: 1 0 0; flex-direction: column; gap: 4px; min-width: 0; }
.rows .row-text h3 { font-size: 14px; font-weight: 600; line-height: 20px; }
.rows .row-text p { color: var(--body); font-size: 13px; line-height: 20px; }

/* set up: a number, the step, and its button or chevron */
.setup .num { flex: none; width: 26px; color: var(--orange-ink); font-size: 15px; font-weight: 600; line-height: var(--lh); }
.setup .row-text h3 { font-size: 15px; line-height: 21px; }
.setup .chev { flex: none; width: 16px; height: 16px; }

/* the settings beside what it reads */
.ext-two { display: flex; align-items: flex-start; gap: 20px; }
.ext-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ext-settings { flex: 1 0 0; }
.ext-reads { flex: none; width: 440px; }
.toggle { flex: none; width: 34px; height: 20px; }
.value { flex: none; font-size: 13px; font-weight: 600; line-height: var(--lh); white-space: nowrap; }
.value.accent-ink { color: var(--orange-ink); }

@media (max-width: 960px) {
  .ext-two { flex-direction: column; align-items: stretch; gap: 24px; }
  .ext-reads { width: auto; }
}
@media (max-width: 640px) {
  .rows .row { gap: 12px; padding: 14px 16px; }
  .setup .num { width: 22px; }
  .rows .value { white-space: normal; max-width: 40%; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .rows a.row { transition: none; }
}