.pets-card { grid-column: 1 / -1; }
.pets-card #petsSummary { margin: 18px 0 0; color: var(--muted); }
.pets-workspace { min-width: 0; }
.jarvis-app[data-app-page="overblik"] .pets-workspace { display: none; }
.jarvis-app:not([data-app-page="overblik"]) .pets-overview-link { display: none; }
.pets-overview-link { justify-self: start; margin-top: 12px; }
.pets-toolbar, #petsPicker, .pets-form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pets-toolbar { justify-content: space-between; margin: 22px 0; }
.pets-card button, .pets-card input, .pets-card select, .pets-card textarea {
  min-height: 44px; padding: 10px 13px; border: 1px solid var(--card-border); border-radius: 12px;
  color: var(--text); background: var(--surface-raised); font: inherit;
}
.pets-card button { cursor: pointer; }
.pets-card button:hover { border-color: var(--accent); }
.pets-card button:disabled { opacity: .6; cursor: wait; }
.pets-card button[aria-pressed="true"], .pets-card button[type="submit"], #petAdd { background: var(--ui-selected); border-color: var(--ui-border); color: var(--ui-selected-text); }
.pets-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 18px; }
.pets-panel { min-width: 0; padding: 22px; background: var(--ui-raised); border: 1px solid var(--card-border); border-radius: 20px; box-shadow: var(--shadow); }
.pets-panel h3 { margin: 0 0 18px; font-size: 20px; }
.pet-photo { width: 100%; height: 240px; object-fit: cover; border-radius: 16px; margin-bottom: 18px; }
.pet-photo-placeholder { display: grid; place-items: center; height: 160px; font-size: 64px; background: #f0f5ef; border-radius: 16px; margin-bottom: 18px; }
.pet-details { display: grid; gap: 10px; font-size: 14px; margin: 16px 0; }
.pet-details div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--card-border); padding-bottom: 9px; }
.pet-details dd { overflow-wrap: anywhere; }
.pet-care { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; text-align: left; }
.pet-care span { display: block; }
.pet-care small { display: block; margin-top: 4px; color: var(--muted); }
.pet-reminder { padding: 14px 0; border-top: 1px solid var(--card-border); overflow-wrap: anywhere; }
.pet-reminder p { margin: 7px 0; font-size: 14px; white-space: pre-wrap; }
.pet-reminder time { color: var(--accent); font-size: 14px; }
.pet-reminder.overdue time { color: var(--critical); }
.pet-reminder-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pet-reminder-actions button { font-size: 12px; }
.pets-footnote { color: var(--muted); font-size: 12px; margin: 20px 0 0; }
#petsNotice:empty, #petFormNotice:empty, #petReminderNotice:empty { display: none; }
.pets-card dialog { color: var(--text); background: var(--card); border: 1px solid var(--card-border); border-radius: 22px; padding: 24px; width: min(540px, calc(100vw - 28px)); max-height: 90dvh; overflow-y: auto; }
.pets-card dialog::backdrop { background: rgb(20 35 30 / 40%); }
.pets-form { display: grid; gap: 14px; }
.pets-form h2 { margin: 0 0 6px; }
.pets-form label { display: grid; gap: 6px; font-size: 14px; }
.pets-form input, .pets-form textarea, .pets-form select { width: 100%; min-width: 0; }
.pets-form .pets-checkbox { display: flex; align-items: center; }
.pets-form .pets-checkbox input { width: 20px; }
.pets-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pets-form-actions { justify-content: flex-end; }
@media(max-width:1100px) { .pets-grid { grid-template-columns: 1fr 1fr; } .pets-panel:last-child { grid-column: 1 / -1; } }
@media(max-width:700px) { .pets-grid { grid-template-columns: minmax(0, 1fr); } .pets-panel { padding: 16px; } .pets-form-pair { grid-template-columns: 1fr; } }

.pet-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); flex-shrink: 0; }
.pet-photo-placeholder .pet-icon { width: 64px; height: 64px; }
.pet-care > span:first-of-type { flex: 1; }

.pet-chip summary { cursor: pointer; color: var(--accent); min-height: 44px; display: flex; align-items: center; justify-content: flex-end; text-decoration: underline; }
.pet-chip summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }
.pet-chip[open] summary { margin-bottom: 6px; }
.pet-chip span { display: block; overflow-wrap: anywhere; }
.pet-vet { padding: 14px 0; border-top: 1px solid var(--card-border); }
.pet-vet h4 { margin: 0 0 8px; font-size: 16px; }
.pet-vet p { margin: 6px 0; overflow-wrap: anywhere; font-size: 14px; }
.pet-vet-phone { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); }
.pets-vet-fields { margin: 0; padding: 12px; border: 1px solid var(--card-border); border-radius: 12px; display: grid; gap: 12px; min-width: 0; }
.pets-vet-fields legend { color: var(--muted); padding: 0 6px; }