/* ==========================================================================
VSH design system (prototype) — squawk vsh-copy#36
One source of truth for type, spacing, colour and component roles.
Loaded on every page AFTER rework.css; later rules win, so every rework
component is mapped onto the scale below. Tokens are CSS custom properties.
========================================================================== */
:root {
/* type */
--font-ui: "Roboto Condensed", sans-serif; /* UI, headings, labels */
--font-text: "Roboto", sans-serif; /* running text */
--t-xs: .6875rem; /* 11px micro labels, badges */
--t-sm: .75rem; /* 12px meta, captions */
--t-md: .8125rem; /* 13px chips, secondary buttons */
--t-base: .875rem; /* 14px body, list rows */
--t-lg: 1rem; /* 16px item titles, primary buttons */
--t-xl: 1.125rem; /* 18px section headings */
--t-2xl: 1.375rem; /* 22px page titles, profile names */
--t-3xl: 1.75rem; /* 28px reserved (hero) */
--lh-tight: 1.25; --lh-normal: 1.5; --lh-loose: 1.6;
/* spacing (4px grid) */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem;
/* colour */
--c-primary: #155581; --c-primary-dark: #0f4467; --c-primary-soft: #e9eef3; --c-line: #d0dde6; --c-line-soft: #eef2f5;
--c-text: #323232; --c-muted: #696969; --c-faint: #8a93a0; --c-placeholder: #a5a5a5;
--c-surface: #fff; --c-surface-2: #f7f9fb; --c-bg: #f3f6f8;
--c-success: #2daf28; --c-success-dark: #249322; --c-success-soft: #e6f5e5; --c-success-text: #1f6b1d;
--c-warn: #b35a3c; --c-warn-soft: #fff8f4; --c-note: #fff8e1; --c-note-line: #f1dd9a; --c-note-text: #5b4a12; --c-danger: #b23b3b;
/* shape */
--radius: 0; --radius-round: 50%; --shadow-1: 0 1px 2px rgba(21,85,129,.06); --shadow-2: 0 6px 18px rgba(21,85,129,.14); --shadow-3: 0 12px 32px rgba(21,85,129,.18);
/* layout */
--w-page: 68.875rem; --w-narrow: 46rem; --w-side: 19rem; --h-header: 4rem; --sticky-top: 5rem;
}
/* ---- base inside every rework container: neutralise inherited sizes from main.css ---- */
.cp, .pp, .hm, .fd, .sb, .tp, .tpd, .po, .yp, .yv, .lt, .ta, .evl, .ev-box, .pc-banner, .gc--compact, .uc--compact, .m-header.m-desktop-only {
font-family: var(--font-ui); font-size: var(--t-base); line-height: var(--lh-normal); color: var(--c-text);
}
.pp p, .yv p, .po p, .tpd p, .hm p, .cp p, .yp p, .gc--compact p, .uc--compact p { margin: 0 0 var(--s-2); }
.pp ul, .pp ol, .po ul, .po ol, .yv ul, .tpd ul { font-size: inherit; line-height: inherit; color: inherit; background: none; font-weight: 400; }
.pp li, .po li, .yv li, .tpd li, .hm li { font-size: inherit; line-height: inherit; }
/* ---- type roles ---- */
.tp__h, .tpd__h, .yv__h h1, .pp__name, .yp__name, .cp__h1 { font-family: var(--font-ui); font-size: var(--t-2xl); line-height: var(--lh-tight); font-weight: 500; color: var(--c-primary); }
.cp__h1 { font-size: var(--t-xl); }
.pp__h, .hm__h h2, .yv__section h2, .tpd__kicker + .tpd__h, .cp__poolhead h2, .ta__label + .ta__item .ta__title { font-size: var(--t-xl); }
.pp__h, .hm__h h2, .yv__section h2 { font-family: var(--font-ui); font-weight: 500; color: var(--c-primary); line-height: var(--lh-tight); }
.pp__h small, .hm__h a, .yv__section h2 small { font-size: var(--t-md); font-weight: 400; }
.li__title, .hl__title, .tp__title, .pp__row h3, .fd__title, .po__title, .gc--compact .m-groupe-card__heading, .uc--compact .m-user-card__heading, .gp__sub, .cp__title { font-family: var(--font-ui); font-size: var(--t-lg); line-height: var(--lh-tight); font-weight: 500; }
.po__title { font-size: var(--t-2xl); }
.cp__title { font-size: var(--t-2xl); }
.pp__about, .gp__body, .gp__lead, .li__text, .fd__excerpt p, .fd__full p, .po__body, .po__teaser, .hl__teaser, .pp__row p, .gc--compact .m-groupe-card__description, .uc--compact .m-user-card__description, .cp__text, .yp__field textarea, .lt__empty, .pp__empty, .yv__empty, .li__clist, .cp__pteaser, .tp__lead { font-family: var(--font-text); font-size: var(--t-base); line-height: var(--lh-loose); color: var(--c-text); }
.gp__lead, .po__teaser { color: var(--c-primary); font-weight: 500; }
.pp__empty, .yv__empty, .lt__empty, .tp__lead { color: var(--c-muted); font-family: var(--font-ui); }
.cp__text { font-size: var(--t-lg); }
.pp__meta, .fd__org, .li__headline, .li__time, .tp__lastmeta, .pp__rowtags, .hl__meta, .ev__meta, .fd__tags, .cal__day, .cal__head, .sb__hint, .yp__todo, .lt__count, .lt__sort, .tp__sort, .tp__stat, .pp__stat, .po__date, .po__org, .li__social, .fd__time, .pp__org, .yp__org, .uc--compact .m-user-card__info, .gc--compact .m-groupe-card__info, .pp__previewhead, .cp__previewhead, .cp__hint, .cp__tagcount, .cp__status, .po__crumbs, .tpd__count, .yp__pct, .li__ctx, .fd__reason, .hl__meta { font-family: var(--font-ui); font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--c-muted); }
.pp__stat b, .tp__stat b, .tpd__count b, .pp__meta a, .yp__pct { color: var(--c-primary); }
.pp__meta li span:first-child, .tp__cols, .yp__field > span, .cp__event label, .tpd__kicker, .evl__badge, .ta__label, .cp__suggested__label, .cal__dow, .cp__poolinfo, .yp__sublabel { font-family: var(--font-ui); font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--c-faint); }
.yp__sublabel, .cp__poolinfo { text-transform: none; letter-spacing: 0; font-size: var(--t-md); color: var(--c-muted); }
.pp__tags a, .tp__tags a, .sb__tags a, .cp__chip, .gc--compact .m-hashtag-list__item, .uc--compact .m-hashtag-list__item, .po__tags a, .yv__chip, .cp__sugchip, .evl__mode, .pc-badge, .fd__filter button, .tpd__filter button, .lt__sort select, .tp__sort select, .cp__cat, .li__tag { font-family: var(--font-ui); font-size: var(--t-md); line-height: var(--lh-normal); }
.li__tag { font-size: var(--t-base); }
.fb, .cp__publish, .pp__mail, .evl__btn, .fd__more, .cp__poolbtn, .cp__tool, .li__follow, .li__actions button, .fd__act, .yp__edit, .cp__cancel, .lt__search, .ta__item, .cp__pooluse, .cp__poolcancel { font-family: var(--font-ui); font-size: var(--t-base); }
.cp__publish, .cp__pooluse { font-size: var(--t-lg); }
.fd__act, .li__actions button, .yp__edit, .li__follow { font-size: var(--t-md); font-weight: 600; }
.pp__row h3 a, .tp__title a, .li__title, .hl__title, .fd__title a, .gc--compact .m-groupe-card__link, .uc--compact .m-user-card__link { color: var(--c-primary); }
/* ---- spacing roles ---- */
.pp__section, .yv__form, .tpd__head, .yp__card, .pp__card { padding: var(--s-4) var(--s-5); }
.pp__section { margin-bottom: var(--s-4); }
.pp__h, .yv__section h2 { margin-bottom: var(--s-3); }
.pp__row, .tp__row, .gc--compact, .uc--compact { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.pp__meta { gap: var(--s-2); }
/* ---- surfaces ---- */
.pp__section, .pp__card, .yp__card, .yv__form, .yv__nav, .tp__list, .tpd__head, .tpd__list, .li, .fd__item, .hl__card, .sb__box, .po__card, .cp__card, .lt__search, .m-items-list--one-col:has(.gc--compact), .m-items-list--one-col:has(.uc--compact) { background: var(--c-surface); border-color: var(--c-line); }
.pp__row, .tp__row, .ev__item, .li__social, .li__cbox, .pp__stats, .pp__meta + .pp__tags { border-color: var(--c-line-soft); }
/* ---- avatars & logos ---- */
.pp__avatar, .yp__avatar, .cp__avatar, .fd__avatar, .po__avatar, .yp__ini { font-family: var(--font-ui); border-radius: var(--radius-round); }
/* ---- squawk vsh-copy#39: button roles, valid everywhere (the composer tokens used to live on .cp only) ---- */
:root { --cp-blue: var(--c-primary); --cp-grey: var(--c-muted); --cp-line: var(--c-line); --cp-bg: var(--c-bg); --cp-green: var(--c-success); --cp-red: var(--c-danger); }
/* primary (green) */
.cp__publish, .cp__pooluse { background: var(--c-success); color: #fff; border: 1px solid var(--c-success); font: var(--t-lg)/1 var(--font-ui); padding: .55rem 1.5rem; cursor: pointer; }
.cp__publish:hover, .cp__pooluse:hover { background: var(--c-success-dark); border-color: var(--c-success-dark); }
.cp__publish:disabled, .cp__pooluse:disabled { background: var(--c-placeholder); border-color: var(--c-placeholder); cursor: not-allowed; }
/* secondary (outline) — Cancel and similar */
.cp__cancel, .pp__mail, .cp__poolcancel { display: inline-flex; align-items: center; justify-content: center; background: var(--c-surface); color: var(--c-primary); border: 1px solid var(--c-primary); font: var(--t-base)/1 var(--font-ui); padding: .55rem 1.1rem; cursor: pointer; text-decoration: none; }
.cp__cancel:hover, .pp__mail:hover, .cp__poolcancel:hover { background: var(--c-primary-soft); color: var(--c-primary); }
/* tertiary (text) — small inline actions keep their look */
.yp__edit, .fd__act, .li__follow, .li__more { background: transparent; }
.yp__edit { background: var(--c-primary-soft); }
/* same height for buttons in one row */
.yp__save, .yv__actions, .cp__bar, .cp__poolfoot, .pp__actions { align-items: center; }
.yp__save .cp__publish, .yp__save .cp__cancel, .yv__actions .cp__publish, .yv__actions .cp__cancel { height: 2.35rem; padding-top: 0; padding-bottom: 0; }
/* lists and meta inside Your profile / Your VSH follow the scale too */
.yp ul, .yp li, .yv ul, .yv li { font-size: inherit; line-height: inherit; }
.yp__todo, .yp__todo li { font-size: var(--t-md); line-height: var(--lh-normal); }
.yp .pp__meta, .yp .pp__meta li, .yp .pp__meta a { font-size: var(--t-base); }
.yp .pp__meta li span:first-child { font-size: var(--t-xs); }
/* squawk vsh-copy#40: short highlight on a field that was reached from the checklist */
.yp__field input.is-hinted, .yp__field textarea.is-hinted { outline: 2px solid var(--c-success) !important; outline-offset: -1px; transition: outline-color .6s; }
/* squawk vsh-copy#41: room to scroll so the last sections can become active in the jump nav */
.pp__main::after, .yp__main::after { content: ""; display: block; height: calc(100vh - 14rem); }
/* squawk vsh-copy#42: highlight cards without image start where the image ends and fill the row → equal white area */
.hl__grid { align-items: stretch; }
.hl__card:not(:has(.hl__img)) { align-self: stretch; height: auto; margin-top: calc(100% * 7 / 16); }
.hl__card:not(:has(.hl__img)) .hl__body { height: 100%; align-content: start; }
.hl__card:not(:has(.hl__img)) .hl__meta { margin-top: auto; }
/* squawk vsh-copy#44: event details block, tidy */
.cp__event { background: var(--c-surface); border-top: 1px solid var(--c-line); border-bottom: 0; padding: var(--s-4) var(--s-5) var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); align-items: end; }
.cp__event__head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-1); }
.cp__event__head svg { width: 1rem; height: 1rem; color: var(--c-warn); align-self: center; }
.cp__event__head span { font: 500 var(--t-base)/1.2 var(--font-ui); color: var(--c-primary); }
.cp__event__head small { font: var(--t-sm)/1.2 var(--font-ui); color: var(--c-faint); }
.cp__event label { font: var(--t-sm)/1.2 var(--font-ui); color: var(--c-muted); text-transform: none; letter-spacing: 0; gap: var(--s-1); }
.cp__event input, .cp__event select { height: 2.35rem; box-sizing: border-box; font: var(--t-base) var(--font-ui); border: 1px solid var(--c-line); padding: 0 var(--s-2); background: var(--c-surface); color: var(--c-text); width: 100%; }
.cp__event input:focus, .cp__event select:focus { outline: 2px solid var(--c-primary); outline-offset: -1px; }
.cp__event .cp__event--wide { grid-column: 1 / -1; }
.cp__attach { padding: 0 var(--s-5); }
.cp__images:empty, .cp__docs:empty { display: none; padding: 0; }
.cp__teaser { border-top: 1px solid var(--c-line); }
.cp__bar { border-top: 1px solid var(--c-line); }
@media (max-width: 640px) { .cp__event { grid-template-columns: 1fr; } }
/* squawk vsh-copy#45: badges on coloured backgrounds use light text (the micro-label role had greyed them) */
.evl__badge, .po__type.evl__badge, .ev-box__date, .ev-box__date b, .cp__img--cover::after { color: var(--c-warn-soft); }
.evl__badge { background: var(--c-warn); }
.evl__badge::before { color: inherit; }
/* squawk vsh-copy#46: People / Groups tabs align with the list edge */
#main .m-section__filter { padding-left: 0; padding-right: 0; justify-content: flex-start; }
/* squawk vsh-copy#47: list toolbar — counter before the sort, select flush with the right edge */
.lt { gap: var(--s-3); }
.lt__search { order: 0; }
.lt__count { order: 1; margin: 0; }
.lt__sort { order: 2; margin-left: 0; }
.lt__sort select { margin-left: var(--s-1); }
/* squawk vsh-copy#48: composer toolbar — label and button tools share one box model and alignment */
.cp__bar { gap: var(--s-1); }
.cp__tool, button.cp__tool { display: inline-flex; align-items: center; gap: var(--s-2); height: 2.35rem; padding: 0 var(--s-3); margin: 0; border: 0; background: transparent; color: var(--c-muted); font: var(--t-base)/1 var(--font-ui); line-height: 1; vertical-align: middle; cursor: pointer; }
.cp__tool svg { width: 1.25rem; height: 1.25rem; flex: none; display: block; }
.cp__tool span { line-height: 1; }
.cp__pool { display: inline-flex; align-items: center; }
.cp__bar .cp__cancel, .cp__bar .cp__publish { height: 2.35rem; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.cp__bar .cp__status { line-height: 1; }
/* ==========================================================================
Mobile layer (squawk vsh-copy#49) — usability first: compact chrome, one column,
40px touch targets, important things first.
========================================================================== */
/* squawk vsh-copy#50: calendar day numbers centred in their cell */
.cal__day { display: flex; align-items: center; justify-content: center; height: 1.6rem; line-height: 1; }
/* squawks vsh-copy#51/#52: one select control everywhere - same height as text inputs, chevron with a
consistent right inset, text never runs into the arrow */
.lt__sort select, .tp__sort select, .cp__audience select, .cp__event select, #results-per-page select {
appearance: none; -webkit-appearance: none;
height: 2.35rem; box-sizing: border-box; font: var(--t-base) var(--font-ui); line-height: 2.35rem;
color: var(--c-primary); border: 1px solid var(--c-line); border-radius: 0; margin: 0;
padding: 0 2.25rem 0 var(--s-2);
background: var(--c-surface) url("data:image/svg+xml;utf8,") no-repeat right .75rem center;
}
.lt__sort select:focus, .tp__sort select:focus, .cp__audience select:focus, .cp__event select:focus, #results-per-page select:focus { outline: 2px solid var(--c-primary); outline-offset: -1px; }
.lt__sort select { margin-left: var(--s-1); }
.lt { align-items: center; }
.lt__search { height: 2.35rem; box-sizing: border-box; padding-top: 0; padding-bottom: 0; font-size: var(--t-base); }
.lt__search { background-image: url(img/icons/icons-suche.svg); background-repeat: no-repeat; background-position: .6rem center; background-size: .9rem; padding-left: 2rem; }
.lt__sort, .lt__count { display: inline-flex; align-items: center; margin: 0; }
.lt__count { margin-left: var(--s-1); }
.tp__tools { align-items: center; }
/* squawk vsh-copy#54: Topics toolbar is the same full-width row as on People and Resources */
.tp__filter { height: 2.35rem; box-sizing: border-box; padding-top: 0; padding-bottom: 0; font-size: var(--t-base); width: auto; }
.tp__tools.lt { margin: 0 0 var(--s-3); }
.tp__head { margin-bottom: var(--s-3); }
.tp__sort { display: inline-flex; align-items: center; margin: 0; }
.tp__sort select { margin-left: var(--s-1); }
/* squawk vsh-copy#53: profile hashtags as chips (same widget as the composer) */
.yp__tags { border-top: 0; padding: .3rem .5rem; background: var(--c-surface-2); border: 1px solid transparent; min-height: 2.35rem; box-sizing: border-box; text-transform: none; letter-spacing: 0; }
.yp__section.is-editing .yp__tags { background: var(--c-surface); border-color: var(--c-line); }
.yp__section.is-editing .yp__tags:focus-within { outline: 2px solid var(--c-primary); outline-offset: -1px; }
.yp__tags.is-hinted { outline: 2px solid var(--c-success); outline-offset: -1px; }
.yp__section:not(.is-editing) .yp__tags .cp__taginput, .yp__section:not(.is-editing) .yp__tags .cp__tagcount, .yp__section:not(.is-editing) .yp__tags .cp__chip button, .yp__section:not(.is-editing) .yp__tags .cp__suggest { display: none; }
.yp__section:not(.is-editing) .yp__tags .cp__chip { padding-right: .6rem; }
.yp__tags .cp__taginput { font-size: var(--t-base); }
.yp__tags .cp__tagcount { font-size: var(--t-xs); }
/* squawk vsh-copy#57: list pagination */
.lt-paged { display: none !important; }
.lt__pager { display: flex; align-items: center; gap: var(--s-1); justify-content: flex-end; flex-wrap: wrap; margin: var(--s-3) 0 0; font-family: var(--font-ui); font-size: var(--t-md); }
.lt__pager[hidden] { display: none; }
.lt__pinfo { color: var(--c-faint); margin-right: auto; }
.lt__pager button { min-width: 2.25rem; height: 2.25rem; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-primary); font: inherit; cursor: pointer; padding: 0 var(--s-2); }
.lt__pager button:hover:not([disabled]) { background: var(--c-primary-soft); }
.lt__pager button[aria-current="page"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.lt__pager button[disabled] { color: var(--c-faint); cursor: default; }
/* squawks vsh-copy#58/#59: profiles not set up yet stay listed, muted, sorted last by "Relevance" */
.pc-ghost .m-user-card__link, .pc-ghost .m-user-card__info { color: var(--c-faint); }
.pc-ghost .m-user-card__image, .pc-ghost .uc__img { opacity: .55; }
/* squawk vsh-copy#55: "Interesting" instead of Like */
.li__actions [data-act="like"].is-on { color: var(--c-primary); font-weight: 600; }
@media (max-width: 767.98px) {
/* header: 56px bar, sticky, logo small, hamburger right; search row underneath */
.m-wrapper > .m-header.m-mobile-only { position: sticky; top: 0; z-index: 50; background: rgba(243,246,248,.97); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; grid-template-areas: none; min-height: 3.5rem; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.m-header.m-mobile-only .m-logo { flex: none; display: flex; }
.m-header.m-mobile-only .m-logo__image { height: 2.25rem; width: auto; }
.m-header.m-mobile-only .m-sidebar__button { width: 2.75rem; height: 2.75rem; margin-left: auto; }
.m-header.m-mobile-only .msearch { flex: 1 1 100%; order: 3; }
.msearch { margin: 0; }
.msearch input { width: 100%; height: 2.5rem; border: 1px solid var(--c-line); background: #fff url(img/icons/icons-suche.svg) no-repeat .75rem center / 1rem; padding: 0 var(--s-3) 0 2.4rem; font: var(--t-base) var(--font-text); }
.msearch .ta { min-width: 0; }
.m-sidebar { padding: 4.5rem var(--s-4) var(--s-8); }
/* profile nudge: one tidy line */
.pc-banner { flex-wrap: nowrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); margin: var(--s-2) 0 0; }
.pc-banner__bar { display: none; }
.pc-banner__text { font-size: var(--t-sm); line-height: 1.3; }
.pc-banner__text b { display: block; }
.pc-banner__cta { padding: .45rem .6rem; font-size: var(--t-sm); white-space: nowrap; }
/* home: highlights as a horizontal strip, events (list only) before the feed */
.hl__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-3); padding-bottom: var(--s-2); margin: 0 calc(-1 * var(--s-4)); padding-left: var(--s-4); padding-right: var(--s-4); -webkit-overflow-scrolling: touch; align-items: stretch; }
.hl__card { flex: 0 0 78%; scroll-snap-align: start; margin-top: 0 !important; align-self: stretch !important; }
.hl__card:not(:has(.hl__img)) .hl__body { align-content: start; }
.hl__img { aspect-ratio: 16 / 8; }
.hm__cols { display: flex; flex-direction: column; }
.sb { order: -1; position: static; gap: var(--s-2); }
.cal { display: none; }
.ev__item:nth-child(n+4) { display: none; }
.sb__box:has(.sb__tags) { display: none; }
.fd__filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
.fd__filter button { white-space: nowrap; min-height: 2.5rem; }
.li__actions button { min-height: 2.75rem; }
.li__headline { white-space: normal; }
/* lists: row anatomy stacked, follow button full width at the bottom */
.lt { gap: var(--s-2); }
.lt__search { flex: 1 1 100%; height: 2.5rem; }
.lt__sort { flex: 1; } .lt__sort select { height: 2.5rem; width: 100%; }
.lt__count { flex: 1 1 100%; order: 3; }
.uc--compact, .gc--compact { grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-areas: "img head" "img desc" "img meta" "tags tags" "act act"; }
.uc--compact .m-followed-actions.fb-host, .gc--compact .m-followed-actions.fb-host { justify-self: stretch; margin-top: var(--s-2); }
.uc--compact .fb, .gc--compact .fb, .tp__fb { width: 100%; min-height: 2.5rem; }
.tp__row { grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-areas: "img main" "last last" "act act"; }
.tp__thumb { grid-area: img; } .tp__main { grid-area: main; } .tp__last { grid-area: last; } .tp__act { grid-area: act; }
.tp__tags a:nth-child(n+4) { display: none; }
.m-section__filter .m-filter-list__item { min-height: 2.5rem; }
/* detail pages */
.m-breadcrumbs { padding: var(--s-2) 0; font-size: var(--t-sm); }
.m-breadcrumbs__item { font-size: var(--t-sm); }
.pp, .yp, .yv { gap: var(--s-3); }
.pp__card, .yp__card { padding: var(--s-4); }
.pp__jump { top: 3.5rem; overflow-x: auto; flex-wrap: nowrap; }
.pp__jump a { white-space: nowrap; min-height: 2.25rem; display: inline-flex; align-items: center; }
.pp__main::after, .yp__main::after { height: 30vh; }
.yv__nav { display: flex; overflow-x: auto; padding: 0; }
.yv__nav .yv__group { display: none; }
.yv__nav a { white-space: nowrap; padding: var(--s-3); }
/* composer */
.cp { margin: var(--s-2) 0; padding: 0; }
.cp__card { border-left: 0; border-right: 0; }
.cp__audience { flex-wrap: wrap; padding: 0 var(--s-4) var(--s-2); }
.cp__audience label { flex: none; }
.cp__audience { min-width: 0; }
.cp__audience select { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; height: 2.5rem; }
.cp__head { padding: var(--s-3) var(--s-4) var(--s-2); }
.cp__body { padding: 0 var(--s-4); }
.cp__title { font-size: var(--t-xl); }
.cp__text { font-size: var(--t-lg); min-height: 7rem; }
.cp__bar { padding: var(--s-2) var(--s-3); }
.cp__bar .cp__tool span { display: none; }
.cp__bar .cp__tool { width: 2.75rem; height: 2.75rem; justify-content: center; padding: 0; }
.cp__bar .cp__publish, .cp__bar .cp__cancel { height: 2.75rem; }
.cp__status { flex: 1 1 100%; order: 5; }
.cp__context { padding: 0 var(--s-4); }
.cp__hint { display: none; }
.cp__preview { padding: 0 var(--s-4); }
.cp__poolbox { max-height: 100vh; height: 100vh; width: 100%; }
.cp__poolgrid { grid-template-columns: repeat(2, 1fr); }
/* general touch targets */
.fb, .fd__act, .yp__edit, .evl__btn, .fd__more, .pp__mail, .cp__cancel, .cp__publish, .lt__sort select, .tpd__filter button, .tp__sort select, .cp__cat { min-height: 2.5rem; }
.pp__tags a, .tp__tags a, .sb__tags a, .fd__tags a, .li__tag, .m-hashtag-list__item { padding-top: .25rem; padding-bottom: .25rem; }
.m-footer { margin-top: var(--s-8); }
}
@media (max-width: 767.98px) {
.li__follow, .li__menu, .li__more, .pc-banner__close { min-height: 2.5rem; min-width: 2.5rem; display: inline-flex; align-items: center; justify-content: center; }
.li__more { min-width: 0; padding: 0 var(--s-1); }
.li__head { align-items: center; }
.msearch { position: relative; }
.yp__todo { gap: 0; }
.yp__todo li { min-height: 2.5rem; display: flex; align-items: center; }
.yp__todo a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.pp__empty a, .hm__h.a { display: inline-flex; align-items: center; min-height: 2.5rem; }
}
/* ===== Posts & Topics, edit after publishing, scheduled posts (request of 2 Nov 2026) ===== */
/* shared header with tabs (same tab look as People & Groups) */
.pt__head { display: grid; gap: var(--s-2); margin: 0 0 var(--s-3); }
.pt__head .tp__h { margin: 0; }
.pt__tabs { display: flex; gap: var(--s-2); justify-content: flex-start; margin: var(--s-1) 0 0; padding: 0; }
.pt__tabs .m-filter-list__item { text-decoration: none; }
.pt__head .tp__lead { margin: 0; }
.tp__stat a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.tp__stat a:hover { color: var(--c-primary); }
/* posts overview: filters */
.pst__tools.lt { margin: 0 0 var(--s-2); }
.pst__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); font-family: var(--font-ui); font-size: var(--t-md); color: var(--c-muted); }
.pst__types { display: inline-flex; border: 1px solid var(--c-line); background: var(--c-surface); }
.pst__types button { border: 0; border-right: 1px solid var(--c-line); background: transparent; color: var(--c-primary); font: var(--t-md) var(--font-ui); padding: 0 var(--s-3); height: 2.35rem; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-1); }
.pst__types button:last-child { border-right: 0; }
.pst__types button small { color: var(--c-faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.pst__types button[aria-pressed="true"] { background: var(--c-primary); color: #fff; }
.pst__types button[aria-pressed="true"] small { color: rgba(255,255,255,.8); }
.pst__types button:focus-visible, .pst__chip:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.pst__f { display: inline-flex; align-items: center; gap: var(--s-1); }
.pst__f select { appearance: none; -webkit-appearance: none; height: 2.35rem; box-sizing: border-box; font: var(--t-base) var(--font-ui); color: var(--c-primary); border: 1px solid var(--c-line); border-radius: 0; padding: 0 2.25rem 0 var(--s-2); max-width: 15rem;
background: var(--c-surface) url("data:image/svg+xml;utf8,") no-repeat right .75rem center; }
.pst__f select:focus { outline: 2px solid var(--c-primary); outline-offset: -1px; }
.pst__active { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; margin: 0 0 var(--s-3); }
.pst__active[hidden] { display: none; }
.pst__chip { display: inline-flex; align-items: center; gap: var(--s-1); border: 1px solid var(--c-line); background: var(--c-primary-soft); color: var(--c-primary); font: var(--t-md) var(--font-ui); padding: .2rem var(--s-2); cursor: pointer; }
.pst__chip:hover { border-color: var(--c-primary); }
.pst__reset { border: 0; background: none; color: var(--c-primary); font: var(--t-md) var(--font-ui); text-decoration: underline; cursor: pointer; padding: .2rem var(--s-1); }
/* posts overview: rows */
.pst__list > li { font-size: var(--t-base); }
/* every post is its own card (posts were hard to tell apart as rows in one shared box) */
.pst__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.pst__list > .pst__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--s-4); padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-1); align-items: start; transition: border-color .15s, box-shadow .15s; }
.pst__list > .pst__row:hover { border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-line)); box-shadow: var(--shadow-2); }
.pst__list > .pst__row.is-pinned { box-shadow: inset 3px 0 0 var(--c-primary), var(--shadow-1); }
.pst__list > .pst__row.is-pinned:hover { box-shadow: inset 3px 0 0 var(--c-primary), var(--shadow-2); }
.pst__list > .lt__empty { background: var(--c-surface); border: 1px solid var(--c-line); padding: var(--s-4); }
/* topics overview: same cards as the posts */
.tp__list { display: grid; gap: var(--s-3); background: none; border: 0; border-radius: var(--radius); overflow: visible; }
.tp__list > .tp__row { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .15s, background .12s; }
.tp__list > .tp__row:hover, .tp__list > .tp__row:focus-within { border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-line)); box-shadow: var(--shadow-2); }
.pst__list > .pst__row--noimg { grid-template-columns: minmax(0, 1fr) auto; }
.pst__thumb { display: block; width: 5.5rem; aspect-ratio: 4 / 3; background: var(--c-surface-2) center / cover no-repeat; }
.pst__main { min-width: 0; display: grid; gap: .3rem; }
.pst__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-family: var(--font-ui); font-size: var(--t-xs); }
.pst__type { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--c-muted); }
.pst__type--event { background: #b5513a; color: #fff; padding: .05rem .4rem; }
.pst__type--publication { color: var(--c-primary); }
.pst__edited { font-family: var(--font-ui); font-size: var(--t-xs); color: var(--c-faint); border: 1px solid var(--c-line); padding: 0 .35rem; }
.pst__title { margin: 0; font: 500 var(--t-lg) / var(--lh-tight) var(--font-ui); }
.pst__title a { color: var(--c-primary); text-decoration: none; }
.pst__title a:hover { text-decoration: underline; }
.pst__teaser { margin: 0; color: var(--c-text); font-size: var(--t-base); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pst__meta { margin: 0; font-family: var(--font-ui); font-size: var(--t-md); color: var(--c-muted); }
.pst__meta a { color: inherit; }
.pst__tags { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem var(--s-2); }
.pst__tags .li__tag { font-size: var(--t-md); }
.pst__side { display: grid; justify-items: end; gap: var(--s-2); }
.pst__stats { font-family: var(--font-ui); font-size: var(--t-md); color: var(--c-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pst__edit { min-height: 2.25rem; display: inline-flex; align-items: center; }
.pst .lt__empty .pst__reset { font-size: inherit; }
/* own posts on the post page */
.po__editbtn { margin-left: auto; min-height: 2.25rem; display: inline-flex; align-items: center; text-decoration: none; }
.po__edited { font-family: var(--font-ui); font-size: var(--t-xs); color: var(--c-faint); border: 1px solid var(--c-line); padding: 0 .35rem; }
.po__sched { background: #fff6dc; border: 1px solid #f0d78c; color: #5a4a12; font: var(--t-md) var(--font-ui); padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.po__sched a { color: var(--c-primary); }
/* Your posts */
.ypo__new { text-decoration: none; display: inline-flex; align-items: center; min-height: 2.35rem; align-self: center; }
.ypo__list > li { font-size: var(--t-base); }
.ypo__list { list-style: none; margin: 0; padding: 0; background: var(--c-surface); border: 1px solid var(--c-line); }
.ypo__list > .ypo__row { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line-soft); }
.ypo__list > .ypo__row:last-child { border-bottom: 0; }
.ypo__row.is-new { background: var(--c-primary-soft); transition: background 2s; }
.ypo__main { min-width: 0; display: grid; gap: .25rem; }
.ypo__title { margin: 0; font: 500 var(--t-lg) / var(--lh-tight) var(--font-ui); }
.ypo__title a { color: var(--c-primary); text-decoration: none; }
.ypo__title a:hover { text-decoration: underline; }
.ypo__when { font-family: var(--font-ui); font-size: var(--t-md); color: var(--c-muted); display: inline-flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.ypo__when svg { width: 1rem; height: 1rem; }
.ypo__when--sched { color: #8a5a00; }
.ypo__when small { color: var(--c-faint); }
.ypo__acts { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ypo__acts .cp__cancel { text-decoration: none; min-height: 2.25rem; display: inline-flex; align-items: center; }
.ypo__link { border: 0; background: none; color: var(--c-primary); font: var(--t-md) var(--font-ui); text-decoration: underline; cursor: pointer; padding: .3rem var(--s-1); }
.ypo__del { color: var(--c-muted); }
.ypo__del.is-armed { color: #fff; background: #b3261e; text-decoration: none; padding: .3rem var(--s-2); }
.ypo__demo { margin: var(--s-6) 0 0; font-size: var(--t-md); color: var(--c-faint); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.yv__section .yv__empty { padding: var(--s-4); }
.ypo__manage { margin-left: auto; font-size: var(--t-md); font-weight: 400; }
.yp__section .pp__h { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.ypo__list--compact > .ypo__row { padding: var(--s-2) 0; }
.ypo__list--compact { border: 0; background: transparent; }
/* composer: schedule */
.cp__schedbtn.is-on { color: var(--c-primary); font-weight: 600; background: var(--c-primary-soft); }
.cp__sched { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--c-line-soft); background: var(--c-surface-2); font: var(--t-md) var(--font-ui); color: var(--c-text); }
.cp__sched[hidden] { display: none; }
.cp__sched > svg { width: 1.1rem; height: 1.1rem; color: var(--c-primary); }
.cp__sched input { height: 2.35rem; box-sizing: border-box; border: 1px solid var(--c-line); padding: 0 var(--s-2); font: var(--t-base) var(--font-ui); color: var(--c-text); background: var(--c-surface); }
.cp__sched input:focus { outline: 2px solid var(--c-primary); outline-offset: -1px; }
.cp__schedquick { display: inline-flex; gap: var(--s-1); }
.cp__schedquick button, .cp__schedclear { border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-primary); font: var(--t-md) var(--font-ui); padding: 0 var(--s-2); height: 2.35rem; cursor: pointer; }
.cp__schedquick button:hover { border-color: var(--c-primary); }
.cp__schedclear { border-color: transparent; background: none; text-decoration: underline; color: var(--c-muted); }
.cp__schednote { flex-basis: 100%; color: var(--c-muted); font-size: var(--t-xs); }
@media (max-width: 767.98px) {
.pst__filters { gap: var(--s-2); }
.pst__types { width: 100%; }
.pst__types button { flex: 1; justify-content: center; padding: 0 var(--s-1); }
.pst__f { flex: 1 1 100%; justify-content: space-between; }
.pst__f select { flex: 1; max-width: none; margin-left: var(--s-2); height: 2.5rem; }
.pst__list > .pst__row, .pst__list > .pst__row--noimg { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3); }
.pst__thumb { width: 100%; aspect-ratio: 16 / 7; }
.pst__side { justify-items: start; grid-auto-flow: column; justify-content: space-between; align-items: center; }
.ypo__list > .ypo__row { flex-direction: column; align-items: stretch; gap: var(--s-2); }
.ypo__acts { justify-content: flex-start; }
.cp__sched { padding: var(--s-3) var(--s-4); }
.cp__sched input { flex: 1 1 100%; height: 2.5rem; }
.pt__tabs .m-filter-list__item { flex: 1; text-align: center; }
}
.cp__schedbtn { padding-left: var(--s-2); padding-right: var(--s-2); }
.cp__schedbtn svg { width: 1.15rem; height: 1.15rem; }
.cp__schedbtn.is-on { outline: 1px solid var(--c-primary); outline-offset: -1px; }
@media (max-width: 767.98px) {
/* composer bar with the schedule button: tools + clock on the first line, Cancel and Publish/Schedule side by side below */
.cp__bar .cp__cancel, .cp__bar .cp__publish { flex: 1 1 calc(50% - var(--s-1)); justify-content: center; text-align: center; }
.cp__bar .cp__schedbtn { margin-left: auto; }
}
.ypo__new { border-radius: 0; padding: 0 var(--s-4); }
/* ===== Groups: public / private, join, request, applications, members (request of 2 Nov 2026) ===== */
.gv-badge { display: inline-flex; align-items: center; gap: .2rem; vertical-align: middle; font: 600 var(--t-xs) var(--font-ui); text-transform: uppercase; letter-spacing: .05em; padding: .05rem .35rem; border: 1px solid var(--c-line); color: var(--c-muted); background: var(--c-surface); white-space: nowrap; }
.gv-badge svg { width: .8rem; height: .8rem; }
.gv-badge--private { color: #7a4b00; border-color: #e7c98a; background: #fff6dc; }
.gj { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.gj .gj__btn { min-height: 2.25rem; padding: 0 var(--s-3); font: 600 var(--t-md) var(--font-ui); white-space: nowrap; cursor: pointer; }
.gj .gj__btn.is-armed { background: #b3261e; border-color: #b3261e; color: #fff; }
.gj__state { font: var(--t-md) var(--font-ui); color: var(--c-muted); }
.gj__state--req { color: #7a4b00; font-weight: 600; }
/* group cards in lists: membership control left of Follow */
.gc--compact .m-followed-actions.fb-host { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.gc--compact.is-member { box-shadow: inset 3px 0 0 var(--c-success); }
/* group page */
.gp__vis { margin: 0; }
.pp__actions .gj { justify-content: flex-start; flex: 1 1 100%; }
.gp__locked { display: flex; gap: var(--s-2); align-items: flex-start; background: var(--c-surface-2); border: 1px dashed var(--c-line); padding: var(--s-3); color: var(--c-muted); font-size: var(--t-base); margin: var(--s-2) 0 0; }
.gp__locked svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .1rem; }
/* Your groups */
.yv__note { margin: 0 0 var(--s-2); font-size: var(--t-md); color: var(--c-muted); }
.yg__row { align-items: center; }
.yg__logo { width: 3rem; height: 3rem; flex: none; object-fit: cover; display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary); font: 600 var(--t-md) var(--font-ui); }
.yg__row .ypo__main { flex: 1; }
.yg__row .ypo__title .gv-badge { margin-left: var(--s-1); }
/* create form: members + visibility */
.yv__members { display: grid; gap: var(--s-1); margin: var(--s-4) 0 0; }
.yv__members .yv__note { margin: 0; }
.yv__mtags { border: 1px solid var(--c-line); background: var(--c-surface); padding: .3rem .5rem; min-height: 2.6rem; }
.yv__mtags:focus-within { outline: 2px solid var(--c-primary); outline-offset: -1px; }
.yv__mchip { padding-left: .25rem; }
.yv__mini { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--c-primary); color: #fff; font: 600 .625rem var(--font-ui); flex: none; }
.yv__mtags .cp__suggest li { display: flex; align-items: center; gap: var(--s-2); }
.yv__mtags .cp__suggest li em { margin-left: auto; }
.yv__mtags .cp__suggest .yv__nohit { color: var(--c-muted); cursor: default; white-space: normal; }
.yv__vis { border: 0; padding: 0; margin: var(--s-4) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.yv__vis legend { padding: 0; margin-bottom: var(--s-1); }
.yv__viscard { position: relative; display: grid; gap: .2rem; padding: var(--s-3) var(--s-3) var(--s-3) 2.4rem; border: 1px solid var(--c-line); background: var(--c-surface); cursor: pointer; font-family: var(--font-ui); }
.yv__viscard input { position: absolute; left: var(--s-3); top: var(--s-3); margin: .15rem 0 0; accent-color: var(--c-primary); }
.yv__viscard:has(input:checked) { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); background: var(--c-primary-soft); }
.yv__vishead { display: inline-flex; align-items: center; gap: var(--s-1); font: 600 var(--t-base) var(--font-ui); color: var(--c-primary); }
.yv__vishead svg { width: 1rem; height: 1rem; }
.yv__visdesc { font-size: var(--t-md); color: var(--c-muted); line-height: var(--lh-normal); }
@media (max-width: 767.98px) {
.yv__vis { grid-template-columns: minmax(0, 1fr); }
.gc--compact .m-followed-actions.fb-host { justify-content: flex-start; }
.yg__row { flex-direction: row; flex-wrap: wrap; }
.yg__row .ypo__acts { flex: 1 1 100%; justify-content: flex-start; }
}
.gj .gj__btn, .gj .cp__publish, .gj .cp__cancel { border-radius: 0; }
.gv-initials { display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary); font: 600 var(--t-md) var(--font-ui); aspect-ratio: 1; }
/* no rounded buttons anywhere (squawk #19), also outside the composer */
.cp__publish, .cp__cancel { border-radius: 0; }
/* group page: membership control on its own line above Follow / Contact */
.pp__card .pp__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.pp__card .pp__actions .gj { flex: 1 1 100%; justify-content: center; }
.pp__card .pp__actions .gj__state--req { flex: 1 1 100%; text-align: center; }
.gp__vis { text-align: center; }
.yv__actions .cp__publish, .ypo__new { white-space: nowrap; }
/* editing: type and "Post in" are read-only */
.cp__type--locked label:not(:has(input:checked)) { display: none; }
.cp__type--locked label, .cp__type--locked span { cursor: default; }
.cp__type--locked::before { content: ""; width: .9rem; height: .9rem; align-self: center; margin: 0 .2rem 0 .4rem; background: currentColor; color: var(--c-faint);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.cp__audience--locked select:disabled { background-image: none; background-color: var(--c-surface-2); color: var(--c-text); border-color: var(--c-line-soft); opacity: 1; cursor: default; padding-right: var(--s-2); }
.cp__locknote { font-size: var(--t-xs); color: var(--c-faint); margin-left: var(--s-2); }
@media (max-width: 767.98px) { .cp__locknote { flex-basis: 100%; margin-left: 0; } }
/* creation buttons: "Create group" on the groups overview, "Create post" on a group page (members and admins) */
.lt__create { order: 3; margin-left: auto; }
.pp__card .pp__actions .gp__post { flex: 1 1 100%; justify-content: center; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.35rem; padding-top: 0; padding-bottom: 0; }
.pp__card .pp__actions .gp__post[hidden] { display: none; }
.gp__hint { font-family: var(--font-ui); font-size: var(--t-md); color: var(--c-muted); margin: 0 0 var(--s-2); }
@media (max-width: 767.98px) { .lt__create { flex: 1 1 100%; order: 4; justify-content: center; margin-left: 0; min-height: 2.5rem; } }
/* pinned posts: label, pin button, prototype admin switch; pinned rows (profiles, groups, group pins on top of the feed,
VSH pins in Highlight Posts) get a primary bar on the left */
.pin__label { display: inline-flex; align-items: center; gap: .2rem; font: 700 var(--t-xs) var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--c-primary); }
.pin__label svg, .pin__btn svg { width: .85rem; height: .85rem; flex: none; }
.pp__row > div > .pin__label { margin: 0 0 .15rem; }
.is-pinned { box-shadow: inset 3px 0 0 var(--c-primary); }
.pp__rows > .pp__row.is-pinned { padding-left: var(--s-3); }
.pin__btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.25rem; padding: 0 var(--s-3); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-primary); font: var(--t-md) var(--font-ui); cursor: pointer; white-space: nowrap; }
.pin__btn:hover { border-color: var(--c-primary); }
.pin__btn[aria-pressed="true"] { background: var(--c-primary-soft); border-color: var(--c-primary); }
.pin__btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.pp__row .pin__btn { margin-top: var(--s-2); }
.pin__admin { display: inline-flex; align-items: center; gap: var(--s-1); font: var(--t-md) var(--font-ui); color: var(--c-muted); background: var(--c-note); border: 1px dashed var(--c-note-line); padding: .2rem var(--s-2); cursor: pointer; }
.pin__admin small { color: var(--c-note-text); font-size: var(--t-xs); }
.pin__admin input { accent-color: var(--c-primary); margin: 0; }
.pst__filters .pin__admin { margin-left: auto; }
.fd__item.is-pinned > .pin__label { margin: 0 0 var(--s-2); }
.pin__feed .li__text p { margin: .25rem 0 0; }
.hl__card .pin__label { margin: 0 0 .25rem; }
.gp__ptools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); }
.gp__ptools .gp__cta { margin: 0; }
/* your profile: sub pages Profile | Posts, content first, public view */
.yp__tabs { margin: 0 0 var(--s-3); }
.yp__tabn { font-size: var(--t-xs); opacity: .8; }
.yp__view[hidden] { display: none; }
.yp__plist { border: 0; border-top: 1px solid var(--c-line-soft); margin: 0 calc(-1 * var(--s-4)); }
.yp__allposts .pst__types { margin: 0 0 var(--s-3); }
.yp__pinhint { display: flex; align-items: center; gap: var(--s-1); margin: var(--s-2) 0 0; font: var(--t-md) var(--font-ui); color: var(--c-faint); }
.yp__pinhint svg { width: .85rem; height: .85rem; }
.yp__ahead { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-3); }
.yp__ahead .ypo__manage { margin: 0; }
.yp__ahead .ypo__new { font-size: var(--t-md); min-height: 2.25rem; }
.yp__publicbar { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); background: var(--c-note); border: 1px solid var(--c-note-line); color: var(--c-note-text); font: var(--t-base) var(--font-ui); }
.yp__publicbar a { margin-left: var(--s-2); font-weight: 600; }
.yp__aboutview { display: none; }
.yp--public .yp__aboutview { display: block; }
.yp--public #yp-about > :not(.pp__h):not(.yp__aboutview),
.yp--public .yp__edit, .yp--public .yp__progress, .yp--public .yp__photo, .yp--public .yp__links,
.yp--public #yp-follow, .yp--public #yp-info, .yp--public .pin__btn, .yp--public .pst__edit, .yp--public .ypo__manage, .yp--public .pp__h a, .yp--public .yp__pinhint { display: none !important; }
@media (max-width: 767.98px) {
.pst__filters .pin__admin { margin-left: 0; }
.yp__allposts .pp__h { flex-wrap: wrap; row-gap: var(--s-2); }
.yp__allposts .pp__h small { flex: 1 1 auto; }
.yp__ahead { margin-left: 0; flex: 1 1 100%; justify-content: space-between; }
.pst__list > .pst__row .pin__btn { min-height: 2.5rem; }
}
.yp__allposts .pp__h small { margin-left: var(--s-2); }
/* profile Posts tab: Scheduled / Drafts / Published in one place (replaces the separate Your posts page) */
.yp__sub { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-5) 0 var(--s-2); font: 600 var(--t-lg) var(--font-ui); color: var(--c-text); }
.yp__sub:first-of-type { margin-top: var(--s-2); }
.yp__sub small { font: 400 var(--t-md) var(--font-ui); color: var(--c-faint); }
.yp__allposts .yp__plist + .yp__sub { border-top: 0; }
.yp__allposts .pst__meta .ypo__when { font-size: inherit; }
.yp__allposts .pst__side .ypo__link { padding: .2rem 0; }
.yp__allposts .pst__row.is-new { background: var(--c-primary-soft); transition: background 2s; }
.yp__allposts .ypo__demo { margin-top: var(--s-4); }