/*
  "Heute": the start page of the mock, the visual reference screen of the app. The card frame, head, dot and rows
  come from shopping.css ("hw-today-card", "hw-today-row"); this adds the date, the category colours, the time
  column, the meal pictures, the suggestion, "Alle anzeigen", the round checks and the compact install hint. The
  entry is the page skeleton's dock.
*/

.hw-today-date {
  margin: 0;
  font-size: 13px;
  color: var(--bsft-color-muted);
}

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

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

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

.hw-today-chores .hw-today-row.is-done .hw-today-text b {
  text-decoration: line-through;
  color: var(--bsft-color-muted);
}

.hw-today-card .hw-card-head {
  margin-bottom: 2px;
}

.hw-today-time {
  width: 46px;
  flex: none;
  font-size: 13px;
  color: var(--bsft-color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A clock time sits in the mono face like the mock's "17:00"; "Tag", "Abend" and weekdays stay in the text face. */
.hw-today-time.is-clock {
  font-family: var(--hw-font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.hw-today-text {
  flex: 1;
  min-width: 0;
  display: block;
  text-align: left;
}

.hw-today-text b {
  display: block;
  font-weight: 700;
}

.hw-today-text small {
  display: block;
  font-size: 13px;
  color: var(--bsft-color-muted);
}

button.hw-today-text {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  cursor: pointer;
}

button.hw-today-text:disabled {
  cursor: default;
}

.hw-today-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
  font-size: 15px;
}

.hw-today-link {
  color: inherit;
  text-decoration: none;
}

.hw-today-link:hover .hw-today-text b {
  color: var(--bsft-color-primary);
}

.hw-today-sub {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--bsft-color-border);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bsft-color-muted);
}

.hw-today-sub + .hw-today-row {
  padding-top: 4px;
}

.hw-today-card .hw-hint + .hw-today-row {
  margin-top: 4px;
}

.hw-today-card > .hw-cal-link {
  margin-top: 4px;
  padding-left: 0;
}

.hw-today-suggest {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--hw-meal-soft);
}

.hw-today-suggest .hw-today-text small {
  font-size: 12px;
}

/* The dashed row of the meals still free, inside the card. */
.hw-today-card > .hw-today-free {
  margin-top: 4px;
  padding-inline: 0;
}

.hw-today-eaten {
  flex: none;
  gap: 4px;
}

.hw-today-eaten .hw-icon {
  width: 14px;
  height: 14px;
}

.hw-today-all {
  margin-top: 2px;
  padding-inline: 0;
  font-size: 13.5px;
}

.hw-today-chores {
  --hw-check-c: var(--hw-house);
}

.hw-check-button {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px -10px -6px 0;
}

/* The round check is the only mark: the icon button lends its target and focus ring, not its tile. */
.hw-check-button,
.hw-check-button:hover:not(:disabled),
.hw-check-button[aria-pressed="true"],
.hw-check-button[aria-pressed="true"]:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
}

.hw-check-button .hw-check-round .hw-icon {
  width: 14px;
  height: 14px;
}

/* The install hint on "Heute": one quiet line under the cards. */
.hw-install-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--bsft-color-border);
  border-radius: 14px;
  background: var(--bsft-color-surface);
}

.hw-install-compact .hw-install-mark {
  flex: none;
  border-radius: 7px;
}

.hw-install-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.hw-today-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

/* --- "Karten anordnen" ------------------------------------------------------------ */

.hw-today-arrange .hw-order-buttons {
  align-items: center;
}

.hw-today-arrange .hw-switch {
  margin-right: 4px;
}

.hw-today-arrange-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

.hw-today-arrange-name small {
  color: var(--bsft-color-muted);
  font-size: 13px;
}

.hw-today-arrange-name.is-hidden b {
  color: var(--bsft-color-muted);
}

.hw-today-all-hidden {
  margin-bottom: 12px;
}