/*
  Visits after the approved mock (docs/mockup/hauswerk-prototyp.html, "Haus" toolbar chip and the
  "Haushalt heute" card): the visits page, the visit cards and the progress on the start page. Built on
  the tokens of hauswerk.css, so light and dark follow the theme without rules of their own.
*/

/* --- house toolbar ------------------------------------------------------------------ */

.hw-visit-link {
  min-height: 32px;
  margin-left: auto;
  text-decoration: none;
  background: var(--hw-house-soft);
  color: var(--hw-house);
  border-color: transparent;
  font-weight: 700;
}

/* --- visits page -------------------------------------------------------------------- */

.hw-visits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.hw-visit-sentence {
  margin: 4px 0 0;
  font-size: 15px;
}

.hw-visit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 6px;
}

.hw-chip.is-today {
  background: var(--hw-house-soft);
  color: var(--hw-house);
  border-color: transparent;
}

.hw-chip.is-done {
  background: var(--bsft-color-success-surface);
  color: var(--bsft-color-success);
  border-color: transparent;
}

.hw-visit.is-cancelled .hw-card-title {
  text-decoration: line-through;
  color: var(--bsft-color-muted);
}

.hw-visit-room {
  margin: 12px 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bsft-color-muted);
}

.hw-visit-chores {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.hw-visit-chore {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px 0;
}

.hw-visit-chore + .hw-visit-chore {
  border-top: 1px solid var(--bsft-color-border);
}

.hw-visit-chore-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.hw-visit-chore-title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* A chore row opens its sheet as one wide tap target; the feedback stays beside it. */
.hw-visit-chore-main {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

button.hw-visit-chore-main {
  cursor: pointer;
}

.hw-visit-more {
  margin-left: auto;
}

.hw-chip.is-family {
  background: var(--hw-accent-soft);
  color: var(--bsft-color-primary);
  border-color: transparent;
}

.hw-visit-pause {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.hw-visit-pause small {
  color: var(--bsft-color-muted);
}

.hw-handover-lines {
  list-style: none;
  margin: 12px 0;
  padding: 0;
}

.hw-handover-line {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
}

.hw-handover-line + .hw-handover-line {
  border-top: 1px solid var(--bsft-color-border);
}

.hw-handover-line.is-dropped .hw-handover-title {
  text-decoration: line-through;
  color: var(--bsft-color-muted);
}

.hw-handover-title {
  margin: 0;
}

.hw-handover-timing {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--bsft-color-muted);
}

.hw-visit-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--bsft-color-border);
}

/* The schedule's links keep their words on one line and wrap as a whole on narrow phones. */
.hw-visit-schedule-actions {
  flex-wrap: wrap;
  justify-content: space-between;
}

.hw-visit-schedule-actions > * {
  flex: none;
}

.hw-visit-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (min-width: 900px) {
  .hw-visits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .hw-visits > .hw-hint {
    grid-column: 1 / -1;
  }
}

/* --- "Haushalt heute" ----------------------------------------------------------------- */

.hw-today-visit {
  display: block;
}

.hw-today-visit-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hw-today-house .hw-today-dot {
  background: var(--hw-house);
}

.hw-progress {
  height: 6px;
  margin: 8px 0 4px;
  border-radius: 999px;
  background: var(--hw-surface-2);
  overflow: hidden;
}

.hw-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--hw-house);
}

.hw-today-visit-sub {
  color: var(--bsft-color-muted);
}