/* Stat blocks, and the side panel they open in.
 *
 * Its own file rather than app.css: four tools use it and the rest don't,
 * and it styles only its own .sb-* classes. */

.sb { font-size: var(--gg-text-sm); line-height: 1.55; }
.sb-head { display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--gg-space-3); }
.sb-name { margin: 0; font-size: var(--gg-text-2xl); color: var(--gg-accent); }
.sb-meta { margin: 0 0 var(--gg-space-3); font-style: italic; color: var(--gg-text-muted); }

.sb-props { display: grid; grid-template-columns: max-content 1fr;
    gap: 2px var(--gg-space-3); margin: 0; padding: var(--gg-space-3) 0;
    border-top: 1px solid var(--gg-border); }
.sb-props dt { font-weight: 700; color: var(--gg-text-muted); }
.sb-props dd { margin: 0; }

.sb-abilities { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--gg-space-1); padding: var(--gg-space-3) 0; text-align: center;
    border-top: 1px solid var(--gg-border); }
.sb-ab-name { font-size: var(--gg-text-xs); font-weight: 700; letter-spacing: .08em;
    color: var(--gg-text-faint); }
.sb-ab-score { font-family: var(--gg-font-mono); font-size: var(--gg-text-xs);
    white-space: nowrap; }

.sb-section { padding-top: var(--gg-space-3); border-top: 1px solid var(--gg-border); }
.sb-section p { margin: 0 0 var(--gg-space-2); }
.sb-h { margin: 0 0 var(--gg-space-2); font-size: var(--gg-text-lg);
    color: var(--gg-accent); }
.sb-entry { font-style: italic; }

/* A monster's name wherever it appears, as a way in to its stat block. */
.sb-link { font: inherit; color: var(--gg-accent); background: none; border: 0;
    padding: 0; cursor: pointer; text-decoration: underline dotted;
    text-underline-offset: 3px; }
.sb-link:hover { text-decoration-style: solid; }

.sb-drawer { width: min(34rem, 100vw); max-width: 100vw; height: 100dvh;
    max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0;
    border-left: 1px solid var(--gg-border); background: var(--gg-surface-1);
    color: var(--gg-text); }
.sb-drawer::backdrop { background: rgb(0 0 0 / .5); }
.sb-drawer-bar { position: sticky; top: 0; display: flex; justify-content: flex-end;
    padding: var(--gg-space-2) var(--gg-space-3); background: var(--gg-surface-1);
    border-bottom: 1px solid var(--gg-border); }
.sb-drawer-body { padding: var(--gg-space-4); }