/* CPetSitter base stylesheet (mobile-first). No inline styles are allowed. */

:root {
  --color-bg: #fafaf7;
  --color-surface: #ffffff;
  --color-text: #1f2328;
  --color-muted: #5b6168;
  --color-primary: #2f6f5e;
  --color-primary-contrast: #ffffff;
  --color-border: #e3e3dc;
  --color-danger: #b42318;
  --color-warning: #b54708;
  --color-success: #067647;
  --radius: 0.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-primary);
}

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: var(--space-2);
}

.skip-link:focus {
  left: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  z-index: 10;
}

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

.brand {
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
}

.site-main {
  flex: 1;
  padding-block: var(--space-5);
}

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-3);
  color: var(--color-muted);
}

.hero h1,
.error-page h1 {
  margin-top: 0;
}

.flash-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.flash {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-bottom: var(--space-2);
}

.flash--error,
.flash--danger {
  border-color: var(--color-danger);
}

.flash--warning {
  border-color: var(--color-warning);
}

.flash--success {
  border-color: var(--color-success);
}

/* --- Header navigation --------------------------------------------------- */

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-nav__form {
  margin: 0;
}

.site-nav__link--primary {
  font-weight: 600;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Notices, badges ----------------------------------------------------- */

.notice {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin-bottom: var(--space-4);
}

.notice--warning {
  border-color: var(--color-warning);
}

.badge {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: 999px;
  font-size: 0.8125rem;
  border: 1px solid currentColor;
}

.badge--success {
  color: var(--color-success);
}

.badge--warning {
  color: var(--color-warning);
}

/* --- Forms --------------------------------------------------------------- */

.auth-card {
  max-width: 28rem;
  margin-inline: auto;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.auth-card h1 {
  margin-top: 0;
}

.auth-links {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-2);
}

.field {
  margin-bottom: var(--space-3);
}

.field__label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.field__input {
  width: 100%;
  min-height: 2.75rem; /* comfortable touch target */
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.field__input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.field--invalid .field__input {
  border-color: var(--color-danger);
}

.field__hint {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.field__errors {
  list-style: none;
  padding: 0;
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  color: var(--color-danger);
}

.field--checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.field__label--inline {
  display: inline;
  margin: 0;
  font-weight: 400;
}

.field__checkbox {
  width: 1.25rem;
  height: 1.25rem;
}

.field-row {
  display: grid;
  gap: 0 var(--space-3);
}

.password-input {
  display: flex;
  gap: var(--space-2);
}

.password-input .field__input {
  flex: 1;
}

.password-input__toggle {
  flex: none;
  padding-inline: var(--space-3);
  font: inherit;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.button {
  display: inline-block;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.button--primary {
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.button--block {
  width: 100%;
}

.inline-form {
  margin-bottom: var(--space-4);
}

.account {
  max-width: 40rem;
}

.account-summary dt {
  font-weight: 600;
}

.account-summary dd {
  margin: 0 0 var(--space-3);
}

@media (min-width: 40rem) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Client area (Phase 2): profile, contacts, pets ---------------------- */

.muted {
  color: var(--color-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.preserve-lines {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.area-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.area-nav__link {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  text-decoration: none;
}

.area-nav__link--active {
  font-weight: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.client-page {
  max-width: 44rem;
}

.client-page--wide {
  max-width: none;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.page-header h1 {
  margin: 0;
}

.page-header__actions,
.card__actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.form-section {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-width: 0;
}

.form-section legend {
  padding-inline: var(--space-1);
  font-weight: 700;
}

textarea.field__input {
  min-height: 4.5rem;
  resize: vertical;
}

.button--small {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  font-size: 0.9375rem;
}

.inline-action {
  display: inline;
  margin: 0;
}

.badge--muted {
  color: var(--color-muted);
}

.empty-state {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

.card-list,
.pet-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.card--inactive,
.pet-card--inactive {
  opacity: 0.75;
}

.card__title {
  margin: 0;
  font-size: 1.125rem;
}

.details {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.details dt {
  font-weight: 600;
}

.details dd {
  margin: 0;
}

.details--compact {
  font-size: 0.9375rem;
}

.pet-card__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.pet-card__link:hover,
.pet-card__link:focus-visible {
  border-color: var(--color-primary);
}

.pet-card__photo {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 50%;
}

.pet-card__photo--empty,
.pet-photo__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-primary-contrast);
  background: var(--color-primary);
}

.pet-card__info {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.pet-card__name {
  font-weight: 700;
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.pet-card__meta {
  color: var(--color-muted);
}

.inactive-section summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.pet-detail__layout {
  display: grid;
  gap: var(--space-4);
}

.pet-detail__sections {
  display: grid;
  gap: var(--space-3);
}

.pet-detail__sections section {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.pet-detail__sections h2 {
  margin-top: 0;
  font-size: 1.125rem;
}

.pet-photo {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.pet-photo__image,
.pet-photo__empty {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.pet-photo__empty {
  font-size: 4rem;
}

@media (min-width: 40rem) {
  .pet-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .pet-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pet-detail__layout {
    grid-template-columns: 20rem 1fr;
  }
}

/* --- Catalogue (Phase 3): public listing and administration ---------------- */

.site-nav {
  flex-wrap: wrap;
}

.section-gap {
  margin-top: var(--space-5);
}

.price {
  font-weight: 700;
  color: var(--color-primary);
}

.catalog-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.chip-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

/* Wide tables scroll inside their box on small screens (no page overflow). */
.table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (min-width: 40rem) {
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .catalog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Pet sitter schedule (Phase 4) ------------------------------------------ */

.checkbox-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1) var(--space-3);
}

.data-table__row--muted {
  color: var(--color-muted);
}

.agenda-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
}

.agenda-filter .field {
  margin-bottom: 0;
}

.agenda {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.agenda__day {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.agenda__day--today {
  border-color: var(--color-primary);
}

.agenda__title {
  font-size: 1.0625rem;
  margin: 0 0 var(--space-2);
}

.agenda__blocks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.slot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-2);
}

.slot {
  display: flex;
  flex-direction: column;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.slot__time {
  font-weight: 600;
}

.slot__meta {
  font-size: 0.8125rem;
}

.slot--free {
  border-color: var(--color-success);
}

.slot--free .slot__meta {
  color: var(--color-success);
}

.slot--blocked {
  border-style: dashed;
  color: var(--color-warning);
}

.slot--past {
  color: var(--color-muted);
  background: var(--color-bg);
}

@media (min-width: 40rem) {
  .checkbox-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Bookings (Phase 5) ------------------------------------------------------ */

.slot--full {
  color: var(--color-muted);
  border-style: dotted;
}

/* Slot picker: the whole card is the radio's label (large touch target). */
.slot-picker .slot {
  position: relative;
  padding: 0;
}

.slot-picker__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.slot-picker__label {
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  border-radius: var(--radius);
  cursor: pointer;
}

.slot-picker__input:checked + .slot-picker__label {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.slot-picker__input:checked + .slot-picker__label .slot__meta {
  color: inherit;
}

.slot-picker__input:focus-visible + .slot-picker__label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.booking-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

/* --- Pet sitter operations (Phase 7) ----------------------------------------- */

.badge--info {
  color: var(--color-primary);
}

.badge--progress {
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.stat-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.stat {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.stat__value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat__label {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.next-visit {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.next-visit h2 {
  margin-top: 0;
  font-size: 1.125rem;
}

.next-visit__time,
.visit-card__time {
  margin: 0;
  font-weight: 600;
}

.visit-card--in_progress {
  border-color: var(--color-primary);
  border-width: 2px;
}

.visit-card--cancelled,
.visit-card--completed {
  opacity: 0.8;
}

.op-section {
  margin-bottom: var(--space-4);
}

.op-section--actions {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.report-grid {
  display: grid;
  gap: 0 var(--space-3);
}

.plain-list {
  margin: 0;
  padding-left: var(--space-4);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.agenda__visits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  display: grid;
  gap: var(--space-1);
}

.agenda-visit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-left: 4px solid var(--color-border);
}

.agenda-visit--scheduled {
  border-left-color: var(--color-primary);
}

.agenda-visit--in_progress {
  border-left-color: var(--color-primary);
  background: var(--color-bg);
}

.agenda-visit--completed {
  border-left-color: var(--color-success);
}

.agenda-visit--awaiting_payment {
  border-left-color: var(--color-warning);
}

@media (min-width: 40rem) {
  .stat-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .report-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .button--block.button--primary {
    width: auto;
  }
}

/* --- Client dashboard (Phase 8) ----------------------------------------------- */

.badge--danger {
  color: var(--color-danger);
}

.dashboard-section {
  margin-bottom: var(--space-4);
}

.dashboard-section h2 {
  font-size: 1.25rem;
}

.dashboard-grid {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dashboard-grid .dashboard-section {
  margin: 0;
}

.dashboard-grid h2 {
  margin-top: 0;
}

.action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.action-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius);
}

.action-item--soon,
.action-item--attention {
  border-left-color: var(--color-primary);
}

.client-booking__when {
  margin: 0;
  font-weight: 600;
}

.client-booking--in_progress {
  border-color: var(--color-primary);
  border-width: 2px;
}

.client-booking--cancelled,
.client-booking--payment_expired {
  opacity: 0.8;
}

.dashboard-pets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  display: grid;
  gap: var(--space-2);
}

.dashboard-pet {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dashboard-pet__photo {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

.dashboard-pet__photo--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.dashboard-pet__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: grid;
  gap: var(--space-1);
}

.checklist__item::before {
  display: inline-block;
  width: 1.25rem;
  font-weight: 700;
}

.checklist__item--ok::before {
  content: "\2713";
  color: var(--color-success);
}

.checklist__item--missing::before {
  content: "!";
  color: var(--color-danger);
}

.checklist__item--optional::before {
  content: "\2022";
  color: var(--color-warning);
}

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.tab-nav__link {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  background: var(--color-surface);
}

.tab-nav__link--active {
  font-weight: 600;
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

@media (min-width: 48rem) {
  .dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Phase 9: visit tracking ------------------------------------------------ */
.tracking {
  margin: var(--space-3) 0;
}

.tracking--sitter {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.tracking__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tracking__position .details dd {
  overflow-wrap: anywhere;
}

/* --- Phase 10: chat ----------------------------------------------------------- */
.chat {
  margin: var(--space-3) 0;
}

.chat__messages {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.chat__messages:empty {
  display: none;
}

.chat-msg {
  max-width: 85%;
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.chat-msg--mine {
  margin-left: auto;
  border-color: var(--color-primary);
}

.chat-msg__meta {
  margin: 0 0 var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.chat-msg__body {
  margin: 0;
  /* Text only: keep the sender's line breaks, never overflow the bubble. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-msg__state {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.chat-msg--failed {
  border-color: var(--color-danger);
}

.chat-msg--failed .chat-msg__state {
  color: var(--color-danger);
}

.chat-msg__retry {
  margin-left: var(--space-2);
}

.chat__form textarea {
  resize: vertical;
}

.chat__privacy {
  font-size: 0.875rem;
}

.chat-badge {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--color-danger);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
}

/* --- Quotes (Phase 11) ------------------------------------------------------ */

.quote-item {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
}

.quote-item legend {
  font-weight: 600;
}

/* --- Notifications (Phase 12) ---------------------------------------------- */

.notification-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.notification-badge {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0 var(--space-1);
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5rem;
  text-align: center;
}

.notification-badge[hidden] {
  display: none;
}

.notification-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.notification-filter__link {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.notification-filter__link--active {
  border-color: var(--color-primary);
  font-weight: 600;
}

.notification--unread {
  border-left: 4px solid var(--color-primary);
}

.notification__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.notification__body {
  margin: 0;
  overflow-wrap: anywhere;
}

/* --- Privacy and administration (Phase 13) --------------------------------- */

.button--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.privacy-document__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.admin-page .data-table,
.privacy-page .card-list {
  width: 100%;
}

.admin-page .data-table {
  display: block;
  overflow-x: auto;
}

/* --- Package purchase (PKG-2D1): one time per date, review, purchase detail ---- */

.package-day-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.package-day {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.package-day--invalid {
  border-color: var(--color-danger);
}

.package-day__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-weight: 600;
}

.package-day__weekday {
  min-width: 2.5rem;
  color: var(--color-muted);
  font-weight: 400;
  text-transform: capitalize;
}

/* Large touch target for the time choice on phones. */
.package-day__select {
  width: 100%;
  min-height: 2.75rem;
}

.package-day__time {
  font-variant-numeric: tabular-nums;
}

.package-day__empty,
.package-day__error {
  margin: 0;
}

.package-day__empty {
  color: var(--color-warning);
}

.apply-all {
  margin-bottom: var(--space-3);
}

.apply-all[hidden] {
  display: none;
}

.apply-all__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.apply-all__row .field__input {
  flex: 1 1 8rem;
  width: auto;
}

.apply-all__status:empty {
  display: none;
}

.package-tag {
  font-weight: 600;
}

.package-total {
  font-size: 1.125rem;
}

@media (min-width: 40rem) {
  .package-day {
    grid-template-columns: minmax(9rem, max-content) 1fr;
  }

  .package-day__select {
    max-width: 14rem;
  }

  .package-day__error,
  .package-day__empty {
    grid-column: 2;
  }
}

/* --- Pet sitter settings hub (SITTER-1): cards, mobile-first ----------------- */

.settings-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.settings-section {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  scroll-margin-top: var(--space-3);
}

.settings-section h2 {
  margin-top: 0;
}

.settings-days,
.settings-windows,
.settings-capacity,
.settings-links,
.settings-soon {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.settings-day {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.settings-day__name {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
}

.settings-day--off .settings-day__name {
  color: var(--color-muted);
}

.settings-window,
.settings-capacity__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.settings-window__time {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Actions wrap to their own line on phones; buttons keep a comfortable touch size. */
.settings-window__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
}

.settings-block__period {
  margin: 0;
  font-weight: 600;
}

.settings-soon__item {
  color: var(--color-muted);
}

@media (min-width: 40rem) {
  .settings-window__actions {
    width: auto;
    margin-left: auto;
  }

  .settings-capacity__item .button {
    margin-left: auto;
  }
}

/* --- Pet sitter operational agenda (SITTER-2): grouped cards, mobile-first ---- */

.agenda-section {
  margin-bottom: var(--space-4);
}

.agenda-group {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 1rem;
}

.agenda-group--warning {
  color: var(--color-warning);
}

.agenda-day-picker .button {
  min-height: 2.75rem;
}

/* SITTER-3A: block kinds. */
.block-hours[hidden] {
  display: none;
}

.block-kind--vacation,
.block-kind--holiday {
  font-weight: 600;
}

/* SITTER-3A2: national holidays (informative; OFF only by the sitter's choice). */
.holiday-tag {
  font-weight: 600;
}

.holiday-tag--work {
  color: var(--color-success);
}

.holiday-tag--off {
  color: var(--color-warning);
}

/* SITTER-3A3B: holiday choice (WORK / OFF / SPECIAL_HOURS) */
.holiday-choice__modes {
  border: 0;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.holiday-choice__special {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}

.holiday-choice__special[hidden] {
  display: none;
}

.settings-holiday__date,
.settings-holiday__name {
  margin: 0;
}

.agenda__holiday {
  margin: 0 0 var(--space-2);
}

/* PROFILE-1: portfolio (mobile first: 1 column, more on wider screens; no JS) */
.portfolio-grid,
.portfolio-manage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.portfolio-figure {
  margin: 0;
}

.portfolio-figure__image,
.portfolio-manage__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.portfolio-figure__caption {
  margin-top: 0.25rem;
  font-size: 0.9rem;
}

.portfolio-manage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (min-width: 40em) {
  .portfolio-grid,
  .portfolio-manage {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* REVIEWS-1: verified reviews (mobile first; no JS) */
.review-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.review__meta,
.review__comment,
.review__actions {
  margin: 0;
}

.review__comment {
  overflow-wrap: anywhere;
}

.review-stars {
  color: var(--color-warning);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.review-summary__average {
  font-size: 1.25rem;
}

.rating-options {
  border: 0;
  margin: 0 0 var(--space-3);
  padding: 0;
}

/* CLIENT-UX4: favorite action (text state, wraps on small screens) */
.favorite-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
}

.favorite-form__state {
  font-weight: 600;
}

/* CLIENT-UX3: booking from the profile (slot links wrap on small screens) */
.slot-links {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.slot-tag--link {
  display: inline-block;
  min-width: 3.5rem;
  min-height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  text-decoration: none;
}

.slot-tag--link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sitter-booking__group {
  margin: var(--space-2) 0 var(--space-1);
  font-size: 1rem;
}

.booking-summary__line {
  margin: 0 0 var(--space-1);
  overflow-wrap: anywhere;
}

.booking-choices {
  margin: var(--space-2) 0;
}

.booking-choices summary {
  cursor: pointer;
  font-weight: 600;
}

/* NOTIFY-2: one card per notification type on the preferences page */
.preference-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.preference-item__title {
  margin: 0;
  font-size: 1rem;
}

.preference-item__description,
.preference-item__channel {
  margin: var(--space-1) 0;
}

/* REVIEWS-2: the pet sitter's response, set apart from the review (indent + rule) */
.review__response {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius);
}

.review__response-label,
.review__response-body {
  margin: 0;
}

.review__response-body {
  overflow-wrap: anywhere;
}

.review__respond {
  margin-top: var(--space-2);
}

.review__respond summary {
  cursor: pointer;
  font-weight: 600;
}

/* GEO-UI: status of the client's address location (text + icon, never colour alone) */
.location-status__title {
  margin: 0 0 var(--space-2);
  font-size: 1.125rem;
}

.location-status__state {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-2);
  border-left: 4px solid var(--color-border);
}

.location-status--located .location-status__state {
  border-left-color: var(--color-primary);
}

.location-status--pending .location-status__state,
.location-status--stale .location-status__state {
  border-left-color: var(--color-danger);
}

.location-status__icon {
  display: inline-block;
  min-width: 1.25em;
  font-weight: 700;
  text-align: center;
}

/* CLIENT-UX2: discovery refinements (one column on phones, a compact grid when wider) */
.discovery-filters {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) 0 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: 0 var(--space-3);
  min-width: 0;
}

.discovery-filters legend {
  padding: 0;
  font-weight: 700;
}

.discovery-filters__checks {
  display: grid;
  gap: var(--space-1);
  align-content: center;
}

.discovery-count {
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

@media (min-width: 40rem) {
  .discovery-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .discovery-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* CLIENT-UX: pet sitter discovery (mobile first: image above, side by side when wider) */
.discovery-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.discovery-card {
  grid-template-columns: 1fr;
}

.discovery-card__image,
.discovery-card__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}

.discovery-card__image {
  display: block;
  object-fit: cover;
}

.discovery-card__placeholder {
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.discovery-card__name,
.discovery-card__bio,
.discovery-card__slots {
  margin: 0;
}

.discovery-card__bio {
  overflow-wrap: anywhere;
}

.discovery-card__body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.chip--active {
  font-weight: 600;
  border-color: var(--color-primary);
}

.slot-tag {
  display: inline-block;
  margin: 0 var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

@media (min-width: 40em) {
  .discovery-card {
    grid-template-columns: 10rem 1fr;
    align-items: start;
  }
}