style: give Country Explorer a cohesive design

country-explorer/src/components/App.css

@@ -1 +1,64 @@
-/* Main layout styles go here. */
+header {
+  padding: 0 0 var(--space-3);
+  max-width: 700px;
+}
+header::before {
+  content: '';
+  display: block;
+  width: 2.75rem;
+  height: 0.3rem;
+  border-radius: 1rem;
+  background: var(--accent);
+  margin-bottom: var(--space-3);
+}
+header p {
+  max-width: 540px;
+  font-size: 1.1rem;
+}
+main {
+  display: grid;
+  gap: var(--space-3);
+}
+main > section {
+  min-width: 0;
+  padding: clamp(1.25rem, 3vw, 2rem);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 1.25rem;
+  box-shadow: 0 4px 20px #183c3204;
+}
+section[aria-labelledby='controls-heading'] {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1.4fr;
+  gap: var(--space-3);
+}
+#controls-heading {
+  grid-column: 1 / -1;
+  margin: 0;
+}
+section > [role='status'] {
+  padding: var(--space-3);
+  border: 1px dashed #b8cabe;
+  border-radius: 0.75rem;
+  background: #f8faf7;
+}
+[role='alert'] {
+  padding: var(--space-3);
+  border: 1px solid #e0b6ae;
+  border-radius: 0.75rem;
+  color: #883b2c;
+  background: #fff7f4;
+}
+[role='alert'] button {
+  margin-top: var(--space-2);
+}
+footer {
+  padding: var(--space-4) 0 var(--space-2);
+  text-align: center;
+  font-size: 0.85rem;
+}
+@media (max-width: 680px) {
+  section[aria-labelledby='controls-heading'] {
+    grid-template-columns: 1fr;
+  }
+}

country-explorer/src/components/CountryCard.css

@@ -1,61 +1,78 @@
 .country-card {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-  margin: 1rem;
-  padding: clamp(1rem, 3vw, 2rem);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  background: var(--bg);
+  display: grid;
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
+  align-items: start;
+  gap: clamp(1.5rem, 4vw, 3rem);
+  padding-block: var(--space-1) var(--space-3);
   text-align: left;
 }
-
 .country-card__flag,
 .country-card__flag-placeholder {
   width: 100%;
-  max-width: 16rem;
-  align-self: flex-start;
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
 }
-
 .country-card__flag {
+  display: block;
   height: auto;
-  object-fit: contain;
 }
-
+.country-card__flag-placeholder {
+  aspect-ratio: 3 / 2;
+  background: #f4f6f3;
+  display: grid;
+  place-items: center;
+  padding: var(--space-2);
+}
 .country-card__content {
-  flex: 1 1 16rem;
   min-width: 0;
   overflow-wrap: anywhere;
 }
-
 .country-card__heading-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
-  margin: 0 0 1rem;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
 }
-
 .country-card__heading-row h3 {
   margin: 0;
-  color: var(--text-h);
-  font-size: 1.5rem;
-  line-height: 1.3;
+  font-size: clamp(1.6rem, 3vw, 2.25rem);
+  letter-spacing: -0.035em;
 }
-
 .country-card__details {
   display: grid;
-  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
   margin: 0;
 }
-
+.country-card__details > div {
+  border-top: 1px solid var(--border);
+  padding-top: 0.75rem;
+}
 .country-card__details dt {
-  color: var(--text-h);
-  font-weight: 600;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text);
 }
-
 .country-card__details dd {
   margin: 0.25rem 0 0;
+  font-weight: 600;
+  color: var(--text-h);
   font-variant-numeric: tabular-nums;
 }
+@media (max-width: 680px) {
+  .country-card {
+    grid-template-columns: 1fr;
+  }
+  .country-card__flag,
+  .country-card__flag-placeholder {
+    max-width: 22rem;
+    justify-self: center;
+  }
+}
+@media (max-width: 360px) {
+  .country-card__details {
+    grid-template-columns: 1fr;
+  }
+}

country-explorer/src/components/CountrySelector.css

@@ -1,24 +1,11 @@
 .country-selection {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin: 1rem;
-}
-
-.country-selection select {
+  flex-direction: column;
+  gap: var(--space-1);
   min-width: 0;
-  max-width: 100%;
-  padding: 0.5rem;
-  font: inherit;
-  color: var(--text-h);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
 }
-
-.country-selection select:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
+.country-selection label {
+  color: var(--text);
+  font-size: 0.8rem;
+  font-weight: 600;
 }

country-explorer/src/components/FavoriteButton.css

@@ -1,35 +1,19 @@
 .favorite-button {
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
-  flex-shrink: 0;
-  min-height: 44px;
-  padding: 0.5rem 1rem;
-  font: inherit;
-  color: var(--text-h);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  cursor: pointer;
+  justify-content: center;
+  gap: var(--space-1);
+  font-size: 0.875rem;
 }
-
-.favorite-button:hover {
-  background: var(--accent-bg);
-  border-color: var(--accent);
-}
-
-.favorite-button:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
-}
-
 .favorite-button[aria-pressed='true'] {
   color: var(--accent);
   border-color: var(--accent);
   background: var(--accent-bg);
 }
-
+.favorite-button[aria-pressed='true']:hover {
+  background: #d9ebdf;
+}
 .favorite-button__icon {
-  font-size: 1.2em;
+  font-size: 1.3em;
   line-height: 1;
 }

country-explorer/src/components/FavoritesList.css

@@ -1,30 +1,20 @@
 .favorites-list {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.5rem;
-  margin: 1rem;
+  gap: 0.75rem;
+  margin: 0;
   padding: 0;
   list-style: none;
 }
-
-.favorites-list button {
-  min-height: 44px;
-  padding: 0.5rem 1rem;
-  font: inherit;
-  color: var(--text-h);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  cursor: pointer;
+.favorites-list li {
+  min-width: 0;
+  max-width: 100%;
 }
-
-.favorites-list button:hover {
+.favorites-list button {
+  border-radius: 2rem;
   background: var(--accent-bg);
-  border-color: var(--accent);
-}
-
-.favorites-list button:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
+  border-color: var(--border);
+  color: var(--accent);
+  overflow-wrap: anywhere;
+  text-align: left;
 }

country-explorer/src/components/NavigationControls.css

@@ -1,34 +1,18 @@
 .country-navigation {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  gap: 1rem;
-  margin: 1rem;
+  gap: var(--space-2);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--border);
+  font-size: 0.875rem;
 }
-
-.country-navigation button {
-  min-height: 44px;
-  padding: 0.5rem 1rem;
-  font: inherit;
-  color: var(--text-h);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.country-navigation button:hover:not(:disabled) {
-  background: var(--accent-bg);
+.country-navigation button:not(:disabled) {
+  background: var(--accent);
   border-color: var(--accent);
+  color: white;
 }
-
-.country-navigation button:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
-}
-
-.country-navigation button:disabled {
-  opacity: 0.5;
-  cursor: default;
+.country-navigation button:hover:not(:disabled) {
+  background: #174a39;
 }

country-explorer/src/components/RegionFilter.css

@@ -1,24 +1,11 @@
 .region-filter {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin: 1rem;
-}
-
-.region-filter select {
+  flex-direction: column;
+  gap: var(--space-1);
   min-width: 0;
-  max-width: 100%;
-  padding: 0.5rem;
-  font: inherit;
-  color: var(--text-h);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
 }
-
-.region-filter select:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
+.region-filter label {
+  color: var(--text);
+  font-size: 0.8rem;
+  font-weight: 600;
 }

country-explorer/src/components/SortSelector.css

@@ -1,24 +1,11 @@
 .sort-selector {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin: 1rem;
-}
-
-.sort-selector select {
+  flex-direction: column;
+  gap: var(--space-1);
   min-width: 0;
-  max-width: 100%;
-  padding: 0.5rem;
-  font: inherit;
-  color: var(--text-h);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
 }
-
-.sort-selector select:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
+.sort-selector label {
+  color: var(--text);
+  font-size: 0.8rem;
+  font-weight: 600;
 }