/* ================== MARKER SCORE PILLS — the single definition for both platforms ================== Loaded last in the layout so it wins over tables.css / sidebar.css. Scheme (from MarkerStatus#css_class): score-good R green score-het HT amber score-bad S grey score-unknown ? / name without score grey (dimmer) score-neutral trait calls RR/PP/... grey score-seg segregating (`^`, observed) blue score-chance inherited het (`&`, MIGHT segregate) red Colour carries the meaning, the title attribute the source (own / pool / plants / parent / text). Two looks on purpose: - Mobile / light pages: SOLID fill in the meaning colour, white text. - Desktop (.sb-root, dark theme): OUTLINE — transparent fill, coloured border + text. Same meaning colours, different fill treatment per platform. */ :root { --pill-good: #16a34a; --pill-het: #d97706; --pill-bad: #6b7280; --pill-unknown: #9ca3af; --pill-neutral: #6b7280; --pill-seg: #2563eb; --pill-chance: #dc2626; } .sb-root, #marker-evidence-modal { --pill-good: var(--sb-good); --pill-het: var(--sb-warn); --pill-bad: var(--sb-muted-fg); --pill-unknown: var(--sb-text-3); --pill-neutral: var(--sb-text-2); --pill-seg: var(--sb-info); --pill-chance: var(--sb-bad); } /* Base (mobile / light pages): solid fill in the meaning colour, white text, border in the same colour. Desktop (.sb-root) overrides back to outline below — the two platforms deliberately differ. */ .score-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5; background: var(--pill-neutral); border: 1.4px solid var(--pill-neutral); color: #fff; white-space: nowrap; } .score-good { background: var(--pill-good); border-color: var(--pill-good); } .score-het { background: var(--pill-het); border-color: var(--pill-het); } .score-bad { background: var(--pill-bad); border-color: var(--pill-bad); } .score-unknown { background: var(--pill-unknown); border-color: var(--pill-unknown); } .score-neutral { background: var(--pill-neutral); border-color: var(--pill-neutral); } .score-seg { background: var(--pill-seg); border-color: var(--pill-seg); } .score-chance { background: var(--pill-chance); border-color: var(--pill-chance); } /* Desktop (dark sidebar theme): outline style — transparent fill, coloured border + text. #marker-evidence-modal is listed alongside .sb-root because the modal is appended to by application.js (a panel's transform traps position:fixed), which puts it OUTSIDE .sb-root — so it fell back to the mobile solid-fill look on desktop. It cannot simply BE .sb-root: that carries display:flex/height:100vh/overflow:hidden and would break the dialog's layout. */ .sb-root .score-badge, #marker-evidence-modal .score-badge { font-family: var(--sb-font); font-size: 13px; background: transparent; border-color: var(--pill-neutral); color: var(--pill-neutral); } .sb-root .score-good, #marker-evidence-modal .score-good { border-color: var(--pill-good); color: var(--pill-good); } .sb-root .score-het, #marker-evidence-modal .score-het { border-color: var(--pill-het); color: var(--pill-het); } .sb-root .score-bad, #marker-evidence-modal .score-bad { border-color: var(--pill-bad); color: var(--pill-bad); } .sb-root .score-unknown, #marker-evidence-modal .score-unknown { border-color: var(--pill-unknown); color: var(--pill-unknown); } .sb-root .score-neutral, #marker-evidence-modal .score-neutral { border-color: var(--pill-neutral); color: var(--pill-neutral); } .sb-root .score-seg, #marker-evidence-modal .score-seg { border-color: var(--pill-seg); color: var(--pill-seg); } .sb-root .score-chance, #marker-evidence-modal .score-chance { border-color: var(--pill-chance); color: var(--pill-chance); }