/* Home ("Heute", SPEC 4.4). Wall/desktop landscape (>= 1024 x 600) and a portrait wall tablet: the page
   fills the viewport and never scrolls. These layouts set --home-fit: 1; the script then measures the
   side column after every render and steps its variable parts down ("+N weitere") until every card
   fits. Only when even that is not enough (a very large text size) does the side column scroll.
   Phones and other portrait screens: the blocks stacked, the page scrolls. */
@layer features {
  .home { display: grid; gap: var(--space-4); container: home / inline-size; }
  .home-greeting { font-size: var(--text-lg); font-weight: var(--weight-heavy); }
  .home-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  .home-side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
  .home-card { min-width: 0; }

  /* ---------------------------------------------------------------- day card */
  .day-card { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; }
  .day-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
  .day-heading { margin-right: auto; min-width: 0; }
  .day-title { font-size: var(--text-xl); }
  .day-date { font-size: var(--text-sm); }
  .day-switch { display: flex; align-items: center; gap: var(--space-2); }
  .day-body { position: relative; min-height: 0; }
  .day-body .empty { justify-items: start; }

  .allday-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .allday-item:not([data-color]) { --member-bg: var(--color-surface-2); --member-ink: var(--color-text); }
  /* Appointments are buttons (they open the event sheet): no button chrome, the card's own look. */
  button.allday-item, button.event { font: inherit; text-align: start; cursor: pointer; }
  button.allday-item { border: 0; min-height: var(--tap-min); }
  button.event { border-top: 0; border-right: 0; border-bottom: 0; width: 100%; }
  .allday-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-2) 0 var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--member-bg);
    color: var(--member-ink);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    max-width: 100%;
  }
  .allday-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* The timeline: an hour axis with absolutely placed events (positions as fractions from JS). */
  .timeline {
    position: relative;
    height: 560px;
    margin-left: 52px;
    border-left: 1px solid var(--color-line);
  }
  .timeline-hours li {
    position: absolute;
    left: -52px;
    right: 0;
    top: calc(var(--at, 0) * 100%);
    border-top: 1px dashed var(--color-line);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding-top: 2px;
  }
  /* An hour label the "Jetzt" label would cover keeps only its line (home/index.js hideHoursNearNow). */
  .timeline-hours li.near-now { color: transparent; }
  /* Events sit above the "Jetzt" line, so a running event is not struck through. */
  .timeline-events { position: absolute; inset: 0 0 0 var(--space-2); z-index: 1; }
  .timeline .event {
    position: absolute;
    top: calc(var(--top, 0) * 100%);
    height: max(30px, calc(var(--height, 0.05) * 100% - 2px));
    left: calc(var(--lane, 0) / var(--lanes, 1) * 100%);
    width: calc(100% / var(--lanes, 1) - 4px);
    overflow: hidden;
  }
  /* Member colours come from [data-color] (components layer); events for everyone stay neutral. */
  .event:not([data-color]) { --member-bg: var(--color-surface-2); --member-ink: var(--color-text); }
  .event {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: baseline;
    gap: 0 var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--member-ink);
    background: var(--member-bg);
    color: var(--member-ink);
    min-width: 0;
  }
  .event-time { font-size: var(--text-xs); font-weight: var(--weight-bold); }
  :root[data-device='wall'] .timeline .event-title { font-size: var(--text-md); }
  .event-title { font-weight: var(--weight-heavy); font-size: var(--text-sm); overflow-wrap: anywhere; min-width: 0; }
  .event-people { display: flex; gap: 2px; margin-left: auto; }
  .event-people .member-dot { min-width: 24px; height: 24px; font-size: var(--text-xs); }
  .timeline .event.short { flex-wrap: nowrap; }
  .timeline .event.short .event-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Past events get a dashed edge, never a lower opacity: the text keeps its full contrast. */
  .timeline .event.past { border-left-style: dashed; }
  /* A running event is outlined instead of being crossed by the "Jetzt" line. */
  .timeline .event.running { box-shadow: inset 0 0 0 2px var(--color-danger); }
  .now-line {
    position: absolute;
    z-index: 0;
    left: -6px;
    right: 0;
    top: calc(var(--at, 0) * 100%);
    border-top: 2px solid var(--color-danger);
    pointer-events: none;
  }
  .now-line::before {
    content: '';
    position: absolute;
    left: -5px;
    top: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-danger);
  }
  /* The label sits in the hour gutter on the left, where it cannot cover an event or a member chip. */
  .now-line span {
    position: absolute;
    left: -48px;
    width: 40px;
    top: -0.8em;
    line-height: 1.6;
    text-align: right;
    font-size: var(--text-xs);
    font-weight: var(--weight-heavy);
    color: var(--color-danger);
    background: var(--color-surface);
  }

  .agenda { display: grid; gap: var(--space-2); }

  .people-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: var(--space-3); overflow-x: auto; }
  .person-column { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
  .person-head { font-size: var(--text-sm); }
  .person-events { display: grid; gap: var(--space-2); }

  .day-footer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--color-line); }
  .next-box { flex: 1 1 260px; min-width: 0; }
  .next-list li { display: flex; gap: var(--space-2); min-width: 0; }
  .next-time { font-weight: var(--weight-bold); color: var(--color-text-muted); flex: none; }
  .next-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------------------------------------------------------------- side cards */
  .weather-card {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--color-text);
  }
  button.weather-card { cursor: pointer; }
  /* Inside the clipped side column the ring is drawn inside the card, so no edge is cut off. */
  .weather-card:focus-visible { outline-offset: -6px; }
  .weather-card.stale { color: var(--color-text-muted); }
  .weather-setup { grid-template-columns: 1fr; justify-items: start; }
  .weather-icon .icon { width: 48px; height: 48px; }
  .weather-temp { font-size: var(--text-2xl); font-weight: var(--weight-heavy); line-height: 1; }
  .weather-text { display: grid; gap: 2px; font-size: var(--text-sm); }
  .umbrella { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-bold); }
  .weather-big { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xl); font-weight: var(--weight-heavy); }
  .weather-big .icon { width: 56px; height: 56px; }
  .weather-chip.stale { color: var(--color-text-muted); }

  .task-row .check { min-height: var(--tap-min); }
  .waste-row .icon { color: var(--color-warning); }
  .card-more { display: flex; justify-content: flex-end; margin-top: var(--space-1); }
  /* "+N weitere" keeps its 48 px target but takes only a text line of room (the target reaches into the
     card's bottom padding). */
  .card-more > .more-link { margin-block: calc((var(--tap-min) - 1.5em) / -2); }
  .meal-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); align-items: baseline; }
  /* Long dish names and items wrap (with hyphens) instead of being cut by the fitted column. */
  .meal-list dd { margin: 0; font-weight: var(--weight-bold); overflow-wrap: anywhere; hyphens: auto; }
  .home-side .card { overflow-wrap: anywhere; }
  .meal-list .meal-row { display: contents; }
  .shopping-count { font-weight: var(--weight-bold); }
  .shopping-peek { display: grid; gap: 2px; margin-top: var(--space-1); color: var(--color-text-muted); }
  .shopping-peek li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shopping-peek li.pending { font-style: italic; }
  .note-card { background: var(--color-warning-soft); border-color: var(--color-warning); }
  .note-heading { font-weight: var(--weight-heavy); font-size: var(--text-lg); }
  .note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
  .photo-card { position: relative; margin: 0; padding: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-surface-2); }
  .photo-frame { width: 100%; height: 100%; object-fit: cover; }
  .photo-pause { position: absolute; right: var(--space-2); bottom: var(--space-2); background: var(--color-surface); box-shadow: 0 2px 8px var(--color-shadow); }
  .photo-pause:focus-visible { outline-offset: -4px; }
  .card-header > .card-add { margin-block: calc((var(--tap-min) - 1.5em) / -2); }
  .due-none .button { flex: none; }
  /* The prompt spans the side column and its text may wrap: it never runs out of its button. */
  .note-prompt-button { width: 100%; justify-content: flex-start; white-space: normal; text-align: start; }

  /* Checklist rows are links (with a chevron, not an empty checkbox circle). */
  .checklist-card { border-color: var(--color-accent); }
  .checklist-progress { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-1); }
  .checklist-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-min);
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--weight-bold);
  }
  .checklist-link .row-title { flex: 1 1 auto; min-width: 0; }
  .checklist-link .icon { color: var(--color-accent); }
  .checklist .icon-button { flex: none; }

  /* ---------------------------------------------------------------- quick add */
  .fab {
    position: fixed;
    z-index: 30;
    right: var(--space-4);
    bottom: calc(var(--bar-height) + var(--space-4) + env(safe-area-inset-bottom, 0px));
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: 0 8px 24px var(--color-shadow);
  }
  .fab .icon { width: 28px; height: 28px; }
  .member-toggle .member-dot { min-width: 24px; height: 24px; }
  .quick-added { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* ---------------------------------------------------------------- night (wall only) */
  .home-night {
    min-height: calc(100dvh - var(--header-height) - var(--space-10));
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-3);
    text-align: center;
  }
  .night-clock { font-size: calc(var(--text-display) * 2.2); font-weight: var(--weight-heavy); line-height: 1; }
  .night-date { font-size: var(--text-xl); color: var(--color-text-muted); }
  .night-next { font-size: var(--text-lg); max-width: 40ch; }
  .home.is-night .home-grid, .home.is-night .home-greeting, .home.is-night .fab { display: none; }
  .home-night { cursor: pointer; }
  .night-show-day { margin-top: var(--space-4); }
  /* The big clock is the night view: the header does not repeat time and date. */
  .app:has(.home.is-night) .header-time { display: none; }

  /* The side column's order: the wall note comes before meal and shopping (it is the wall's message). */
  .home-side .checklist-card { order: 1; }
  .home-side .weather-slot { order: 2; }
  .home-side .due-card { order: 3; }
  .home-side .note-card { order: 4; }
  .home-side .meal-card { order: 5; }
  .home-side .shopping-card { order: 6; }
  .home-side .photo-card { order: 7; }
  .home-side .note-prompt { order: 8; }

  /* ---------------------------------------------------------------- breakpoints */
  @media (min-width: 600px) {
    .home-greeting { display: none; }
    .fab { display: none; }
    /* Two columns; the full-width cards span both, so no void remains next to a short card. */
    .home-side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
    .home-side .checklist-card, .home-side .weather-slot, .home-side .due-card, .home-side .note-card, .home-side .photo-card,
    .home-side .note-prompt { grid-column: 1 / -1; }
  }

  @media (max-width: 599px) {
    .timeline { height: 480px; }
    .day-footer .button { width: 100%; }
    /* Room below the last card, so the fixed FAB never covers its links. */
    .home { padding-bottom: calc(64px + var(--space-6)); }
  }

  /* Wall and desktop landscape: the whole Home fits the viewport. */
  @media (min-width: 1024px) and (min-height: 600px) {
    .app-main:has(.home) { overflow: hidden; }
    .home { --home-fit: 1; height: 100%; grid-template-rows: minmax(0, 1fr); }
    .home-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); min-height: 0; height: 100%; }
    .day-card { min-height: 0; overflow: hidden; }
    .day-body { flex: 1 1 auto; display: flex; flex-direction: column; }
    .day-body > * { flex: 1 1 auto; }
    .timeline { height: auto; min-height: 0; }
    .agenda, .people-columns { overflow: auto; min-height: 0; }
    /* clip with a margin: a header button's focus ring (it reaches into the card padding) is not cut. */
    .home-side { grid-auto-rows: min-content; overflow: clip; overflow-clip-margin: var(--space-2); min-height: 0; gap: var(--space-3); }
    .home-side .card { padding: var(--space-3) var(--space-4); }
    .home-side .card-header { margin-bottom: var(--space-2); }
    /* A fixed height, part of the fit: the photo arrives after the column was measured (F1). */
    .photo-card { aspect-ratio: auto; min-height: 0; height: clamp(140px, 24dvh, 220px); }
    .photo-card .photo-frame { display: block; }
    /* A narrow side column (a 1024 px screen) or a larger text size: Essen and Einkauf stack instead of
       squeezing two cards side by side. */
    :root:is([data-text-scale='1.15'], [data-text-scale='1.3']) .home-side { grid-template-columns: minmax(0, 1fr); }
    @container home (max-width: 1060px) {
      .home-side { grid-template-columns: minmax(0, 1fr); }
    }
  }

  /* A portrait wall tablet (800 x 1280): the blocks stacked and fitted the same way, a larger photo frame. */
  @media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
    .photo-card { aspect-ratio: 3 / 2; }
  }
  @media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) and (min-height: 900px) {
    :root[data-device='wall'] .app:has(.home) { height: 100dvh; }
    :root[data-device='wall'] .app-main:has(.home) { display: flex; flex-direction: column; overflow: hidden; }
    :root[data-device='wall'] .app-main:has(.home) > .page { flex: 1 1 auto; min-height: 0; }
    :root[data-device='wall'] .home { --home-fit: 1; height: 100%; grid-template-rows: minmax(0, 1fr); }
    /* The side column takes what its cards need (up to 55 %), the day card the rest (at least 40 %). */
    :root[data-device='wall'] .home-grid { grid-template-rows: minmax(40%, 1fr) fit-content(55%); min-height: 0; height: 100%; }
    :root[data-device='wall'] .day-card { min-height: 0; overflow: hidden; }
    :root[data-device='wall'] .day-body { flex: 1 1 auto; display: flex; flex-direction: column; }
    :root[data-device='wall'] .day-body > * { flex: 1 1 auto; }
    :root[data-device='wall'] .timeline { height: auto; min-height: 0; }
    :root[data-device='wall'] .people-columns { overflow: auto; min-height: 0; }
    :root[data-device='wall'] .home-side { grid-auto-rows: min-content; overflow: clip; overflow-clip-margin: var(--space-2); min-height: 0; gap: var(--space-3); }
    :root[data-device='wall'] .home-side .card { padding: var(--space-3) var(--space-4); }
    :root[data-device='wall'] .photo-card { aspect-ratio: auto; min-height: 0; height: clamp(180px, 24dvh, 320px); }
  }

  /* Last resort when nothing more can be left out: the side column scrolls instead of cutting cards. */
  .home-side.overflowing, :root[data-device] .home-side.overflowing { overflow-y: auto; }
}