/* =============================================================================
   COMPONENT: today — the Dusk Today screen (slice 2): the greeting kicker, the
   "How's {recipient} today?" hero check-in, and the "Today together" timeline
   of plan tasks + appointments by clock time. Status colour only on the time
   chip + done check; chrome stays calm.
   ========================================================================== */
@layer components {
  /* Kicker: the small tracked-caps context line above a screen's h1. A core
     Dusk type role, reused across screens. */
  .kicker {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
  }

  /* Hero check-in card. */
  .today-hero__head { display: flex; align-items: center; gap: var(--space-sm); }
  .today-hero__who { flex: 1; display: flex; flex-direction: column; gap: var(--space-3xs); min-inline-size: 0; }
  .today-hero__author { font-weight: var(--weight-medium); }
  .today-hero__kind { align-self: flex-start; }
  .today-hero__time { font-size: var(--text-sm); flex: none; align-self: flex-start; }
  .today-hero__body { margin-block: var(--space-md) 0; line-height: var(--leading-normal); }
  .today-hero__title { font-weight: var(--weight-medium); }
  .today-hero--empty { gap: var(--space-sm); align-items: center; }

  /* "Today together" counter, right-aligned in the section-label cluster. */
  .today-counter { flex: none; }

  /* Timeline: Today together uses prototype .tl-item rows (together-timeline). */
  .timeline { list-style: none; margin: 0; padding: 0; }

  .together-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .together-item {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    list-style: none;
  }
  .together-item--done {
    background: var(--surface-sunken);
    border-color: var(--color-border);
  }
  .together-item--done .together-item__title,
  .together-item--done .timeline-row__title { text-decoration: line-through; color: var(--color-text-muted); }
  .together-item--done .together-item__time,
  .together-item--done .timeline-row__time { color: var(--color-text-muted); font-weight: var(--weight-semibold); }

  .together-item__time.timeline-row__lead {
    flex: none;
    display: block;
    inline-size: 4.125rem;
    min-inline-size: 4.125rem;
    text-align: end;
    padding-block-start: var(--space-3xs);
    line-height: var(--leading-tight);
  }
  .together-item .timeline-row__time {
    display: block;
    color: var(--color-text-muted);
    font-weight: var(--weight-bold);
  }
  .together-item__time--anytime {
    font-style: italic;
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
  }
  .together-item__clock { display: block; }
  .together-item__duration {
    display: block;
    margin-block-start: var(--space-3xs);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
  }
  .together-item__body { flex: 1; min-inline-size: 0; }
  .together-item__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-wrap: wrap;
  }
  .together-item__title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: 1.3;
    color: inherit;
    text-align: start;
    cursor: pointer;
    &:hover { text-decoration: underline; }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
  }
  .together-item__alarm { display: inline-flex; color: var(--accent); flex: none; }
  .together-item__photo { display: inline-flex; color: var(--color-text-muted); flex: none; }
  .together-item__sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin: var(--space-3xs) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    & svg { flex: none; }
  }
  .together-item__sub-sep { color: var(--color-text-muted); }
  .together-item__photo-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }
  .together-item__photo-thumb {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-sm);
    object-fit: cover;
  }
  .together-item__trail { flex: none; display: flex; align-items: flex-start; }

  .together-item--appt {
    align-items: flex-start;
    border-inline-start: 4px solid var(--accent);
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 14%, var(--surface)),
      var(--surface) 60%
    );
  }
  .together-item--appt .together-item__time {
    flex: none;
    inline-size: 4.125rem;
    min-inline-size: 4.125rem;
    text-align: end;
    padding-block-start: var(--space-3xs);
  }
  .together-item--appt .together-item__clock {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
  }
  .together-item--appt .together-item__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .together-item--appt-emphasis { box-shadow: var(--shadow-sm); }
  .together-item--appt .together-item__title {
    display: block;
    margin: 0;
    color: color-mix(in srgb, var(--accent) 72%, var(--color-text));
    cursor: default;
    &:hover { text-decoration: none; }
  }
  .together-item__tag { color: var(--accent); }
  .together-item__appt-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-end: var(--space-xs);
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .together-item__addcal {
    align-self: flex-start;
    display: inline-block;
    margin-block-start: var(--space-sm);
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-decoration: underline;
    cursor: pointer;
    min-inline-size: 0;
    min-block-size: 0;
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
  }

  .together-timeline > .calendar-daypart { margin-inline: var(--space-2xs); }

  /* Legacy timeline-row styles kept for turbo-stream targets and schedule-adjacent rows. */
  .timeline--cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .timeline--cards > .timeline-row {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .timeline--cards > .timeline-row--done {
    background: var(--surface-sunken);
    border-color: var(--color-border);
  }

  .timeline--cards > .timeline-row--muted {
    opacity: 0.72;
    border-style: dashed;
  }

  .timeline--cards > .timeline-row--appointment-emphasis {
    border-inline-start: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  }

  .timeline-row__appt-badge { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

  .timeline--cards > .timeline-divider {
    margin-block: var(--space-xs) 0;
    padding-inline: var(--space-2xs);
  }

  .timeline-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-block-size: var(--touch-target);
    padding: var(--space-sm) var(--space-md);
  }
  /* The appointment row keeps the older stacked layout (time above title,
     no icon tile). The plan-task row below is a flatter row of siblings —
     time badge, icon tile, body — directly inside .timeline-row's flex. */
  .timeline-row__main { flex: 1; display: flex; flex-direction: column; gap: var(--space-2xs); min-inline-size: 0; }
  .timeline-row__appt-time { flex: none; align-self: flex-start; white-space: nowrap; }
  .timeline-row__title { display: flex; align-items: center; gap: var(--space-2xs); flex: 1; min-inline-size: 0; }

  /* The plan-task row's leading column (mirrors .schedule-card__slot): a
     fixed-width slot every row reserves, so icon tiles line up whether a
     task carries a clock time or not — a scheduled time, a window chip, or
     (today-together prototype) the daypart band name as a quiet fallback. */
  .timeline-row__lead {
    flex: none;
    inline-size: 3.375rem;
    min-inline-size: 3.375rem;
  }
  .timeline-row__time {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    line-height: var(--leading-tight);
    white-space: nowrap;
  }
  .timeline-row__window {
    font-size: var(--text-xs);
    padding-inline: var(--space-2xs);
  }
  .timeline-row__anchip {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-tight);
  }
  .timeline-row__kind { display: inline-flex; color: var(--color-text-muted); flex: none; }
  .timeline-row__link { font-size: var(--text-sm); }
  .timeline-row__trail { flex: none; display: flex; align-items: center; justify-content: flex-end; }

  /* Done = strikethrough + muted title; the filled check at the row's far
     right (prototype .cbox.on) carries the done signal, not colour alone. */
  .timeline-row--done .timeline-row__title { text-decoration: line-through; color: var(--color-text-muted); }
  .timeline-row--done .timeline-row__time { color: var(--color-text-muted); font-weight: var(--weight-medium); }

  /* Icon tile (Schedule + Today, plan_task_icon): a category glyph so the
     day's flow reads at a glance, not just as bare text rows. */
  .timeline-row__icon { flex: none; }

  .timeline-row--done .timeline-row__icon {
    background: var(--surface);
    color: var(--color-text-muted);
  }

  .timeline-row__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-3xs); min-inline-size: 0; }
  .timeline-row__title-row { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-2xs); min-inline-size: 0; inline-size: 100%; }

  /* "✓ 8:05am · Dana R. · + Add photo" on one proof line (prototype .sub). */
  .timeline-row__sub {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-3xs);
    min-inline-size: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
  }
  .timeline-row__sub svg:first-child { color: var(--status-success-fg); flex: none; }
  .timeline-row__sub-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
  }
  .timeline-row__sub-sep { color: var(--color-text-muted); flex: none; }
  .timeline-row__thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    margin-inline-start: var(--space-3xs);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--color-text-muted);
    flex: none;
  }

  /* Completion photo proof (REQ-0074): a tappable square thumb beside the ✓ line.
     Override base button min-height so the image fills the box (no dead space). */
  .timeline-row__photo-thumb {
    display: block;
    padding: 0;
    margin-inline-start: var(--space-3xs);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    cursor: pointer;
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    min-block-size: 0;
    overflow: hidden;
    line-height: 0;
  }

  .timeline-row__photo-thumb:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  .timeline-row__photo-thumb-img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .note__thumb-btn {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
  }

  .note__thumb-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  .photo-gallery {
    display: grid;
    gap: var(--space-md);
    justify-items: stretch;
    inline-size: 100%;
  }

  .photo-gallery__count { margin: 0; text-align: center; }

  .photo-gallery__track {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    inline-size: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .photo-gallery__slide {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: center;
  }

  .photo-gallery__caption {
    inline-size: 100%;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
  }

  .photo-gallery__type {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-sm);
  }

  .photo-gallery__text { margin: 0; font-size: var(--text-sm); }

  .photo-viewer {
    display: grid;
    gap: var(--space-md);
    justify-items: center;
  }

  .photo-viewer__img {
    inline-size: 100%;
    max-block-size: 70vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
  }

  /* A camera glyph beside the title when a task still needs its proof photo
     (hidden once done — the thumb/add-photo affordance takes over). */
  .timeline-row__photo-badge { display: inline-flex; color: var(--accent); flex: none; }

  /* The optional post-completion photo (REQ-0074/DEC-0028): a quiet text
     link, never competing with the primary checkbox for attention. */
  .timeline-row__add-photo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--accent);
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    flex: none;

    &:hover { text-decoration: underline; }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  }

  /* Done = strikethrough + a filled check, never colour alone. The checkbox
     itself (44px tap target + Dusk styling) lives in components/checkbox.css. */

  /* The title doubles as the alarm-settings trigger (REQ-0073) for anyone who
     isn't view-only — a plain button, reset to read like the static title it
     replaces, never sharing a tap target with the completion checkbox. */
  button.timeline-row__title--link {
    flex: 1 1 0;
    min-inline-size: var(--touch-target);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: start;
    color: inherit;
    cursor: pointer;
  }
  button.timeline-row__title--link:hover .timeline-row__title-text { text-decoration: underline; }

  /* Truncate rather than wrap under space pressure (a long title competing
     with the time badge at high font-scale zoom). */
  .timeline-row__title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
  }

  /* Bell shows only when this member has a personal alarm set on the task —
     a passive status indicator now, not the open-trigger itself. */
  .timeline-row__alarm-bell { display: inline-flex; color: var(--accent); flex: none; }

  /* Optimistic completion (D-03): a just-checked row dims until the morph
     confirms who-did-it. Honors reduced-motion. */
  .is-pending { opacity: 0.6; transition: opacity var(--dur-fast) var(--ease); }
  @media (prefers-reduced-motion: reduce) { .is-pending { transition: none; } }
}