/* S-01 Posts polish: shared praise, the ⓘ line in the post detail, the "Is the mood right?" control, Status filter, Left out view */

/* Share this praise: shared = filled heart in the heart colour plus the label "Shared with the team" (shape and text, not colour alone) */
.s01-share { align-self: flex-start; }
.s01-share.is-shared .ico { fill: var(--neg); stroke: var(--neg); }
.s01-share.is-shared { color: var(--ink); }

/* "Collected by … Name hidden.": the ⓘ sits on the centre of the first line, also when the text wraps */
.d-how > .ico { margin-top: 2px; margin-top: calc((1lh - 13px) / 2); }

/* Segments in the post detail: same pill focus ring as the rest of the control (status and "Is the mood right?") */
.d-section .seg button:focus-visible { border-radius: var(--r-pill); outline-offset: 0; }

/* Left out link in the Posts toolbar */
.s01-left-link { flex: none; margin: 0 0 0 2px; white-space: nowrap; font-size: var(--t-xs); color: var(--ink-2); }
.s01-left-link:hover { color: var(--ink); }

/* Left out view (drawer) */
.s01-left { display: flex; flex-direction: column; gap: 14px; }
.s01-left-note { margin: 0; font-size: var(--t-sm); }
.s01-left-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.s01-left-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.s01-left-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.s01-left-src { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: var(--t-xs); color: var(--ink-3); }
.s01-left-src b { color: var(--ink); font-size: var(--t-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s01-reason { flex: none; }
.s01-left-text { margin: 0; font-size: var(--t-sm); color: var(--ink); }
.s01-left-vi { margin: 0; font-size: var(--t-xs); color: var(--ink-3); font-style: italic; }
.s01-left-item > .btn { align-self: flex-start; }

/* Today: posts the team marked as wrong match, under the "left out" figure */
.s01-today-left { margin: 6px 0 0; font-size: var(--t-xs); }
.s01-today-left .text-btn { margin: 0; padding: 0; font-size: inherit; }

/* Phone: Status and the Left out link share a third row under Source and Topic; search and Report stay on the Source/Topic row */
@media (max-width: 767px) {
  .toolbar > .filters:has(.report-mini):has(.field-status) { grid-auto-flow: row dense; }
  .filters:has(.report-mini) .field-status { grid-column: 1 / 2; }
  .filters:has(.report-mini) .s01-left-link { grid-column: 2 / -1; justify-self: center; height: 44px; margin: 0; }
}

/* Desktop 1280–1535 px: the Status filter and the Left out link need the room the labelled "Report a post" button took,
   so the toolbar keeps one row: the same "+" button phones use (same name, plus a tooltip) and a search field that fills what is left */
@media (min-width: 1280px) and (max-width: 1535px) {
  .filters:has(.field-status) .field-search { flex: 1 1 64px; min-width: 0; } /* search takes the room that is left */
  .filters:has(.field-status) .field-search input { width: 100%; min-width: 0; }
  .toolbar > .filters:has(.field-status) + .btn { display: none; }
  .filters:has(.field-status) .report-mini { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; }
}

/* Phone: the sticky top bar and the floating tab bar never cover what scrolling brings into view (a focused post card,
   a card scrolled to by code): scroll padding keeps the region between them (WCAG 2.4.11 focus not obscured) */
@media (max-width: 767px) {
  html { scroll-padding-top: 64px; scroll-padding-bottom: 96px; }
}

/* "Is the mood right?": the same mood design as elsewhere (sent-dot before each label as in the Today share legend);
   the chosen mood's pill is tinted in its mood colour, its label in the mood's text colour (dot + word, not colour alone) */
.seg.s01-mood button { display: inline-flex; align-items: center; gap: 6px; }
.seg.s01-mood .sent-dot { width: 7px; height: 7px; }
.seg.s01-mood:has(button[data-val="pos"][aria-pressed="true"]) .seg-thumb { background: linear-gradient(var(--pos-soft), var(--pos-soft)), var(--surface); box-shadow: 0 1px 2px rgba(10, 46, 33, 0.12), 0 0 0 1px color-mix(in srgb, var(--pos) 40%, transparent); }
.seg.s01-mood:has(button[data-val="neu"][aria-pressed="true"]) .seg-thumb { background: linear-gradient(var(--neu-soft), var(--neu-soft)), var(--surface); box-shadow: 0 1px 2px rgba(10, 46, 33, 0.12), 0 0 0 1px color-mix(in srgb, var(--neu) 70%, transparent); }
.seg.s01-mood:has(button[data-val="neg"][aria-pressed="true"]) .seg-thumb { background: linear-gradient(var(--neg-soft), var(--neg-soft)), var(--surface); box-shadow: 0 1px 2px rgba(10, 46, 33, 0.12), 0 0 0 1px color-mix(in srgb, var(--neg) 40%, transparent); }
.seg.s01-mood button[data-val="pos"][aria-pressed="true"] { color: var(--pos-text); }
.seg.s01-mood button[data-val="neg"][aria-pressed="true"] { color: var(--neg-text); }
.seg.s01-mood button[data-val="neu"][aria-pressed="true"] { color: var(--ink); }
.seg.s01-mood .seg-thumb { transition: background-color var(--t-fast) var(--ease-std), box-shadow var(--t-fast) var(--ease-std); }

/* Today: the praise the team shared */
.s01-today-shared { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: var(--t-xs); color: var(--ink-2); }
.s01-today-shared > .ico { flex: none; margin-top: calc((1lh - 13px) / 2); fill: var(--neg); stroke: var(--neg); }
.s01-today-shared b { font-weight: 600; color: var(--ink); }
.s01-today-shared .text-btn { margin: 0; padding: 0; font-size: inherit; display: inline; text-align: left; }

/* Posts: the caption over the list (UX C12), at every width */
.s01-list-cap, .s01-list-cap.result-count { display: block; margin: 0 0 10px; padding: 0 4px; font-size: var(--t-xs); color: var(--ink-3); white-space: normal; }
@media (max-width: 767px) { .s01-list-cap, .s01-list-cap.result-count { display: block; margin-top: 2px; } }