/* ═══════════════════════════════════════════════════════════════
   Review list — "check before you send" summary with edit links

   The last step of a multi-step form restates what was chosen, one
   row per topic, each with an "Ändra" that takes the user back to
   the step that edits it. Read-only apart from those links.

   Markup:
     <dl class="review-list">
       <div class="review-list__row">
         <dt class="review-list__key">Möblering</dt>
         <dd class="review-list__value">
           <span class="review-list__text">Möblerad</span>
           <button type="button" class="review-list__edit" aria-label="Ändra Möblering">Ändra</button>
         </dd>
       </div>
     </dl>

   A value may span several lines (<br> inside .review-list__text).
   The edit button is optional: leave it out for a read-only overview (e.g. the
   landlord's terms shown to the tenant). .review-list__row--block stacks a
   paragraph-long value under its key.
   Give each edit button an aria-label that names its row — eight
   buttons all called "Ändra" are indistinguishable to a screen reader.
   Under 480px the value drops under its key.
   ═══════════════════════════════════════════════════════════════ */

.review-list {
  margin:        0 0 var(--s-3);
  border:        1px solid var(--sam-light);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}

.review-list__row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             var(--s-3);
  padding:         12px var(--s-3);
  background:      var(--sam-white);
  font-size:       13.5px;
  border-bottom:   1px solid var(--sam-light);
}

.review-list__row:last-child {
  border-bottom: 0;
}

.review-list__key {
  flex-shrink: 0;
  font-weight: 600;
  color:       var(--sam-medium);
}

.review-list__value {
  display:     flex;
  align-items: baseline;
  gap:         var(--s-2);
  min-width:   0;
  margin:      0;
  text-align:  right;
}

.review-list__text {
  font-weight:   700;
  color:         var(--text-primary);
  overflow-wrap: anywhere;
}

.review-list__edit {
  flex-shrink:           0;
  padding:               0;
  border:                0;
  background:            none;
  font:                  inherit;
  font-size:             12px;
  font-weight:           600;
  color:                 var(--text-link);
  text-decoration:       underline;
  text-underline-offset: 2px;
  cursor:                pointer;
}

.review-list__edit:focus-visible {
  outline:        2px solid var(--border-focus);
  outline-offset: 2px;
}

/* A value that is a paragraph (free-text terms): key above, value below, left-
   aligned at full width — a right-aligned paragraph is hard to read. */
.review-list__row--block {
  flex-direction: column;
  gap:            var(--s-1);
}

.review-list__row--block .review-list__value {
  width:      100%;
  text-align: left;
}

.review-list__row--block .review-list__text {
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .review-list__row   { flex-direction: column; gap: var(--s-1); }
  .review-list__value { width: 100%; justify-content: space-between; text-align: left; }
}