.avatar.s24 { --av-size: 24px; font-size: 10px; }

.author { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.author-who { display: inline-flex; flex: 0 1 auto; min-width: 0; align-items: center; gap: var(--s2); min-height: 32px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.author-who:hover .author-name { color: var(--accent); }
.author-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.author-fact { flex: 0 100000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* on a narrow screen the fact gives way first, then the name; the time never. 100000: at 1000 the name still lost 0.05px and that cut it to «Ana R…» */
.author-fact::before, .author-after::before { content: "·"; margin-right: var(--s2); }
.author > .mark, .author-after { flex: none; }
.marks { display: flex; flex-wrap: wrap; gap: 2px var(--s3); margin: 0; }
.mark { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
a.mark { color: var(--accent); }
a.mark:hover { color: var(--ink); }
.mark.is-mod { color: var(--accent); }
.mark.is-mod::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.acard { display: grid; gap: var(--s4); }
.acard-block { display: grid; gap: var(--s1); }
.acard-block h3 { font-size: var(--fs-sm); }

.vote { display: flex; flex-direction: column; align-items: center; gap: 0; }
.vote-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.vote-btn:hover { color: var(--accent); }
.vote-btn.is-down:hover { color: var(--danger); }
.vote-btn.is-up[aria-pressed="true"] { color: var(--accent); }
.vote-btn.is-down[aria-pressed="true"] { color: var(--danger); }
.vote-btn[aria-pressed="true"] .icon { fill: currentColor; }
.vote-n { min-width: 2ch; text-align: center; font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.vote:has(.is-up[aria-pressed="true"]) .vote-n { color: var(--accent); }
.vote:has(.is-down[aria-pressed="true"]) .vote-n { color: var(--danger); }
.vote-btn { transition: color var(--t-fast) var(--ease); }
.vote-btn .icon { transition: transform var(--t-fast) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .vote-btn:active .icon { transform: scale(.82); }
  .vote-btn.is-bump .icon { animation: vote-hop .42s var(--ease-out); }
  .vote-btn.is-down.is-bump .icon { animation-name: vote-drop; }
  .vote-n.is-bump { animation: tick-up var(--t-base) var(--ease-out); }
  .vote-n.is-bump[data-dir="down"] { animation-name: tick-down; }
}
@keyframes vote-hop { 40% { transform: translateY(-5px) scale(1.18); } 70% { transform: translateY(1px) scale(.96); } }
@keyframes vote-drop { 40% { transform: translateY(5px) scale(1.18); } 70% { transform: translateY(-1px) scale(.96); } }
@keyframes tick-up { from { opacity: 0; transform: translateY(.6em); } }
@keyframes tick-down { from { opacity: 0; transform: translateY(-.6em); } }

.feed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-bottom: calc(-1 * var(--s2)); }
.feed-head[hidden] { display: none; }
.feed-head .sort { margin-left: 0; }
.feed-head [data-prefs] { margin-left: auto; }
.feed-mine { display: flex; align-items: center; gap: var(--s1); margin: var(--s4) 0 var(--s3); }
.feed-more { padding-top: var(--s4); }
.cfeed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.cfeed .cpost { padding-inline: var(--s5); }
@media (prefers-reduced-motion: no-preference) {
  .cfeed.is-in > li:not(.is-new) { animation: row-in var(--t-slow) var(--ease-out) backwards; }
  .cfeed.is-in > li:not(.is-new):nth-child(-n+6) { animation-delay: calc((sibling-index() - 1) * 45ms); }
  .cfeed > li.is-new { animation: arrive var(--t-open) var(--ease-out) both; }
  .cfeed > li.is-new :is(.cpost-title, .cpost-title a, .cpost:not(:has(.cpost-title)) .cpost-body) { animation: ink-flash 1.6s var(--ease) var(--t-open) backwards; }
}
.cpost { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s5) 0 var(--s4); }
/* everything you can press stays above the stretched title link; :where keeps it from beating any control's own positioning */
:where(.cfeed .cpost :is(a, button):not(.stretch)) { position: relative; z-index: 1; }
.cfeed .cpost .stretch::after { border-radius: var(--radius-lg); }
.cpost-main { display: grid; gap: var(--s2); min-width: 0; align-content: start; }
.cpost-head { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.cpost-head > .author { flex: 1; }
.cpost-head > .icon-btn { margin-right: -8px; }
.cpost-pin { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.cpost-title { margin: 0; font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: pretty; }
.cpost-body { margin: 0; max-width: var(--measure); color: var(--ink); font-size: var(--fs-sm); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.act .cpost-body, .cquote .cpost-body, .pub .cpost-body { color: var(--ink-2); white-space: normal; -webkit-line-clamp: 3; line-clamp: 3; }
.cpost-text { margin: 0; max-width: var(--measure); white-space: pre-line; overflow-wrap: anywhere; }
.cpost-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }
.cpost-link:hover { color: var(--ink); }
.welcome .cpost-text { font-size: var(--fs-sm); line-height: 1.5; }
.welcome-part { display: grid; gap: var(--s1); max-width: var(--measure); }
.welcome-h { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.welcome-list { display: grid; gap: var(--s1); margin: 0; padding-left: 1.25em; list-style: disc; font-size: var(--fs-sm); line-height: 1.5; }
.tr-link { justify-self: start; margin: 0; font-size: var(--fs-xs); }
.cpost > .tr-link { margin-top: calc(-1 * var(--s2)); }
.cpost-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
.cpost-foot .vote { flex-direction: row; }
.cpost-foot .vote-btn { width: 36px; height: 36px; }
.cpost-foot .author { flex: 1; }
.cpost-replies, .cpost-act { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s2); border: 0; background: none;
  color: var(--ink-2); font: inherit; font-size: var(--fs-xs); font-weight: 600; text-decoration: none; cursor: pointer; transition: color var(--t-fast) var(--ease), background-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
.cpost-foot :is(.vote, .cpost-replies, .cpost-act) { border-radius: var(--radius-pill); background: var(--fill); }
.cpost-foot :is(.cpost-replies, .cpost-act) { padding: 0 var(--s3); }
.cpost-replies:hover, .cpost-act:hover { color: var(--accent); }
.cmt-actions .vote { border-radius: var(--radius-pill); }
:is(.cpost-foot, .cmt-actions) .vote:has(.is-up[aria-pressed="true"]) { background: var(--accent); }
:is(.cpost-foot, .cmt-actions) .vote:has(.is-down[aria-pressed="true"]) { background: var(--danger); }
:is(.cpost-foot, .cmt-actions) .vote:has([aria-pressed="true"]) :is(.vote-btn, .vote-btn:hover, .vote-n) { color: var(--on-accent); }
:is(.cpost-foot, .cmt-actions) .vote { transition: background-color var(--t-base) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .cpost-foot :is(.cpost-replies, .cpost-act):active { transform: scale(.95); }
}
/* phones: one line of pills; the label of «Compartir» stays for screen readers, the icon shows */
@media (max-width: 479px) { .cfeed .cpost-foot { flex-wrap: nowrap; } .cfeed .cpost-act .cpost-act-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.cpost.is-full { padding-top: 0; gap: var(--s4); }
.cpost.is-full .cpost-title { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.cpost.is-full .cpost-foot { padding-top: var(--s2); border-top: 1px solid var(--line); }
.eyebrow { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.mosaic { display: grid; gap: 2px; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.mosaic.n-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 10; }
.mosaic.n-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 10; }
.mosaic.n-3 > :first-child { grid-row: span 2; }
.mosaic.n-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1; }
.mosaic-cell { display: block; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
span.mosaic-cell { cursor: auto; }
.mosaic-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.mosaic-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mosaic.n-1 img { height: auto; max-height: 28rem; }

.poll { display: grid; gap: var(--s2); }
.poll-list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.poll-row { position: relative; display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 44px; padding: 0 var(--s4); overflow: hidden; font-size: var(--fs-sm); }
.poll-row { border-radius: var(--radius); background: var(--fill); }
button.poll-row { border: 0; color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: left; cursor: pointer; transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
@media (prefers-reduced-motion: no-preference) { button.poll-row:active { transform: scale(.985); } }
button.poll-row:hover { color: var(--accent); }
button.poll-row .poll-opt { color: inherit; }
.poll-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: color-mix(in oklab, var(--accent) 14%, var(--paper)); }
.poll-row.is-mine .poll-fill { background: color-mix(in oklab, var(--accent) 26%, var(--paper)); }
.poll-opt { position: relative; flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.poll-row:is(.is-win, .is-mine) .poll-opt { font-weight: 600; }
.poll-you { position: relative; display: inline-flex; align-items: center; gap: 2px; color: var(--accent-press); font-size: var(--fs-2xs); font-weight: 700; }
.poll-pct { position: relative; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes poll-grow { from { width: 0; } }
.poll-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin: 0; color: var(--ink-2); font-size: var(--fs-xs); }

.cquote { display: grid; gap: var(--s2); padding: var(--s1) 0 var(--s1) var(--s4); border-left: 2px solid var(--line); }
.cquote-title { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cquote-img { display: block; width: 100%; max-height: 11rem; object-fit: cover; border-radius: var(--radius); }
.cquote-go { justify-self: start; font-size: var(--fs-xs); font-weight: 600; }
.cquote-go:hover { color: var(--ink); }

.cbox-open { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s3) 0; border-block: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }
.cbox-txt { flex: 1; }
.cbox-open:hover { color: var(--ink); }
.cbox-open > .icon-sm { color: var(--accent); }

.glist-item { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }
.glist-item .title-link { overflow-wrap: anywhere; }
.menu-list { gap: 0; }
.menu-list > * + * { margin-top: 0; }
.menu-list .btn { justify-content: flex-start; width: 100%; min-height: 48px; }

.thread { display: grid; gap: var(--s4); margin-top: calc(-1 * var(--s4)); --av: 24px; --gut: calc(var(--av) + var(--s2)); --lx: calc(var(--av) / 2 - 1px); }
.thread[hidden] { display: none; }
.cpost-replies[aria-expanded="true"] { color: var(--accent); }
.reply-top .cbox-open { min-height: 0; padding: 0; border-block: 0; }
.reply-top [hidden] { display: none; }
.reply-form { display: grid; gap: var(--s2); }
.reply-form .textarea { min-height: 72px; max-height: 50vh; resize: none; field-sizing: content; }
.reply-to { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.reply-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); }
.reply-bar .counter { margin-right: auto; }
.thread-list { list-style: none; margin: 0; padding: 0; }
.cmt { position: relative; display: grid; gap: var(--s1); padding-top: var(--s3); scroll-margin-top: calc(var(--appbar-h, 64px) + var(--s4)); }
.cmt-main { position: relative; display: grid; gap: var(--s1); min-width: 0; margin-left: var(--gut); }
.cmt-body { margin: 0; max-width: var(--measure); white-space: pre-line; overflow-wrap: anywhere; font-size: var(--fs-sm); }
.cmt-gone { display: flex; align-items: center; gap: var(--s2); min-height: 32px; margin: 0; color: var(--ink-2); font-size: var(--fs-xs); font-style: italic; }
.cmt-gone-av { flex: none; width: var(--av); height: var(--av); border: 2px dashed var(--line-strong); border-radius: 50%; }
.cmt-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-left: -6px; }
.cmt-actions .vote { flex-direction: row; }
.cmt-actions .vote-btn { width: 32px; height: 32px; }
.cmt [data-rslot]:not(:empty) { padding: var(--s2) 0; }
.mark.is-op { color: var(--accent); }
.cmt.is-target > .author .author-name { color: var(--accent); }
.cmt.has-kids > .cmt-main::before { content: ""; position: absolute; top: calc(-1 * var(--s1)); bottom: calc(-1 * var(--s1)); left: calc(var(--lx) - var(--gut)); width: 2px; background: var(--line); }
.cmt-kids { position: relative; margin-left: var(--gut); }
.cmt-kids > .thread-list > li, .cmt-more { --elbow: calc(var(--s3) + 17px); position: relative; }
.cmt-kids > .thread-list > li::before, .cmt-more::before { content: ""; position: absolute; top: 0; left: calc(var(--lx) - var(--gut)); width: calc(var(--gut) - var(--lx) - 4px); height: var(--elbow);
  border: solid var(--line); border-width: 0 0 2px 2px; border-bottom-left-radius: 12px; pointer-events: none; }
.cmt-kids > .thread-list > li:not(:last-child)::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--lx) - var(--gut)); width: 2px; background: var(--line); }
.cmt-kids > .thread-list, .cmt.is-open > .cmt-kids > .cmt-more { display: none; }
.cmt.is-open > .cmt-kids > .thread-list { display: block; }
.cmt-more { --elbow: calc(var(--s2) + 17px); display: flex; align-items: center; gap: var(--s2); min-height: 32px; margin-top: var(--s2); padding: 0; border: 0; background: none;
  color: var(--ink-2); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.cmt-more::before { top: calc(-1 * var(--s2)); }
.cmt-more .icon-sm { width: 20px; height: 20px; margin-left: 2px; }
.cmt-more:hover { color: var(--accent); }
.cmt-fold { position: absolute; left: calc(var(--lx) - var(--gut) - 9px + 6px); top: 50%; translate: 0 -50%; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink-2); cursor: pointer; }
.cmt-fold .icon-sm { width: 20px; height: 20px; }
.cmt:not(.is-open) > .cmt-main > .cmt-actions > .cmt-fold { display: none; }
.cmt-fold:hover { color: var(--accent); }
.cmt.has-kids > .cmt-main:has(> .cmt-actions > .cmt-fold:is(:hover, :focus-visible))::before { background: var(--accent); }
@media (pointer: coarse) { .cmt-fold::after { content: ""; position: absolute; inset: -12px; } }
.cmt.is-mine { isolation: isolate; }
.cmt.is-mine > .cmt-main::after { content: ""; position: absolute; z-index: -1; top: calc(-1 * (32px + var(--s1) + var(--s2))); bottom: calc(-1 * var(--s1));
  left: calc(-1 * (var(--gut) + var(--s2))); right: calc(-1 * var(--s2)); border-radius: var(--radius-lg, 12px); background: var(--accent-soft); pointer-events: none; }
.cmt.is-mine > .cmt-main > .cmt-actions > .cmt-fold { background: var(--accent-soft); }
@media (prefers-reduced-motion: no-preference) {
  .thread-list.is-root.is-in > .cmt:nth-child(-n+6) { animation: row-in var(--t-slow) var(--ease-out) both; animation-delay: calc((sibling-index() - 1) * 45ms); }
  .cmt.is-open > .cmt-kids > .thread-list > li:not(.is-new):nth-child(-n+8) { animation: unfold-in var(--t-open) var(--ease-out) backwards; animation-delay: calc((sibling-index() - 1) * 60ms); }
  .cmt.is-open > .cmt-kids > .thread-list > li:not(.is-new):nth-child(-n+8)::before { animation: draw-elbow var(--t-open) var(--ease-out) backwards; animation-delay: inherit; }
  .cmt.is-open > .cmt-kids > .thread-list > li:not(.is-new):nth-child(-n+8)::after { animation: draw-down var(--t-open) var(--ease-out) backwards; animation-delay: inherit; }
  .cmt.is-new { animation: arrive var(--t-open) var(--ease-out) both; }
  :is(.cmt.is-new, .cmt.is-target) > .cmt-main > .cmt-body { animation: ink-flash 1.6s var(--ease) var(--t-open) both; }
  .cmt .reply-form, .reply-top .reply-form { animation: unroll var(--t-open) var(--ease-out) backwards; }
}
@keyframes unfold-in { from { opacity: 0; translate: -12px -6px; } }
@keyframes draw-elbow { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0); } }
@keyframes draw-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes unroll { from { opacity: 0; translate: 0 -6px; clip-path: inset(0 0 100% 0 round var(--radius)); } to { clip-path: inset(0 0 0 0 round var(--radius)); } }

.drop-menu { position: fixed; inset: auto; margin: 0; min-width: 14rem; padding: var(--s1) 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float); color: var(--ink); }
.drop-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 14px; border: 0; background: none; color: inherit; font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.drop-item:hover { color: var(--accent); }
.drop-item:focus-visible { outline: none; background: var(--accent-soft); color: var(--accent); }
.drop-item.is-danger, .menu-list .btn.is-danger { color: var(--danger); }
@media (prefers-reduced-motion: no-preference) { .drop-menu:popover-open { animation: pop-open var(--t-base) var(--ease-out); } }

.act-list { margin-top: var(--s3); }
.act { position: relative; display: grid; gap: var(--s1); padding: var(--s3) 0; min-width: 0; }
.act .cpost-body { -webkit-line-clamp: 1; line-clamp: 1; }
.act:has(.stretch:hover) .stretch { color: var(--accent); }
.act-more { margin-top: var(--s3); }
.act .cpost-title { font-size: var(--fs-md); }
.act-meta { color: var(--ink-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.act-meta .title-link { color: var(--ink); font-weight: 600; }
.arow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--s3); padding: var(--s4) 0; }
.arow-main { display: grid; gap: 2px; min-width: 0; }
.arow-txt { margin: 0; color: var(--ink); font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; }
.arow-txt .title-link { font-weight: 600; }
.arow-sub { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.arow-time { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); }
.arun > .arow { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; list-style: none; cursor: pointer; }
.arun > .arow::-webkit-details-marker { display: none; }
.arun > .arow:hover .arow-txt { color: var(--accent); }
.arun > .arow > .icon-sm { color: var(--ink-2); transition: transform var(--t-fast) var(--ease); }
.arun[open] > .arow > .icon-sm { transform: rotate(180deg); }
.arun > .cfeed { padding-left: var(--s6); }
.arun > .pcards { padding: 0 0 var(--s4) var(--s6); }
.arow.arow-join { grid-template-columns: minmax(0, 1fr) auto; }
.arow-join > .pcard { grid-column: 1 / -1; max-width: 560px; }
@media (max-width: 479px) { .arun > .pcards { padding-left: 0; } }
.arun > .cfeed > li:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .arun > .arow > .icon-sm { transition: none; } }
.notif { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s3) 0; }
.notif-main { display: grid; gap: 2px; min-width: 0; }
.notif .title-link { font-weight: 400; overflow-wrap: anywhere; }
.notif.is-new .title-link { font-weight: 600; }
.notif.is-new > .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.notif-main small { color: var(--ink-2); font-size: var(--fs-xs); }
.notif-title { font-size: var(--fs-md, 1.0625rem); font-weight: 600; color: var(--ink); line-height: 1.3; }
.notif-text { color: var(--ink-2); max-width: 56ch; }

.pub .cpost-foot { margin-left: 0; }
.pub a.author-who { text-decoration: none; color: inherit; }
.pub a.author-who:hover .author-name { color: var(--accent); }
.pub .seg a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 2px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.pub .seg a:hover:not([aria-current]) { color: var(--ink); }
.pub .seg a[aria-current] { color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 currentColor; }
.pub-more { margin-top: var(--s6); }
.pub .cpost-foot { flex-wrap: wrap; row-gap: var(--s1); }
.pub .cpost-foot .author { flex: 1 1 auto; }
.pub .cpost-foot .author-name { flex-shrink: 0; }

.avatar.s40 { --av-size: 40px; font-size: 15px; }
.avatar.s80 { --av-size: 80px; }
/* 720px = the feed's width beside the left column at 1180px+, so it doesn't grow wider when that column hides */
.home-grid { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; gap: var(--s7); align-items: start; }
.home-grid > .home-left { display: none; }
.home-center { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
@media (min-width: 1180px) {
  .home-grid { grid-template-columns: 280px minmax(0, 1fr); column-gap: var(--s5); }
  .home-grid > .home-left { display: grid; min-width: 0; position: sticky; top: calc(var(--appbar-h) + var(--s5));
    padding: var(--s5); background: var(--surface); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--lift); }
}
.home-center :is(.dir-head, .sres-head) h1 { font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -0.03em; }
.home-center .dir-head { margin-bottom: 0; }
.home-center .dir-head > div { gap: var(--s1); }
.home-center .dir-head > div > p { font-size: var(--fs-sm); color: var(--ink-2); }
.home-center .state { padding-block: var(--s6); }
.home-center .state > .icon { color: var(--accent); }
.app-startup { position: relative; z-index: 1; color: var(--ink); font-weight: 600; text-decoration: none; transition: color var(--t-fast) var(--ease); } /* above the row's stretched link */
.app-startup:hover { color: var(--accent); }
/* nested grids size to their content: let them shrink so long names cut with «…» instead of spilling into the feed */
.home-left, .home-left > .section, .me-top { grid-template-columns: minmax(0, 1fr); }
.me-top { display: grid; gap: var(--s1); }
.me-id { display: grid; justify-items: start; gap: var(--s3); margin-bottom: var(--s1); color: var(--ink); text-decoration: none; }
.me-name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; transition: color var(--t-fast) var(--ease); }
.me-id:hover .me-name { color: var(--accent); }
.me-id > .avatar { transition: box-shadow var(--t-base) var(--ease); }
.me-id:focus-visible > .avatar { box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--accent), inset 0 0 0 1px var(--av-ring); }
.me-sub { color: var(--ink); font-size: var(--fs-md); line-height: 1.35; text-wrap: pretty; overflow-wrap: anywhere; }
.me-meta { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.4; text-wrap: pretty; overflow-wrap: anywhere; }
.me-stat:has(.me-none) { display: grid; justify-content: start; gap: 2px; }
.me-stat .me-none { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 400; }
.home-left .section h2 { font-size: var(--fs-lg); }
.me-links { display: grid; margin: 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line); list-style: none; }
.me-links a { display: flex; align-items: center; gap: var(--s3); min-height: 40px; color: var(--ink); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: color var(--t-fast) var(--ease); }
.me-links .icon { color: var(--ink-2); }
.me-links a:is(:hover, [aria-current="page"]) .icon { color: inherit; }
.me-links a:is(:hover, [aria-current="page"]) { color: var(--accent); }
.me-links .n { margin-left: auto; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.me-stat { margin: var(--s3) 0 0; }
.me-stat { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); color: var(--ink); font-size: var(--fs-md); font-weight: 600; }
.me-stat small { display: block; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 400; }
.me-stat .n { color: var(--accent); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Not .composer: that is the chat's message box in components.css. */
.home-compose { display: grid; padding-inline: var(--s5); container-type: inline-size; }
.home-compose .cbox-open { min-height: 64px; padding: var(--s4) 0 var(--s3); border-block: 0; }
:is(.home-compose, .reply-top) .cbox-txt { flex: 1; display: flex; align-items: center; min-width: 0; min-height: 48px; padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); box-shadow: var(--well); color: var(--ink-2); font-size: var(--fs-md); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
:is(.home-compose, .reply-top) .cbox-open:hover .cbox-txt { color: var(--ink); border-color: var(--ink-2); }
:is(.home-compose, .reply-top) .cbox-open:focus-visible { outline: none; }
:is(.home-compose, .reply-top) .cbox-open:focus-visible .cbox-txt { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--halo); }
button.cbox-open { width: 100%; border-inline: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.compose-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s5); padding: 0 0 var(--s3) calc(40px + var(--s3) + var(--s4)); }
.compose-kinds button { display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: color var(--t-fast) var(--ease); }
.compose-kinds button:hover { color: var(--accent); }
.compose-kinds .icon-sm { color: var(--accent); transition: transform var(--t-base) var(--ease-out); }
@media (hover: hover) { .compose-kinds button:not(.compose-drafts):hover .icon-sm { transform: translateY(-1px) rotate(-8deg); } }
.compose-kinds .compose-drafts { margin-left: auto; font-weight: 500; }
.compose-kinds .compose-drafts .icon-sm { color: currentColor; }
@container (max-width: 400px) { .compose-kinds { padding-left: 0; } }
:is(.cbox-open, .compose-kinds, .compose-form, .compose-seg, .compose-drafts)[hidden] { display: none; }
.compose-form { display: grid; gap: var(--s4); padding: var(--s4) 0; caret-color: var(--accent); }
.compose-top { display: flex; align-items: center; gap: var(--s3); }
.compose-id { flex: 1; min-width: 0; }
.compose-who { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.compose-sub { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); }
.compose-seg button { gap: var(--s1); padding: 0; }
.compose-form .tabbar:has(> .compose-seg[hidden]) { display: none; }
.compose-fields { display: grid; gap: var(--s5); min-width: 0; }
.compose-fields > div:empty { display: none; }
.compose-form [role="status"] .icon { animation: spin 1s linear infinite; }
.compose-form p[role="status"] { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.compose-tools { display: flex; flex-wrap: wrap; gap: var(--s1); margin: calc(-1 * var(--s3)) 0 0 calc(-1 * var(--s2)); }
.cimgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.cimg { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--line); color: var(--ink-2); }
.cimg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cimg-x, .cimg-alt { position: absolute; display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgb(29 21 25 / .72); color: #fff; cursor: pointer; transition: color var(--t-fast) var(--ease); }
.cimg-x:hover, .cimg-alt:hover { color: var(--accent-soft); }
.cimg-x { top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; }
.cimg-alt { left: 4px; bottom: 4px; gap: 2px; min-height: 24px; padding: 0 6px; border-radius: var(--radius-pill); font: inherit; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; }
.compose-quote { display: grid; justify-items: start; gap: var(--s1); }
.compose-quote .cquote { justify-self: stretch; }
.vis-mark { display: inline-flex; vertical-align: middle; margin-left: var(--s1); color: var(--ink-2); }
.compose-note { flex: 1 1 16rem; margin: 0 auto 0 0; }
.compose-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
@keyframes compose-in { from { opacity: 0; transform: translateY(8px); } }
.compose-form .field > :is(label, .label) { color: var(--ink); transition: color var(--t-fast) var(--ease); }
.compose-form .field:focus-within > :is(label, .label) { color: var(--accent); }
/* «(obligatorio)» is read out but not shown: optional fields say «Opcional.» instead */
.compose-form .req { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.compose-form :is(#f-title, #f-mcity) { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
/* text grows with what you write: no drag handle; 22px = the box's padding and border */
.compose-form .textarea { min-height: calc(3lh + 22px); resize: none; field-sizing: content; }
.compose-form #f-title.textarea { min-height: var(--tap); }
@supports not (field-sizing: content) { .compose-form .textarea { min-height: 0; resize: vertical; } }
.compose-fields[data-kind="text"] #f-body { min-height: calc(6lh + 22px); }
.compose-form .counter { opacity: 0; transition: opacity var(--t-base) var(--ease); }
.compose-form .field:focus-within .counter, .compose-form .counter.is-over { opacity: 1; }
.compose-seg { position: relative; }
.compose-form .seg button[aria-pressed="true"] { box-shadow: none; }
.compose-seg::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--ink-w, 0); height: 2px; border-radius: 1px; background: var(--accent); transform: translateX(var(--ink-x, 0)); pointer-events: none; }
.compose-seg.is-slide::after { transition: transform var(--t-slow) var(--ease-out), width var(--t-slow) var(--ease-out); }
.compose-form > * { animation: compose-in var(--t-slow) var(--ease-out) backwards; }
.compose-form > :nth-child(2) { animation-delay: 40ms; }
.compose-form > :nth-child(3) { animation-delay: 80ms; }
.compose-form > :nth-child(n + 4) { animation-delay: 120ms; }
@supports (interpolate-size: allow-keywords) {
  .compose-form { interpolate-size: allow-keywords; overflow: clip; overflow-clip-margin: var(--s2); transition: height var(--t-open) var(--ease-out); }
  @starting-style { .compose-form { height: 0; } }
}
.compose-fields.is-in > * { animation: compose-in var(--t-slow) var(--ease-out) backwards; }
.compose-fields.is-in > :nth-child(2) { animation-delay: 40ms; }
.compose-fields.is-in > :nth-child(3) { animation-delay: 80ms; }
.compose-fields.is-in > :nth-child(n + 4) { animation-delay: 120ms; }
.home-compose :is(.cbox-open, .compose-kinds) { transition: opacity var(--t-base) var(--ease), color var(--t-fast) var(--ease); }
@starting-style { .home-compose :is(.cbox-open, .compose-kinds) { opacity: 0; } }
.draft-list { display: grid; margin: 0; padding: 0; list-style: none; }
.draft-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--line); }
.draft-row:last-child { border-bottom: 0; }
.draft-open { display: grid; justify-items: start; gap: 2px; min-width: 0; padding: var(--s3) 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.draft-open b { font-weight: 600; overflow-wrap: anywhere; transition: color var(--t-fast) var(--ease); }
.draft-open:hover b { color: var(--accent); }
.draft-open small { color: var(--ink-2); font-size: var(--fs-xs); }
@media (prefers-reduced-motion: reduce) {
  .compose-form > *, .compose-fields.is-in > * { animation: none; }
  .compose-form, .compose-form :is(.input, .textarea), .compose-seg::after, .home-compose .cbox-txt, .compose-kinds .icon-sm { transition: none; }
}

@media (pointer: coarse) { .compose-kinds button, .me-links a, .cpost-act, .cpost-replies { min-height: var(--tap); } }

.meet { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s4); align-items: start; }
.meet-date { display: grid; justify-items: start; padding-top: 5px; color: var(--ink-2); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase; } /* 5px: the weekday sits on the title's line */
.meet-day { margin: var(--s1) 0; color: var(--accent); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1; text-transform: none; } /* proportional figures: the tabular 1 of this face carries a foot */
.meet:is(.is-cancelled, .is-done) .meet-day { color: var(--ink-2); }
.meet-date.is-sm { flex: none; width: 3rem; }
.meet-main { display: grid; gap: var(--s1); min-width: 0; }
.meet-main > :is(.cpost-body, .cpost-text) { margin-top: var(--s2); }
.meet-live { display: grid; gap: var(--s3); min-width: 0; }
.meet-live > .meet-who:first-child { margin-top: var(--s1); }
.meet-where { display: grid; justify-items: start; gap: var(--s1); min-width: 0; }
.meet-when { margin: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.meet-when b { font-weight: 600; font-variant-numeric: tabular-nums; }
.meet-map { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--ink-2); font-size: var(--fs-sm); text-decoration-color: var(--line-strong); text-underline-offset: 3px; overflow-wrap: anywhere; }
.meet-map:hover { color: var(--accent); text-decoration-color: currentColor; }
.meet-map > .icon-sm { flex: none; }
.meet-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.meet-req { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.meet-inv-by { margin: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.meet-going { position: relative; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.meet-going:hover { color: var(--accent); text-decoration-color: currentColor; }
.meet-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); min-height: 36px; }
.meet-yes { display: inline-flex; align-items: center; gap: var(--s1); color: var(--accent); font-size: var(--fs-sm); font-weight: 600; }
.meet-state { font-size: var(--fs-sm); font-weight: 600; }
.meet-ask { margin: 0; font-size: var(--fs-sm); }
.meet.is-fresh .meet-yes .icon-sm { animation: pop .3s var(--ease) both; }
.meet.is-fresh .poll-fill { animation: poll-grow .7s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .meet.is-fresh :is(.meet-yes .icon-sm, .poll-fill) { animation: none; } }
.meet-vote button.poll-row { height: auto; padding-block: var(--s2); }
.meet-vote .poll-meta .btn-quiet { margin-right: calc(-1 * var(--s2)); }
.meet-people { display: grid; margin: 0; padding: 0; list-style: none; }
.meet-person { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) 0; }
.meet-person + .meet-person { border-top: 1px solid var(--line); }
.meet-person > .avatar { flex: none; }
.meet-person-t { display: grid; flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.meet-person-t :is(b, a) { color: var(--ink); font-weight: 600; }
.meet-person-t a:hover { color: var(--accent); }
.meet-person-t small { color: var(--ink-2); font-size: var(--fs-sm); }
.meet-person > :is(.btn, .meet-state) { flex: none; }
.meet-person > .btn-quiet { margin-right: calc(-1 * var(--s2)); }
.meet-inv { display: grid; gap: var(--s2); min-height: 9rem; }
.meet-inv-t { margin: var(--s3) 0 0; font-size: var(--fs-sm); font-weight: 600; }
.meet-inv-t:first-child { margin-top: 0; }
.meet-left { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.meet-left:empty { display: none; }
#f-inote { min-height: 4.5rem; }
.meet-rules { display: grid; gap: var(--s3); margin: 0; padding-left: 1.25rem; font-size: var(--fs-sm); }
.meet-rules li::marker { color: var(--accent); font-weight: 700; }
.meet-slot { display: contents; }
.meet-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding: var(--s3) var(--s5); font-size: var(--fs-sm); }
.meet-line-t { display: flex; align-items: flex-start; gap: var(--s2); flex: 1 1 18rem; min-width: 0; margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.meet-line-t > .icon-sm { flex: none; margin-top: 3px; color: var(--accent); } /* 3px: centred on the first line of text */
.meet-line-t > span { min-width: 0; }
.meet-line-t :is(b, a) { color: var(--ink); font-weight: 600; }
.home-center:has(.compose-form:not([hidden]) [data-kind="meet"][aria-pressed="true"]) .meet-line:has([data-organize]) { display: none; }
.meet-line-a { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.meet-line-a > .btn-quiet:last-child { margin-right: calc(-1 * var(--s2)); }
.meet-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); align-items: start; }
.meet-head > .meet-date { order: 1; padding-top: 0; }
.meet-head:has(> .meet-date.is-blank) { grid-template-columns: minmax(0, 1fr); }
.meet-head > .meet-date.is-blank { display: none; }
.meet-date.is-fresh .meet-day { animation: pop .3s var(--ease) both; }
.meet-dt { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); } /* a boxed date needs 10rem: narrower, it runs into the time */
/* an empty day or time shows nothing until it has focus: no «dd/mm/aaaa» standing in for a value */
.meet-dt input.is-empty:not(:focus)::-webkit-datetime-edit { color: transparent; }
.meet-dt input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; transition: opacity var(--t-fast) var(--ease); }
.meet-dt input:is(:hover, :focus)::-webkit-calendar-picker-indicator { opacity: 1; }
.compose-form #f-mcap { max-width: 6rem; font-variant-numeric: tabular-nums; }
.meet-alt { display: grid; gap: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.meet-alt-t { margin: 0; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .meet-date.is-fresh .meet-day { animation: none; } .meet-dt input::-webkit-calendar-picker-indicator { transition: none; } }
.meet-two { justify-self: start; margin-left: calc(-1 * var(--s2)); }
@media (pointer: coarse) { .meet-acts .btn, .meet-line-a .btn, .meet-vote .btn, .meet-person .btn { min-height: var(--tap); } :is(.meet-map, .meet-going)::after { content: ""; position: absolute; inset: -12px 0; } }
@media (max-width: 479px) { .meet { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s3); } .meet-day { font-size: var(--fs-xl); } }