Add explanation tooltips for derived values

Hover/focus/tap tooltips show how attributes, derived stats, skill target
numbers and limits, capacity, carry weight and point pools are calculated.
Used in the wizard pages, the side sheet and the summary.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HJhXuLD2Z6hv3Wqeq9UL9K
This commit is contained in:
Claude
2026-10-20 20:40:08 +00:00
parent 5f3b2b2874
commit 4c0d7906cd
7 changed files with 148 additions and 22 deletions
+7
View File
@@ -162,3 +162,10 @@ tr.dim td { opacity: .55; }
.card.tile { display: flex; flex-direction: column; gap: .3rem; }
.card.tile.on { border-color: var(--noxium); box-shadow: inset 0 0 0 1px var(--noxium); background: var(--panel2); }
.tilestepper { margin-top: auto; padding-top: .4rem; justify-content: flex-end; }
.tipped { border-bottom: 1px dotted var(--muted); cursor: help; }
.tipwrap { cursor: help; }
.tipicon { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: .3rem; border: 1px solid var(--muted); border-radius: 50%; color: var(--muted); font-size: .7rem; font-style: italic; font-weight: 700; vertical-align: middle; }
.tipwrap:hover .tipicon, .tipwrap:focus .tipicon { color: var(--noxium); border-color: var(--noxium); }
.tippop { position: fixed; z-index: 1000; max-width: 340px; padding: .55rem .75rem; background: var(--panel2); color: var(--text); border: 1px solid var(--diesium); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.35); font-size: .85rem; line-height: 1.4; pointer-events: none; }
.tippop div + div { margin-top: .35rem; }