style(settings): widen Doctor-Report export card to full-row on md+

Doctor-report is the most user-facing export — give it its own row above
the 4-card 2×2 grid so it reads as the primary action. Mobile keeps the
single-column stack since every card is already full-width there.

src/components/settings/export-section.tsx

@@ -105,6 +105,8 @@ interface ExportCardShellProps {
   children?: React.ReactNode;
   /** Footer slot — typically the "Download" button + status text. */
   footer: React.ReactNode;
+  /** Extra grid-position classes applied to the outer card div. */
+  outerClassName?: string;
 }
 
 function ExportCardShell({
@@ -115,11 +117,12 @@ function ExportCardShell({
   format,
   children,
   footer,
+  outerClassName,
 }: ExportCardShellProps) {
   return (
     <div
       data-testid={testId}
-      className="bg-card border-border flex h-full flex-col rounded-xl border p-5"
+      className={`bg-card border-border flex h-full flex-col rounded-xl border p-5${outerClassName ? ` ${outerClassName}` : ""}`}
     >
       <div className="flex items-start justify-between gap-3">
         <div className="flex items-center gap-2">
@@ -208,6 +211,7 @@ function DoctorReportCard() {
       title={t("settings.sections.export.cards.doctorReport.title")}
       description={t("settings.sections.export.cards.doctorReport.description")}
       format="PDF"
+      outerClassName="md:col-span-2"
       footer={
         <Button
           data-testid="export-action-doctor-report"