/* T-015 What worked (US5.5, FR-84): the action scoreboard in Channels & market, release verdicts in the topic detail,
   one line in the weekly digest. Small multiples per kind share one x-axis: dot = change, bar = the usual ups and downs.
   Colour follows the verdict only: green clear lift, red clear drop, grey usual wobble, amber two actions at once. */

/* The card is wider than the other cells: on two columns it takes the full row */
.bento > .sb-card { grid-column: 1 / -1; }
@media (min-width: 1024px) and (min-height: 700px) {
  /* more than four cards: the screen scrolls instead of a fixed 2 × 2 (same rules as T-013's groups card, ext/groups.css);
     the scoreboard grows with its rows (top rows plus Show all); no scroll box of its own */
  .view > .screen.bento:has(> .sb-card) { flex: 0 0 auto; }
  .bento:has(> .sb-card) { grid-template-rows: none; grid-auto-rows: auto; }
  .bento:has(> .sb-card) > .card { min-height: 340px; }
}
.sb-card { container-type: inline-size; max-height: none; }
/* No inner scroll box and no edge fade: the page scrolls, the list is cut at the top rows until Show all */
.sb-card > .card-scroll { overflow: visible; max-height: none; -webkit-mask-image: none; mask-image: none; flex: 0 0 auto; }
.sb-more { align-self: flex-start; min-height: 44px; }
.sb-card .card-tools { display: flex; align-items: center; gap: 6px; }
.sb-body { display: flex; flex-direction: column; gap: 14px; }

/* Opening sentence and the one action */
.sb-lead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sb-concl { margin: 0; font-size: var(--t-md, 1rem); font-weight: 500; color: var(--ink); line-height: 1.45; text-wrap: pretty; max-width: 62ch; }
.sb-mark { flex: none; }
.sb-mark .ico { color: var(--violet); }

/* Chart: one grid for axis and rows, so every block shares the same x-scale */
.sb-chart { --sb-name: minmax(150px, 1.1fr); --sb-track: minmax(160px, 1.6fr); --sb-v: minmax(150px, 0.9fr); display: flex; flex-direction: column; gap: 4px; }
.sb-axis, .sb-row { display: grid; grid-template-columns: var(--sb-name) var(--sb-track) var(--sb-v); gap: 12px; align-items: center; }
.sb-axis { font-size: var(--t-xs); color: var(--ink-3); padding: 2px 0 6px; }
.sb-axis-l { justify-self: end; grid-column: 1; }
.sb-axis-t { position: relative; height: 16px; grid-column: 2; }
.sb-axis-t i { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-axis-t i.first { transform: none; }
.sb-axis-t i.last { transform: translateX(-100%); }
.sb-axis-r { grid-column: 3; }
.sb-block { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; border-radius: 10px; transition: background-color 0.6s var(--ease-out, ease); }
.sb-block-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--t-sm); margin-bottom: 2px; }
.sb-block-h b { font-weight: 600; color: var(--ink); }
.sb-block-h span { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sb-block-h .sb-note { font-style: italic; }
.sb-lit, .sb-card.sb-lit { background: color-mix(in srgb, var(--violet) 10%, transparent); }

.sb-row { width: 100%; min-height: 44px; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: 10px; text-align: left; color: inherit; }
.sb-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.sb-row:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.sb-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sb-name b { font-weight: 500; color: var(--ink); font-size: var(--t-sm); overflow-wrap: anywhere; }
.sb-name small { font-size: var(--t-xs); color: var(--ink-3); }
.sb-name .sb-also { color: var(--warn-text); }

.sb-track { position: relative; height: 22px; }
.sb-zero { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: var(--line-2); }
.sb-bar { position: absolute; top: 8px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.sb-dot { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--neu); box-shadow: 0 0 0 2px var(--surface); }
.sb-dot.lift { background: var(--pos); }
.sb-dot.drop { background: var(--neg); }
.sb-dot.wobble { background: var(--ink-3); }
.sb-dot.overlap { background: var(--surface); box-shadow: inset 0 0 0 3px var(--warn), 0 0 0 2px var(--surface); }
.sb-none .sb-zero { opacity: 0.6; }
.sb-row:hover .sb-dot, .sb-row:focus-visible .sb-dot { transform: scale(1.15); }

.sb-v { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.sb-v .chip { white-space: nowrap; }
.sb-v .chip .ico { margin-right: 3px; }
.sb-num { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 4ch; text-align: right; }

.sb-foot { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }
.sb-foot .ico { margin-top: 2px; flex: none; }

/* Table view */
.sb-table td { vertical-align: top; }
.sb-table td b { font-weight: 500; }
.sb-tsub { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.sb-table td.r small { color: var(--ink-3); font-size: var(--t-xs); margin-left: 2px; }
.sb-cell { font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 32px; }

/* Narrow card (phone, tablet): each row is a full-width line, name and verdict on top, the dot chart under it */
@container (max-width: 640px) {
  .sb-axis { grid-template-columns: minmax(0, 1fr); }
  .sb-axis-l, .sb-axis-r { display: none; }
  .sb-axis-t { grid-column: 1; margin: 0 7px; }
  .sb-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "b v" "date v" "also also" "track track"; gap: 0 10px; padding-top: 8px; padding-bottom: 8px; }
  .sb-name { display: contents; }
  .sb-name > b { grid-area: b; }
  .sb-name > small { grid-area: date; }
  .sb-name > .sb-also { grid-area: also; margin-top: 2px; }
  .sb-v { grid-area: v; align-self: start; }
  .sb-track { grid-area: track; margin: 10px 7px 2px; }
  .sb-track.sb-none { display: none; }
  .sb-lead { flex-direction: column; }
}

/* Moment detail: link to the posts behind a before/after */
.mark-posts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mark-posts-btn { min-height: 40px; gap: 6px; }

/* Topic detail: did the release help? */
.sb-topic { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.sb-trow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; width: 100%; padding: 10px 12px; border-radius: 12px; text-align: left; color: inherit; background: color-mix(in srgb, var(--ink) 3%, transparent); min-height: 44px; }
.sb-trow:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.sb-tvs { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sb-tv { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); }
.sb-tv small { color: var(--ink-3); font-size: var(--t-xs); }
.sb-tv b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

/* Weekly digest line and small links */
.sb-digest { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.sb-digest .ico { color: var(--violet); margin-top: 3px; flex: none; }
.text-btn.sb-link { display: inline; min-height: 0; padding: 0; margin-left: 4px; white-space: nowrap; }

/* Kind of action in the moment form: six choices as a 3 × 2 grid (a sliding thumb cannot span two rows) */
.mark-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; border-radius: 14px; }
.mark-seg .seg-thumb { display: none; }
.mark-seg button { border-radius: 11px; white-space: normal; line-height: 1.2; min-height: 36px; height: auto; padding: 4px 6px; }
.mark-seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(10, 46, 33, 0.12), 0 0 0 1px var(--line); }

@media (prefers-reduced-motion: reduce) {
  .sb-block { transition: none; }
}