.listing-legal-snapshot { padding: 20px 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-listing); background: var(--surface-card); display: grid; gap: 14px; }
.listing-legal-snapshot header { display: grid; gap: 4px; }
.listing-legal-snapshot h2,
.listing-legal-snapshot h3,
.listing-legal-snapshot p { margin: 0; }
.listing-legal-snapshot h2 { font-size: 17px; }
.listing-legal-snapshot h3 { font-size: 14px; }
.listing-legal-snapshot header p,
.listing-legal-requirements span,
.listing-legal-requirements small,
.listing-legal-documents dt,
.listing-legal-documents dd { color: var(--text-secondary); font-size: 12.5px; }
.listing-legal-decision { font-size: 13.5px; font-weight: 600; }
.listing-legal-requirements { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.listing-legal-requirements li { display: grid; gap: 2px; }
.listing-legal-requirements small { line-height: 1.45; }
.listing-legal-documents { margin: 0; display: grid; gap: 8px; }
.listing-legal-documents > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.listing-legal-documents dd { margin: 0; color: var(--text-primary); text-align: end; }
.listing-legal-documents dd span { display: block; color: var(--text-secondary); }
.listing-legal-disclaimer { padding-top: 12px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; }
.listing-legal-snapshot > a { width: fit-content; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 900px) {
  .listing-legal-snapshot { padding: 24px 26px; }
}

.buyer-duties { padding: 16px 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-sky); display: grid; gap: 10px; }
.buyer-duties h2 { margin: 0; font-size: 14px; }
/* The list stays a real <ol> with its markers: the order is when the duties
   fall due, so a grid on the <li> — which drops the marker — would erase the
   only thing the numbering carries. */
.buyer-duty-list { margin: 0; padding-inline-start: 20px; font-size: 13px; line-height: 1.5; }
.buyer-duty-list li + li { margin-block-start: 10px; }
.buyer-duty-when { display: inline-block; margin-block-start: 3px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-secondary); font-size: 11.5px; font-weight: 700; }
.buyer-duty-list small { display: block; margin-block-start: 3px; color: var(--text-secondary); font-size: 11.5px; line-height: 1.45; }
.buyer-duties-note { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }

/* The source link rides inside the basis line on both screens that render a
   requirement, so it inherits their size and only weight, colour and the rule
   underneath mark it as the way out to the act itself. This sheet is in the
   base bundle, which is why the species entry can use the class too. */
.legal-source-link { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* The arrow is inline-block so the rule under the words stops before it: it
   marks where the link leaves our site and is not part of the act's name. */
.legal-source-link span { display: inline-block; margin-inline-start: 3px; }