/* CV Mojo app (v2 preview): the community page (/discover), ds- classes. */

/* Search ------------------------------------------------------------------- */
.ds-search { display: flex; flex-wrap: wrap; gap: 10px; }
.ds-search-field { position: relative; flex: 1 1 260px; min-width: 0; }
.ds-search-field > svg { position: absolute; left: 17px; top: 50%; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.ds-search .ap-input { min-height: 50px; padding-left: 46px; border-radius: 999px; }
.ds-search .btn { min-height: 50px; padding: 10px 24px; }
.ds-search .ap-error { flex-basis: 100%; margin: 0; }

/* Layout ------------------------------------------------------------------- */
.ds-main { display: grid; gap: 16px; min-width: 0; }
.ds .ds-aside { position: static; } /* taller than most screens, so it scrolls with the page */

/* Composer ----------------------------------------------------------------- */
.ds-compose { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 14px 14px 16px; font: inherit; text-align: left; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 1px 2px rgba(25, 29, 59, .05), 0 2px 8px rgba(25, 29, 59, .04); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.ds-compose:hover { border-color: var(--indigo); box-shadow: 0 10px 30px rgba(25, 29, 59, .08); }
.ds-compose .ap-av { width: 42px; height: 42px; font-size: 15px; }
.ds-compose-field { flex: 1; min-width: 0; padding: 12px 18px; overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; background: var(--mist); border-radius: 999px; }
.ds-compose-go { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; font-size: 14px; font-weight: 700; color: var(--navy); background: var(--yellow); border-radius: 999px; transition: transform .15s ease; }
.ds-compose:hover .ds-compose-go { transform: rotate(-2deg); }

/* Sort and filter ------------------------------------------------------------ */
.ds-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ds-bar .ap-seg { background: #fff; border: 1px solid var(--line); }
.ds-bar .ap-seg button { display: inline-flex; align-items: center; gap: 6px; }
.ds-bar .ap-seg button svg { opacity: .75; }

/* Feed --------------------------------------------------------------------- */
.ds-feed { display: grid; gap: 16px; }
.ds-post { --bar: transparent; position: relative; padding: 22px 24px 12px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 1px 2px rgba(25, 29, 59, .05), 0 2px 8px rgba(25, 29, 59, .04); animation: db-in .45s ease backwards; }
.ds-post::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 6px; background: var(--bar); border-radius: 22px 22px 0 0; }
.ds-feed > .ds-post:nth-child(2) { animation-delay: .05s; }
.ds-feed > .ds-post:nth-child(3) { animation-delay: .1s; }
.ds-feed > .ds-post:nth-child(4) { animation-delay: .15s; }
.ds-post--pinned { --bar: var(--yellow); }
.ds-post--review { --bar: var(--ok); }
.ds-pin { top: -12px; right: 22px; }
.ds-post-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ds-author { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-radius: 12px; }
.ds-author:hover { color: inherit; text-decoration: none; }
.ds-author:hover b { color: var(--indigo); }
.ds-author .ap-av { width: 42px; height: 42px; font-size: 15px; }
.ds-author-text { min-width: 0; }
.ds-author-text b { display: block; overflow: hidden; font-size: 15px; color: var(--navy); white-space: nowrap; text-overflow: ellipsis; }
.ds-author-text > span { display: block; font-size: 13px; color: var(--muted); }
.ds-new { display: inline-block; margin-right: 6px; padding: 1px 8px; font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1.5; color: var(--navy); vertical-align: 3px; background: var(--yellow); border-radius: 999px; }
.ds-you { display: inline-block; margin-left: 4px; padding: 1px 8px; font-size: 11px; font-weight: 800; line-height: 1.5; color: var(--navy); vertical-align: 2px; background: var(--yellow); border-radius: 999px; }
.ds-kind { margin: 0 0 8px; }
.ds-post-title { margin: 0 0 8px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; overflow-wrap: anywhere; }
.ds-post-title a { color: var(--navy); text-decoration: none; }
.ds-post-title a:hover { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.ds-post-body { font-size: 15px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.ds-post-body p { margin: 0 0 .7em; }
.ds-post-body a { font-weight: 600; }
.ds-read a { font-weight: 700; }
.ds-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 4px 0 8px; overflow: hidden; border-radius: 16px; }
.ds-imgs--1 { grid-template-columns: minmax(0, 1fr); }
.ds-imgs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-imgs a { display: block; background: var(--mist); }
.ds-imgs img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ds-imgs--1 img { max-height: 420px; aspect-ratio: auto; }

/* Post actions */
.ds-post-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 12px -10px 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.ds-act { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: 0; border-radius: 999px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.ds-act:hover { color: var(--navy); text-decoration: none; background: var(--mist); }
.ds-react.is-on { color: var(--tone); background: var(--tone-soft); }
.ds-react.is-pop svg { animation: ds-bounce .45s ease; }
.ds-tone--like { --tone: var(--indigo); --tone-soft: #e4e7fb; }
.ds-tone--insightful { --tone: var(--amber); --tone-soft: var(--amber-soft); }
.ds-tone--celebrate { --tone: #2a7d00; --tone-soft: var(--ok-soft); }
.ds-tone--support { --tone: #b42318; --tone-soft: #fdecea; }
.ds-tally { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 10px; font: inherit; font-size: 13.5px; color: var(--muted); background: none; border: 0; border-radius: 999px; cursor: pointer; }
.ds-tally:hover { background: var(--mist); }
.ds-tally b { font-weight: 800; color: var(--navy); }
.ds-tally-ics { display: inline-flex; }
.ds-tally-ic { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -6px; color: var(--tone); background: var(--tone-soft); border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.ds-tally-ic:first-child { margin-left: 0; }

/* Reaction picker */
.ds-react-wrap { position: relative; }
.ds-picker { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; display: flex; gap: 2px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px rgba(25, 29, 59, .14), 0 2px 6px rgba(25, 29, 59, .06); transform-origin: 24px 100%; animation: ds-pop .18s ease-out; }
.ds-picker[hidden] { display: none; }
.ds-pick { display: grid; justify-items: center; gap: 3px; width: 64px; padding: 8px 4px 6px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--navy); background: none; border: 0; border-radius: 12px; cursor: pointer; transition: background-color .12s ease, transform .12s ease; }
.ds-pick svg { color: var(--tone); }
.ds-pick:hover { background: var(--tone-soft); transform: translateY(-2px); }
.ds-pick[aria-pressed="true"] { background: var(--tone-soft); box-shadow: inset 0 0 0 2px var(--tone); }
.ds-pick:disabled { opacity: .5; cursor: progress; transform: none; }

/* Delete confirmation */
.ds-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 8px; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--navy); background: #fdecea; border-radius: 14px; }
.ds-confirm > span { flex: 1 1 200px; }
.ds-confirm .btn { min-height: 38px; padding: 7px 14px; font-size: 13.5px; }
.ds .btn.ds-danger { background: #b42318; box-shadow: none; }
.ds .btn.ds-danger:hover { background: #8f1b13; }
.ds-post.is-leaving { opacity: 0; transform: scale(.98); transition: opacity .25s ease, transform .25s ease; }

/* Under the feed */
.ds-more { display: grid; justify-items: center; gap: 10px; min-height: 8px; }
.ds-more-msg { margin: 0; font-size: 14px; color: var(--muted); }
.ds-loading { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.ds-dots { display: inline-flex; gap: 4px; }
.ds-dots i { width: 7px; height: 7px; background: var(--indigo); border-radius: 50%; animation: ds-blink 1s ease-in-out infinite; }
.ds-dots i:nth-child(2) { animation-delay: .15s; }
.ds-dots i:nth-child(3) { animation-delay: .3s; }
.ds-end { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 8px 16px; font-size: 14px; font-weight: 700; color: var(--navy); background: var(--ok-soft); border-radius: 999px; }
.ds-end svg { color: #2a7d00; }

/* Side cards --------------------------------------------------------------- */
.ds-card { padding: 22px; animation: db-in .45s ease backwards; }
.ds-card::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 6px; background: var(--accent, transparent); border-radius: 22px 22px 0 0; }
.ds-aside > .ds-card:nth-child(2) { animation-delay: .08s; }
.ds-aside > .ds-card:nth-child(3) { animation-delay: .14s; }
.ds-card--yellow { --accent: var(--yellow); }
.ds-card--cyan { --accent: var(--cyan); }
.ds-card--channel { --accent: var(--channel); }
.ds-card .db-card-h { margin-bottom: 10px; }
.ds-card-note { margin: -6px 0 10px; font-size: 13px; color: var(--muted); }
.ds-card-sticker { top: -13px; right: 18px; }
.ds-list { display: grid; gap: 2px; margin: 0 -8px; }
.ds-row { gap: 12px; padding: 8px; }
.ds-row .ap-av { width: 34px; height: 34px; font-size: 13px; }
.ds-rank { flex: none; display: grid; place-items: center; width: 24px; height: 24px; font-size: 12px; font-weight: 800; color: var(--navy); background: var(--mist); border-radius: 8px; }
.ds-row:first-child .ds-rank { background: var(--yellow); transform: rotate(-6deg); }
.ds-rep { flex: none; padding: 3px 9px; font-size: 12px; font-weight: 800; color: var(--navy); white-space: nowrap; background: var(--cyan-soft); border-radius: 999px; }
.ds-label { margin: 16px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ds-card .db-card-h + .ds-label { margin-top: 4px; }
.ds-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-tag { max-width: 100%; padding: 6px 12px; overflow: hidden; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; text-overflow: ellipsis; background: var(--channel-soft); border: 1.5px solid transparent; border-radius: 999px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.ds-tag--industry { background: var(--cyan-soft); }
.ds-tag:hover { background: #fff; border-color: var(--navy); }
.ds-mini { display: grid; justify-items: start; gap: 10px; padding: 14px 16px; background: var(--mist); border-radius: 14px; }
.ds-mini p { margin: 0; font-size: 14px; color: var(--muted); }
.ds-mini .ap-linkish { font-size: 14px; font-weight: 700; }

/* Focus -------------------------------------------------------------------- */
.ds-compose:focus-visible, .ds-act:focus-visible, .ds-tally:focus-visible, .ds-pick:focus-visible, .ds-tag:focus-visible,
.ds-author:focus-visible, .ds-post-title a:focus-visible, .ds-read a:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.ds-pick:focus-visible { background: var(--tone-soft); }

/* Motion ------------------------------------------------------------------- */
@keyframes ds-pop { from { opacity: 0; transform: translateY(6px) scale(.94); } }
@keyframes ds-bounce { 40% { transform: scale(1.3) rotate(-8deg); } }
@keyframes ds-blink { 50% { opacity: .25; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .ds-post, .ds-card, .ds-picker, .ds-react.is-pop svg, .ds-dots i { animation: none; }
  .ds-compose, .ds-compose-go, .ds-pick, .ds-post.is-leaving { transition: none; }
  .ds-compose:hover .ds-compose-go, .ds-pick:hover { transform: none; }
}

/* Small screens ------------------------------------------------------------ */
@media (max-width: 760px) {
  .ds-post { padding: 20px 16px 10px; border-radius: 18px; }
  .ds-post::before { border-radius: 18px 18px 0 0; }
  .ds-post-foot { margin: 10px -6px 0; }
  .ds-act { padding: 8px 10px; }
  .ds-pin { right: 16px; }
  .ds-card { padding: 20px; }
}
@media (max-width: 480px) {
  .ds-search .btn { flex: 1; }
  .ds-compose { gap: 10px; padding: 12px; }
  .ds-compose-field { padding: 11px 14px; font-size: 14px; }
  .ds-compose-go { padding: 11px 12px; }
  .ds-compose-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ds-act--share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ds-pick { width: 58px; }
}
/* CV Mojo Team posts: "Official" label next to the name (same style as app-posts.css). */
.ps-official { display: inline-block; margin-left: 4px; padding: 1px 8px; font-size: 11px; font-weight: 800; line-height: 1.5; color: #fff; vertical-align: 2px; background: var(--navy); border-radius: 999px; }