/* The people's services: the canteens, the Health Service and the tool depots.
   Only the shared colour tokens are used. The register of the jobs' pages:
   heavy rules with a red lead over each card, the functionary drawn beside
   the text as in the game, the row served now marked with a gold edge. */

.services-mine { font-weight: 650; max-width: var(--measure); }

/* The overview: one card per service. */
.services-cards { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.services-card { border-top: 6px solid var(--ink); padding-top: 0.75rem; position: relative; }
.services-card::before { content: ''; position: absolute; top: -6px; left: 0; width: 4rem; height: 6px; background: var(--civic); }
.services-card__name { margin: 0 0 0.5rem; font-size: 1.4rem; font-weight: 850; font-stretch: 112%; text-transform: uppercase; }
.services-card__facts { font-size: 0.9rem; color: var(--ink-soft); }

/* The text beside the functionary. */
.services-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2rem; align-items: start; margin: 2rem 0; }
@media (max-width: 40rem) { .services-split { grid-template-columns: minmax(0, 1fr); } }
.services-npc { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: flex-end; max-width: 9rem; }
.services-npc figcaption { flex-basis: 100%; font-size: 0.85rem; color: var(--ink-soft); }
.services-npc__skin { width: 4rem; }
.services-npc__skin.npc-skin--back { width: 3rem; }

/* Tables: the dish served now, and the citizen's own trade. */
.services-table th, .services-table td { vertical-align: top; }
.services-table__now th, .services-table__now td { font-weight: 700; }
.services-table__now th { border-left: 4px solid var(--gold); padding-left: 0.5rem; }

/* The places, by name only. */
.services-places { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.35rem; }
.services-places li { border-bottom: 1px solid var(--rule); padding: 0.35rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
.services-places__name { font-weight: 650; }
.services-count { font-size: 0.9rem; font-stretch: 87.5%; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }