/* =============================================================================
   Feed — a DESIGN (organization): the whole Loop as ONE living activity stream.
   A pinned plan header, a composer, then a chronological feed where every kind
   of thing (a claim on the Spread, a shopping add, a Wall photo, someone joining)
   flows as one social timeline — instead of four separate tabs. Neutral Zen.
   ========================================================================== */

body { font-family: var(--font-ui); background: var(--color-surface-page); color: var(--color-text-primary); }
.wrap { inline-size: min(94vw, 30rem); margin-inline: auto; padding-block: var(--space-3) var(--space-9); }

.chrome { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2) var(--space-3); }
.chip { display: inline-grid; place-items: center; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); color: var(--color-text-primary); }
.chipRow { display: inline-flex; gap: var(--space-2); }
.i { inline-size: var(--icon-md); block-size: var(--icon-md); stroke: currentcolor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* pinned plan header */
.plan { display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); box-shadow: var(--shadow); }
.planCover { inline-size: 4.5rem; aspect-ratio: 4 / 3; flex: none; border-radius: var(--radius-md); background: linear-gradient(155deg, var(--color-sky), var(--color-accent-default) 55%, var(--color-sage-deep)); }
.planBody { min-inline-size: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); }
.planBody h1 { font-size: var(--font-size-lg); font-weight: var(--font-weight-heavy); line-height: var(--line-tight); letter-spacing: var(--tracking-tight); }
.planBody .meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.planBody .stat { display: inline-flex; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-accent-deep); }

/* composer */
.composer { display: flex; align-items: center; gap: var(--space-3); margin-block-start: var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); }
.composer input { flex: 1; border: none; background: transparent; font: inherit; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.composer input::placeholder { color: var(--color-text-subtle); }
.composer .act { display: inline-grid; place-items: center; inline-size: var(--control-sm); block-size: var(--control-sm); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-deep); border: none; }

/* filter chips */
.filters { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin-block: var(--space-4) var(--space-2); }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--color-border-default); background: var(--color-surface-raised); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.filters button[aria-current='true'] { background: var(--color-accent-deep); color: var(--color-text-on-accent); border-color: transparent; }

/* the stream */
.feed { display: flex; flex-direction: column; }
.day { margin-block: var(--space-5) var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); }
.item { display: flex; gap: var(--space-3); padding-block: var(--space-3); }
.item + .item { border-block-start: 1px solid var(--color-border-default); }
.avatar { inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill); flex: none; display: grid; place-items: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-on-accent); background: linear-gradient(150deg, var(--color-sky), var(--color-accent-deep)); }
.body { flex: 1; min-inline-size: 0; }
.line { font-size: var(--font-size-base); line-height: var(--line-snug); }
.line b { font-weight: var(--font-weight-semibold); }
.line .kind { display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: -2px; margin-inline-end: var(--space-1); }
.line .kind svg { inline-size: 0.9rem; block-size: 0.9rem; }
.k-spread { color: var(--color-sage-deep); }
.k-list { color: var(--color-sky-deep); }
.k-wall { color: var(--color-rose-deep); }
.k-join { color: var(--color-accent-deep); }
.time { font-size: var(--font-size-xs); color: var(--color-text-subtle); margin-block-start: var(--space-1); }

/* attachments */
.att-card { margin-block-start: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-soft); border: 1px solid var(--color-border-default); display: flex; align-items: center; gap: var(--space-3); }
.att-card .tag { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding: 0.1rem var(--space-2); border-radius: var(--radius-pill); }
.tag-food { background: var(--color-sage-soft); color: var(--color-sage-deep); }
.tag-supplies { background: var(--color-stone-soft); color: var(--color-text-muted); }
.att-card b { flex: 1; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.att-photo { margin-block-start: var(--space-2); display: flex; gap: var(--space-2); }
.att-photo i { inline-size: 6.5rem; aspect-ratio: 1; border-radius: var(--radius-md); background: linear-gradient(140deg, color-mix(in srgb, var(--t1, var(--color-rose)) 62%, var(--color-surface-raised)), color-mix(in srgb, var(--t2, var(--color-rose-deep)) 66%, var(--color-surface-sunken))); }
.reacts { display: inline-flex; gap: var(--space-2); margin-block-start: var(--space-2); }
.react { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.05rem var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-sunken); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }