/* VSH rework: composer for "Create a new Post" (squawk vsh-copy#2) */
.cp { --cp-blue: #155581; --cp-grey: #696969; --cp-line: #d0dde6; --cp-bg: #f3f6f8; --cp-green: #2daf28; --cp-red: #b23b3b; max-width: 46rem; margin: 1.5rem auto 3rem; padding: 0 1rem; font-family: "Roboto Condensed", sans-serif; color: #323232; }
.cp *, .cp *::before, .cp *::after { box-sizing: border-box; }
.cp__card { background: #fff; border: 1px solid var(--cp-line); border-radius: 6px; box-shadow: 0 1px 2px rgba(21,85,129,.06); }
.cp__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem .5rem; }
.cp__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--cp-blue); color: #fff; display: grid; place-items: center; font-size: 1.125rem; flex: none; }
.cp__who { flex: 1; min-width: 0; line-height: 1.25; }
.cp__name { font-size: 1rem; color: var(--cp-blue); }
.cp__org { font-size: .75rem; color: var(--cp-grey); }
.cp__type { display: inline-flex; border: 1px solid var(--cp-line); border-radius: 999px; padding: 2px; background: var(--cp-bg); }
.cp__type label { position: relative; cursor: pointer; }
.cp__type input { position: absolute; opacity: 0; inset: 0; }
.cp__type span { display: block; padding: .3rem .9rem; border-radius: 999px; font-size: .875rem; color: var(--cp-grey); }
.cp__type input:checked + span { background: #fff; color: var(--cp-blue); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.cp__type input:focus-visible + span { outline: 2px solid var(--cp-blue); outline-offset: 1px; }
.cp__body { padding: .25rem 1.25rem 0; }
.cp__title { width: 100%; border: 0; outline: 0; background: transparent; font: 1.5rem/1.3 "Roboto Condensed", sans-serif; color: var(--cp-blue); padding: .5rem 0; }
.cp__title::placeholder, .cp__text::placeholder { color: #a5a5a5; }
.cp__text { width: 100%; min-height: 9rem; border: 0; outline: 0; resize: none; background: transparent; font: 1rem/1.6 "Roboto", sans-serif; color: #323232; padding: .25rem 0 .5rem; overflow: hidden; }
.cp__text:focus, .cp__title:focus { box-shadow: none; }
.cp__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; padding: .5rem 0 .75rem; border-top: 1px dashed var(--cp-line); position: relative; }
.cp__chip { display: inline-flex; align-items: center; gap: .25rem; background: var(--cp-bg); color: var(--cp-blue); border: 1px solid var(--cp-line); border-radius: 999px; padding: .15rem .3rem .15rem .6rem; font-size: .875rem; line-height: 1.4; }
.cp__chip--fromtext { border-style: dashed; }
.cp__chip button { border: 0; background: transparent; color: var(--cp-grey); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .25rem; border-radius: 50%; }
.cp__chip button:hover { color: var(--cp-red); }
.cp__taginput { flex: 1 1 10rem; min-width: 8rem; border: 0; outline: 0; background: transparent; font: .875rem "Roboto Condensed", sans-serif; padding: .25rem 0; }
.cp__tagcount { font-size: .75rem; color: var(--cp-grey); margin-left: auto; }
.cp__tagcount--max { color: var(--cp-red); }
.cp__suggest { position: absolute; left: 0; top: 100%; z-index: 5; background: #fff; border: 1px solid var(--cp-line); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.12); list-style: none; margin: 0; padding: .25rem 0; max-height: 14rem; overflow: auto; min-width: 14rem; }
.cp__suggest li { padding: .35rem .75rem; cursor: pointer; font-size: .875rem; }
.cp__suggest li[aria-selected="true"], .cp__suggest li:hover { background: var(--cp-bg); color: var(--cp-blue); }
.cp__suggest li em { font-style: normal; color: var(--cp-grey); font-size: .75rem; margin-left: .5rem; }
.cp__attach { padding: 0 1.25rem; }
.cp__attach:empty { display: none; }
.cp__images { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; padding: .5rem 0; }
.cp__img { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--cp-bg); border: 1px solid var(--cp-line); }
.cp__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp__img--cover::after { content: "Title picture"; position: absolute; left: .4rem; bottom: .4rem; background: rgba(21,85,129,.9); color: #fff; font-size: .7rem; padding: .1rem .4rem; border-radius: 3px; }
.cp__img button, .cp__doc button { position: absolute; top: .3rem; right: .3rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: .9rem; line-height: 1; }
.cp__img button:hover, .cp__doc button:hover { background: var(--cp-red); }
.cp__docs { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem 0; }
.cp__doc { position: relative; display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--cp-line); border-radius: 4px; padding: .4rem 2.25rem .4rem .6rem; font-size: .875rem; background: var(--cp-bg); }
.cp__doc svg { width: 1rem; height: 1rem; flex: none; color: var(--cp-blue); }
.cp__doc button { top: .35rem; right: .35rem; }
.cp__bar { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; padding: .6rem .75rem; border-top: 1px solid var(--cp-line); }
.cp__tool { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: var(--cp-grey); font: .875rem "Roboto Condensed", sans-serif; padding: .45rem .6rem; border-radius: 4px; cursor: pointer; position: relative; }
.cp__tool svg { width: 1.25rem; height: 1.25rem; }
.cp__tool:hover, .cp__tool:focus-visible { background: var(--cp-bg); color: var(--cp-blue); outline: 0; }
.cp__tool input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.cp__pool { position: relative; }
.cp__poolmenu { position: absolute; left: 0; top: 100%; z-index: 5; background: #fff; border: 1px solid var(--cp-line); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: .5rem; display: grid; grid-template-columns: repeat(2, 7rem); gap: .5rem; }
.cp__poolmenu[hidden] { display: none; }
.cp__poolmenu button { border: 1px solid var(--cp-line); background: var(--cp-bg); border-radius: 4px; padding: .25rem; cursor: pointer; font: .7rem "Roboto Condensed", sans-serif; color: var(--cp-grey); text-align: left; }
.cp__poolmenu button img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 2px; margin-bottom: .2rem; }
.cp__poolmenu button:hover { border-color: var(--cp-blue); color: var(--cp-blue); }
.cp__spacer { flex: 1; }
.cp__status { font-size: .75rem; color: var(--cp-grey); padding: 0 .5rem; }
.cp__status--err { color: var(--cp-red); }
.cp__cancel { color: var(--cp-grey); text-decoration: none; font-size: .875rem; padding: .5rem .75rem; }
.cp__cancel:hover { color: var(--cp-blue); }
.cp__publish { border: 0; background: var(--cp-green); color: #fff; font: 1rem "Roboto Condensed", sans-serif; padding: .55rem 1.5rem; border-radius: 999px; cursor: pointer; }
.cp__publish:hover { background: #249322; }
.cp__publish:disabled { background: #a5a5a5; cursor: not-allowed; }
/* preview */
.cp__preview { margin-top: 1.5rem; }
.cp__previewhead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--cp-grey); font-size: .875rem; padding: 0 .25rem .5rem; }
.cp__previewhead a { color: var(--cp-blue); font-size: .8125rem; }
.cp__teaser { display: none; padding: .75rem 1.25rem 1rem; border-top: 1px solid var(--cp-line); background: var(--cp-bg); }
.cp__teaser--open { display: block; }
.cp__teaser label { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--cp-grey); margin-bottom: .25rem; }
.cp__teaser textarea { width: 100%; border: 1px solid var(--cp-line); border-radius: 4px; padding: .5rem; font: .9375rem/1.5 "Roboto", sans-serif; resize: vertical; min-height: 3.5rem; }
.cp__teaser textarea:focus { outline: 2px solid var(--cp-blue); outline-offset: -1px; }
.cp__card--preview { display: grid; grid-template-columns: 1fr 10rem; }
.cp__card--preview .cp__pcontent { padding: 1.25rem 1.25rem 1rem; position: relative; min-width: 0; }
.cp__card--preview .m-date-label { position: absolute; right: -.5rem; top: -.5rem; }
.cp__pauthor { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--cp-grey); margin-bottom: .75rem; }
.cp__pauthor .cp__avatar { width: 24px; height: 24px; font-size: .625rem; }
.cp__ptitle { font: 1.125rem/1.35 "Roboto Condensed", sans-serif; color: var(--cp-blue); margin: 0 0 .75rem; }
.cp__ptitle:empty::before, .cp__pteaser:empty::before { content: attr(data-empty); color: #a5a5a5; }
.cp__pteaser { font: .9375rem/1.5 "Roboto", sans-serif; color: var(--cp-blue); margin: 0 0 1rem; }
.cp__ptags { font-size: .8125rem; color: var(--cp-grey); display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.cp__ptags span::before { content: "#"; }
.cp__pimg { background: var(--cp-bg) center / cover no-repeat; border-left: 1px solid var(--cp-line); min-height: 8rem; }
.cp__pimg--empty { background-image: url(img/graphics-picture-placeholder.svg); background-size: 50%; opacity: .6; }
.cp__done { margin: 1rem 0 0; padding: 1rem 1.25rem; border-radius: 6px; background: #e6f5e5; color: #1f6b1d; border: 1px solid #b9e3b7; font-size: .9375rem; }
.cp__done[hidden] { display: none; }
@media (max-width: 640px) { .cp__title { font-size: 1.25rem; } .cp__head { flex-wrap: wrap; } .cp__type { order: 3; width: 100%; justify-content: center; } .cp__card--preview { grid-template-columns: 1fr; } .cp__pimg { min-height: 7rem; border-left: 0; border-top: 1px solid var(--cp-line); } .cp__bar .cp__tool span { display: none; } }

/* ===== squawk vsh-copy#3: compact header (desktop) ===== */
@media (min-width: 768px) {
  .m-wrapper > .m-header.m-desktop-only { display: flex; align-items: center; gap: 1.25rem; padding: .5rem 0; position: sticky; top: 0; z-index: 50; background: rgba(243,246,248,.96); backdrop-filter: blur(6px); border-bottom: 1px solid #e1e8ee; }
  .m-header.m-desktop-only .m-logo { flex: none; display: flex; }
  .m-header.m-desktop-only .m-logo__image { height: 2.75rem; width: auto; }
  .m-header.m-desktop-only .m-nav { margin: 0 0 0 .5rem; align-self: center; order: 1; }
  .m-header.m-desktop-only .m-nav-list--main { gap: .25rem; }
  .m-header.m-desktop-only .m-nav-list__item:not(:last-child) { padding-right: 0; }
  .m-header.m-desktop-only .m-nav-list__link--main { font-size: 1rem; padding: .5rem .75rem; border-radius: 4px; line-height: 1.25; }
  .m-header.m-desktop-only .m-nav-list__link--main:hover { background: #e6edf2; }
  .m-header.m-desktop-only .m-nav-list__link--main::after, .m-header.m-desktop-only .m-nav-list__link--main:hover::after { bottom: 0; height: 2px; animation: none; }
  .m-header.m-desktop-only .m-nav-list__link--main__active { background: #e6edf2; }
  .m-header.m-desktop-only .m-nav-list__icon { height: 1.25rem; margin-right: .5rem; }
  .m-header.m-desktop-only .m-nav-list__item:first-child .m-nav-list__link { padding: .5rem .6rem; }
  .m-header.m-desktop-only .m-search { order: 2; margin-left: auto; max-width: 15rem; }
  .m-header.m-desktop-only .m-search__field { height: 2.25rem; font-size: .9375rem; }
  .m-header.m-desktop-only .m-login { order: 3; align-items: center; gap: .25rem; }
  .m-header.m-desktop-only .m-userlinks { font-size: .9375rem; padding: .4rem .6rem; border-radius: 4px; }
  .m-header.m-desktop-only .m-userlinks:hover { background: #e6edf2; }
  .m-header.m-desktop-only .m-userlinks--posts { padding-right: .75rem; background: #155581; color: #fff; }
  .m-header.m-desktop-only .m-userlinks--posts:hover { background: #0f4467; }
  .m-header.m-desktop-only .m-userlinks--posts__icon { width: 1.125rem; height: 1.125rem; margin-right: .5rem; filter: brightness(0) invert(1); }
  .m-header.m-desktop-only .m-userlinks__logout .m-userlinks__logout__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .m-header.m-desktop-only .m-userlinks__logout__icon { margin: 0; filter: none; }
  .m-header.m-desktop-only .m-login__link .m-login__text { order: 2; margin-left: .5rem; }
  .m-header.m-desktop-only .m-login__image { width: 1.75rem; height: 1.75rem; order: 1; }
  .m-header.m-desktop-only .m-login__link { gap: 0; }
}
@media (min-width: 768px) and (max-width: 1100px) { .m-header.m-desktop-only .m-nav-list__link--main { font-size: .9375rem; padding: .5rem .5rem; } .m-header.m-desktop-only .m-search { max-width: 11rem; } .m-header.m-desktop-only .m-login__text { display: none; } }

/* ===== squawk vsh-copy#4: profile completeness ===== */
.pc-banner { max-width: 68.875rem; margin: .75rem auto 0; background: #fff8e1; border: 1px solid #f1dd9a; border-radius: 6px; padding: .75rem 1rem; display: flex; align-items: center; gap: 1rem; font-family: "Roboto Condensed", sans-serif; color: #5b4a12; }
.pc-banner__bar { flex: none; width: 7rem; height: .5rem; background: #f1dd9a; border-radius: 999px; overflow: hidden; }
.pc-banner__bar i { display: block; height: 100%; background: #c9972e; border-radius: 999px; }
.pc-banner__text { flex: 1; font-size: .9375rem; line-height: 1.4; }
.pc-banner__text b { color: #3f3309; }
.pc-banner__cta { flex: none; background: #155581; color: #fff; text-decoration: none; padding: .45rem .9rem; border-radius: 4px; font-size: .9375rem; }
.pc-banner__cta:hover { background: #0f4467; color: #fff; }
.pc-banner__close { flex: none; border: 0; background: transparent; color: #8a7430; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: .25rem; }
.pc-banner__close:hover { color: #3f3309; }
@media (max-width: 767.98px) { .pc-banner { flex-wrap: wrap; margin: .5rem 0 0; } .pc-banner__bar { order: 3; width: 100%; } }
.pc-toggle { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; font: .875rem "Roboto Condensed", sans-serif; color: #696969; cursor: pointer; user-select: none; }
.pc-toggle input { width: 1rem; height: 1rem; accent-color: #155581; margin: 0; }
.m-section__filter.pc-filter { display: flex; align-items: center; flex-wrap: wrap; }
.pc-hidden { display: none !important; }
.pc-badge { display: inline-block; font-size: .75rem; color: #8a7430; background: #fff8e1; border: 1px solid #f1dd9a; border-radius: 999px; padding: .1rem .5rem; margin-top: .5rem; }
.pc-empty { padding: 2rem 1rem; text-align: center; color: #696969; font-family: "Roboto Condensed", sans-serif; }
@media (min-width: 768px) { .m-header.m-desktop-only .m-nav-list__link--main, .m-header.m-desktop-only .m-userlinks { white-space: nowrap; } }
.pc-badge { justify-self: start; align-self: start; width: max-content; }
/* squawk vsh-copy#5: header must never overflow its 1102px container */
@media (min-width: 768px) {
  .m-wrapper > .m-header.m-desktop-only { gap: .75rem; }
  .m-header.m-desktop-only .m-nav, .m-header.m-desktop-only .m-login { flex: none; }
  .m-header.m-desktop-only .m-search { flex: 0 1 15rem; min-width: 6.5rem; }
  .m-header.m-desktop-only .m-search__field { min-width: 0; width: 100%; }
  .m-header.m-desktop-only .m-login { gap: 0; }
  .m-header.m-desktop-only .m-userlinks { padding: .4rem .5rem; }
  .m-header.m-desktop-only .m-userlinks--posts { padding-right: .7rem; margin-right: .25rem; }
  .m-header.m-desktop-only .m-login__link { max-width: 11rem; }
  .m-header.m-desktop-only .m-login__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ===== squawk vsh-copy#6: plain Follow / Unfollow buttons instead of flag badges ===== */
.m-followed-actions.fb-host { top: 1rem; right: 1rem; }
.m-followed-actions.fb-host .m-followed-actions__more, .m-followed-actions.fb-host .m-followed-actions__dropdown, .m-followed-actions.fb-host > .m-icon-bookmarked-flag { display: none !important; }
.fb { font: .9375rem/1 "Roboto Condensed", sans-serif; padding: .5rem .9rem; border-radius: 999px; cursor: pointer; border: 1px solid #155581; background: #155581; color: #fff; display: inline-flex; align-items: center; gap: .35rem; transition: background .15s, color .15s; }
.fb::before { content: "+"; font-size: 1.1em; line-height: 1; }
.fb:hover { background: #0f4467; }
.fb:focus-visible { outline: 2px solid #155581; outline-offset: 2px; }
.fb--following { background: #fff; color: #696969; border-color: #d0d0d0; }
.fb--following::before { content: "✓"; color: #2daf28; }
.fb--following:hover { background: #fff; color: #b23b3b; border-color: #b23b3b; }
.fb--following:hover::before { content: "×"; color: #b23b3b; }
.m-thema-card__content .m-followed-actions.fb-host { right: .5rem; top: .5rem; }
.m-followed-actions__profile.fb-host { top: 1rem; right: 1rem; }

/* ===== squawk vsh-copy#7: LinkedIn-style header with a prominent typeahead search ===== */
@media (min-width: 768px) {
  .m-wrapper > .m-header.m-desktop-only { gap: .5rem 1rem; flex-wrap: wrap; padding: .4rem 0; }
  .m-header.m-desktop-only .m-logo { margin-right: .25rem; }
  .m-header.m-desktop-only .m-search { order: 0; margin: 0; flex: 1 1 18rem; min-width: 14rem; max-width: 24rem; }
  .m-header.m-desktop-only .m-search__field { height: 2.5rem; border: 1px solid #d0dde6; background: #e9eef3 url(img/icons/icons-suche.svg) no-repeat .75rem center / 1rem; border-radius: 6px; padding: 0 .75rem 0 2.4rem; font: .9375rem "Roboto", sans-serif; color: #323232; width: 100%; box-shadow: none; }
  .m-header.m-desktop-only .m-search__field:focus { background-color: #fff; border-color: #155581; outline: 0; box-shadow: 0 0 0 3px rgba(21,85,129,.15); }
  .m-header.m-desktop-only .m-search__separator { display: none; }
  .m-header.m-desktop-only .m-nav { order: 1; margin-left: auto; }
  .m-header.m-desktop-only .m-nav-list--main { gap: 0; align-items: stretch; }
  .m-header.m-desktop-only .m-nav-list__link--main, .m-header.m-desktop-only .m-login .m-userlinks { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .2rem; min-width: 4.5rem; padding: .35rem .5rem .3rem; font-size: .75rem; font-weight: 400; color: #696969; border-radius: 0; background: transparent; white-space: nowrap; line-height: 1.1; }
  .m-header.m-desktop-only .m-nav-list__link--main:hover, .m-header.m-desktop-only .m-login .m-userlinks:hover { background: transparent; color: #155581; }
  .m-header.m-desktop-only .m-nav-list__icon, .m-header.m-desktop-only .m-userlinks--posts__icon, .m-header.m-desktop-only .m-login__image { height: 1.5rem; width: auto; margin: 0; object-fit: contain; }
  .m-header.m-desktop-only .m-nav-list__item:first-child .m-nav-list__link { padding: .35rem .5rem .3rem; }
  .m-header.m-desktop-only .m-nav-list__item:first-child .m-nav-list__link::after { content: attr(title); position: static; width: auto; height: auto; background: none; }
  .m-header.m-desktop-only .m-nav-list__link--main::after, .m-header.m-desktop-only .m-nav-list__link--main:hover::after { display: none; }
  .m-header.m-desktop-only .m-nav-list__item:first-child .m-nav-list__link::after { display: block; }
  .m-header.m-desktop-only .m-nav-list__link--main__active { background: transparent; color: #155581; box-shadow: inset 0 -2px 0 #155581; }
  .m-header.m-desktop-only .m-login { order: 2; border-left: 1px solid #d0dde6; padding-left: .5rem; margin-left: .25rem; }
  .m-header.m-desktop-only .m-userlinks--posts { color: #155581; padding-right: .5rem; margin: 0; }
  .m-header.m-desktop-only .m-userlinks--posts__icon { filter: none; }
  .m-header.m-desktop-only .m-userlinks__logout .m-userlinks__logout__text { position: static; width: auto; height: auto; clip: auto; }
  .m-header.m-desktop-only .m-login__link { max-width: 7rem; }
  .m-header.m-desktop-only .m-login__link .m-login__text { order: 2; margin: 0; max-width: 6.5rem; }
  .m-header.m-desktop-only .m-login__image { order: 1; width: 1.5rem; height: 1.5rem; border-radius: 50%; }
}
@media (min-width: 768px) and (max-width: 1100px) { .m-header.m-desktop-only .m-nav-list__link--main { font-size: .75rem; padding: .35rem .4rem .3rem; min-width: 4rem; } .m-header.m-desktop-only .m-search { max-width: none; flex-basis: 100%; order: 3; } .m-header.m-desktop-only .m-login__text { display: block; } .m-header.m-desktop-only .m-nav { margin-left: auto; } }
/* typeahead */
.ta { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 60; background: #fff; border: 1px solid #d0dde6; border-radius: 8px; box-shadow: 0 12px 32px rgba(21,85,129,.18); overflow: hidden; font-family: "Roboto Condensed", sans-serif; min-width: 22rem; }
.ta[hidden] { display: none; }
.ta__group { padding: .5rem 0 .25rem; border-top: 1px solid #eef2f5; }
.ta__group:first-child { border-top: 0; }
.ta__label { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: #8a93a0; padding: 0 .9rem .25rem; }
.ta__item { display: flex; align-items: center; gap: .6rem; padding: .45rem .9rem; color: #323232; text-decoration: none; cursor: pointer; }
.ta__item:hover, .ta__item[aria-selected="true"] { background: #e9eef3; color: #155581; }
.ta__icon { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #e9eef3; color: #155581; display: grid; place-items: center; font-size: .8rem; flex: none; }
.ta__item:hover .ta__icon, .ta__item[aria-selected="true"] .ta__icon { background: #fff; }
.ta__text { min-width: 0; }
.ta__title { font-size: .9375rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta__title mark { background: transparent; color: inherit; font-weight: 700; }
.ta__sub { font-size: .75rem; color: #696969; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta__all { display: block; padding: .6rem .9rem; font-size: .875rem; color: #155581; border-top: 1px solid #eef2f5; text-decoration: none; }
.ta__all:hover, .ta__all[aria-selected="true"] { background: #e9eef3; }
.ta__empty { padding: .9rem; font-size: .875rem; color: #696969; }

/* ===== squawk vsh-copy#8: compact person page, everything at once ===== */
.pp { display: grid; grid-template-columns: 19rem 1fr; gap: 1.5rem; align-items: start; margin: 1rem 0 3rem; font-family: "Roboto Condensed", sans-serif; }
.pp__side { position: sticky; top: 5rem; }
.pp__card { background: #fff; border: 1px solid #d0dde6; border-radius: 8px; padding: 1.25rem; }
.pp__avatar { width: 6rem; height: 6rem; border-radius: 50%; display: grid; place-items: center; background: #155581; color: #fff; font-size: 2rem; margin: 0 auto .75rem; overflow: hidden; }
.pp__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp__name { font-size: 1.375rem; color: #155581; margin: 0; text-align: center; line-height: 1.2; }
.pp__role { text-align: center; color: #155581; font-size: .9375rem; margin: .25rem 0 0; }
.pp__org { text-align: center; color: #696969; font-size: .875rem; margin: .15rem 0 0; line-height: 1.35; }
.pp__actions { display: flex; justify-content: center; gap: .5rem; margin: .9rem 0 1rem; }
.pp__actions .fb { position: static; }
.pp__mail { font: .9375rem "Roboto Condensed", sans-serif; padding: .5rem .9rem; border-radius: 999px; border: 1px solid #d0dde6; color: #155581; text-decoration: none; background: #fff; }
.pp__mail:hover { border-color: #155581; }
.pp__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #eef2f5; border-bottom: 1px solid #eef2f5; padding: .6rem 0; margin-bottom: .9rem; }
.pp__stat { text-align: center; color: #696969; font-size: .75rem; text-decoration: none; }
.pp__stat b { display: block; font-size: 1.125rem; color: #155581; font-weight: 500; }
.pp__stat:hover b { text-decoration: underline; }
.pp__meta { list-style: none; margin: 0; padding: 0; font-size: .875rem; color: #696969; display: grid; gap: .4rem; }
.pp__meta li { display: flex; gap: .5rem; align-items: baseline; }
.pp__meta li span:first-child { flex: none; width: 5.5rem; color: #8a93a0; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.pp__meta a { color: #155581; text-decoration: none; word-break: break-all; }
.pp__meta a:hover { text-decoration: underline; }
.pp__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .9rem; }
.pp__tags a { font-size: .8125rem; color: #155581; background: #e9eef3; border-radius: 999px; padding: .15rem .6rem; text-decoration: none; }
.pp__tags a:hover { background: #d0dde6; }
.pp__tags a::before { content: "#"; }
.pp__main { min-width: 0; }
.pp__jump { display: flex; gap: .25rem; flex-wrap: wrap; margin: 0 0 .75rem; padding: 0; list-style: none; position: sticky; top: 4.25rem; background: rgba(243,246,248,.96); z-index: 5; padding: .35rem 0; }
.pp__jump a { font-size: .875rem; color: #696969; text-decoration: none; padding: .35rem .75rem; border-radius: 999px; }
.pp__jump a:hover, .pp__jump a.is-active { background: #e9eef3; color: #155581; }
.pp__jump a small { color: #8a93a0; margin-left: .25rem; }
.pp__section { background: #fff; border: 1px solid #d0dde6; border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; scroll-margin-top: 7.5rem; }
.pp__h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 .6rem; font-size: 1.0625rem; color: #155581; font-weight: 500; }
.pp__h small { font-size: .8125rem; color: #8a93a0; font-weight: 400; }
.pp__about { font: .9375rem/1.55 "Roboto", sans-serif; color: #323232; margin: 0; }
.pp__about:empty::before, .pp__empty { content: ""; }
.pp__empty { color: #8a93a0; font-size: .875rem; margin: 0; }
.pp__rows { list-style: none; margin: 0; padding: 0; }
.pp__row { display: grid; grid-template-columns: 3rem 1fr auto; gap: .75rem; align-items: start; padding: .6rem 0; border-top: 1px solid #eef2f5; }
.pp__row:first-child { border-top: 0; }
.pp__date { font-size: .75rem; color: #696969; line-height: 1.2; text-align: center; background: #e9eef3; border-radius: 4px; padding: .3rem 0; }
.pp__date b { display: block; font-size: 1rem; color: #155581; font-weight: 500; }
.pp__row h3 { font-size: 1rem; margin: 0 0 .15rem; font-weight: 500; line-height: 1.3; }
.pp__row h3 a { color: #155581; text-decoration: none; }
.pp__row h3 a:hover { text-decoration: underline; }
.pp__row p { margin: 0; font: .875rem/1.4 "Roboto", sans-serif; color: #696969; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pp__rowtags { font-size: .75rem; color: #8a93a0; margin-top: .25rem; }
.pp__rowtags a { color: #696969; text-decoration: none; }
.pp__rowtags a::before { content: "#"; }
.pp__rowtags a:hover { color: #155581; }
.pp__thumb { width: 3rem; height: 3rem; border-radius: 6px; object-fit: cover; background: #e9eef3; }
.pp__grp { grid-template-columns: 3rem 1fr auto; }
.pp__grp .fb { position: static; }
.pp__more { display: inline-block; margin-top: .5rem; font-size: .875rem; color: #155581; }
@media (max-width: 900px) { .pp { grid-template-columns: 1fr; } .pp__side { position: static; } .pp__jump { top: 0; } }
.pp__grp .m-followed-actions.fb-host { position: static; top: auto; right: auto; }

/* ===== squawk vsh-copy#9: home page = compact highlights + personal feed + event calendar ===== */
.hm { font-family: "Roboto Condensed", sans-serif; margin: 1rem 0 3rem; }
.hm__h { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 .6rem; }
.hm__h h2 { font-size: 1.0625rem; font-weight: 500; color: #155581; margin: 0; }
.hm__h a { margin-left: auto; font-size: .8125rem; color: #155581; text-decoration: none; }
.hm__h a:hover { text-decoration: underline; }
.hm__sub { font-size: .8125rem; color: #8a93a0; }
.hl { margin-bottom: 1.25rem; }
.hl__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.hl__card { display: flex; flex-direction: column; background: #fff; border: 1px solid #d0dde6; border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.hl__card:hover { box-shadow: 0 6px 18px rgba(21,85,129,.14); }
.hl__img { display: block; aspect-ratio: 16 / 7; background: #e9eef3 center / cover no-repeat; }
.hl__body { padding: .6rem .75rem .7rem; display: grid; gap: .25rem; }
.hl__title { font-size: .9375rem; line-height: 1.3; color: #155581; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hl__meta { font-size: .75rem; color: #696969; }
.hm__cols { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
.fd__filter { display: flex; gap: .25rem; margin-bottom: .75rem; }
.fd__filter button { border: 1px solid #d0dde6; background: #fff; color: #696969; font: .8125rem "Roboto Condensed", sans-serif; padding: .35rem .75rem; border-radius: 999px; cursor: pointer; }
.fd__filter button.is-active, .fd__filter button:hover { background: #155581; border-color: #155581; color: #fff; }
.fd__list { display: grid; gap: .75rem; }
.fd__item { background: #fff; border: 1px solid #d0dde6; border-radius: 8px; padding: .9rem 1rem .5rem; }
.fd__item[hidden] { display: none; }
.fd__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.fd__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.fd__avatar--ini { display: grid; place-items: center; background: #155581; color: #fff; font-size: .75rem; }
.fd__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.fd__name { color: #155581; font-size: .9375rem; text-decoration: none; }
.fd__name:hover { text-decoration: underline; }
.fd__org { font-size: .75rem; color: #696969; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd__reason { margin-left: auto; font-size: .6875rem; color: #696969; background: #e9eef3; border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.fd__reason--rec { background: #fff3d6; color: #8a5a00; }
.fd__time { font-size: .75rem; color: #8a93a0; white-space: nowrap; }
.fd__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; }
.fd__title { font-size: 1.0625rem; margin: 0 0 .3rem; font-weight: 500; line-height: 1.3; }
.fd__title a { color: #155581; text-decoration: none; }
.fd__title a:hover { text-decoration: underline; }
.fd__text p { margin: 0 0 .4rem; font: .9375rem/1.5 "Roboto", sans-serif; color: #323232; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fd__tags { font-size: .75rem; color: #8a93a0; }
.fd__tags a { color: #696969; text-decoration: none; margin-right: .35rem; }
.fd__tags a::before { content: "#"; }
.fd__tags a:hover { color: #155581; }
.fd__thumb { width: 7.5rem; height: 5.25rem; border-radius: 6px; background: #e9eef3 center / cover no-repeat; flex: none; }
.fd__foot { display: flex; gap: .25rem; border-top: 1px solid #eef2f5; margin-top: .6rem; padding-top: .3rem; }
.fd__act { border: 0; background: transparent; color: #696969; font: .8125rem "Roboto Condensed", sans-serif; padding: .4rem .6rem; border-radius: 4px; cursor: pointer; text-decoration: none; }
.fd__act:hover { background: #e9eef3; color: #155581; }
.fd__act.is-on { color: #155581; font-weight: 500; }
.fd__more { display: block; width: 100%; margin-top: .75rem; border: 1px solid #d0dde6; background: #fff; color: #155581; font: .9375rem "Roboto Condensed", sans-serif; padding: .6rem; border-radius: 8px; cursor: pointer; }
.fd__more:hover { background: #e9eef3; }
.fd__empty { color: #8a93a0; font-size: .875rem; padding: 1rem; text-align: center; }
.sb { display: grid; gap: 1rem; position: sticky; top: 5rem; }
.sb__box { background: #fff; border: 1px solid #d0dde6; border-radius: 8px; padding: .9rem 1rem; }
.cal { margin-bottom: .6rem; }
.cal__head { font-size: .8125rem; color: #696969; text-align: center; margin-bottom: .3rem; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal__dow { font-size: .625rem; color: #8a93a0; text-transform: uppercase; }
.cal__day { font-size: .75rem; color: #696969; line-height: 1.6rem; height: 1.6rem; border-radius: 50%; position: relative; }
.cal__day--event { background: #e9eef3; color: #155581; font-weight: 700; }
.cal__day--today { box-shadow: inset 0 0 0 1px #155581; }
.ev { list-style: none; margin: 0; padding: 0; }
.ev__item { border-top: 1px solid #eef2f5; }
.ev__link { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; text-decoration: none; color: inherit; }
.ev__link:hover .ev__title { text-decoration: underline; }
.ev__date { flex: none; width: 2.6rem; text-align: center; background: #e9eef3; border-radius: 6px; font-size: .6875rem; color: #696969; padding: .25rem 0; line-height: 1.1; }
.ev__date b { display: block; font-size: 1rem; color: #155581; font-weight: 500; }
.ev__text { display: flex; flex-direction: column; min-width: 0; }
.ev__title { font-size: .875rem; color: #155581; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev__meta { font-size: .75rem; color: #8a93a0; }
.sb__tags a { display: inline-block; font-size: .8125rem; color: #155581; background: #e9eef3; border-radius: 999px; padding: .15rem .6rem; text-decoration: none; margin: 0 .25rem .25rem 0; }
.sb__tags a:hover { background: #d0dde6; }
.sb__hint { font-size: .75rem; color: #8a93a0; margin: .25rem 0 0; }
@media (max-width: 900px) { .hm__cols { grid-template-columns: 1fr; } .sb { position: static; } .hl__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hl__grid { grid-template-columns: 1fr 1fr; } .fd__body { grid-template-columns: 1fr; } .fd__thumb { width: 100%; height: 9rem; } .fd__reason { display: none; } }

/* ===== squawk vsh-copy#10: compact topics list ===== */
.tp { font-family: "Roboto Condensed", sans-serif; margin: 1rem 0 2rem; }
.tp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.tp__h { font-size: 1.25rem; font-weight: 500; color: #155581; margin: 0; }
.tp__h small { font-size: .8125rem; color: #8a93a0; font-weight: 400; margin-left: .5rem; }
.tp__sort { font-size: .8125rem; color: #696969; }
.tp__sort select { font: .8125rem "Roboto Condensed", sans-serif; border: 1px solid #d0dde6; border-radius: 4px; background: #fff; padding: .25rem .4rem; color: #155581; margin-left: .25rem; }
.tp__list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid #d0dde6; border-radius: 8px; overflow: hidden; }
.tp__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1.4fr) 4rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .7rem 1rem; border-top: 1px solid #eef2f5; }
.tp__row:first-child { border-top: 0; }
.tp__row:hover { background: #f7f9fb; }
.tp__thumb { display: block; width: 4.5rem; height: 3rem; border-radius: 6px; background: #e9eef3 center / cover no-repeat; }
.tp__title { font-size: 1.0625rem; font-weight: 500; margin: 0 0 .15rem; line-height: 1.3; }
.tp__title a { color: #155581; text-decoration: none; }
.tp__title a:hover { text-decoration: underline; }
.tp__tags { font-size: .75rem; color: #8a93a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp__tags a { color: #696969; text-decoration: none; margin-right: .35rem; }
.tp__tags a::before { content: "#"; }
.tp__tags a:hover { color: #155581; }
.tp__stat { text-align: center; color: #8a93a0; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; }
.tp__stat b { display: block; font-size: 1.125rem; color: #155581; font-weight: 500; text-transform: none; letter-spacing: 0; }
.tp__last { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tp__lastlabel { font-size: .625rem; color: #8a93a0; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .1rem; }
.tp__lastlink { font-size: .875rem; color: #323232; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp__lastlink:hover { color: #155581; text-decoration: underline; }
.tp__lastmeta { font-size: .75rem; color: #696969; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp__act .fb { position: static; }
.tp + .m-load-more-button { margin-top: 1rem; }
@media (max-width: 800px) { .tp__row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; } .tp__thumb { width: 3.5rem; height: 2.5rem; } .tp__stat { display: none; } .tp__last { grid-column: 2 / -1; } }

/* ===== squawk vsh-copy#14: compact post page ===== */
.po { max-width: 46rem; margin: 1rem auto 3rem; font-family: "Roboto Condensed", sans-serif; }
.po__crumbs { font-size: .8125rem; color: #8a93a0; margin-bottom: .5rem; }
.po__crumbs a { color: #155581; text-decoration: none; }
.po__card { background: #fff; border: 1px solid #d0dde6; border-radius: 8px; padding: 1.25rem 1.5rem; }
.po__meta { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.po__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: #155581; color: #fff; font-size: .8125rem; }
.po__who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.po__name { color: #155581; font-size: .9375rem; text-decoration: none; }
.po__name:hover { text-decoration: underline; }
.po__org { font-size: .75rem; color: #696969; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po__date { margin-left: auto; font-size: .8125rem; color: #8a93a0; white-space: nowrap; }
.po__meta .fb { position: static; margin-left: .25rem; }
.po__type { font-size: .6875rem; color: #155581; background: #e9eef3; border-radius: 999px; padding: .1rem .5rem; margin-left: .25rem; }
.po__title { font-size: 1.5rem; line-height: 1.25; color: #155581; margin: 0 0 .5rem; font-weight: 500; }
.po__teaser { font: 1rem/1.5 "Roboto", sans-serif; color: #155581; margin: 0 0 .6rem; }
.po__tags { font-size: .8125rem; color: #8a93a0; margin-bottom: 1rem; }
.po__tags a { color: #155581; background: #e9eef3; border-radius: 999px; padding: .1rem .55rem; text-decoration: none; margin: 0 .25rem .25rem 0; display: inline-block; }
.po__tags a::before { content: "#"; }
.po__tags a:hover { background: #d0dde6; }
.po__img { display: block; width: 100%; max-height: 18rem; object-fit: cover; border-radius: 6px; margin: 0 0 1rem; }
.po__body { font: 1rem/1.6 "Roboto", sans-serif; color: #323232; }
.po__body p { margin: 0 0 .8rem; font-weight: 400; }
.po__body ul, .po__body ol { background: none; color: #323232; font-size: 1rem; line-height: 1.6; font-weight: 400; margin: 0 0 .8rem; padding: 0 0 0 1.25rem; }
.po__body li { margin-bottom: .25rem; }
.po__body h2, .po__body h3 { font-family: "Roboto Condensed", sans-serif; color: #155581; font-size: 1.125rem; margin: 1rem 0 .4rem; }
.po__body a { color: #155581; }
.po__body a[href$=".pdf"], .po__body a[href$=".docx"], .po__body a[href$=".xlsx"], .po__body a[href$=".pptx"] { display: inline-flex; align-items: center; gap: .4rem; font: .875rem "Roboto Condensed", sans-serif; color: #155581; background: #e9eef3; padding: .35rem .7rem; border-radius: 6px; text-decoration: none; margin: .25rem 0; }
.po__body a[href$=".pdf"]::before { content: "PDF"; font-size: .625rem; font-weight: 700; background: #155581; color: #fff; border-radius: 3px; padding: .05rem .3rem; }
.po__foot { display: flex; align-items: center; gap: .25rem; border-top: 1px solid #eef2f5; margin-top: 1rem; padding-top: .5rem; }
.po__foot .fd__act { font-size: .875rem; }
.po__authors { margin-left: auto; font-size: .8125rem; color: #696969; }
.po__authors a { color: #155581; text-decoration: none; }
.po__rel { margin-top: 1rem; }
.po__rel h2 { font-size: .9375rem; color: #696969; font-weight: 500; margin: 0 0 .4rem; }
.po__rel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.po__rel a { font-size: .9375rem; color: #155581; text-decoration: none; }
.po__rel a:hover { text-decoration: underline; }
.po__rel small { color: #8a93a0; margin-left: .4rem; }
@media (max-width: 560px) { .po__card { padding: 1rem; } .po__title { font-size: 1.25rem; } .po__date { display: none; } }
/* squawk vsh-copy#15: text preview on highlight cards */
.hl__teaser { font: .8125rem/1.45 "Roboto", sans-serif; color: #323232; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hl__body { align-content: start; }
.hl__meta { margin-top: auto; }
.hl__card { height: 100%; }
/* squawk vsh-copy#16: no banner headline on Create Post; compact context line instead */
.cp__context { display: flex; align-items: center; gap: .6rem; max-width: 46rem; margin: 1.25rem auto 0; padding: 0 1rem; font-family: "Roboto Condensed", sans-serif; flex-wrap: wrap; }
.cp__back { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: #155581; background: #e9eef3; text-decoration: none; font-size: 1rem; }
.cp__back:hover { background: #d0dde6; }
.cp__h1 { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.125rem; font-weight: 500; color: #155581; margin: 0; }
.cp__h1 svg { width: 1.1rem; height: 1.1rem; }
.cp__hint { font-size: .8125rem; color: #8a93a0; margin-left: auto; }
.cp { margin-top: .75rem; }
@media (max-width: 560px) { .cp__hint { margin-left: 2.6rem; } }

/* ===== squawk vsh-copy#17: event post type ===== */
.evl { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-family: "Roboto Condensed", sans-serif; margin-bottom: .35rem; }
.evl__badge { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #b35a3c; border-radius: 4px; padding: .1rem .4rem; }
.evl__badge::before { content: "▣ "; }
.evl__when { font-size: .8125rem; color: #323232; }
.evl__mode { font-size: .6875rem; color: #155581; background: #e9eef3; border-radius: 999px; padding: .1rem .5rem; }
.evl__mode--online { color: #1f6b1d; background: #e6f5e5; }
.evl__mode--hybrid { color: #8a5a00; background: #fff3d6; }
.evl__actions { display: inline-flex; gap: .35rem; margin-left: auto; }
.evl__btn { font: .8125rem "Roboto Condensed", sans-serif; border: 1px solid #d0dde6; background: #fff; color: #155581; border-radius: 999px; padding: .3rem .7rem; cursor: pointer; }
.evl__btn:hover { border-color: #155581; }
.evl__btn--reg { background: #155581; border-color: #155581; color: #fff; }
.evl__btn--reg:hover { background: #0f4467; }
.evl__btn--reg.is-on { background: #e6f5e5; border-color: #b9e3b7; color: #1f6b1d; }
.evl__btn--reg.is-on::before { content: "✓ "; }
.hl__body .evl { margin-bottom: .2rem; } .hl__body .evl__when { font-size: .75rem; }
/* event box on the post page */
.ev-box { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem 1rem; align-items: center; background: #fff8f4; border: 1px solid #f0d6cb; border-radius: 8px; padding: .9rem 1rem; margin: 0 0 1rem; font-family: "Roboto Condensed", sans-serif; }
.ev-box__date { text-align: center; background: #b35a3c; color: #fff; border-radius: 6px; padding: .4rem 0; line-height: 1.1; font-size: .75rem; }
.ev-box__date b { display: block; font-size: 1.5rem; font-weight: 500; }
.ev-box__rows { display: grid; gap: .25rem; font-size: .9375rem; color: #323232; }
.ev-box__rows span:first-child { color: #8a93a0; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; display: inline-block; width: 5rem; }
.ev-box__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; border-top: 1px solid #f0d6cb; padding-top: .75rem; }
.ev-box__actions .evl__btn { font-size: .9375rem; padding: .45rem 1rem; }
.ev-box__note { font-size: .75rem; color: #8a93a0; align-self: center; }
/* composer: event fields */
.cp__event { display: none; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem .9rem; padding: .75rem 1.25rem; background: #fff8f4; border-top: 1px solid #f0d6cb; border-bottom: 1px solid #f0d6cb; font-family: "Roboto Condensed", sans-serif; }
.cp__event--open { display: grid; }
.cp__event label { display: grid; gap: .2rem; font-size: .75rem; color: #8a5a00; text-transform: uppercase; letter-spacing: .04em; }
.cp__event input, .cp__event select { font: .9375rem "Roboto Condensed", sans-serif; border: 1px solid #d0dde6; border-radius: 4px; padding: .4rem .5rem; background: #fff; color: #323232; }
.cp__event input:focus, .cp__event select:focus { outline: 2px solid #155581; outline-offset: -1px; }
.cp__event .cp__event--wide { grid-column: 1 / -1; }
.cp__pevent { margin-bottom: .5rem; }
@media (max-width: 560px) { .evl__actions { width: 100%; margin-left: 0; } .ev-box { grid-template-columns: 1fr; } .ev-box__date { width: 4.5rem; } }

/* ===== squawk vsh-copy#18: Your Profile ===== */
.yp { display: grid; grid-template-columns: 19rem 1fr; gap: 1.5rem; align-items: start; margin: 1rem 0 3rem; font-family: "Roboto Condensed", sans-serif; }
.yp__side { position: sticky; top: 5rem; }
.yp__card { background: #fff; border: 1px solid #d0dde6; border-radius: 8px; padding: 1.25rem; }
.yp__avatar { width: 6rem; height: 6rem; border-radius: 50%; display: grid; place-items: center; background: #155581; color: #fff; font-size: 2rem; margin: 0 auto .75rem; overflow: hidden; position: relative; }
.yp__avatar img { width: 100%; height: 100%; object-fit: cover; }
.yp__photo { position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,.55); color: #fff; font-size: .6875rem; text-align: center; padding: .25rem 0 .35rem; cursor: pointer; }
.yp__photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.yp__name { font-size: 1.375rem; color: #155581; margin: 0; text-align: center; line-height: 1.2; }
.yp__role { text-align: center; color: #155581; font-size: .9375rem; margin: .25rem 0 0; }
.yp__role:empty::before { content: "Add your position"; color: #a5a5a5; }
.yp__org { text-align: center; color: #696969; font-size: .875rem; margin: .15rem 0 0; }
.yp__links { display: flex; justify-content: center; gap: .5rem; margin: .9rem 0 1rem; }
.yp__copy { cursor: pointer; }
.yp__progress { border-top: 1px solid #eef2f5; border-bottom: 1px solid #eef2f5; padding: .75rem 0; margin-bottom: .9rem; }
.yp__bar { height: .5rem; background: #e9eef3; border-radius: 999px; overflow: hidden; }
.yp__bar i { display: block; height: 100%; background: #2daf28; border-radius: 999px; transition: width .3s; }
.yp__pct { font-size: .8125rem; color: #155581; margin: .4rem 0 .25rem; }
.yp__todo { list-style: none; margin: 0; padding: 0; font-size: .8125rem; color: #696969; display: grid; gap: .15rem; }
.yp__todo li::before { content: "○ "; color: #c9972e; }
.yp__todo li.done { color: #8a93a0; text-decoration: line-through; }
.yp__todo li.done::before { content: "✓ "; color: #2daf28; }
.yp__todo a { color: #155581; text-decoration: none; }
.yp__main { min-width: 0; }
.yp__section { scroll-margin-top: 7.5rem; }
.yp__edit { margin-left: auto; font: .8125rem "Roboto Condensed", sans-serif; color: #155581; background: #e9eef3; border: 0; border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
.yp__edit:hover { background: #d0dde6; }
.yp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .9rem; }
.yp__field { display: grid; gap: .2rem; font-size: .75rem; color: #8a93a0; text-transform: uppercase; letter-spacing: .04em; }
.yp__field--wide { grid-column: 1 / -1; }
.yp__field span { display: flex; justify-content: space-between; }
.yp__field em { font-style: normal; text-transform: none; letter-spacing: 0; }
.yp__field input, .yp__field textarea { font: .9375rem "Roboto Condensed", sans-serif; color: #323232; border: 1px solid transparent; border-radius: 4px; padding: .4rem .5rem; background: #f7f9fb; text-transform: none; letter-spacing: 0; }
.yp__field textarea { font-family: "Roboto", sans-serif; resize: vertical; min-height: 4rem; }
.yp__field input::placeholder, .yp__field textarea::placeholder { color: #a5a5a5; }
.yp__section.is-editing .yp__field input, .yp__section.is-editing .yp__field textarea { background: #fff; border-color: #d0dde6; }
.yp__section.is-editing .yp__field input:focus, .yp__section.is-editing .yp__field textarea:focus { outline: 2px solid #155581; outline-offset: -1px; }
.yp__social { margin-top: .9rem; }
.yp__sublabel { display: block; font-size: .8125rem; color: #696969; margin-bottom: .4rem; }
.yp__save { display: flex; gap: .5rem; align-items: center; margin-top: .9rem; }
.yp__save[hidden] { display: none; }
.yp__ini { display: grid; place-items: center; background: #155581; color: #fff; font-size: .8125rem; border-radius: 50%; }
.yp__people .pp__row { grid-template-columns: 3rem 1fr auto; }
.yp__toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: #1f6b1d; color: #fff; padding: .6rem 1rem; border-radius: 999px; font: .9375rem "Roboto Condensed", sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.2); z-index: 80; }
.m-header.m-desktop-only .m-userlinks--active { color: #155581; box-shadow: inset 0 -2px 0 #155581; }
@media (max-width: 900px) { .yp { grid-template-columns: 1fr; } .yp__side { position: static; } .yp__grid { grid-template-columns: 1fr; } }

/* ===== squawk vsh-copy#19: no rounded corners (matches the original's square cards); avatars stay circles ===== */
.cp, .cp *, .pp, .pp *, .hm, .hm *, .fd, .fd *, .sb, .sb *, .tp, .tp *, .po, .po *, .yp, .yp *, .ta, .ta *, .evl, .evl *, .ev-box, .ev-box *, .pc-banner, .pc-banner *, .pc-badge, .pc-toggle, .fb, .fd__act, .hl__card, .hl__img,
.m-header.m-desktop-only .m-search__field, .m-header.m-desktop-only .m-nav-list__link--main, .m-header.m-desktop-only .m-userlinks, .yp__toast, .cal__day, .cal__day--event { border-radius: 0 !important; }
.cp__avatar, .pp__avatar, .yp__avatar, .fd__avatar, .po__avatar, .yp__ini, .cp__back, .m-header.m-desktop-only .m-login__image { border-radius: 50% !important; }
.cp__type { padding: 0; border-radius: 0 !important; }
.cp__type span { border-radius: 0 !important; }
.cal__day--event { background: #d0dde6; }
.cal__day--today { box-shadow: inset 0 0 0 1px #155581; }

/* ===== squawk vsh-copy#21: picture pool as a searchable picker ===== */
.cp__pooldlg { position: fixed; inset: 0; z-index: 100000; background: rgba(21,85,129,.35); display: grid; place-items: center; padding: 1rem; font-family: "Roboto Condensed", sans-serif; }
.cp__pooldlg[hidden] { display: none; }
.cp__poolbox { background: #fff; width: min(56rem, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.cp__poolhead { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.25rem; border-bottom: 1px solid #d0dde6; }
.cp__poolhead h2 { margin: 0; font-size: 1.125rem; font-weight: 500; color: #155581; }
.cp__poolhead h2 small { font-size: .8125rem; color: #8a93a0; font-weight: 400; margin-left: .4rem; }
.cp__poolsearch { margin-left: auto; width: 16rem; max-width: 50%; font: .9375rem "Roboto Condensed", sans-serif; border: 1px solid #d0dde6; padding: .45rem .6rem; background: #f3f6f8; }
.cp__poolsearch:focus { outline: 2px solid #155581; outline-offset: -1px; background: #fff; }
.cp__poolclose { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: #696969; cursor: pointer; padding: 0 .25rem; }
.cp__poolcats { display: flex; gap: .25rem; flex-wrap: wrap; padding: .6rem 1.25rem; border-bottom: 1px solid #eef2f5; }
.cp__cat { border: 1px solid #d0dde6; background: #fff; color: #696969; font: .8125rem "Roboto Condensed", sans-serif; padding: .3rem .7rem; cursor: pointer; }
.cp__cat.is-active, .cp__cat:hover { background: #155581; border-color: #155581; color: #fff; }
.cp__poolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; padding: 1rem 1.25rem; overflow: auto; flex: 1; min-height: 12rem; }
.cp__tile { position: relative; border: 2px solid transparent; background: #f3f6f8; padding: 0; cursor: pointer; text-align: left; font: .75rem "Roboto Condensed", sans-serif; color: #696969; }
.cp__tile[hidden] { display: none; }
.cp__tile img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cp__tile span { display: block; padding: .3rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp__tile:hover { border-color: #a1bbcd; }
.cp__tile[aria-selected="true"] { border-color: #155581; color: #155581; }
.cp__tile[aria-selected="true"]::after { content: "✓"; position: absolute; top: .35rem; right: .35rem; width: 1.4rem; height: 1.4rem; background: #155581; color: #fff; display: grid; place-items: center; font-size: .8rem; }
.cp__poolfoot { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-top: 1px solid #d0dde6; }
.cp__poolinfo { margin-right: auto; font-size: .8125rem; color: #696969; }
@media (max-width: 560px) { .cp__poolhead { flex-wrap: wrap; } .cp__poolsearch { width: 100%; max-width: none; order: 3; margin: 0; } .cp__poolgrid { grid-template-columns: repeat(2, 1fr); } }

/* squawk vsh-copy#22: progress bar in the banner, same scale and items as the profile page */
.pc-banner__bar { height: .5rem; min-width: 7rem; background: #f1dd9a; }
.pc-banner__bar i { min-width: 0; }

/* ===== squawk vsh-copy#23: tighter feed, smaller author, read inline ===== */
.fd__list { gap: .5rem; }
.fd__item { padding: .6rem .85rem .25rem; }
.fd__head { gap: .45rem; margin-bottom: .4rem; }
.fd__avatar { width: 24px; height: 24px; font-size: .625rem; }
.fd__who { flex-direction: row; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.fd__name { font-size: .8125rem; }
.fd__org { font-size: .75rem; }
.fd__org:not(:empty)::before { content: "· "; }
.fd__who .fd__time { font-size: .75rem; }
.fd__who .fd__time::before { content: "· "; }
.fd__reason { font-size: .625rem; padding: .1rem .45rem; }
.fd__title { font-size: 1rem; margin-bottom: .2rem; }
.fd__excerpt p { -webkit-line-clamp: 2; margin-bottom: .3rem; font-size: .9rem; }
.fd__excerpt p::after { content: " …"; color: #8a93a0; }
.fd__full p { display: block; -webkit-line-clamp: unset; overflow: visible; margin: 0 0 .6rem; font-size: .9rem; }
.fd__item.is-open .fd__thumb { width: 100%; height: 11rem; grid-column: 1 / -1; }
.fd__thumb { width: 6rem; height: 4rem; }
.fd__body { gap: .75rem; }
.fd__tags { font-size: .6875rem; margin-top: .1rem; }
.fd__foot { margin-top: .4rem; padding-top: .1rem; gap: 0; }
.fd__act { font-size: .75rem; padding: .3rem .5rem; }
.fd__act--more { color: #155581; font-weight: 500; }
.fd__act--open { margin-left: auto; color: #8a93a0; }
.evl { margin-bottom: .25rem; } .evl__when { font-size: .75rem; }

/* ===== squawk vsh-copy#24: topics list, polished ===== */
.tp__head { align-items: flex-end; margin-bottom: 1rem; }
.tp__h { font-size: 1.5rem; }
.tp__lead { margin: .2rem 0 0; font-size: .875rem; color: #696969; }
.tp__tools { display: flex; gap: .5rem; align-items: center; }
.tp__filter { font: .875rem "Roboto Condensed", sans-serif; border: 1px solid #d0dde6; background: #fff; padding: .45rem .6rem; width: 12rem; }
.tp__filter:focus { outline: 2px solid #155581; outline-offset: -1px; }
.tp__sort select { padding: .45rem .5rem; font-size: .875rem; }
.tp__cols, .tp__row { display: grid; grid-template-columns: 3.25rem minmax(0, 1.5fr) 4rem minmax(0, 1fr) 6.5rem; gap: 1rem; align-items: center; }
.tp__cols { padding: 0 1rem .4rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: #8a93a0; }
.tp__cols span:nth-child(1) { grid-column: 1 / 3; }
.tp__cols span:nth-child(2) { text-align: center; }
.tp__list { border: 1px solid #d0dde6; background: #fff; }
.tp__row { padding: .85rem 1rem; border-top: 1px solid #eef2f5; transition: background .12s; }
.tp__row[hidden] { display: none; }
.tp__row:first-child { border-top: 0; }
.tp__row:hover { background: #f7f9fb; }
.tp__row:focus-within { background: #f7f9fb; }
.tp__thumb { width: 3.25rem; height: 3.25rem; }
.tp__title { font-size: 1.0625rem; margin: 0 0 .3rem; }
.tp__tags { white-space: normal; display: flex; flex-wrap: wrap; gap: .25rem; }
.tp__tags a { font-size: .6875rem; color: #155581; background: #e9eef3; padding: .1rem .45rem; margin: 0; }
.tp__tags a:hover { background: #d0dde6; }
.tp__more { font-size: .6875rem; color: #8a93a0; padding: .1rem .2rem; }
.tp__stat b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.tp__stat { line-height: 1; }
.tp__lastlabel { display: none; }
.tp__lastlink { font-size: .9375rem; color: #323232; margin-bottom: .1rem; }
.tp__lastmeta { font-size: .75rem; }
.tp__lastmeta--none { color: #a5a5a5; font-style: italic; }
.tp__fb { width: 100%; justify-content: center; background: #fff; color: #155581; border-color: #155581; }
.tp__fb::before { content: "+"; }
.tp__fb:hover { background: #e9eef3; }
.tp__fb.fb--following { background: #155581; color: #fff; }
.tp__fb.fb--following::before { content: "✓"; color: #fff; }
.tp__fb.fb--following:hover { background: #fff; color: #b23b3b; border-color: #b23b3b; }
.tp__fb.fb--following:hover::before { content: "×"; color: #b23b3b; }
.tp__empty { padding: 1.5rem; text-align: center; color: #8a93a0; font-size: .875rem; }
.tp + .m-load-more-button { margin: 1rem auto 0; font-size: .9375rem; padding: .5rem 1.25rem; }
@media (max-width: 800px) { .tp__cols { display: none; } .tp__row { grid-template-columns: 3rem minmax(0, 1fr) auto; } .tp__thumb { width: 3rem; height: 3rem; } .tp__stat { display: none; } .tp__last { grid-column: 2 / -1; } .tp__act { grid-column: 3; grid-row: 1; } .tp__head { flex-direction: column; align-items: stretch; gap: .5rem; } .tp__filter { width: 100%; } }

/* ===== squawk vsh-copy#25: compact resources / groups cards ===== */
.m-items-list--one-col:has(.gc--compact) { grid-gap: 0; border: 1px solid #d0dde6; background: #fff; }
.m-items-list--one-col:has(.gc--compact) .m-items-list__item { padding-top: 0 !important; border-top: 1px solid #eef2f5; }
.m-items-list--one-col:has(.gc--compact) .m-items-list__item:first-child { border-top: 0; }
.gc--compact { display: grid !important; grid-template-columns: 3.25rem minmax(0, 1fr) auto; grid-template-areas: "img head act" "img desc act" "img meta act"; gap: .15rem 1rem; align-items: start; min-height: 0; padding: .85rem 1rem; background: #fff; font-family: "Roboto Condensed", sans-serif; }
.gc--compact:hover { background: #f7f9fb; }
.gc--compact .m-groupe-card__image { grid-area: img; position: static; transform: none; width: 3.25rem; height: 3.25rem; object-fit: cover; border-radius: 0 !important; margin-top: .1rem; }
.gc--compact .m-groupe-card__heading { grid-area: head; font-size: 1.0625rem; margin: 0; line-height: 1.3; font-weight: 500; }
.gc--compact .m-groupe-card__description { grid-area: desc; font: .875rem/1.4 "Roboto", sans-serif; color: #696969; margin: 0; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gc--compact .m-groupe-card__info { grid-area: meta; font-size: .75rem; color: #8a93a0; margin: .2rem 0 0; display: inline; }
.gc--compact .m-groupe-card__info strong { color: #155581; font-weight: 500; }
.gc--compact .m-hashtag-list { grid-area: meta; margin: .2rem 0 0 0; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding-left: 0; justify-self: start; }
.gc--compact .m-groupe-card__info + .m-hashtag-list { margin-left: 5.5rem; }
.gc--compact .m-hashtag-list::before { display: none; }
.gc--compact .m-hashtag-list__item { font-size: .6875rem; color: #155581; background: #e9eef3; padding: .1rem .45rem; font-weight: 400; }
.gc--compact .m-hashtag-list__item:hover { background: #d0dde6; }
.gc__more { font-size: .6875rem; color: #8a93a0; }
.gc--compact .m-followed-actions.fb-host { grid-area: act; position: static; align-self: center; }
.gc--compact .fb { width: 6.5rem; justify-content: center; background: #fff; color: #155581; border-color: #155581; }
.gc--compact .fb:hover { background: #e9eef3; }
.gc--compact .fb.fb--following { background: #155581; color: #fff; }
.gc--compact .fb.fb--following::before { color: #fff; }
.gc--compact .fb.fb--following:hover { background: #fff; color: #b23b3b; border-color: #b23b3b; }
.gc--compact .fb.fb--following:hover::before { color: #b23b3b; }
/* list toolbar (squawk #26) */
.lt { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-family: "Roboto Condensed", sans-serif; flex-wrap: wrap; }
.lt__search { flex: 1 1 16rem; min-width: 12rem; font: .9375rem "Roboto Condensed", sans-serif; border: 1px solid #d0dde6; background: #fff url(img/icons/icons-suche.svg) no-repeat .6rem center / .9rem; padding: .5rem .6rem .5rem 2rem; }
.lt__search:focus { outline: 2px solid #155581; outline-offset: -1px; }
.lt__sort { font-size: .8125rem; color: #696969; }
.lt__sort select { font: .8125rem "Roboto Condensed", sans-serif; border: 1px solid #d0dde6; background: #fff; padding: .45rem .5rem; color: #155581; margin-left: .25rem; }
.lt__count { font-size: .8125rem; color: #8a93a0; margin-left: .25rem; white-space: nowrap; }
.lt-hidden { display: none !important; }
.lt__empty { padding: 1.5rem 1rem; color: #8a93a0; font-size: .875rem; text-align: center; font-family: "Roboto Condensed", sans-serif; }
.m-section__filter.pc-filter { margin-bottom: .5rem; }
/* people cards a notch tighter too */
.m-user-card--big { padding: 1rem 1rem 1rem 6.5rem; min-height: 5.5rem; }
.m-user-card--big .m-user-card__image { height: 4.5rem; left: 1rem; }
.m-user-card--big .m-user-card__heading { font-size: 1.0625rem; margin-bottom: .25rem; }
.m-user-card--big .m-user-card__description { font-size: .9375rem; margin-bottom: .25rem; }
.m-user-card--big .m-user-card__info { font-size: .8125rem; margin-bottom: .25rem; }
.m-items-list--one-col:has(.m-user-card--big) { grid-gap: .5rem; }
.m-section__header .m-heading--section { padding: .5rem 0; }
@media (max-width: 640px) { .gc--compact { grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "img head" "img desc" "img meta" "act act"; } .gc--compact .m-followed-actions.fb-host { justify-self: start; margin-top: .5rem; } .gc--compact .m-groupe-card__info + .m-hashtag-list { margin-left: 0; } }

/* ===== squawk vsh-copy#27: feed cards like LinkedIn ===== */
.fd__list { gap: .5rem; }
.li { padding: 0; }
.li__ctx { font-size: .75rem; color: #696969; padding: .5rem 1rem; border-bottom: 1px solid #eef2f5; }
.li__head { display: flex; align-items: flex-start; gap: .6rem; padding: .85rem 1rem 0; margin: 0; }
.li .fd__avatar { width: 48px; height: 48px; font-size: 1rem; }
.li__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1; }
.li__name { font-size: .9375rem; font-weight: 600; color: #323232; text-decoration: none; }
.li__name:hover { color: #155581; text-decoration: underline; }
.li__headline { font-size: .75rem; color: #696969; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li__time { font-size: .75rem; color: #8a93a0; }
.li__follow { border: 0; background: transparent; color: #155581; font: .875rem "Roboto Condensed", sans-serif; font-weight: 600; padding: .3rem .5rem; cursor: pointer; white-space: nowrap; }
.li__follow:hover { background: #e9eef3; }
.li__follow.is-on { color: #696969; font-weight: 400; }
.li__menu { border: 0; background: transparent; color: #696969; font-size: 1.25rem; line-height: 1; padding: .1rem .4rem; cursor: pointer; }
.li__menu:hover { background: #e9eef3; }
.li .evl { padding: .5rem 1rem 0; margin: 0; }
.li__text { padding: .6rem 1rem .25rem; font: .9375rem/1.5 "Roboto", sans-serif; color: #323232; }
.li__title { display: block; font: 600 1rem/1.35 "Roboto Condensed", sans-serif; color: #155581; text-decoration: none; margin-bottom: .25rem; }
.li__title:hover { text-decoration: underline; }
.li .fd__excerpt p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: .9375rem; }
.li .fd__excerpt p::after { content: none; }
.li .fd__full p { font-size: .9375rem; margin: 0 0 .6rem; }
.li__more { border: 0; background: transparent; color: #696969; font: inherit; padding: 0; cursor: pointer; }
.li__more:hover { color: #155581; text-decoration: underline; }
.li__tags { margin: .35rem 0 0; font-size: .875rem; }
.li__tag { color: #155581; text-decoration: none; font-weight: 500; margin-right: .3rem; }
.li__tag:hover { text-decoration: underline; }
.li__media { display: block; width: 100%; aspect-ratio: 16 / 7; background: #e9eef3 center / cover no-repeat; margin-top: .5rem; }
.li__social { display: flex; justify-content: space-between; padding: .45rem 1rem; font-size: .75rem; color: #696969; border-bottom: 1px solid #eef2f5; }
.li__likes i { font-style: normal; }
.li__actions { display: grid; grid-template-columns: repeat(4, 1fr); padding: .2rem .5rem; }
.li__actions button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; background: transparent; color: #696969; font: 600 .8125rem "Roboto Condensed", sans-serif; padding: .6rem .25rem; cursor: pointer; }
.li__actions button svg { width: 1.1rem; height: 1.1rem; }
.li__actions button:hover { background: #e9eef3; color: #155581; }
.li__actions button.is-on { color: #155581; }
.li__actions button.is-on svg { fill: #155581; stroke: #155581; }
.li__cbox { display: flex; gap: .5rem; padding: .5rem 1rem .85rem; border-top: 1px solid #eef2f5; }
.li__cbox[hidden] { display: none; }
.li__cbox input { flex: 1; font: .9375rem "Roboto", sans-serif; border: 1px solid #d0dde6; padding: .5rem .75rem; }
.li__cbox input:focus { outline: 2px solid #155581; outline-offset: -1px; }
.li__cbox button { border: 0; background: #155581; color: #fff; font: .875rem "Roboto Condensed", sans-serif; padding: .5rem .9rem; cursor: pointer; }
.li__clist { list-style: none; margin: 0; padding: .25rem 1rem .5rem; font: .875rem/1.4 "Roboto", sans-serif; color: #323232; }
.li__clist li { background: #f3f6f8; padding: .4rem .6rem; margin-bottom: .25rem; }
.li__clist small { color: #8a93a0; }
.fd__item.is-open .li__media { aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .li__actions button span { display: none; } .li__headline { white-space: normal; } }

/* ===== squawk vsh-copy#28: people as a dense, functional list ===== */
.m-items-list--one-col:has(.uc--compact) { grid-gap: 0 !important; border: 1px solid #d0dde6; background: #fff; }
.m-items-list--one-col:has(.uc--compact) .m-items-list__item { padding-top: 0 !important; border-top: 1px solid #eef2f5; }
.m-items-list--one-col:has(.uc--compact) .m-items-list__item:first-child { border-top: 0; }
.uc--compact { display: grid !important; grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "img head act" "img desc act" "img meta act" "img tags act"; gap: .1rem .9rem; align-items: start; min-height: 0 !important; padding: .7rem 1rem !important; margin: 0; background: #fff; font-family: "Roboto Condensed", sans-serif; position: relative; }
.uc--compact:hover { background: #f7f9fb; }
.uc--compact > a:has(.m-user-card__image) { grid-area: img; }
.uc--compact .m-user-card__image { position: static !important; transform: none !important; width: 3rem; height: 3rem !important; object-fit: cover; margin-top: .1rem; }
.uc--compact .m-user-card__heading { grid-area: head; font-size: 1rem; margin: 0 !important; line-height: 1.3; font-weight: 500; padding: 0; }
.uc--compact .m-user-card__description { grid-area: desc; font: .875rem/1.35 "Roboto", sans-serif; color: #323232; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-weight: 400; }
.uc--compact .m-user-card__description:empty { display: none; }
.uc--compact .m-user-card__info { grid-area: meta; font-size: .75rem; color: #696969; margin: 0 !important; line-height: 1.3; }
.uc--compact .m-user-card__info p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc--compact .m-user-card__info:empty { display: none; }
.uc--compact .m-hashtag-list { grid-area: tags; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.uc--compact .m-hashtag-list::before { display: none; }
.uc--compact .m-hashtag-list__item { font-size: .6875rem; color: #155581; background: #e9eef3; padding: .1rem .45rem; font-weight: 400; }
.uc--compact .m-hashtag-list__item:hover { background: #d0dde6; }
.uc--compact .pc-badge { grid-area: tags; margin: .2rem 0 0; }
.uc--compact .m-followed-actions.fb-host { grid-area: act; position: static; align-self: center; }
.uc--compact .fb { width: 6.5rem; justify-content: center; background: #fff; color: #155581; border-color: #155581; }
.uc--compact .fb:hover { background: #e9eef3; }
.uc--compact .fb.fb--following { background: #155581; color: #fff; }
.uc--compact .fb.fb--following::before { color: #fff; }
.uc--compact .fb.fb--following:hover { background: #fff; color: #b23b3b; border-color: #b23b3b; }
.uc--compact .fb.fb--following:hover::before { color: #b23b3b; }
@media (max-width: 640px) { .uc--compact { grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-areas: "img head" "img desc" "img meta" "img tags" "act act"; } .uc--compact .m-followed-actions.fb-host { justify-self: start; margin-top: .4rem; } }
/* squawk vsh-copy#29: topic rows share the row size of Resources & Services */
.tp__row { padding: .85rem 1rem !important; min-height: 6.0625rem; box-sizing: border-box; }
.tp__lastlink { font-size: .875rem; }

/* ===== prototype: groups, facilities, topic detail, Your VSH ===== */
.pp__avatar--logo { background: #fff; border: 1px solid #d0dde6; }
.pp__avatar--logo img { object-fit: contain; padding: .35rem; }
.gp__sub { font: 500 1rem/1.3 "Roboto Condensed", sans-serif; color: #155581; margin: 0 0 .35rem; }
.gp__lead { font-weight: 500; }
.gp__body p { margin: 0 0 .6rem; } .gp__body ul { margin: 0 0 .6rem 1.1rem; padding: 0; } .gp__body li { margin-bottom: .25rem; }
.gp__cta { display: inline-block; font: .875rem "Roboto Condensed", sans-serif; color: #155581; background: #e9eef3; padding: .35rem .7rem; text-decoration: none; margin-bottom: .6rem; }
.gp__cta:hover { background: #d0dde6; }
.tpd { font-family: "Roboto Condensed", sans-serif; margin: 1rem 0 3rem; }
.tpd__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid #d0dde6; padding: 1rem 1.25rem; margin-bottom: .75rem; }
.tpd__kicker { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: #8a93a0; margin: 0 0 .1rem; }
.tpd__h { font-size: 1.5rem; font-weight: 500; color: #155581; margin: 0 0 .4rem; }
.tpd__side { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.tpd__count { font-size: .8125rem; color: #696969; } .tpd__count b { font-size: 1.125rem; color: #155581; font-weight: 500; }
.tpd__follow { position: static; }
.tpd__filter button { border: 1px solid #d0dde6; background: #fff; color: #696969; font: .8125rem "Roboto Condensed", sans-serif; padding: .35rem .75rem; cursor: pointer; }
.tpd__filter button.is-active { background: #155581; border-color: #155581; color: #fff; }
.tpd__filter button:disabled { opacity: .5; cursor: not-allowed; }
.tpd__list { background: #fff; border: 1px solid #d0dde6; padding: 0 1rem; }
/* Your VSH (followed, your groups) */
.yv { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: start; margin: 1rem 0 3rem; font-family: "Roboto Condensed", sans-serif; }
.yv__nav { position: sticky; top: 5rem; background: #fff; border: 1px solid #d0dde6; padding: .5rem 0; }
.yv__nav a { display: block; padding: .5rem 1rem; color: #323232; text-decoration: none; font-size: .9375rem; }
.yv__nav a:hover { background: #f3f6f8; } .yv__nav a.is-active { color: #155581; box-shadow: inset 3px 0 0 #155581; background: #f3f6f8; }
.yv__nav .yv__group { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: #8a93a0; padding: .6rem 1rem .2rem; }
.yv__nav a.yv__sub { padding-left: 1.75rem; font-size: .875rem; }
.yv__main { min-width: 0; }
.yv__h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; }
.yv__h h1 { font-size: 1.375rem; font-weight: 500; color: #155581; margin: 0; }
.yv__h p { margin: .15rem 0 0; font-size: .875rem; color: #696969; }
.yv__empty { background: #fff; border: 1px dashed #d0dde6; padding: 1.5rem; text-align: center; color: #696969; font-size: .9375rem; }
.yv__empty a { color: #155581; }
.yv__section { margin-bottom: 1.5rem; }
.yv__section h2 { font-size: 1.0625rem; font-weight: 500; color: #155581; margin: 0 0 .5rem; }
.yv__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.yv__chip { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid #d0dde6; padding: .3rem .4rem .3rem .7rem; font-size: .9375rem; color: #155581; }
.yv__chip a { color: inherit; text-decoration: none; } .yv__chip a::before { content: "#"; }
.yv__chip button { border: 0; background: transparent; color: #8a93a0; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .25rem; }
.yv__chip button:hover { color: #b23b3b; }
.yv__form { background: #fff; border: 1px solid #d0dde6; padding: 1.25rem; }
.yv__form .yp__grid { margin-bottom: .75rem; }
.yv__form .yp__field input, .yv__form .yp__field textarea { background: #fff; border-color: #d0dde6; }
.yv__form .yp__field input:focus, .yv__form .yp__field textarea:focus { outline: 2px solid #155581; outline-offset: -1px; }
.yv__form .yp__sublabel { margin-top: .75rem; }
.yv__logo { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.yv__logo .pp__avatar { margin: 0; width: 4rem; height: 4rem; font-size: 1.25rem; }
.yv__logo label { font: .875rem "Roboto Condensed", sans-serif; color: #155581; background: #e9eef3; padding: .4rem .8rem; cursor: pointer; position: relative; }
.yv__logo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.yv__visibility { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 .25rem; }
.yv__visibility label { display: flex; align-items: center; gap: .35rem; font-size: .875rem; color: #323232; border: 1px solid #d0dde6; padding: .35rem .7rem; cursor: pointer; }
.yv__visibility input { accent-color: #155581; margin: 0; }
.yv__actions { display: flex; gap: .5rem; align-items: center; }
@media (max-width: 800px) { .yv { grid-template-columns: 1fr; } .yv__nav { position: static; } .tpd__head { flex-direction: column; } .tpd__side { flex-direction: row; align-items: center; } }
/* squawk vsh-copy#30: hashtag suggestions scanned from the text */
.cp__suggested { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .4rem 1.25rem .6rem; font-family: "Roboto Condensed", sans-serif; background: #f7f9fb; border-top: 1px dashed #d0dde6; }
.cp__suggested[hidden] { display: none; }
.cp__suggested__label { font-size: .75rem; color: #8a93a0; margin-right: .25rem; }
.cp__sugchip { border: 1px dashed #155581; background: #fff; color: #155581; font: .8125rem "Roboto Condensed", sans-serif; padding: .15rem .5rem; cursor: pointer; }
.cp__sugchip:hover { background: #e9eef3; }
.cp__sugall { border: 0; background: transparent; color: #696969; font: .75rem "Roboto Condensed", sans-serif; text-decoration: underline; cursor: pointer; margin-left: .25rem; }

/* squawk vsh-copy#31: the preview is the real feed card; #32: type toggle without extra height */
.cp__pcard { border: 1px solid #d0dde6; background: #fff; }
.cp__pcard .li__title:empty::before, .cp__pcard .cp__pteaser:empty::before { content: attr(data-empty); color: #a5a5a5; font-weight: 400; }
.cp__pcard .li__title { font-weight: 600; }
.cp__pcard .li__follow, .cp__pcard .li__menu { cursor: default; }
.cp__pcard .li__media { aspect-ratio: 16 / 7; }
.cp__pcard .cp__pevent { padding: .5rem 1rem 0; }
.cp__pcard .cp__pevent:empty { display: none; }
.cp__pcard .cp__pevent .evl { margin: 0; }
.cp__pactions span { display: inline-flex; align-items: center; justify-content: center; color: #8a93a0; font: 600 .8125rem "Roboto Condensed", sans-serif; padding: .6rem .25rem; }
.cp__previewhead a { color: #155581; }
.cp__type { display: flex; align-items: stretch; height: auto; line-height: 1; }
.cp__type label { display: flex; }
.cp__type span { display: flex; align-items: center; padding: 0 .9rem; height: 2.2rem; line-height: 1; }
.cp__type { height: calc(2.2rem + 2px); overflow: hidden; }

/* squawk vsh-copy#33: follow button icon keeps its width on hover */
.fb::before { display: inline-block; width: 1em; text-align: center; flex: none; }
.tp__fb::before, .gc--compact .fb::before, .uc--compact .fb::before { display: inline-block; width: 1em; text-align: center; }
/* squawk vsh-copy#34: text in highlight cards without image sits at the bottom */
.hl__card:not(:has(.hl__img)) .hl__body { align-content: end; height: 100%; }
.hl__card:not(:has(.hl__img)) .hl__meta { margin-top: .25rem; }

/* squawk vsh-copy#35: three actions */
.li__actions--3 { grid-template-columns: repeat(3, 1fr); }

/* squawk vsh-copy#38: highlight cards without image shrink to their text and sit at the bottom of the row */
.hl__grid { align-items: end; }
.hl__card:not(:has(.hl__img)) { align-self: end; height: auto; }
.hl__card:not(:has(.hl__img)) .hl__body { align-content: start; height: auto; }
/* squawk vsh-copy#37: post in a group */
.cp__audience { display: flex; align-items: center; gap: .4rem; font-family: var(--font-ui, "Roboto Condensed", sans-serif); font-size: .8125rem; color: #696969; padding: 0 1.25rem .25rem; }
.cp__audience select { font: .8125rem "Roboto Condensed", sans-serif; border: 1px solid #d0dde6; background: #fff; color: #155581; padding: .3rem .5rem; max-width: 22rem; }
.cp__audience svg { width: 1rem; height: 1rem; color: #8a93a0; }
.cp__pgroup { font-size: .75rem; color: #696969; }
.cp__pgroup:empty { display: none; }
.cp__pgroup a { color: #155581; text-decoration: none; }