/* Wik Desktop -- screens/badges.css (pack I): the badge shelf, the level bar, the highlights (BadgeShelf.kt). Prefix .soc- only. */

/* W1/96 DF fix3 (his "same issue at many places - this with large font causes the text to grow vertically"): the level ("Úroveň 7") and its
   points ("305 / 320 b.") each on their OWN line -- the points under the level, start-aligned, never squeezed beside it; the one rule
   kit.actionRow follows for its trailing word (DF fix2). Shared by every addLevel: the room page, the user page, the score card. */
.soc-levelrow { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 2px; }
.soc-levelrow > * { max-width: 100%; overflow-wrap: anywhere; }
.soc-bar8 { height: 8px; margin-top: 6px; border-radius: 4px; }
.soc-bar5 { height: 5px; margin-top: 3px; border-radius: 3px; }
.soc-mt5 { margin-top: 5px; }

.soc-headrow { display: flex; flex-direction: row; align-items: center; padding: 10px 0 6px 0; min-width: 0; gap: 8px; }
.soc-divider { height: 1px; background: var(--c-card-border); flex: 0 0 1px; }
.soc-foldbody[hidden] { display: none; }

/* one badge / quest: picture cell 60dp tall (as wide as its art), the column 10 / 8 padding, the points at the end */
.soc-badgerow { display: flex; flex-direction: row; align-items: center; padding: 8px 0; min-width: 0; }
.soc-badgerow.soc-top { align-items: flex-start; }
.soc-badgepic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.soc-badgecol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 0 8px 0 10px; }
.soc-points { flex: 0 0 auto; }

/* the highlights a profile wears: 48dp cells, the gap gives (2..8dp, none at the ends); past the floor the strip scrolls */
.soc-highlights { display: flex; flex-direction: row; align-items: center; gap: clamp(2px, 1.2vw, 8px); padding-top: 8px; overflow-x: auto;
  scrollbar-width: none; min-width: 0; }
.soc-highlights .soc-badgepic { cursor: pointer; }
.soc-badgename { position: absolute; z-index: 5; padding: 6px 12px; border-radius: 12px; background: var(--c-card2-fill);
  border: 1px solid var(--c-border-accent); color: var(--c-text); text-align: center; max-width: calc(100% - 32px); pointer-events: none; }

/* the whole shelf over the page */
.soc-badgesheet { display: flex; flex-direction: column; padding: 8px 20px; }
.soc-sheetlabel { padding: 16px 0 2px 0; }
.soc-sheetcol { display: flex; flex-direction: column; }
.soc-sheetcol[hidden], .soc-sheetlabel[hidden] { display: none; }