/* Kalender (SPEC 4.5): toolbar, member filter, month table, week columns, list, sheets and the import.
   The calendar is a size container: the week and the month follow the width the page really has
   (a wall tablet with the navigation rail is narrower than its viewport).
   Phones: the month cells show coloured dots instead of titles (the cell's label names the people);
   the week is a list of days. Hover only inside the fine-pointer query at the end. */
@layer features {
  .calendar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; container: calendar / inline-size; }
  .cal-header { margin-bottom: 0; }

  .cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
  }
  .cal-nav { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 280px; }
  .cal-period {
    font-size: var(--text-lg);
    min-width: 0;
    flex: 0 1 auto;
    overflow-wrap: anywhere;
  }
  .cal-period:focus { outline: none; }
  .cal-period:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

  .member-filter { align-items: center; }
  .cal-toolbar .member-filter { flex: 0 1 auto; min-width: 0; margin-left: auto; }
  .member-filter .chip-row-items { display: contents; }
  .member-toggle .member-dot { min-width: 24px; height: 24px; }

  .cal-body { min-width: 0; }
  .cal-body[aria-busy='true'] .cal-month, .cal-body[aria-busy='true'] .cal-week { cursor: progress; }
  .cal-footer { display: none; }

  /* ---------------------------------------------------------------- month */
  .cal-month {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: var(--space-2);
  }
  .cal-month th {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    text-align: left;
    padding: 0 var(--space-2);
  }
  .cal-cell { padding: 0; vertical-align: top; }
  .cal-day {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    min-height: 104px;
    padding: var(--space-1) var(--space-2) var(--space-2);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
    overflow: hidden;
  }
  /* The wall: fitMonth() shares the height below the toolbar among the rows (no scrolling). */
  :root[data-device='wall'] .cal-day { min-height: var(--cal-row, 118px); }
  .cal-cell.outside .cal-day { background: var(--color-surface-2); color: var(--color-text-muted); }
  .cal-cell.today .cal-day { border: 2px solid var(--color-accent); }
  .cal-day-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); min-width: 0; }
  .cal-date { font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; }
  .cal-more-count { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); }
  .cal-more-count:empty { display: none; }
  .cal-cell.today .cal-date {
    align-self: flex-start;
    min-width: 1.8em;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-on-accent);
    text-align: center;
  }
  .cal-chips { display: grid; gap: 2px; min-width: 0; }
  .cal-chip:not([data-color]) { --member-bg: var(--color-surface-2); --member-ink: var(--color-text); }
  .cal-chip {
    display: block;
    min-width: 0;
    padding: 0 var(--space-1);
    border-radius: 4px;
    border-left: 3px solid var(--member-ink);
    background: var(--member-bg);
    color: var(--member-ink);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The person's short label before the title: colour is never the only signal. */
  .cal-chip-who { font-weight: var(--weight-heavy); margin-right: var(--space-1); }

  /* ---------------------------------------------------------------- events (week, list, day sheet) */
  .cal-list { display: grid; gap: var(--space-2); }
  .cal-event:not([data-color]) { --member-bg: var(--color-surface-2); --member-ink: var(--color-text); }
  .cal-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'time people' 'title people' 'meta people';
    align-items: center;
    gap: 0 var(--space-2);
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-left: 4px solid var(--member-ink);
    border-radius: var(--radius-sm);
    background: var(--member-bg);
    color: var(--member-ink);
    text-align: left;
  }
  .cal-event-time { grid-area: time; font-size: var(--text-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
  .cal-event-title { grid-area: title; font-weight: var(--weight-heavy); overflow-wrap: break-word; hyphens: auto; }
  .cal-event-meta { grid-area: meta; font-size: var(--text-sm); overflow-wrap: anywhere; }
  .cal-event-meta:empty { display: none; }
  .cal-event-people { grid-area: people; display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }

  /* ---------------------------------------------------------------- week */
  .cal-week { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
  .cal-weekday {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    min-width: 0;
  }
  .cal-weekday.today { border: 2px solid var(--color-accent); }
  .cal-weekday h3 { font-size: var(--text-md); }
  .cal-weekday-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    width: 100%;
    min-height: var(--tap-min);
    padding: 0 var(--space-1);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    text-align: left;
  }
  .cal-weekday-name { font-weight: var(--weight-heavy); }
  .cal-weekday-date { color: var(--color-text-muted); font-size: var(--text-sm); white-space: nowrap; }
  .cal-weekday.today .cal-weekday-name { color: var(--color-accent); }
  .cal-today-badge {
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
  }
  .cal-free { padding: 0 var(--space-1); }

  /* ---------------------------------------------------------------- list */
  .cal-agenda { display: grid; gap: var(--space-5); }
  .cal-agenda-day { display: grid; gap: var(--space-2); }
  .cal-agenda-day h3 { font-size: var(--text-md); }
  .cal-more { justify-content: center; }
  .cal-more .button { max-width: 100%; white-space: normal; text-align: center; }
  .cal-empty .empty { justify-items: start; }

  /* ---------------------------------------------------------------- sheets */
  .cal-when { font-weight: var(--weight-bold); }
  .cal-note { white-space: pre-wrap; overflow-wrap: anywhere; }
  .cal-timing { display: grid; gap: var(--space-2); }
  .cal-duration:empty { display: none; }
  .people-picker .chip-row { gap: var(--space-2); align-items: center; }
  .people-kept { flex-basis: 100%; }
  .cal-file-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
  .cal-file-name { min-width: 0; overflow-wrap: anywhere; }
  /* The visually hidden file input has the keyboard focus; its label (the button) shows the ring. */
  .cal-file-input:focus-visible + label { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 2px; }
  .cal-file-input[aria-invalid='true'] + label { border-color: var(--color-danger); }
  .cal-howto summary {
    display: flex;
    align-items: center;
    min-height: var(--tap-min);
    font-weight: var(--weight-bold);
    cursor: pointer;
  }
  .cal-import-notes { display: grid; gap: var(--space-1); padding-left: 1.2em; list-style: disc; color: var(--color-text-muted); }
  .cal-import-bar { align-items: center; justify-content: space-between; }
  .cal-import-list { display: grid; gap: var(--space-1); max-height: min(50vh, 480px); overflow-y: auto; padding-right: var(--space-1); }
  .cal-import-item { align-items: flex-start; padding: var(--space-1) 0; }
  .cal-import-item input { margin-top: 2px; }
  .cal-import-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
  .cal-import-item.duplicate .cal-import-text { color: var(--color-text-muted); }

  /* ---------------------------------------------------------------- sizes */
  @media (max-width: 599px) {
    .cal-month { border-spacing: 0; }
    .cal-day { border-radius: 0; }
    .cal-month th { padding: 0; text-align: center; font-size: var(--text-xs); }
    .cal-day { min-height: var(--tap-min); padding: var(--space-1); align-items: center; }
    .cal-cell.today .cal-date { align-self: center; }
    .cal-more-count { order: 2; line-height: 1; }
    /* Dots instead of titles: one per event, in the member's colour (the cell's label names the people). */
    .cal-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
    .cal-chip { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--member-ink); }
    .cal-chip-who, .cal-chip-text { display: none; }
    .cal-day-top { flex-direction: column; gap: 0; }
    .cal-nav { flex-basis: 100%; }
    .cal-toolbar .member-filter { flex: 1 1 100%; margin-left: 0; }
    .cal-period { flex: 1 1 auto; text-align: center; }
    .cal-weekday-head { align-items: center; }
    /* The header keeps "+ Termin"; "Termine übernehmen" moves below the calendar. */
    .cal-header .cal-import-top { display: none; }
    .cal-footer { display: flex; justify-content: center; }
    /* The member filter is one row that scrolls sideways instead of taking two lines. */
    /* Room for the 3 px focus ring plus its 2 px offset inside the sideways scroller. */
    .member-filter { flex-wrap: nowrap; overflow-x: auto; padding: 6px; scrollbar-width: none; }
    .member-filter > *, .member-filter .chip-row-items > * { flex: none; }
  }

  /* Two or more day columns: the event stacks time, title, place and people. */
  @container calendar (min-width: 600px) {
    .cal-week { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); }
    .cal-week .cal-event { grid-template-areas: 'time' 'title' 'meta' 'people'; grid-template-columns: minmax(0, 1fr); padding: var(--space-2); }
    .cal-week .cal-event-people { justify-content: flex-start; }
    .cal-week .cal-event-time { white-space: nowrap; }
    /* Whole words only (no cut in the middle); a long title ends after three lines. */
    .cal-week .cal-event-title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      overflow-wrap: normal;
      word-break: normal;
    }
  }
  /* Seven columns only where each is wide enough (about 150 px and more). */
  @container calendar (min-width: 1100px) {
    .cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .cal-week .cal-weekday { padding: var(--space-2) var(--space-1); }
    .cal-week .cal-event { padding: var(--space-2) var(--space-2) var(--space-2) 6px; }
    .cal-week .cal-event-title { font-size: var(--text-sm); }
  }

  @media (hover: hover) and (pointer: fine) {
    .cal-day:hover { border-color: var(--color-field-border); }
    .cal-event:hover { filter: brightness(0.97); }
    .cal-weekday-head:hover { background: var(--color-surface-2); }
  }
}