:is(.btn, .icon-btn, .chip, .linklike, .title-link, .nav-link, .bottomnav a, .crumbs a, .input, .textarea, .select, .seg button) {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: var(--t-fast);
  transition-timing-function: var(--ease);
}
:is(.btn, .icon-btn, .chip):is(:disabled, [aria-disabled="true"]) { opacity: var(--disabled-o); cursor: not-allowed; }
.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(.nav-link, .bottomnav a, .crumbs a, .icon-btn, .btn-ghost, .btn-quiet, .title-link, .pic-btn, .acct-list :is(a, button), .pf-add, .pf-links a):is(:hover, .is-hover):not(:disabled) { color: var(--accent); }

.on-ink, .toast, .offline-bar, .skip {
  background: var(--ink); color: var(--paper);
  --accent: var(--accent-inv); --danger: var(--danger-inv); --focus: var(--accent-inv);
}

@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes pop    { from { transform: scale(.6); opacity: 0; } }
@keyframes nudge  { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes pulse  { 50% { opacity: .5; } }
@keyframes fade-in  { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 20px; border-radius: var(--radius); border: 1px solid transparent;
  background: transparent; color: var(--ink); font-weight: 600; font-size: var(--fs-sm); line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-sm { min-height: 36px; padding: 0 var(--s3); }
.btn-block { width: 100%; }

.btn-primary { background-color: var(--accent); background-image: var(--grad-sheen); border-color: var(--accent-press); color: var(--on-accent); box-shadow: var(--shadow-press); }
.btn-primary:is(:hover, .is-hover):not(:disabled, [aria-busy="true"]) { background-color: var(--accent-press); }
.btn-primary:is(:active, .is-active):not(:disabled) { background-color: var(--accent-press); background-image: none; box-shadow: var(--well); }

.btn-secondary { background: var(--surface); border-color: var(--line-strong); border-bottom-color: var(--line-base); box-shadow: var(--lift); }
.btn-secondary:is(:hover, .is-hover):not(:disabled) { background: var(--paper); border-color: var(--ink-2); }
.btn-secondary:is(:active, .is-active):not(:disabled) { background: var(--line); box-shadow: none; }

.btn-ghost { padding: 0 var(--s2); }
.btn-quiet { padding: 0 var(--s2); color: var(--ink-2); font-weight: 500; }

.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--line-strong); border-bottom-color: var(--line-base); box-shadow: var(--lift); }
.btn-danger:is(:hover, .is-hover):not(:disabled) { background: var(--danger-soft); border-color: var(--danger); }

.btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.btn[aria-busy="true"] .icon { animation: spin .8s linear infinite; }
.btn[data-state] { background: transparent; box-shadow: none; }
.btn[data-state="error"] { color: var(--danger); border-color: currentColor; animation: nudge 320ms var(--ease); }
.btn[data-state="error"]:is(:hover, .is-hover) { background: var(--danger-soft); }
.btn[data-state="success"] { color: var(--accent); border-color: transparent; opacity: 1; cursor: default; }
.btn[data-state="success"] .icon { animation: pop var(--t-base) var(--ease); }

.icon-btn { text-decoration: none;
  position: relative; flex: none; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap);
  border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
}
.icon-btn:is(:focus-visible, .is-focus) { outline-offset: 0; }
.icon-btn.solid { color: var(--on-accent); background-color: var(--accent); background-image: var(--grad-sheen); box-shadow: var(--shadow-press); }
.icon-btn.solid:is(:hover, .is-hover):not(:disabled) { color: var(--on-accent); background-color: var(--accent-press); }
:is(.btn-primary, .icon-btn.solid):is(:disabled, [aria-disabled="true"]) { background: var(--line); background-image: none; border-color: transparent; color: var(--ink-2); box-shadow: none; opacity: 1; }

:is(.icon-btn, .btn-ghost, .btn-quiet)[aria-pressed="true"] { color: var(--accent); }
[aria-pressed="true"] .icon { --icon-fill: currentColor; animation: pop var(--t-base) var(--ease); }

.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
:is(.icon-btn, .bottomnav a) > .dot { position: absolute; box-shadow: 0 0 0 2px var(--paper); }
.icon-btn > .dot { top: 10px; right: 10px; }
.bottomnav a > .dot { top: 9px; right: calc(50% - 15px); }
.badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--paper); }
.badge[hidden] { display: none; }

.linklike { background: none; border: 0; padding: 0; min-height: 24px; color: var(--accent); font-weight: 600; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; text-align: inherit; cursor: pointer; }
.linklike:hover { color: var(--ink); }
.title-link { font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
/* the whole row opens through its title link; actions sit above it */
.stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.stretch:focus-visible { outline: none; color: var(--accent); }
.stretch:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }

:is(.input, .textarea, .select) {
  width: 100%; min-height: var(--tap); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: var(--well);
}
.textarea { min-height: 112px; resize: vertical; line-height: var(--lh-text); }
:is(.input, .textarea, .select):is(:hover, .is-hover):not(:disabled) { border-color: var(--ink-2); }
:is(.input, .textarea, .select):is(:focus-visible, .is-focus) { outline: 2px solid transparent; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--halo); }
:is(.input, .textarea, .select):disabled { background: transparent; color: var(--ink-2); border-style: dashed; box-shadow: none; cursor: not-allowed; }
/* The open list of a select is the .suggest list (same surface, edge, shadow, rows), not the system one with its blue.
   shortcut: Chromium only (appearance: base-select); Safari and Firefox keep their native list until they ship it. */
@supports (appearance: base-select) {
  .select, .select::picker(select) { appearance: base-select; }
  .select { display: flex; align-items: center; gap: var(--s2); cursor: pointer; }
  .select::picker-icon { content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; background: var(--ink-2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate var(--t-fast) var(--ease); }
  .select:open::picker-icon { rotate: 180deg; }
  .select::picker(select) { margin-top: 4px; padding: var(--s1) 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-float); }
  .select:open::picker(select) { transform-origin: top; animation: pop-in var(--t-base) var(--ease); }
  .select option { min-height: 40px; padding: 6px 14px; color: var(--ink); background: none; cursor: pointer; }
  .select option::checkmark { display: none; }
  .select option:is(:hover, :focus-visible, :checked) { color: var(--accent); }
  .select option:focus-visible { outline: 0; background: var(--accent-soft); }
  .select option:checked { font-weight: 600; }
  @media (pointer: coarse) { .select option { min-height: var(--tap); } }
  @media (prefers-reduced-motion: reduce) { .select:open::picker(select) { animation: none; } .select::picker-icon { transition: none; } }
}
:is(.input, .textarea)[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
:is(.input, .textarea)[aria-invalid="true"]:is(:focus-visible, .is-focus) { box-shadow: 0 0 0 1px var(--danger), 0 0 0 4px var(--danger-soft); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid var(--line-strong); border-bottom-color: var(--line-base); background: var(--surface); color: var(--ink);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; cursor: pointer; box-shadow: var(--lift);
}
.chip::after { content: ""; position: absolute; inset: -4px 0; } /* 44px touch target */
.ice { margin-bottom: var(--s3); }
.ice .chip { white-space: normal; text-align: left; padding-block: 6px; line-height: 1.35; font-weight: 400; color: var(--ink-2); box-shadow: none; }
.chat .ice { margin: 0 var(--s4) var(--s2); }
:is(.chip, .filter):is(:hover, .is-hover):not(:disabled) { border-color: var(--accent); color: var(--accent); }
:is(.chip[aria-pressed="true"], .filter[data-set]) { background-color: var(--mark); border-color: var(--mark); color: var(--on-mark); font-weight: 600; box-shadow: none; }
:is(.chip[aria-pressed="true"], .filter[data-set]):is(:hover, .is-hover):not(:disabled) { background-color: color-mix(in oklab, var(--mark) 82%, var(--paper)); border-color: transparent; color: var(--on-mark); }
.toolbar :is(.chip[aria-pressed="true"], .filter[data-set]) { background-color: var(--surface); border-color: var(--line-strong); border-bottom-color: var(--line-base); color: var(--ink); box-shadow: var(--lift); }
.toolbar :is(.chip[aria-pressed="true"], .filter[data-set]):is(:hover, .is-hover):not(:disabled) { background-color: var(--surface); border-color: var(--accent); color: var(--accent); }
.chip .icon-sm { display: none; }
.chip:is([aria-pressed="true"], .has-menu) .icon-sm { display: inline; }
.chip[aria-pressed="true"] .icon-sm { animation: pop var(--t-base) var(--ease); }
.chip[data-tagx] { background-color: var(--surface); border-color: var(--line-strong); border-bottom-color: var(--line-base); color: var(--ink); font-weight: 500; box-shadow: var(--lift); }
.chip[data-tagx]:is(:hover, .is-hover):not(:disabled) { background-color: var(--surface); border-color: var(--accent); color: var(--accent); }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.tag.pending::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.pending { color: var(--warn); }
.tag.pending::before { box-shadow: 0 0 0 3px var(--warn-soft); }
.tag.muted { font-weight: 400; }

.avatar {
  --av-size: 40px;
  flex: none; display: inline-grid; place-items: center; width: var(--av-size); height: var(--av-size); border-radius: 50%;
  font-weight: 600; font-size: calc(var(--av-size) * .35); letter-spacing: .02em;
  background: var(--line); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--av-ring);
}
.avatar.sq { border-radius: var(--radius); }
.avatar.s32 { --av-size: 32px; }
.avatar.s40 { --av-size: 40px; }
.avatar.s56 { --av-size: 56px; border-radius: var(--radius-lg); }
.avatar.s56:not(.sq) { border-radius: 50%; }
img.avatar { object-fit: cover; background: var(--line); }
img.avatar[src$="/k-mark.svg"] { object-fit: contain; padding: calc(var(--av-size) * .16); background: var(--paper); } /* a % padding would follow the parent's width */

.faces { display: inline-flex; align-items: center; vertical-align: middle; }
.faces > .avatar { box-shadow: 0 0 0 2px var(--paper); }
.faces > .avatar + .avatar { margin-left: -10px; }
.faces > .faces-more { width: auto; min-width: var(--av-size); padding-inline: 5px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-2); font-size: calc(var(--av-size) * .4); letter-spacing: 0; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--paper), inset 0 0 0 1px var(--line); }

.vbadge { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--surface); }
.vbadge .icon-sm { width: 12px; height: 12px; stroke-width: 3; }

.fit { display: inline-flex; align-items: stretch; font-size: var(--fs-xs); line-height: 1.25; max-width: 100%; }
.fit-a, .fit-b { display: block; align-content: center; padding: 5px 14px 5px 10px; min-width: 0; }
.fit svg { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.fit b { display: inline-block; }
.fit b { font-weight: 600; }
.fit-a { background: var(--line); color: var(--ink); border-radius: var(--radius) 0 0 var(--radius);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); }
.fit-b { margin-left: -5px; padding-left: 15px; background: var(--mark); color: var(--on-mark); border-radius: 0 var(--radius) var(--radius) 0;
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%); }
.fit.is-match .fit-b { background: var(--accent); color: #fff; }

.skel { display: block; height: 12px; border-radius: 4px; background: var(--line); animation: pulse 1.6s var(--ease) infinite; }
.skel.tile { width: 40px; height: 40px; border-radius: var(--radius); }
.divider { display: flex; align-items: center; gap: var(--s3); color: var(--ink-2); font-size: var(--fs-xs); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.field { display: grid; gap: 6px; }
.field > :is(label, .label) { font-weight: 600; font-size: var(--fs-sm); }
.field .req { color: var(--ink-2); font-weight: 400; }
.hint { font-size: var(--fs-xs); color: var(--ink-2); }
.hint.web-logo { display: flex; align-items: center; gap: var(--s2); }
.field-foot { display: flex; justify-content: space-between; gap: var(--s3); }
.field-foot > [data-forgot] { margin-left: auto; flex: none; }
.pw-wrap { position: relative; }
.pw-wrap > .input { padding-right: calc(var(--tap) + 4px); }
.pw-eye { position: absolute; inset: 0 0 0 auto; display: grid; place-items: center; width: var(--tap); padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--ink-2); cursor: pointer; }
.pw-eye:hover { color: var(--ink); }
[data-captcha]:empty { display: none; } /* where Turnstile shows its challenge, when it shows one */
.counter { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.counter.is-over { color: var(--danger); font-weight: 600; animation: nudge 320ms var(--ease); }
:is(.error-msg, .ok-msg) { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-xs); font-weight: 500; }
:is(.error-msg, .ok-msg) .icon-sm { margin-top: 1px; }
.error-msg { color: var(--danger); animation: nudge 320ms var(--ease); }
.ok-msg { color: var(--accent); }
.ok-msg .icon-sm { animation: pop var(--t-base) var(--ease); }

.control { position: relative; }
.control > :is(.input, .select) { padding-right: 40px; }
.control > .affix { position: absolute; right: 12px; top: calc(50% - 8px); color: var(--ink-2); pointer-events: none; }
.control[data-state="loading"] > .affix { animation: spin .8s linear infinite; }
.control[data-state="error"] > .affix { color: var(--danger); }
.control[data-state="success"] > .affix { color: var(--accent); animation: pop var(--t-base) var(--ease); }

.search { position: relative; display: flex; align-items: center; }
.search > .icon { position: absolute; left: 12px; color: var(--ink-2); pointer-events: none; }
.search .input { padding-left: 40px; padding-right: 44px; }
.search .icon-btn { position: absolute; right: 2px; width: 40px; height: 40px; }
.combo { position: relative; }
.suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; margin: 0; padding: var(--s1, 4px) 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.suggest[hidden] { display: none; }
.combo.is-inline .suggest { position: static; margin-top: var(--s1); box-shadow: none; scroll-margin-bottom: 96px; }
.combo.is-inline:has(> [data-opts]) > .input { padding-right: 40px; }
.combo.is-inline:has(> [data-opts])::after { content: ""; position: absolute; top: 0; right: 12px; width: 18px; height: var(--tap); pointer-events: none; background: var(--ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat; }
.combo.is-inline:has(> .suggest:not([hidden]))::after { rotate: 180deg; }
@media (prefers-reduced-motion: no-preference) { .combo.is-inline:has(> [data-opts])::after { transition: rotate var(--t-fast) var(--ease); } }
.suggest [data-on] { color: var(--accent); font-weight: 600; }
.suggest [data-on]::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.suggest [role="option"] { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px; cursor: pointer; color: var(--ink); }
.suggest [role="option"] .icon { color: var(--ink-2); flex: none; }
.suggest [role="option"] span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest [role="option"] b { font-weight: 700; }
.suggest small { font-size: var(--fs-xs); color: var(--ink-2); flex: none; }
.suggest [role="option"]:hover, .suggest [aria-selected="true"] { color: var(--accent); }
.suggest [aria-selected="true"] { background: var(--accent-soft); }
.suggest-head { padding: 6px 14px 2px; font-size: var(--fs-xs); color: var(--ink-2); }
.suggest [role="option"] > :is(.avatar, .ts-ic) { flex: none; overflow: visible; }
.suggest [role="option"] .ts-txt { flex: 1; min-width: 0; display: grid; white-space: normal; }
.suggest [role="option"] > .is-site { object-fit: contain; padding: 2px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sheet-form fieldset { display: grid; gap: var(--s4); min-width: 0; margin: 0; padding: 0; border: 0; }
.sheet-form legend { float: left; width: 100%; padding: 0; margin-bottom: var(--s1); font-weight: 600; }
.sheet-form legend + * { clear: both; }
.sheet-form fieldset > .btn { justify-self: start; }
@media (pointer: coarse) { .suggest [role="option"] { min-height: var(--tap); } }

.form-summary { border-block: 1px solid var(--danger); padding: var(--s3) 0; display: grid; gap: var(--s2); }
.form-summary p { font-weight: 600; color: var(--danger); }
.form-summary ul { margin: 0; padding-left: 1.2em; }
.form-summary a { color: var(--ink); font-weight: 600; }
.form-summary a:hover { color: var(--danger); }

.ident { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.ident small { display: block; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 400; }
.ident b { font-weight: 600; }
.ident > :is(.tag, .icon-btn) { margin-left: auto; }
a.ident { color: inherit; text-decoration: none; }
a.ident:is(:hover, .is-hover) :is(b, h1) { color: var(--accent); }

.nav-link { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 40px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-link[aria-current="page"] .icon { color: var(--accent); }
/* sits on the bar's hairline, not over it: at 125-150 % zoom a -1px offset ran into the plum band of the directories */
.nav-link[aria-current="page"]::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.nav-link .count { margin-left: auto; color: var(--accent); font-size: var(--fs-xs); font-weight: 700; }

.row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3) var(--s4); padding: var(--s4) 0; }
.row > .row-main:first-child { grid-column: span 2; }
.row-main { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; min-width: 0; }
.row-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s3); }
.row-role { color: var(--ink); font-size: var(--fs-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) 0; font-size: var(--fs-sm); color: var(--ink-2); }
.row-meta span { display: inline-flex; align-items: center; gap: 4px; }
.row-meta span:not(:last-child)::after { content: "·"; margin: 0 var(--s2) 0 calc(var(--s2) - 4px); color: var(--line-strong); font-weight: 700; }
.row-actions { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: var(--s1); }
.row-new { position: relative; z-index: 1; justify-self: start; width: fit-content; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: none; }
.row-new:hover { color: var(--accent-press); }
.row-new:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.row.is-stale :is(.title-link, .row-role) { color: var(--ink-2); }
.list { container-type: inline-size; }
.row-main > .fit { order: 1; margin-top: var(--s1); }
:is(.row, .inbox-row, .table tbody tr):is(:hover, .is-hover) .title-link { color: var(--accent); }
@media (max-width: 560px) {
  .row { grid-template-columns: auto minmax(0, 1fr); }
  .row-actions { position: absolute; top: var(--s2); right: calc(-1 * var(--s2)); }
  .row-title { padding-right: 40px; }
}

.inbox-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; }
.inbox-row .row-main { gap: 2px; grid-template-columns: minmax(0, 1fr); }
.inbox-row .last { max-width: 100%; }
.inbox-row .last { color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-row.is-unread .last { color: var(--ink); font-weight: 600; }
.inbox-row .side { display: grid; justify-items: end; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); }

.notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-block: 1px solid var(--line); font-size: var(--fs-sm); }
.notice > .icon { color: var(--accent); }
.notice .txt { flex: 1 1 14rem; min-width: 0; }
.notice .txt b { display: block; }
.notice .txt span { color: var(--ink-2); }
.notice .txt + .btn { margin-left: auto; }
.notice .brand-tile { flex: none; width: 40px; height: 40px; border-radius: 10px; box-shadow: var(--lift), 0 6px 14px -8px var(--shade-2); }
.notice.is-error > .icon, .notice.is-error .txt b { color: var(--danger); }

.toast {
  display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: var(--s2) var(--s2) var(--s2) var(--s4);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-float); font-size: var(--fs-sm);
  transform-origin: 50% 100%; animation: toast-in var(--t-slow) var(--ease);
}
.toast > .icon { color: var(--accent); }
.toast.is-error > .icon { color: var(--danger); }
.toast span { flex: 1; }
.toast .btn { color: inherit; }
.toast.is-leaving { animation: toast-out var(--t-fast) var(--ease-in) forwards; }
@keyframes toast-in  { from { transform: translateY(8px); opacity: 0; } }
@keyframes toast-out { to   { transform: translateY(8px) scale(.98); opacity: 0; } }

.msg-group { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s3); align-items: start; padding: var(--s2) 0; }
.msg-group > .avatar { grid-row: 1 / span 99; margin-top: 2px; }
.msg-group > :not(.avatar) { grid-column: 2; }
.msg-head { display: flex; align-items: baseline; gap: var(--s2); line-height: 1.3; }
.msg-head b { font-size: var(--fs-sm); }
.msg-head time { font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.msg-group.is-me .msg-head b { color: var(--ink-2); }
.msg { display: grid; gap: 2px; max-width: var(--measure); padding-top: 2px; }
.msg p { line-height: var(--lh-text); overflow-wrap: anywhere; white-space: pre-line; }
.msg .meta { font-size: var(--fs-xs); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px var(--s2); align-items: center; }
.msg .meta .icon-sm { flex: none; }
.msg.is-sending { animation: msg-in var(--t-base) var(--ease); }
.msg.is-sending p { color: var(--ink-2); }
.msg.is-failed p { color: var(--ink-2); }
.msg.is-failed .meta { color: var(--danger); animation: nudge 320ms var(--ease); }
@keyframes msg-in { from { transform: translateY(4px); opacity: 0; } }

.stepper { display: grid; gap: var(--s2); }
.stepper p { font-size: var(--fs-sm); color: var(--ink-2); }
.stepper p b { color: var(--ink); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; }
.steps li { position: relative; overflow: hidden; height: 4px; border-radius: 2px; background: var(--line); }
.steps li::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease); }
.steps li.done::before { transform: scaleX(1); }
.steps li[aria-current="step"]::before { background: var(--ink); transform: scaleX(1); }

.facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; padding: 0; font-size: var(--fs-sm); }
.facts div { display: flex; gap: 6px; align-items: baseline; }
.facts dt { color: var(--ink-2); white-space: nowrap; }
.facts dd { margin: 0; font-weight: 600; }
.otp { display: flex; gap: var(--s2); }
.otp .input { flex: 1 1 0; min-width: 0; max-width: 44px; padding: 0; text-align: center; font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.verify-num { margin: var(--s4) 0 0; font: 700 clamp(4.5rem, 3.5rem + 5vw, 6.5rem)/1 var(--font-display); letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.verify-time { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s5); color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.verify-time > .icon-sm { color: var(--accent); animation: spin 1.4s linear infinite; }
.verify-time + .hint { margin-bottom: calc(-1 * var(--s1)); }
/* while this session waits for confirmation every section link bounces back here, so hide them */
body[data-sec="verificar"] :is(.topnav, .msg-btn, .acct, .bottomnav) { display: none; }

.auth-btn { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; min-height: 48px; }
.auth-btn > svg { grid-column: 1; width: 20px; height: 20px; }
.auth-btn > span { grid-column: 2; text-align: center; }
.auth-btn.linkedin > svg { color: var(--brand-linkedin); }
.auth-btn.apple > svg { color: var(--ink); fill: currentColor; }
.auth-soon { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin: 0 0 var(--s3); padding: 0; list-style: none; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.auth-soon li { display: inline-flex; align-items: center; gap: var(--s2); }
.auth-soon svg { flex: none; width: 18px; height: 18px; }
.auth-soon .linkedin svg { color: var(--brand-linkedin); }
.auth-soon .apple svg { color: var(--ink); fill: currentColor; }

.skip { position: absolute; left: var(--s3); top: -100px; z-index: 50; padding: var(--s2) var(--s4); border-radius: var(--radius); }
.skip:focus { top: var(--s3); }
html, body { overflow-x: clip; }
/* short and long pages keep the same left edge whether or not a scrollbar shows */
html { scrollbar-gutter: stable; }
.main { min-width: 0; }
/* route headings take focus for screen readers; the ring is for keyboard targets only */
[tabindex="-1"]:focus { outline: none; }
.shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.brand { display: inline-flex; flex: none; color: var(--ink); }
/* the inline logo has no width attribute: without its ratio a flex bar squeezes it to ~30px; 38px keeps the letters at a 25px cap height */
.brand svg { height: 38px; width: auto; aspect-ratio: 5584 / 1150; }
.brand[data-logo]:empty { height: 38px; aspect-ratio: 5584 / 1150; } /* holds the logo's place until the inline SVG arrives (no layout shift) */
.topnav { display: none; }

.appbar, .bottomnav, .ctabar { background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.appbar { position: sticky; top: 0; z-index: 10; height: var(--appbar-h); display: flex; align-items: center; gap: var(--s2); padding: 0 var(--gutter); border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease); }
.appbar.is-scrolled { border-bottom-color: var(--line); }
.appbar .brand { margin-right: auto; }
@media (min-width: 960px) {
  .appbar .brand { margin-right: var(--s5); }
  .topnav { display: flex; align-self: stretch; gap: var(--s5); margin-right: auto; }
  .topnav .nav-link { gap: var(--s2); }
}

.acct { position: relative; }
.acct-btn { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 var(--s1); color: var(--ink-2); background: none; border: 0; border-radius: var(--radius); cursor: pointer; }
.acct-btn:is(:hover, .is-hover), .acct-btn[aria-expanded="true"] { color: var(--accent); }
[data-me-avatar] { display: inline-flex; }
.acct-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: min(300px, calc(100vw - 2 * var(--gutter))); display: grid; gap: var(--s3); padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-float); }
.acct-menu[hidden] { display: none; }
.acct-head { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.acct-head > div { display: grid; gap: 2px; min-width: 0; }
.acct-head b { font-weight: 600; overflow-wrap: anywhere; }
.acct-head > .icon-btn { margin-left: auto; }
.acct-head small { color: var(--ink-2); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acct-list { list-style: none; margin: 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line); display: grid; }
.acct-list :is(a, button) { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px; color: var(--ink); text-decoration: none; font: inherit; font-size: var(--fs-sm); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.acct-list .icon { color: var(--ink-2); }
[data-sec="entrar"] [data-guest] { display: none; }

.crumbs { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); min-width: 0; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.crumbs :is(a:not(.icon-btn), [aria-current]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs > svg { flex: none; }
.crumbs > svg + a { flex-shrink: 100; min-width: 5em; }
.crumbs[hidden] { display: none; }
.crumbs:has(+ .page) { width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--s5) var(--gutter) 0; }
.crumbs:has(+ .page.narrow) { max-width: calc(600px + 2 * var(--s7)); }
@media (min-width: 960px) { .crumbs:has(+ .page) { padding: var(--s6) var(--s7) 0; } }
.crumbs:not([hidden]) + .page { padding-top: var(--s3); }

.tsearch { flex: 1 1 auto; min-width: 0; max-width: 520px; }
.tsearch-panel { position: relative; }
.tsearch-row { display: flex; align-items: center; gap: var(--s2); }
.tsearch-close { display: none; }
.tsearch-form { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s2) 0 var(--s3);
  border: 1px solid transparent; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--ink) 6%, var(--surface)); color: var(--ink-2); cursor: text;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.tsearch-form:hover { border-color: var(--line-strong); }
.tsearch-form:focus-within { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--halo); }
.tsearch-form > .icon { flex: none; }
.ts-input { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: max(16px, 1em); outline: none; }
/* the browser's own clear button is blue: the house × instead */
.ts-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; cursor: pointer; background: var(--ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ts-input::-webkit-search-cancel-button:hover { background: var(--accent); }
.ts-list [role="option"] { gap: var(--s3); min-height: 48px; padding: 6px var(--s4); }
.ts-list [role="option"] :is(.avatar, .ts-ic) { flex: none; overflow: visible; }
.ts-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--ink-2); }
.ts-list [role="option"] .ts-txt { flex: 1; min-width: 0; display: grid; white-space: normal; }
.ts-txt > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-list .suggest-head { padding: var(--s3) var(--s4) var(--s1); font-weight: 600; }
.ts-list .suggest-head ~ .suggest-head { margin-top: var(--s1); border-top: 1px solid var(--line); }
@media (min-width: 960px) {
  .tsearch { flex-basis: 400px; margin-inline: auto; }
  .appbar:has(.tsearch:not([hidden])) .topnav { margin-right: var(--s4); }
  .ts-list { left: auto; right: 0; width: max(100%, 380px); max-height: min(70vh, 560px); overflow-y: auto; border-radius: var(--radius-lg); }
}
@media (min-width: 960px) and (max-width: 1179px) {
  .appbar:has(.tsearch:not([hidden])) .brand { margin-right: var(--s3); }
  .appbar:has(.tsearch:not([hidden])) .topnav { gap: var(--s3); }
}
@media (max-width: 959px) {
  .appbar:has(.tsearch:not([hidden])) .brand { margin-right: 0; }
  .appbar:has(.tsearch:not([hidden])) .brand { width: 26px; overflow: hidden; }
  .appbar:has(.tsearch:not([hidden])) .brand svg { flex: none; max-width: none; }
  .tsearch { margin-inline: var(--s2); max-width: none; }
  .tsearch:not(.is-open) .ts-list { display: none; }
  /* touching it opens the search full screen; the bar's frosted glass would otherwise be the panel's box */
  .appbar:has(.tsearch.is-open) { z-index: 40; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tsearch.is-open .tsearch-panel { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--paper); }
  .tsearch.is-open .tsearch-row { flex: none; height: var(--appbar-h); padding: 0 var(--gutter) 0 calc(var(--gutter) - var(--s2)); border-bottom: 1px solid var(--line); }
  .tsearch.is-open .tsearch-close { display: inline-grid; }
  .ts-list { position: static; flex: 1; min-height: 0; overflow-y: auto; border: 0; border-radius: 0; box-shadow: none; background: none; padding-bottom: env(safe-area-inset-bottom); }
  body.ts-lock { overflow: hidden; }
}
/* small phones: K, field, Avisos, Mensajes and the account fit in 320px */
@media (max-width: 400px) {
  .appbar { gap: 0; }
  .appbar > .icon-btn { width: 40px; }
  .acct-btn > .icon-sm { display: none; }
}
@media (max-width: 1179px) {
  /* the bar's frosted glass would make it the panel's box: drop it while the panel is open */
  .appbar:has(.tsearch.is-open) { z-index: 40; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tsearch.is-open .tsearch-panel { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--paper); }
  .tsearch-row { flex: none; height: var(--appbar-h); padding: 0 var(--gutter) 0 calc(var(--gutter) - var(--s2)); border-bottom: 1px solid var(--line); }
  .ts-list { position: static; flex: 1; min-height: 0; overflow-y: auto; border: 0; border-radius: 0; box-shadow: none; background: none; padding-bottom: env(safe-area-inset-bottom); }
  body.ts-lock { overflow: hidden; }
}

.bottomnav { position: fixed; inset: auto 0 0 0; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); }
@media (min-width: 960px) { .bottomnav { display: none; } }
body[data-anon]:not([data-public]) :is(.bottomnav, .appbar > :not(.brand)), body[data-anon] [data-nav="/"] { display: none; }
body[data-anon]:not([data-public]) .appbar .brand { display: inline-flex; }
.bottomnav a { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--ink-2); text-decoration: none; font-size: var(--fs-2xs); font-weight: 500; }
.bottomnav a .icon { width: 22px; height: 22px; }
.bottomnav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.bottomnav a[aria-current="page"] .icon { color: var(--accent); }
.bottomnav a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 32%; right: 32%; height: 2px; background: var(--accent); border-radius: 0 0 2px 2px; }

.toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.toolbar[hidden] { display: none; }
.toolbar-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.results { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.results b { color: var(--ink); }
.sort { margin-left: auto; display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); }
.seg { display: inline-flex; gap: var(--s4); }
.seg button { min-height: 32px; padding: 0 2px; border: 0; border-radius: 0; background: transparent; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; cursor: pointer; }
.seg button:is(:hover, .is-hover):not([aria-pressed="true"]) { color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 currentColor; }
@media (pointer: coarse) { .seg button { min-height: 38px; } .linklike { min-height: 32px; } }

.list { list-style: none; margin: 0; padding: 0; border-top: var(--border); }
.list > li { border-bottom: var(--border); }
:is(.listing, .listing [data-out], .home-center, .home-center > .section) > .list:not(.mini),
.cfeed > li, .home-compose, .meet-line, .detail-top, :is(.detail-body, .story, .story-pair) > .prose-block {
  background: var(--surface); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--lift); }
.prose-block .cfeed { gap: 0; }
.prose-block .cfeed > li { border: 0; border-bottom: var(--border); border-radius: 0; box-shadow: none; }
.prose-block .cfeed > li:last-child { border-bottom: 0; }
.prose-block .cfeed .cpost { padding-inline: 0; }
:is(.listing, .listing [data-out], .home-center, .home-center > .section) > .list:not(.mini) > li:last-child { border-bottom: 0; }
:is(.listing, .listing [data-out], .home-center, .home-center > .section) > .list:not(.mini) > li > .row { padding-inline: var(--s5); }
.team > li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; }
.team > li > .ident { flex: 1; }
.team .ident small + small { margin-top: 2px; }
.team-foot { display: grid; justify-items: start; gap: var(--s3); margin-top: var(--s4); }
.team-foot p { margin: 0; color: var(--ink-2); }
.team-sub { margin: var(--s6) 0 0; font-size: 1rem; }
.join-step { display: grid; gap: var(--s5); }
.join-step > p { margin: 0; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: 600; font-size: var(--fs-xs); color: var(--ink-2); padding: var(--s2) var(--s4) var(--s2) 0; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.table td { padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: var(--border); vertical-align: middle; }
.table .ident { min-width: 220px; }
.table .num { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.table :is(td, th):last-child { text-align: right; white-space: nowrap; padding-right: 0; }

.state { display: grid; justify-items: start; gap: var(--s3); padding: var(--s7) 0; max-width: 46ch; }
.state > .icon { width: 28px; height: 28px; color: var(--ink-2); }
.state :is(h3, h4) { font-size: var(--fs-lg); }
.state p { color: var(--ink-2); }
.state.is-error > :is(h3, h4, .icon) { color: var(--danger); }

.cover { display: block; width: 100%; aspect-ratio: 4 / 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--accent); }
.cover.is-empty { background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / .16) 1px, transparent 0); background-size: 14px 14px; }
.img-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.cv-name { flex: 0 1 auto; align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--ink-2); }
.crop { position: relative; overflow: hidden; width: 100%; touch-action: none; cursor: grab; user-select: none; background: var(--line); border-radius: var(--radius); }
.crop:active { cursor: grabbing; }
.crop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crop > :is(img, canvas) { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; }
.crop:is(.is-round, .is-square) { max-width: 320px; margin-inline: auto; }
.crop.is-round::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45); pointer-events: none; }
.range { width: 100%; min-height: 24px; accent-color: var(--accent); }
.crop-wrap { display: grid; gap: var(--s4); }
.crop-stage { display: grid; padding: var(--s4); background: var(--line); border-radius: var(--radius); }
.crop-tools { display: grid; gap: var(--s4); align-content: start; }
.crop-btns { display: flex; gap: var(--s1); margin-left: calc(-1 * var(--s2)); }
@media (min-width: 768px) {
  .sheet.is-crop { width: min(880px, calc(100vw - 32px)); }
  .crop-wrap { grid-template-columns: minmax(0, 1fr) 200px; align-items: start; }
}

.detail-head { display: grid; gap: var(--s4); justify-items: start; }
.detail-head > * { max-width: 100%; }
.avatar.hero { --av-size: 128px; }
.avatar.hero.sq { border-radius: var(--radius-lg); }
.hero-av { --av-size: 128px; position: relative; display: block; }
.hero-av > .avatar { display: grid; box-shadow: 0 0 0 4px var(--surface), inset 0 0 0 1px var(--av-ring); }
.hero-av > .vbadge { position: absolute; right: 3%; bottom: 3%; width: 30px; height: 30px; box-shadow: 0 0 0 3px var(--surface); }
.hero-av > .vbadge .icon-sm { width: 17px; height: 17px; }
.keys-team { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); font-weight: inherit; text-decoration: none; }
.keys-team:hover { color: var(--accent); }
.dh-id { display: grid; gap: var(--s1); }
.detail-head h1 { font-size: clamp(var(--fs-xl), 1.2rem + 2.4vw, 2.5rem); line-height: 1.1; overflow-wrap: anywhere; }
.detail-head .lead { font-size: var(--fs-lg); color: var(--ink); max-width: var(--measure); }
:is(.detail:not(.is-member) .detail-head .dh-id, .row-main) > .fit { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: var(--s1); justify-self: start; margin: var(--s2) 0 0; font-size: var(--fs-md); line-height: 1.4; }
.row .row-main > .fit { margin-top: var(--s1); font-size: var(--fs-sm); }
:is(.detail:not(.is-member) .detail-head .dh-id, .row-main) > .fit > :is(.fit-a, .fit-b) { margin: 0; padding: 0; border-radius: 0; clip-path: none; background: none; color: var(--ink-2); }
:is(.detail:not(.is-member) .detail-head .dh-id, .row-main) > .fit > .fit-a { margin-right: var(--s3); padding-right: var(--s3); border-right: 1px solid var(--line-strong); }
:is(.detail:not(.is-member) .detail-head .dh-id, .row-main) > .fit b { color: var(--ink); }
.detail-head .dh-id > .fit a { color: inherit; text-decoration: none; }
.detail-head .dh-id > .fit a:hover { color: var(--accent); }
:is(.detail:not(.is-member) .detail-head .dh-id, .row-main) > .fit.is-match > .fit-b, :is(.detail:not(.is-member) .detail-head .dh-id, .row-main) > .fit.is-match > .fit-b b { color: var(--accent); }
.dh-id > .fit-why { margin: var(--s1) 0 0; }
.fit-why { display: grid; gap: 2px; margin: calc(-1 * var(--s2)) 0 0; font-size: var(--fs-sm); color: var(--ink-2); max-width: var(--measure); }
.fit-why b { font-weight: 600; color: var(--ink); }
.dh-org { color: var(--accent); font-weight: 600; text-decoration: none; }
.dh-org:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .avatar.hero, .hero-av { --av-size: 104px; } }
.detail-head { padding: var(--pad); }
.detail-top { display: grid; min-width: 0; }
.detail-top .cover { border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; } /* -1px: inside the hairline */
.dh-cover { position: relative; }
.dh-cover > .pf-on-img { top: var(--s3); right: var(--s3); }
@media (max-width: 559px) { .dh-cover > .cover { aspect-ratio: 3 / 1; } }
.detail-head.has-cover > :is(.avatar, .hero-av) { position: relative; margin-top: calc(-0.5 * var(--av-size) - var(--pad)); }
.detail-head.has-cover:not([data-cord]) > .avatar { box-shadow: 0 0 0 4px var(--surface), inset 0 0 0 1px var(--av-ring); }
.dh-add-cover { justify-self: start; margin: var(--pad) var(--pad) calc(var(--s2) - var(--pad)); }
.detail-head > [data-bar], .detail-head > .ctabar { justify-self: stretch; }
.detail-head .ctabar { position: static; max-width: 30rem; padding: var(--s2) 0 0; border-top: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-start; flex-wrap: wrap; }
.detail-head .ctabar > :is(.btn-primary, [data-state]) { flex: 1; max-width: none; }
@media (min-width: 560px) { .detail-head .ctabar > :is(.btn-primary, [data-state]) { flex: 0 1 auto; min-width: 11rem; } }
@media (max-width: 419px) { .detail-head .ctabar:has(> :nth-child(3)) > [data-edit="privacy"] { flex: 1 0 100%; } }
.dh-meta { display: grid; gap: var(--s1); color: var(--ink-2); }
.dh-meta p { margin: 0; }
.dh-meta p > .icon-sm:first-child { display: inline-block; vertical-align: -3px; margin-right: var(--s1); }
.dh-meta a { color: inherit; text-decoration: none; }
.dh-meta a:hover { color: var(--accent); }
.dh-meta .is-open { display: flex; align-items: center; gap: var(--s1); color: var(--accent); font-weight: 600; }
.dh-meta .is-open a:hover { color: var(--ink); }
.prose-block h2 .h-note { margin-left: var(--s2); font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); }
@media (min-width: 560px) {
  .detail:not(.is-job) .detail-head { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s6); row-gap: 0; }
  /* the photo spans the head's rows; row-gap 0 so the rows it adds but nothing fills take no room */
  .detail:not(.is-job) .detail-head > :is(.avatar, .hero-av) { grid-row: 1 / span 4; align-self: start; }
  .detail:not(.is-job) .detail-head > :not(.avatar, .hero-av) { grid-column: 2; }
  .detail:not(.is-job) .detail-head > :not(.avatar, .hero-av, .dh-id) { margin-top: var(--s4); }
  .detail:not(.is-job) .detail-head > .dh-meta + .updated { margin-top: var(--s1); }
}

[data-cord="socio"]  { --cord: var(--mora-400); }
[data-cord="equipo"] { --cord: var(--cord-equipo); }
[data-cord="apoyo"]  { --cord: var(--cord-apoyo); }
.cred-card { --pad: 16px; --pic: 84px; position: relative; display: flex; flex-direction: column; align-items: center; padding: 38px var(--pad) 14px; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, var(--badge-hi), var(--badge-lo)); color: var(--ink);
  box-shadow: 0 24px 40px -18px var(--shade-night), inset 0 0 0 1px rgb(29 21 25 / .06); }
.cred-card::before { content: ""; position: absolute; top: 10px; left: 50%; width: 46px; height: 9px; translate: -50% 0; border-radius: var(--radius-pill); background: var(--mora-950); box-shadow: inset 0 1px 2px rgb(0 0 0 / .5); }
.cred-photo { position: relative; flex: none; display: grid; width: var(--pic); aspect-ratio: 1; border-radius: 50%;
  background: var(--badge-lo); box-shadow: 0 0 0 3px var(--badge-hi), 0 0 0 6px var(--cord, var(--line)), 0 12px 20px -10px rgb(29 21 25 / .45); }
.cred-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; }
.cred-photo .avatar { --av-size: 100%; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; box-shadow: none; font-family: var(--font-display); font-size: calc(var(--pic) * .36); font-weight: 700; }
.cred-photo > .vbadge { position: absolute; right: 2%; bottom: 2%; width: 30px; height: 30px; box-shadow: 0 0 0 3px var(--badge-hi); }
.cred-name { max-width: 100%; margin: 12px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font: 700 var(--fs-lg)/1.2 var(--font-display); letter-spacing: -0.02em; }
.cred-line { display: grid; align-items: center; min-height: calc(3 * 1.4em); margin-top: 6px; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.cred-line > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.cred-card .fit { align-self: stretch; margin: 14px 0; text-align: start; }
.cred-card .fit b { display: block; }
.cred-card .fit-b { flex-grow: 1; padding-right: 10px; } /* same edge as «Aporta»'s left: «Cofundador/a» fits a 320 px phone */
[data-cord] .fit:not(.is-match) .fit-b { background: var(--cord); color: var(--ink); }
.detail-head[data-cord] > .avatar, .detail-head[data-cord] > .hero-av > .avatar { box-shadow: inset 0 0 0 1px var(--av-ring), 0 0 0 4px var(--surface), 0 0 0 9px var(--cord); }
.is-member .dh-id > .fit { justify-self: start; margin: var(--s3) 0 0; font-size: var(--fs-sm); }
.is-member .dh-id > .fit b { display: block; }
.is-member .dh-id > .fit > :is(.fit-a, .fit-b) { padding-top: 7px; padding-bottom: 7px; }
.is-member .dh-id > .fit > .fit-a { padding-left: 14px; padding-right: 20px; }
.is-member .dh-id > .fit > .fit-b { padding-left: 20px; padding-right: 18px; min-width: 9rem; }
.cred-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); align-self: stretch; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); }
.cred-foot > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.cred-foot :is(.icon, .icon-sm) { flex: none; width: 14px; height: 14px; }
.cred-foot a { color: inherit; text-decoration: none; }
.cred-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cred-mark { flex: none; width: auto; height: 24px; }
.l-list > li[data-cord] > .avatar { box-shadow: inset 0 0 0 1px var(--av-ring), 0 0 0 2px var(--paper), 0 0 0 4px var(--cord); }
.cred-cord { background: linear-gradient(90deg, rgb(0 0 0 / .3), transparent 30% 70%, rgb(0 0 0 / .3)), repeating-linear-gradient(-45deg, rgb(255 255 255 / .22) 0 2px, transparent 2px 6px), var(--cord); }
.cred-clip { position: absolute; z-index: 3; left: 50%; top: -16px; width: 24px; height: 31px; margin-left: -12px; border-radius: 4px 4px 6px 6px;
  background: var(--grad-metal); box-shadow: 0 2px 4px var(--shade-night), inset 0 -6px 0 rgb(0 0 0 / .16); }
.cred-clip::before { content: ""; position: absolute; left: 50%; top: -18px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(circle, transparent 4px, var(--metal-lo) 4.5px 5.5px, var(--metal-hi) 6px); box-shadow: 0 2px 4px var(--shade-night); }
.cred-clip::after { content: ""; position: absolute; left: 50%; top: -24px; width: 16px; height: 8px; margin-left: -8px; border-radius: 2px; background: var(--grad-metal); }

.facts dd > a:not([class]) { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.facts dd > a:not([class]):hover { color: var(--accent); text-decoration-color: currentColor; }
.facts dd > .tags { font-weight: 400; }
.facts div:has(> dd > .tags) { flex-direction: column; align-items: stretch; gap: var(--s2); }

.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.tags a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-bottom-color: color-mix(in oklab, var(--line) 60%, var(--line-strong)); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; line-height: 1.25; text-decoration: none; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tags a:hover { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }
.share-row { display: flex; gap: var(--s1); margin-left: calc(-1 * var(--s2)); }

.pf-head { display: grid; gap: var(--s3); }
.pf-on-img { position: absolute; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
.pf-photo { position: relative; width: max-content; margin: calc(-1 * (var(--s3) + 64px)) 0 0 var(--s5); }
.pf-photo:first-child { margin: var(--s2) 0 0; }
.pf-photo .avatar { --av-size: 128px; box-shadow: 0 0 0 4px var(--paper), inset 0 0 0 1px var(--av-ring); }
:is(.pf-photo, .hero-av) > .pf-on-img { right: -4px; bottom: 4px; }
.pf-intro { display: flex; align-items: flex-start; gap: var(--s3); }
.pf-intro > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pf-intro h1 { font-size: clamp(var(--fs-xl), 1.2rem + 2.4vw, 2.5rem); line-height: 1.1; overflow-wrap: anywhere; }
.pf-intro .lead { color: var(--ink); font-size: var(--fs-lg); max-width: var(--measure); }
.pf-meta { color: var(--ink-2); font-size: var(--fs-sm); }
.pf-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pf-sec { display: grid; gap: var(--s3); padding-top: var(--s5); margin-top: var(--s5); border-top: var(--border); }
.pf-sec-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.pf-sec-head h2 { font-size: var(--fs-lg); }
.pf-sec-head .icon-btn { margin-right: calc(-1 * var(--s2)); }
.pf-empty { color: var(--ink-2); max-width: var(--measure); }
.pf-text { white-space: pre-line; max-width: var(--measure); }
.pf-list { display: grid; gap: var(--s3); margin: 0; }
.pf-list dt { font-size: var(--fs-sm); color: var(--ink-2); }
.pf-list dd { margin: 0; }
.pf-exp { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.pf-exp > li { display: flex; align-items: flex-start; gap: var(--s3); }
.pf-exp > li + li { padding-top: var(--s3); background: linear-gradient(var(--line), var(--line)) right top / calc(100% - 48px - var(--s3)) 1px no-repeat; }
.pf-exp > li > .avatar { flex: none; --av-size: 48px; }
.pf-exp > li > .is-mark { background: var(--surface); color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line); }
.pf-exp > li > .is-mark .icon { width: 22px; height: 22px; stroke-width: 1.5; }
.pf-exp > li > .is-site { object-fit: contain; padding: 5px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pf-exp > li .icon-btn { margin: calc(-1 * var(--s2)) calc(-1 * var(--s2)) 0 0; }
.pf-exp-main { flex: 1; display: grid; gap: 2px; min-width: 0; line-height: 1.4; }
.pf-exp-main > b { font-weight: 600; }
.pf-exp-main .title-link { font-weight: inherit; letter-spacing: inherit; }
.pf-exp-main small { color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pf-exp-main p { margin: var(--s1) 0 0; color: var(--ink-2); max-width: var(--measure); }
.pf-sub { font-size: var(--fs-md); margin-top: var(--s2); }
.pf-adds { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.pf-langs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pf-langs b { font-weight: 500; }
.pf-langs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--s3) var(--s6); }
.pf-langs > li { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.5rem; align-items: center; gap: var(--s3); }
.lv { display: inline-flex; gap: 3px; }
.lv i { width: 14px; height: 6px; border-radius: 2px; background: var(--line); }
.lv i.on { background: var(--accent); }
.lv-name { font-size: var(--fs-sm); color: var(--ink-2); }
.pf-vis { display: flex; align-items: flex-start; gap: var(--s3); }
.pf-vis > span { display: grid; gap: 2px; }
.pf-vis > span { color: var(--ink-2); }
.pf-vis b { color: var(--ink); font-weight: 600; }
.pf-preview { display: grid; place-items: center; padding-block: var(--s3); }
.pf-preview .avatar { --av-size: 200px; }
.pf-page { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "meter" "body" "side"; gap: var(--s6); align-items: start; }
.pf-page > .pf-head { grid-area: head; }
.pf-sec h2 { scroll-margin-top: calc(var(--appbar-h) + var(--s5)); }
.pf-page > .pf-body { grid-area: body; min-width: 0; }
.pf-body > .pf-sec:first-child { margin-top: 0; }
.pf-rail { display: contents; }
.pf-meter { grid-area: meter; }
.pf-side { grid-area: side; display: grid; gap: var(--s6); }
.pf-mine { display: grid; gap: var(--s6); }
.pf-mine:empty { display: none; }
.pf-meter h2, .pf-side h2 { font-size: var(--fs-md); }
.pf-todo, .pf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pf-add { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0; background: none; border: 0; color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; text-align: left; }
.pf-add:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.pf-add .icon-sm { color: var(--accent); }
a.pf-add { text-decoration: none; }
.pf-links li { display: flex; align-items: center; gap: var(--s2); min-height: 40px; min-width: 0; }
.pf-links .icon { flex: none; color: var(--ink-2); }
.pf-links a { color: var(--ink); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-side .list.mini .ident small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-side .list.mini .ident > span { min-width: 0; }
@media (min-width: 1180px) {
  .pf-page { grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "head rail" "body rail"; gap: var(--s6) var(--s8); }
  .pf-rail { grid-area: rail; display: grid; gap: var(--s6); align-content: start; position: sticky; top: calc(var(--appbar-h) + var(--s5)); }
  .pf-rail > * { grid-area: auto; }
}
.pf-seen { justify-self: start; }
.pic-actions { display: flex; gap: var(--s2); padding-top: var(--s3); border-top: var(--border); }
.pic-btn { display: grid; justify-items: center; gap: 4px; min-width: 72px; min-height: 44px; padding: var(--s2); background: none; border: 0; border-radius: var(--radius); color: var(--ink); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.pic-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pic-btn[data-rm] { margin-left: auto; }
@media (min-width: 640px) {
  .sheet.is-pic { width: min(720px, calc(100vw - 32px)); }
}
.sheet.is-edit { padding-block: 0; gap: 0; }
.sheet.is-edit::before { display: none; }
.sheet.is-edit > .sheet-head { position: sticky; top: 0; z-index: 1; background: var(--surface); padding-block: var(--s4) var(--s3); border-bottom: var(--border); }
.sheet.is-edit > .sheet-form { display: grid; gap: var(--s5); padding-block: var(--s5); }
.goal-part { display: grid; gap: var(--s5); }
.goal-part[hidden] { display: none; }
.sheet.is-edit > .sheet-actions { position: sticky; bottom: 0; background: var(--surface); padding-block: var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: var(--border); }
@media (min-width: 640px) {
  .sheet.is-edit { width: min(640px, calc(100vw - 32px)); }
}
@media (max-width: 639px) {
  .sheet.is-panel { inset: 0; max-height: none; border-radius: 0; grid-template-rows: auto 1fr auto; }
}
@media (min-width: 960px) {
  .sheet.is-panel { inset: 0 0 0 auto; width: min(480px, 100vw); max-height: none; transform: none; border-radius: 0; grid-template-rows: auto 1fr auto; animation-name: panel-in; }
  .sheet.is-panel.is-leaving { animation-name: panel-out; }
}
.sheet.is-panel > .sheet-form { align-content: start; }
@keyframes panel-in  { from { transform: translateX(24px); opacity: 0; } }
@keyframes panel-out { to   { transform: translateX(24px); opacity: 0; } }
@media (max-width: 480px) {
  .pf-photo { margin-left: var(--s3); }
  .pf-photo .avatar { --av-size: 104px; }
  .pf-photo { margin-top: calc(-1 * (var(--s3) + 52px)); }
}
.updated { font-size: var(--fs-xs); color: var(--ink-2); display: flex; align-items: center; gap: var(--s2); }
.updated > svg { flex: none; }
.prose-block { display: grid; gap: var(--s2); padding-top: var(--s5); border-top: var(--border); }
.prose-block h2 { font-size: var(--fs-lg); }
.prose-block ul:not([class]) { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s2); }
.prose-block p { max-width: var(--measure); }
.rich { display: grid; gap: var(--s3); }
.rich h3 { margin-top: var(--s2); font-size: var(--fs-md); font-weight: 600; }
.rich h3:first-child { margin-top: 0; }
.rich li { max-width: var(--measure); }
.rich li::marker { color: var(--accent); }
.rich :is(p, li) { text-wrap: pretty; }
:is(.prose-block, .section) > .ident b { font-size: var(--fs-md); }
:is(.prose-block, .section) > .ident small { font-size: var(--fs-sm); }
.prose-block > .linklike { justify-self: start; }
.prose-block > .list { border-top: 0; }
.prose-block > .list > li:first-child > .row { padding-top: var(--s2); }
.prose-block > .list > li:last-child { border-bottom: 0; }
.translated { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); font-size: var(--fs-xs); color: var(--ink-2); }

.ctabar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: var(--border); }
.ctabar > :is(.btn-primary, [data-state]) { flex: 1; }
@media (min-width: 640px) and (max-width: 959px) { .ctabar { justify-content: flex-end; } .ctabar > :is(.btn-primary, [data-state]) { max-width: 20rem; } }
.ctabar .status { flex: 1; display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); }
.ctabar .status > .icon { color: var(--warn); }
@media (min-width: 960px) {
  .ctabar { position: static; padding: var(--s4) 0 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ctabar > :is(.btn-primary, [data-state]) { flex: none; }
}

.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); animation: fade-in var(--t-base) var(--ease); }
.scrim.is-leaving { animation: fade-out var(--t-fast) var(--ease-in) forwards; }
.sheet {
  position: fixed; z-index: 41; inset: auto 0 0 0; max-height: 90dvh; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; display: grid; gap: var(--s4);
  padding: var(--s3) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom));
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-float);
  animation: sheet-in var(--t-slow) var(--ease);
}
.sheet.is-leaving { animation: sheet-out var(--t-base) var(--ease-in) forwards; }
.sheet::before { content: ""; justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.sheet-head { display: flex; align-items: flex-start; gap: var(--s3); }
.sheet-head > div { flex: 1; }
.sheet-head h2 { font-size: var(--fs-lg); }
.sheet-head p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 4px; }
.sheet-actions { display: flex; flex-direction: column-reverse; gap: var(--s2); }
@media (min-width: 640px) {
  .sheet { inset: 50% auto auto 50%; width: min(520px, calc(100vw - 32px)); transform: translate(-50%, -50%); border-radius: var(--radius-lg); padding: var(--s5); animation-name: dialog-in; }
  .sheet.is-leaving { animation-name: dialog-out; }
  .sheet::before { display: none; }
  .sheet-actions { flex-direction: row; justify-content: flex-end; }
}
.sheet.inline { position: relative; inset: auto; transform: none; width: auto; max-width: 520px; animation: none; }
@keyframes sheet-in   { from { transform: translateY(32px); opacity: 0; } }
@keyframes sheet-out  { to   { transform: translateY(32px); opacity: 0; } }
@keyframes dialog-in  { from { transform: translate(-50%, calc(-50% + 8px)) scale(.98); opacity: 0; } }
@keyframes dialog-out { to   { transform: translate(-50%, calc(-50% + 8px)) scale(.98); opacity: 0; } }

.request { display: grid; gap: var(--s3); padding: var(--s4) 0; border-block: var(--border); }
.request blockquote { margin: 0; max-width: 60ch; }
.request .actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

.thread { display: grid; gap: var(--s1); padding: var(--s4) 0; }
.day { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0 var(--s2); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.composer {
  display: grid; margin-bottom: calc(var(--s3) + env(safe-area-inset-bottom)); border: var(--border); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.composer:hover { border-color: var(--ink-2); }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--halo); }
.composer .textarea { min-height: 44px; max-height: 180px; padding: var(--s3) var(--s4) var(--s1); border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: transparent; box-shadow: none; resize: none; line-height: var(--lh-text); field-sizing: content; }
.composer .textarea:is(:hover, :focus-visible) { border: 0; box-shadow: none; outline: 0; }
.composer-bar { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s2) var(--s2) var(--s4); }
.composer-bar .hint { margin-right: auto; font-size: var(--fs-xs); color: var(--ink-2); }
.composer-bar .btn { margin-left: auto; }
@media (pointer: coarse) { .composer-bar .hint { display: none; } .composer-bar .btn { min-height: 40px; } }
.composer-bar > [data-attach] { margin-left: calc(-1 * var(--s2)); color: var(--ink-2); }
.composer-bar > [data-attach]:is(:hover, .is-hover) { color: var(--accent); }
.composer-ref { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3) var(--s2) 0 var(--s4); }
.composer-ref .ref { flex: 1; margin: 0; }

.ref { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s3); max-width: 30rem; margin: var(--s2) 0 var(--s1); padding: 2px 0 2px var(--s3); border-left: 2px solid var(--accent); color: inherit; text-decoration: none; }
.ref-slot { display: block; }
.ref-main { display: grid; gap: 2px; min-width: 0; }
:is(.ref, .pick) > .ref-main:first-child { grid-column: 1 / span 2; }
.ref-main b { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; transition: color var(--t-fast) var(--ease); }
.ref-main small { font-size: var(--fs-xs); color: var(--ink-2); }
.ref-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-sm); color: var(--ink-2); }
a.ref:is(:hover, .is-hover) b { color: var(--accent); }
.ref-ic { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.ref.is-wait b { font-weight: 400; color: var(--ink-2); }
.ref.is-wait .ref-ic { background: var(--line); }
.ref.is-gone { display: flex; align-items: center; gap: var(--s2); border-left-color: var(--line-strong); font-size: var(--fs-sm); color: var(--ink-2); }

.pick-search { margin-bottom: var(--s2); }
.pick-out { min-height: 10rem; max-height: min(55vh, 30rem); overflow-y: auto; overscroll-behavior: contain; }
.pick-group { padding-top: var(--s3); }
.pick-group h3 { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.pick-list { list-style: none; margin: 0; padding: 0; }
.pick { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s2) 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pick:is(:hover, .is-hover) b { color: var(--accent); }
.pick input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.pick:has(input:disabled) { opacity: var(--disabled-o); cursor: default; }
.pick:has(input:checked) b { color: var(--accent); }
.pick-empty { padding: var(--s3) 0; font-size: var(--fs-sm); color: var(--ink-2); }
.send-to { margin-top: var(--s4); }
.send-fs { min-width: 0; margin: 0 0 var(--s4); padding: 0; border: 0; }
.send-fs legend { padding: 0; margin-bottom: var(--s1); font-weight: 600; }
.send-fs legend .hint { font-weight: 400; color: var(--ink-2); }
.send-fs .pick-list { max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; }
.send-find { margin-bottom: var(--s2); }
.btn-block + .share-row { margin-top: var(--s3); }

.wizard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding-top: var(--s4); border-top: var(--border); }
.wizard-foot .saved { flex: 1 1 14rem; display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.wizard-foot .saved .icon-sm { color: var(--accent); }
.wizard-foot .btn-ghost { margin-left: auto; }
@media (max-width: 959px) { .wizard-foot .saved { flex-basis: 100%; } .wizard-foot .btn { flex: 1 1 auto; } .wizard-foot .btn-primary { flex-grow: 2; } }

.toast-region { position: fixed; z-index: 30; left: var(--gutter); right: var(--gutter); bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--s3)); display: grid; justify-items: center; pointer-events: none; }
.toast-region .toast { pointer-events: auto; width: min(480px, 100%); }
@media (min-width: 960px) { .toast-region { bottom: var(--s5); } }
.offline-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s2) var(--gutter); font-size: var(--fs-sm); }
.offline-bar .linklike { color: inherit; }
.ask-bar { position: sticky; top: var(--appbar-h); z-index: 9; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s3) var(--gutter); font-size: var(--fs-sm); }
.ask-bar[hidden] { display: none; }
.ask-bar > .icon { color: var(--accent); }
.ask-bar .txt { flex: 1 1 16rem; min-width: 0; margin: 0; }
.ask-bar .txt b { display: block; }
.ask-bar .txt span { opacity: .78; }
.ask-nums { display: flex; gap: var(--s2); }
.ask-num { min-width: 56px; min-height: 48px; padding: 0 var(--s3); border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: var(--radius); background: none; color: inherit;
  font: 700 var(--fs-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; cursor: pointer; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.ask-num:is(:hover, .is-hover):not(:disabled) { color: var(--accent); border-color: var(--accent); }
.ask-num:active:not(:disabled) { transform: translateY(1px); }
.ask-bar button:disabled { opacity: .5; cursor: default; }
.ask-bar .btn-ghost { color: inherit; }
/* Turnstile only draws something when Cloudflare needs the visitor to tick a box */
.captcha { position: fixed; z-index: 60; inset: auto 0 calc(var(--s5) + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; }
.captcha > * { pointer-events: auto; }
/* Cookie bar (assets/js/consent.js): never blocks the page; sits above the phone bottom nav, below the captcha */
.consent { position: fixed; z-index: 40; inset: auto 0 0; display: grid; gap: var(--s3); padding: var(--s4) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom));
  background: var(--surface); border-top: var(--border); box-shadow: var(--shadow-float); font-size: var(--fs-sm); }
/* same cases that hide .bottomnav (verificar, data-deep, signed out outside public pages) keep the bar at the bottom edge */
body:has(.bottomnav):not([data-sec="verificar"], [data-deep], [data-anon]:not([data-public])) .consent { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding-bottom: var(--s4); }
.consent [hidden] { display: none; }
.consent-txt { margin: 0; text-wrap: pretty; }
.consent .settings > li { padding: var(--s3) 0; }
.consent-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.consent-actions .btn { padding-inline: var(--s2); }
@media (min-width: 960px) {
  .consent, body:has(.bottomnav):not([data-sec="verificar"], [data-deep], [data-anon]:not([data-public])) .consent { inset: auto auto var(--s5) var(--s5); width: min(440px, calc(100% - 2 * var(--s5))); padding: var(--s4); border: var(--border); border-radius: var(--radius-lg); }
}
@media (prefers-reduced-motion: no-preference) {
  .consent { animation: toast-in var(--t-slow) var(--ease); }
  .consent.is-leaving { animation: toast-out var(--t-fast) var(--ease-in) forwards; }
}

.auth { display: grid; gap: var(--s3); width: min(400px, 100%); }
.auth > .page-head { margin-bottom: var(--s2); }
.auth > .page-head h1 { text-wrap: balance; }
.auth > .divider { margin-block: var(--s2); }
.auth > .auth-soon-head { margin-top: var(--s4); }
.auth .btn-block { min-height: 48px; }
@media (max-width: 560px) { .otp .input { max-width: 56px; min-height: 52px; } }

.post { display: grid; gap: var(--s3); padding: var(--s4) 0; }
.post-body { white-space: pre-line; max-width: var(--measure); }
.post-actions { display: flex; gap: var(--s3); margin-left: calc(-1 * var(--s2)); }

.page { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s6); width: 100%; max-width: var(--content-max); margin-inline: auto;
  padding: var(--s5) var(--gutter) calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--s7)); }
@media (min-width: 960px) { .page { padding: var(--s6) var(--s7) var(--s8); } }
.page.narrow { max-width: calc(600px + 2 * var(--s7)); }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s5); }
.page-head p { color: var(--ink-2); max-width: 60ch; }
.page-head h1 { overflow-wrap: anywhere; }

.section { display: grid; gap: var(--s4); align-content: start; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.section-head h2 { font-size: var(--fs-lg); }
.section-head a { font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.section-head a:hover { color: var(--ink); }
.more { display: flex; justify-content: center; padding-top: var(--s2); }

.listing { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.listing .search { max-width: 520px; }
.toolbar-main { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.toolbar-main .search { flex: 1 1 18rem; max-width: 26rem; }
.toolbar-main :is(.search, .combo) .input { min-height: 40px; height: 40px; padding-block: 0; }
.toolbar-row:not(:has(.sort)):has(> .results:empty) { display: none; }
.listing .state { padding-top: var(--s5); }
.filter { width: auto; field-sizing: content; min-height: 40px; padding: 0 12px 0 14px; border-bottom-color: var(--line-base); box-shadow: var(--lift); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.filter:focus-visible { outline-color: var(--focus); } /* the pill ring, like chips: the halo would vanish on a set one */
.filter option { color: var(--ink); background: var(--surface); font-weight: 400; }
.toolbar-main .chip { min-height: 40px; }
@media (pointer: coarse) { :is(.filter, .toolbar-main .chip, .toolbar-main :is(.search, .combo) .input) { min-height: var(--tap); height: var(--tap); } }
@supports (appearance: base-select) {
  .filter::picker-icon { width: 16px; height: 16px; background: currentColor; }
  .filter::picker(select) { min-width: max(13rem, anchor-size(width)); }
  .filter option[value=""]:not(:hover, :focus-visible) { color: var(--ink-2); font-weight: 400; }
}
button.filter { display: inline-flex; align-items: center; gap: 6px; max-width: min(16rem, 100%); }
button.filter > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.filter > .icon-sm { flex: none; }
/* hangs from the toolbar, not the filters row, which scrolls on phones and would cut the list */
.toolbar-main > .combo { position: absolute; z-index: 21; width: 12rem; }
.toolbar-main > .combo > .suggest { left: auto; min-width: 12rem; }
@supports not (appearance: base-select) {
  select.filter { appearance: none; padding-right: 34px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5560' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; }
}

@media (max-width: 959px) {
  .toolbar-main > .chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -4px calc(-1 * var(--gutter)); padding: 4px var(--gutter); scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); }
  .toolbar-main > .chips::-webkit-scrollbar { display: none; }
  .toolbar-main > .chips > * { flex: none; }
}

.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); align-items: start; }
.rail { display: grid; gap: var(--s6); align-content: start; }
@media (min-width: 1180px) {
  .cols { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s7) var(--s8); }
  .rail { position: sticky; top: calc(var(--appbar-h) + var(--s5)); }
}

.detail { --label-w: 12rem; --pad: var(--s5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (min-width: 560px) { .detail { --pad: var(--s6); } }
.detail-body { display: grid; gap: var(--s4); min-width: 0; }
:is(.detail-body, .story, .story-pair) > .prose-block { padding: var(--pad); }
.detail .detail-head > .dh-meta + .updated { margin-top: calc(var(--s1) - var(--s4)); }
.detail-body .prose-block > h2 { font-size: var(--fs-xl); }
.facts.cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); grid-auto-flow: row dense; gap: var(--s5) var(--s6); font-size: var(--fs-md); }
.facts.cells div { flex-direction: column; gap: 2px; min-width: 0; }
.facts.cells dt { font-size: var(--fs-sm); white-space: normal; }
.facts.cells div:has(> dd > .tags) { grid-column: 1 / -1; gap: var(--s2); }
.facts.cells dd > a:not([class]) { text-decoration: none; }
.story { display: grid; gap: var(--s4); min-width: 0; }
.prose-block[id] { scroll-margin-top: calc(var(--appbar-h) + 45px + var(--s4)); }
.prose-block[id]:focus { outline: none; } /* focus only lands here after an edit repaints the block */
:is(.prose-block, .section, .dh-id):has(> .pen) { grid-template-columns: minmax(0, 1fr) auto; }
:is(.prose-block, .section, .dh-id):has(> .pen) > :not(h1, h2, .pen) { grid-column: 1 / -1; }
:is(.prose-block, .section, .dh-id) > .pen { grid-row: 1; grid-column: 2; align-self: center; margin-block: -8px; }
.dh-id:has(> .pen) { justify-self: stretch; }
.story-pair { display: grid; gap: var(--s4); }
.story-pair > .prose-block { align-content: start; }
@media (min-width: 640px) { .story-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.path { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.path li { display: grid; justify-items: center; align-content: start; gap: var(--s2); text-align: center; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.3; text-wrap: balance; }
.path-node { display: grid; color: var(--line-strong); }
.path-node .icon { width: 28px; height: 28px; stroke-width: 1.75; }
.path li.is-done, .path li.is-done .path-node { color: var(--accent); }
.path li.is-done { font-weight: 600; }
@media (min-width: 600px) { .path { gap: var(--s3); } .path li { font-size: var(--fs-sm); } .path-node .icon { width: 32px; height: 32px; } }

.media-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.media-tools { display: flex; gap: var(--s1); }
.media-tools .icon-btn:disabled { opacity: var(--disabled-o); cursor: default; }
/* with a mouse, an item's edit tools appear on hover or keyboard focus; touch screens keep them visible */
@media (hover: hover) {
  :is(.gallery li, .faq-item) .media-tools { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
  :is(.gallery li, .faq-item):is(:hover, :focus-within) .media-tools { opacity: 1; }
}
.media-preview { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--line); margin-bottom: var(--s4); }

.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.video > img, .video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap, 44px);
  padding: var(--s2) var(--s5); border: 0; border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-float); }
.video-play .icon { --icon-fill: currentColor; color: var(--accent); }
.video-play { max-width: calc(100% - 2 * var(--s4)); text-align: center; text-decoration: none; }
.video-play:hover, a.video:hover .video-play { color: var(--accent); }
.video-play:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.video-foot { font-size: var(--fs-xs); color: var(--ink-2); }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: 0; margin: 0; list-style: none; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery li { display: grid; gap: var(--s1); }
.gallery-thumb { display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--line); cursor: zoom-in; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.faq-item { display: flex; align-items: flex-start; gap: var(--s2); border-top: var(--border); }
.faq-item:first-child { border-top: 0; }
.faq-item details { flex: 1; min-width: 0; }
.faq-item .media-tools { padding-top: var(--s1); }
.faq summary { display: flex; align-items: flex-start; gap: var(--s2); padding-block: var(--s3); font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary .icon-sm { margin-top: .2em; transition: rotate var(--t-fast) var(--ease); }
.faq details[open] summary .icon-sm { rotate: 180deg; }
.faq details p { padding: 0 0 var(--s3) calc(16px + var(--s2)); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .faq summary .icon-sm { transition: none; } }

.zoom-btn { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); background: none; cursor: zoom-in; }
.zoom-over { position: absolute; inset: 0; padding: 0; border: 0; border-radius: inherit; background: none; cursor: zoom-in; }
.hero-av > .zoom-over { border-radius: 50%; }
.hero-av:has(> .sq) > .zoom-over { border-radius: var(--radius-lg); }
.hero-av:has(> span.avatar) > .zoom-over { display: none; }
.viewer { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: var(--s4); border: 0; background: var(--paper); color: var(--ink); }
.viewer[open] { display: grid; grid-template-rows: auto 1fr; gap: var(--s3); }
.viewer::backdrop { background: var(--paper); }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; }
.viewer-count { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.viewer figure { display: grid; place-items: center; align-content: center; gap: var(--s3); min-height: 0; margin: 0; }
.viewer img { max-width: 100%; max-height: calc(100dvh - 10rem); object-fit: contain; border-radius: var(--radius); }
.viewer figcaption { max-width: var(--measure, 60ch); text-align: center; color: var(--ink-2); }
.viewer-prev, .viewer-next { position: fixed; top: 50%; translate: 0 -50%; background: var(--paper); }
.viewer-prev { left: var(--s3); }
.viewer-next { right: var(--s3); }
@media (min-width: 960px) {
  .detail:not(.is-job) .detail-head { grid-template-columns: var(--label-w) minmax(0, 1fr); column-gap: var(--s7); }
  .detail.is-job .detail-head { padding-left: calc(var(--pad) + var(--label-w) + var(--s7)); }
  .detail-body .prose-block { grid-template-columns: var(--label-w) minmax(0, 1fr); column-gap: var(--s7); row-gap: 0; }
  /* the heading spans the rows its content adds; row-gap 0 so the spare ones take no room */
  .detail-body .prose-block > h2 { grid-column: 1; grid-row: 1 / span 40; font-size: var(--fs-lg); color: var(--ink); }
  .facts.cells { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .detail-body .prose-block > h2 .h-note { display: block; margin: var(--s1) 0 0; }
  .detail-body .prose-block > :not(h2, .pen) { grid-column: 2; }
  .detail-body .prose-block > :not(h2, .pen) + :not(.pen) { margin-top: var(--s3); }
  .detail-body .prose-block:has(> .pen) { grid-template-columns: var(--label-w) minmax(0, 1fr) auto; }
  .detail-body .prose-block > .pen { grid-column: 3; grid-row: 1; }
  /* a part whose heading is for screen readers only takes the whole row */
  .detail-body .prose-block:has(> h2.visually-hidden) > :not(h2) { grid-column: 1 / -1; }
  .story-pair { display: contents; }
}
.facts.stack { flex-direction: column; gap: 0; border-top: var(--border); }
.facts.stack div { flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s4); padding: var(--s2) 0; border-bottom: var(--border); }
@media (max-width: 1179px) {
  .cols > .rail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); column-gap: var(--s8); }
}
.detail-body [data-activity] .state:not(.is-error) { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--s2); padding: var(--s3) 0 0; }
.detail-body [data-activity] .state:not(.is-error) > .icon { width: 20px; height: 20px; }
.detail-body [data-activity] .state:not(.is-error) h3 { font-size: var(--fs-md); font-weight: 400; color: var(--ink-2); }
@media (max-width: 959px) {
  [data-deep] .bottomnav { display: none; }
  [data-deep] .page { padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom)); }
  [data-deep] .toast-region { bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
}

.chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-head { gap: var(--s1); padding-left: var(--s1); }
.chat-head .ident { flex: 1; padding-block: var(--s1); }
.chat-head .ident > span { display: grid; min-width: 0; }
.chat-head h2 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--t-fast) var(--ease); }
.chat-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .ident:is(:hover, .is-hover) h2 { color: var(--accent); }
.chat .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s2) var(--s4) var(--s3); border-top: var(--border); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.chat .thread > :first-child { margin-top: auto; }
.chat .composer { flex: none; margin: 0 var(--s3) var(--s3); }

.form { display: grid; gap: var(--s6); }
.form fieldset { display: grid; gap: var(--s5); min-width: 0; margin: 0; padding: 0; border: 0; }
.form fieldset + fieldset { padding-top: var(--s6); border-top: var(--border); }
.form legend { float: left; width: 100%; margin-bottom: var(--s1); padding: 0; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.form legend + * { clear: both; }
.form legend + .hint { margin-top: calc(var(--s1) - var(--s5)); }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--s5) var(--s4); align-items: start; }
@media (max-width: 479px) { .field-row { grid-template-columns: 1fr; } }
.field[hidden] { display: none; }
.date-pair { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: var(--s3); align-items: start; }
.date-part { display: grid; gap: 4px; min-width: 0; }
.date-part > label { font-size: var(--fs-sm); color: var(--ink-2); }
.check { display: flex; align-items: flex-start; gap: var(--s3); min-height: var(--tap); font-size: var(--fs-sm); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.check a { font-weight: 600; }
.check:has(+ .hint) { min-height: 24px; } /* WCAG 2.2 target size; the hint reads as part of the choice */
.check + .hint { padding-left: calc(20px + var(--s3)); }
@media (max-width: 959px) {
  .wizard-foot { position: sticky; bottom: 0; z-index: 5; margin-inline: calc(-1 * var(--gutter)); padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
    background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}

.settings { list-style: none; margin: 0; padding: 0; border-top: var(--border); }
.settings > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding: var(--s4) 0; border-bottom: var(--border); }
.settings > li > div:first-child { display: grid; gap: 2px; flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.settings b { display: block; font-weight: 600; }
.settings span { color: var(--ink-2); font-size: var(--fs-sm); }
.settings .value { color: var(--ink); }
.settings .select { width: 13rem; max-width: 100%; }
.settings .btn-quiet { margin-right: calc(-1 * var(--s2)); }
.settings > li > .hint { font-size: var(--fs-sm); }
.settings a.row-link { display: flex; align-items: center; gap: var(--s3); width: 100%; color: var(--ink); text-decoration: none; font-weight: 600; }
.settings a.row-link .icon:last-child { margin-left: auto; color: var(--ink-2); }
.settings a.row-link .hint { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.settings a.row-link .hint + .icon { margin-left: 0; }
.settings a.row-link:hover { color: var(--accent); }
.settings a.row-link:hover .icon:last-child { color: inherit; }
.levels { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--fs-sm); max-width: 62ch; }
.levels b { color: var(--ink); font-weight: 600; }
.sessions > .state { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px var(--s3); max-width: none; padding: var(--s4) 0; border-block: var(--border); }
.sessions > .state > .icon { grid-row: span 2; width: 22px; height: 22px; }
.sessions > .state > h3 { font-size: var(--fs-md); }
.sessions > .state > p { grid-column: 2; font-size: var(--fs-sm); }
.legal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.4; }
.legal-nav a { display: inline-flex; align-items: center; min-height: 28px; color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
.legal-nav a:hover { color: var(--accent); }
.legal-nav p { flex-basis: 100%; margin: var(--s1) 0 0; }
:is(.acct-menu, .home-left) > .legal-nav { padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-xs); }

@media (min-width: 960px) { .page.is-auth { min-height: calc(100dvh - var(--appbar-h)); align-content: center; justify-items: center; padding-bottom: var(--s8); } }

.stack { display: grid; gap: var(--s7); align-content: start; min-width: 0; }
.rail .section h2 { font-size: var(--fs-md); }
.page-head > div:not(.ident) { display: grid; gap: var(--s2); flex: 1 1 18rem; min-width: 0; }
.page-head > .ident { flex: 1 1 18rem; }
.page-head > .ident p { color: var(--ink-2); }
.list.mini > li { position: relative; display: grid; gap: 2px; padding: var(--s3) 0; }
.list.mini small { display: flex; flex-wrap: wrap; gap: 0 var(--s3); color: var(--ink-2); font-size: var(--fs-xs); }
.list.mini .title-link { font-weight: 600; }
:is(.list.mini > li):is(:hover, .is-hover) .title-link { color: var(--accent); }

.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; border-radius: var(--radius-pill);
  background: var(--line-strong); box-shadow: var(--well); cursor: pointer; transition: background var(--t-fast) var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px var(--shade-2); transition: transform var(--t-base) var(--ease); }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.switch:hover:not(:disabled):not(:checked) { background: var(--ink-2); }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch:disabled { opacity: var(--disabled-o); cursor: not-allowed; }

.seg.wrap { display: flex; flex-wrap: wrap; column-gap: var(--s4); row-gap: 0; max-width: 100%; }
.seg.wrap button { white-space: normal; min-height: 36px; text-align: left; }

.install-bar { margin-inline: var(--gutter); }
@media (min-width: 960px) { .install-bar { margin-inline: var(--s7); } }
.howto { display: grid; gap: var(--s3); margin: 0 0 var(--s4); padding-left: 1.4em; line-height: var(--lh-text); }
.howto .icon-sm { vertical-align: -2px; color: var(--accent); }

.inbox-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--s3); padding-block: var(--s3); background: var(--surface); }
.inbox-head > .search { flex: 1; min-width: 0; }
.inbox-head > [hidden] { display: none; }
.inbox-list > li[hidden] { display: none; }
.inbox-list .request { border-block: 0; }
.inbox-none { padding: var(--s5) 0; color: var(--ink-2); font-size: var(--fs-sm); }

.msg-label { display: none; }
.acct-btn .avatar { box-shadow: 0 0 0 1px var(--line); }
.acct-btn > .icon-sm { color: var(--ink-2); transition: transform var(--t-fast) var(--ease); }
.acct-btn[aria-expanded="true"] > .icon-sm { transform: rotate(180deg); }
.acct-btn:is(:hover, .is-hover, [aria-expanded="true"]) > .icon-sm { color: var(--accent); }
.acct-btn:is(:hover, .is-hover, [aria-expanded="true"]) .avatar { box-shadow: 0 0 0 2px var(--accent); }
.msg-btn[aria-expanded="true"] { color: var(--accent); }
.pop { position: absolute; top: calc(100% + 6px); z-index: 30; width: min(400px, calc(100vw - 2 * var(--gutter))); max-height: min(640px, calc(100dvh - var(--appbar-h) - var(--s6))); display: flex; flex-direction: column; background: var(--surface); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); overflow: hidden; }
.pop[hidden] { display: none; }
.pop:has(.chat) { height: min(640px, calc(100dvh - var(--appbar-h) - var(--s6))); }
.pop:focus { outline: none; }
/* menus unfold from the control that opened them; reduced motion makes it instant (tokens.css) */
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes pop-open { from { opacity: 0; transform: translateY(-8px) scale(.96); filter: blur(3px); } }
@keyframes pop-shut { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.acct-menu:not([hidden]) { transform-origin: top right; animation: pop-in var(--t-base) var(--ease); }
.pop:not([hidden]) { transform-origin: calc(100% - 20px) 0; animation: pop-open var(--t-slow) var(--ease-out); }
.pop.is-leaving { pointer-events: none; animation: pop-shut var(--t-fast) var(--ease-in) forwards; }
@keyframes pane-fwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes pane-back { from { opacity: 0; transform: translateX(-28px); } }
.pop-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pop-pane[data-dir="fwd"] { animation: pane-fwd var(--t-slow) var(--ease-out); }
.pop-pane[data-dir="back"] { animation: pane-back var(--t-slow) var(--ease-out); }
/* a list cascades in on its first paint only (pop.js drops data-fresh); sibling-index() staggers where supported, all at once elsewhere */
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
.pop-body[data-fresh] .list:not([aria-hidden]) > li { animation: row-in var(--t-slow) var(--ease-out) backwards; animation-delay: calc(min(sibling-index() - 1, 5) * 35ms); }
@keyframes arrive { from { opacity: 0; transform: translateY(-10px); } }
@keyframes ink-flash { from { color: var(--accent); } }
.pop .notif.is-in, .inbox-row.is-in, .msg[data-in], .msg-group[data-in] { animation: arrive var(--t-open) var(--ease-out); }
.pop .notif.is-in::after, .inbox-row.is-in .dot { animation: pop var(--t-base) var(--ease) var(--t-base) backwards; }
.inbox-row.is-in .last { animation: ink-flash 1.2s var(--ease) var(--t-base) backwards; }
.pop > :is(.list, .state) { margin-inline: var(--s4); }
.pop-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s2) var(--s2) var(--s4); }
.pop-head h2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-md); font-weight: 700; line-height: 1.25; }
.pop-head .btn-ghost { color: var(--accent); font-weight: 600; }
.pop-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--accent); color: var(--on-accent); font-family: var(--font-body, inherit); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pop-n[hidden] { display: none; }
.pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline: var(--s4); border-top: var(--border); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.pop-body:hover { scrollbar-color: var(--line-strong) transparent; }
.pop-body > .list { border-top: 0; }
.pop-body > .list > li:last-child { border-bottom: 0; }
.pop .notif { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; padding-block: var(--s3); }
.pop .notif.is-new::after { content: ""; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pop :is(.notif-title, .notif-text) { font-size: var(--fs-sm); line-height: 1.45; }
.pop .notif-main > .btn { justify-self: start; margin: var(--s2) 0 var(--s1); }
.pop .notif.is-new > .avatar { box-shadow: none; }
.pop .notif .title-link { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.pop .notif.is-new small { color: var(--accent); font-weight: 600; }
.pop .ident > .avatar { --av-size: 40px; }
.pop .request { gap: var(--s2); padding-block: var(--s3); border-block: 0; }
.pop .request blockquote { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-left: calc(40px + var(--s3)); color: var(--ink-2); font-size: var(--fs-sm); }
.pop .request .actions { padding-left: calc(40px + var(--s3)); }
.pop .notif-group { position: sticky; top: 0; z-index: 1; margin: 0; padding: var(--s3) 0 var(--s1); background: var(--surface); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; }
.pop .notif-list { border-top: 0; }
.pop .notif-list > li:last-child { border-bottom: 0; }
.pop .notif-list + .notif-group { margin-top: var(--s2); border-top: var(--border); }
.notif-more > .list { border-top: var(--border); }
.notif-more:not([aria-hidden]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) 0; border-top: var(--border); color: var(--ink-2); font-size: var(--fs-sm); }
.pop .state { justify-items: center; text-align: center; gap: var(--s2); max-width: none; padding-block: var(--s6); }
.pop .state > .icon { box-sizing: content-box; width: 24px; height: 24px; padding: 14px; margin-bottom: var(--s1); border-radius: 50%; color: var(--accent); background: var(--accent-soft); animation: pop var(--t-slow) var(--ease-out) 60ms backwards; }
.pop .state.is-error > .icon { color: var(--danger); background: none; padding: 0; }
.pop-n:not([hidden]) { animation: pop var(--t-base) var(--ease); }
@keyframes bell-ring { 12% { transform: rotate(14deg); } 26% { transform: rotate(-12deg); } 40% { transform: rotate(8deg); } 54% { transform: rotate(-5deg); } 68% { transform: rotate(2deg); } 80% { transform: none; } }
@keyframes bubble-hop { 30% { transform: translateY(-3px) scale(1.06); } 60% { transform: translateY(0) scale(.98); } }
@keyframes badge-ping { from { box-shadow: 0 0 0 2px var(--paper), 0 0 0 2px var(--accent); } to { box-shadow: 0 0 0 2px var(--paper), 0 0 0 12px transparent; } }
.msg-btn.is-ring[data-pop="avisos"] > .icon { transform-origin: 50% 8%; animation: bell-ring 900ms var(--ease); }
.msg-btn.is-ring[data-pop="mensajes"] > .icon { animation: bubble-hop 520ms var(--ease); }
.msg-btn.is-ring > .badge { animation: pop var(--t-base) var(--ease), badge-ping 1s var(--ease-out) var(--t-base); }
.pop .state :is(h3, h4) { font-size: var(--fs-md); }
.pop .state p { font-size: var(--fs-sm); max-width: 30ch; }
.pop .state .btn { margin-top: var(--s2); }
@keyframes pop-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes pop-down { to { opacity: 0; transform: translateY(16px); } }
@media (max-width: 599px) {
  .appbar:has(.pop:not([hidden])) { z-index: 40; }
  html:has(.pop:not([hidden])) { overflow: hidden; }
  .pop, .pop:has(.chat) { position: fixed; inset: 0; width: auto; height: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  .pop:not([hidden]) { animation-name: pop-up; }
  .pop.is-leaving { animation-name: pop-down; }
}
@media (min-width: 600px) { .pop-x { display: none; } }
@media (min-width: 960px) {
  .topnav .nav-link > .icon { display: none; }
  .msg-btn { width: auto; height: auto; align-self: stretch; display: inline-flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); border-radius: 0; font-weight: 500; }
  .msg-btn .badge { top: calc(50% - 18px); right: auto; left: calc(var(--s2) + 12px); box-shadow: 0 0 0 2px var(--paper); }
  .acct { margin-left: var(--s3); padding-left: var(--s4); border-left: 1px solid var(--line); }
}

.appbar, .bottomnav { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.appbar, .appbar.is-scrolled { border-bottom: 1px solid var(--line); }
@media (min-width: 960px) {
  .appbar { padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--s7))); }
  .topnav { gap: var(--s4); }
  .topnav .nav-link, .msg-btn { padding-inline: var(--s2); }
}
.landing .topnav { display: flex; }
.landing .topnav .nav-link > .icon { display: none; }
@media (max-width: 599px) {
  .landing { --appbar-h: 100px; } /* bar + tabs row, so sticky tabs and rails below still clear it */
  .landing .appbar { display: grid; grid-template: minmax(0, 1fr) 44px / minmax(0, 1fr) auto; column-gap: var(--s2); }
  .landing .topnav { grid-area: 2 / 1 / 3 / -1; align-self: stretch; }
  .landing .topnav .nav-link { flex: 1; justify-content: center; min-height: 44px; }
}
@media (min-width: 600px) and (max-width: 959px) {
  .landing .appbar .brand { margin-right: var(--s5); }
  .landing .topnav { align-self: stretch; gap: var(--s4); margin-right: auto; }
  .landing .topnav .nav-link { padding-inline: var(--s2); }
}

.pop-act:has(> .inbox-box-btn) { display: flex; min-width: 0; max-width: 50%; }
.inbox-box-btn:not([hidden]) { flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; gap: var(--s2); padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.inbox-box-btn:hover { color: var(--accent); }
.inbox-box-btn [data-box-name] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box-list > li { border-bottom: 0; }
.box-btn { width: 100%; min-height: 48px; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.box-btn:hover { color: var(--accent); }
.box-btn[aria-pressed="true"] { color: var(--accent); font-weight: 600; }
.box-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box-n { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sheet .box-list { margin-inline: calc(-1 * var(--s3)); border-top: 0; }

/* initials avatars: six warm tints picked by hash (brand: mora family, no green or blue); text >= 4.5:1 */
.avatar[data-tint="1"] { background: var(--mora-100); color: var(--mora-700); }
.avatar[data-tint="2"] { background: #FBEEDB; color: #7E4B08; }
.avatar[data-tint="3"] { background: #F0EAEE; color: #5A4A55; }
.avatar[data-tint="4"] { background: #FAE6E7; color: #962F43; }
.avatar[data-tint="5"] { background: #F3E6F5; color: #6E3478; }
.avatar[data-tint="6"] { background: #ECE7EA; color: #4A3F47; }

.dir-head { margin-bottom: calc(var(--s2) * -1); }
.dir-head > div { gap: var(--s1); }
.dir-head > div > p { max-width: 40rem; text-wrap: balance; }
.dir-head .crumbs { margin-bottom: var(--s2); }
.dir-head > div > p a { text-underline-offset: 2px; white-space: nowrap; }
.explore { gap: var(--s5); border-top: 0; }
.explore > div { display: grid; gap: var(--s2); }
.explore h2 { font-size: var(--fs-md); }
.explore [aria-current] { font-weight: 600; }
.explore summary { width: fit-content; list-style: none; }
.explore summary::-webkit-details-marker { display: none; }
.explore details[open] > summary { margin-bottom: var(--s2); }
[data-mine]:empty { display: none; }

.list > li > .row { padding: var(--s5) 0; }
.row > .avatar { --av-size: 64px; }
.row > .avatar.sq { border-radius: 12px; }
.row .row-title .title-link { font-size: var(--fs-lg); line-height: 1.25; }
.row-role { font-size: var(--fs-md); line-height: 1.45; max-width: 68ch; }
.row-meta .icon-sm { color: var(--ink-2); }
.row-meta .new { color: var(--accent); font-weight: 600; }
.row-meta .new time { font-weight: 400; }
.row .title-link, .row > .avatar { transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
@media (hover: hover) { .row:hover > .avatar { transform: translateY(-1px) rotate(-2deg); } }
@media (max-width: 560px) { .row > .avatar { --av-size: 48px; } .row .row-title .title-link { font-size: var(--fs-md); } .row-role { font-size: var(--fs-sm); } }

.state-invite { gap: var(--s4); padding: var(--s3) 0 var(--s8); max-width: 36rem; }
.state-invite :is(h2, h3) { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.state-invite p { font-size: var(--fs-md); line-height: var(--lh-text); }
.state-invite .btn { margin-top: var(--s2); }
@media (prefers-reduced-motion: reduce) { .row:hover > .avatar { transform: none; } }
.state-broken { padding-top: var(--s7); }
.state-broken h1 { line-height: 1.08; text-wrap: balance; }

.route-bar { position: fixed; inset: 0 0 auto; z-index: 100; height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; }
.route-bar.is-on { opacity: 1; transform: scaleX(.86); transition: transform 2.4s cubic-bezier(.08, .7, .2, 1); }
.route-bar.is-done { transform: scaleX(1); opacity: 0; transition: transform 180ms var(--ease), opacity 260ms 160ms linear; }
@media (prefers-reduced-motion: reduce) { .route-bar.is-on { transition: none; } .route-bar.is-done { transition: opacity 200ms linear; } }

.toolbar:has(> .tabbar) { gap: var(--s4); min-width: 0; }
.tabbar { min-width: 0; } /* the scroller, not the page, takes the overflow at 320px */
.section:has(> .toolbar > .tabbar) { grid-template-columns: minmax(0, 1fr); }
.tabbar .seg { display: flex; gap: var(--s5); overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--line); }
.tabbar .seg::-webkit-scrollbar { display: none; }
.tabbar .seg button { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 44px; padding: 0 1px; }
.toolbar:has(> .tabbar) + [data-out] { margin-top: calc(var(--s4) * -1); }
.toolbar:has(> .tabbar) + [data-out] > .list, .tabbar + [data-out] > .list { border-top: 0; }
@media (max-width: 560px) { .tabbar .seg { gap: var(--s4); } }

.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.pcard { position: relative; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; height: 100%; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pcard-photo { position: relative; overflow: hidden; margin: var(--s2) var(--s2) 0; border-radius: calc(var(--radius-lg) - var(--s2)); }
.pcard-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 8%, transparent); pointer-events: none; }
.pcard .pcard-pic { --av-size: 100%; display: grid; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; object-position: 50% 30%;
  font-family: var(--font-display); font-size: 24cqi; font-weight: 700; letter-spacing: -0.02em; }
.pcard-body { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 2px; padding: var(--s3) var(--s4) var(--s4); }
.pcard .pcard-name { display: flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; font-family: var(--font-display); font-size: clamp(var(--fs-sm), 9cqi, var(--fs-xl)); font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.02em; }
.pcard-name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.pcard-name a:hover { color: var(--accent); }
.pcard .stretch { -webkit-tap-highlight-color: transparent; } /* the whole card is the link: no grey flash over it on a tap */
.pcard .stretch:active { color: var(--accent-press); }
/* team cards: a full name wraps in balanced lines instead of «Luis Gil Monten…» (three fit a compound surname in a 130 px card), and the badge follows its last word */
.pcard:not(.is-row) .pcard-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-wrap: balance; }
.pcard:not(.is-row) .pcard-name a { display: inline; overflow: visible; white-space: normal; }
.pcard:not(.is-row) .pcard-name .vbadge { margin-left: 6px; vertical-align: middle; }
@media (hover: hover) { .pcard .vbadge { position: relative; z-index: 2; } } /* over the link, so a mouse gets its «Verificado con…» title; a tap still opens the profile */
.pcard-lead { margin: 0; font-size: var(--fs-sm); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-meta { display: flex; align-items: center; gap: 4px; margin: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.pcard .stretch::after { z-index: 1; border-radius: var(--radius-lg); } /* over the piece too: its clip-path paints it above a plain link */
.pcard .stretch:focus-visible::after { outline-offset: -2px; } /* the card clips overflow, so the ring goes inside */
@media (min-width: 600px) { .pcards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s4); } }
@container (max-width: 200px) { .pcard-body { padding-inline: var(--s3); } }
.pcard-menu { position: absolute; top: var(--s4); right: var(--s4); z-index: 2; color: var(--ink); background: color-mix(in oklab, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: var(--radius-pill); }
.pcard-menu:hover { background: var(--surface); }
.pcards.is-rows { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.pcard.is-row { grid-template-columns: clamp(84px, 26%, 136px) minmax(0, 1fr); }
.pcard.is-row .pcard-photo { margin: var(--s2) 0 var(--s2) var(--s2); }
.pcard.is-row .pcard-pic { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; font-size: clamp(28px, 9cqi, 44px); }
.pcard.is-row .pcard-body { align-content: center; min-height: calc(clamp(84px, 26cqi, 136px) + var(--s2)); padding: var(--s4); } /* never shorter than the photo is wide: a short card keeps a square photo, not a letterbox */
.pcard.is-row .pcard-name { font-size: clamp(var(--fs-md), 5cqi, var(--fs-lg)); }
@media (max-width: 519px) {
  .pcard.is-row { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 2px var(--s3); align-items: start; padding: var(--s3); } /* the 1fr row takes the photo's extra height, so name, headline and city stay together */
  .pcard.is-row .pcard-photo { grid-row: 1 / span 3; margin: 0; aspect-ratio: 3 / 4; border-radius: calc(var(--radius-lg) - var(--s3)); }
  .pcard.is-row .pcard-body { display: contents; }
  .pcard.is-row .fit { grid-column: 1 / -1; }
}
.pcard .fit { display: flex; width: 100%; margin-top: var(--s3); }
.pcard .fit-a, .pcard .fit-b { padding-block: 6px; font-size: var(--fs-2xs); }
.pcard .fit b { display: block; font-size: var(--fs-xs); }
.pcard .fit-a { min-width: min-content; flex-shrink: 6; color: var(--ink-2); }
.pcard .fit-a b { color: var(--ink); }
.pcard .fit-b { flex-grow: 1; overflow-wrap: break-word; background: var(--accent-soft); color: var(--mora-700); } /* a word wider than a 320 px card breaks instead of being clipped */
.pcard .fit-b b { color: var(--mora-900); }
.pcard .fit.is-match .fit-b b { color: var(--on-accent); }
@container (max-width: 279px) {
  .pcard .fit { flex-direction: column; }
  .pcard .fit-a { min-width: 0; padding: 5px 10px 10px; border-radius: var(--radius) var(--radius) 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%); }
  .pcard .fit-b { margin: -5px 0 0; padding: 12px 10px 6px; border-radius: 0 0 var(--radius) var(--radius); clip-path: polygon(0 7px, 50% 0, 100% 7px, 100% 100%, 0 100%); }
}

details.more { display: block; padding-top: var(--s5); border-top: var(--border); }
.more > summary { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-md); font-weight: 600; cursor: pointer; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { color: var(--accent); }
.more > summary .icon-sm { transition: rotate var(--t-fast) var(--ease); }
.more[open] > summary .icon-sm { rotate: 180deg; }
.more-body { display: grid; gap: var(--s6); padding-top: var(--s5); min-width: 0; }
@media (prefers-reduced-motion: reduce) { .more > summary .icon-sm { transition: none; } }