/* pages-c.css: rules added in critique fix 2 for Events, Join, Owner and states.html (ux-lead, 2026-10-25).
   Additive only. Linked after the page's other css. Uses fs.css tokens; type sizes stay on 13/15/16/18/22/28/36. */

/* Events: cards without cover art. The day heading gives the date for Today and Tomorrow, so only cards
   under "This week" and "Later" carry the one date tile, beside the title. */
.ev .ev-body.nc { padding: var(--s4); }
@media (min-width: 760px) { .ev .ev-body.nc { padding: var(--s5); } }
.ev-top { display: flex; gap: 14px; align-items: flex-start; }
.ev-top .ev-tt { min-width: 0; flex: 1; display: grid; gap: 4px; align-content: start; }
.ev-top .mine { padding: 0; }
.ev .note { font-size: 15px; color: var(--ink-2); border-left: 3px solid var(--line); padding-left: 10px; }
.ev-acts .invite { margin-left: auto; }
.going-row .gr-f { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink-2); font-size: 13px; }
.going-row .gr-f .av { width: 24px; height: 24px; box-shadow: 0 0 0 2px var(--paper); }

/* Join: the pending step */
.j-status { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--paper); font: 600 15px/1.2 var(--f-body); color: var(--ink); }
.j-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); flex: none; }
.j-can { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 760px) { .j-can { grid-template-columns: 1fr 1fr; } }
.j-can > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-item); padding: var(--s4); }
.j-can h3 { font: 700 18px/1.2 var(--f-display); font-stretch: 94%; color: var(--ink); }
.j-can ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.j-can li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.j-can li .ico-sm { margin-top: 3px; flex: none; color: var(--ink-3); }
.j-person .j-later { font-size: 13px; color: var(--ink-3); }

/* states.html */
.st-intro { max-width: 640px; font-size: 16px; line-height: 1.5; color: var(--ink-2); margin-top: 8px; }
.st-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s5) 0 0; padding: 0; list-style: none; }
.st-sec { margin-top: var(--s10); }
.st-sec > h2 { font: 700 28px/1.1 var(--f-display); font-stretch: 90%; letter-spacing: -.015em; color: var(--ink); }
.st-sec > p { margin-top: 6px; font-size: 15px; color: var(--ink-2); max-width: 640px; }
.st-grid { display: grid; gap: var(--s4); margin-top: var(--s4); }
@media (min-width: 900px) { .st-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.st { display: grid; gap: 8px; }
.st-when { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.st-when b { color: var(--ink-2); font-weight: 700; }
.st-frag { background: var(--paper); border-radius: var(--r-item); padding: var(--s5); display: grid; gap: 12px; }
.st-frag h3 { font: 700 22px/1.15 var(--f-display); font-stretch: 92%; letter-spacing: -.01em; color: var(--ink); }
.st-frag h4 { font: 700 18px/1.2 var(--f-display); font-stretch: 94%; color: var(--ink); }
.st-frag p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.st-frag .st-true { font-size: 16px; color: var(--ink); }
.st-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-who { display: flex; gap: 12px; align-items: center; }
.st-who .av { width: 44px; height: 44px; }
.st-bar { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-item); background: var(--paper); }
.st-bar .ico { flex: none; margin-top: 1px; color: var(--ink-2); }
.st-bar p { font-size: 15px; color: var(--ink); line-height: 1.45; }
.st-err { border-left: 3px solid var(--action); }
.st-search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); color: var(--ink); font-size: 16px; }
.st-search .ico { color: var(--ink-3); }
/* loading skeleton: blocks in --line, a slow pulse that stops for reduced motion */
.sk { background: var(--line); border-radius: 6px; animation: sk 1.6s ease-in-out infinite; }
.sk-av { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.sk-l { height: 13px; }
.sk-row { display: flex; gap: 12px; align-items: center; }
.sk-col { display: grid; gap: 8px; flex: 1; }
@keyframes sk { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.st-later { font-size: 13px; color: var(--ink-3); }
/* Tap targets (critique fix B verification, 2026-10-25): every control at least 44px tall at 375.
   Stand-alone links get a 44px row; links inside a sentence keep their line and grow their hit box with
   vertical padding (inline padding does not move the text). */
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.host-q > a { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.host-q p a, p.host-q a, .line a.n, a.j-pn, .o-new a, .update-card .ud a { padding: 12px 0; }
.update-card .ud a { display: inline-block; padding: 13px 0; margin: -13px 0; }
/* Reply suggestions and post ideas are suggestion chips: the chip look, not a fifth button style. */
.eb-qr { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 22px; min-height: 44px;
  padding: 10px 16px; font: 400 15px/1.35 var(--f-body); text-align: left; }
.eb-qr:hover { border-color: var(--action); color: var(--action); }
.o-new a { padding: 14px 0; }
/* Owner head: business identity first, then the greeting that introduces the digest. */
.o-head .o-shop + .hello { margin-top: 16px; }