/* The stat block, following the layout the printed books and 5etools share:
   parchment ground, a flat rule between blocks, the name and section headings in
   an old-style serif, everything else in a plain text face. */

.statblock {
	padding: .5rem .9rem .9rem;
	background: var(--parchment);
	border-top: 4px solid var(--sb-rule);
	border-bottom: 4px solid var(--sb-rule);
	color: var(--sb-text);
	font: 12.6px/18px var(--sb-body);
}

.sb-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; }
/* the name sits left, the citation right, on one line */
.sb-src {
	flex: none;
	margin-left: auto;
	white-space: nowrap;
	font: 700 26px/1 var(--sb-body);
	color: var(--src-color, var(--sb-head));
}
.sb-src a { color: inherit; text-decoration: none; }
.sb-src a:hover { text-decoration: underline; }
.sb-src small { font-weight: 400; font-size: .8em; opacity: .75; }
.sb-name {
	margin: .1rem 0 0;
	font: 500 22.7px/1.1 var(--sb-disp);
	font-variant: small-caps;
	color: var(--sb-text);
}
.sb-native { font: 400 .95rem/1 var(--sb-disp); color: var(--sb-head); }
.sb-type { margin: .05rem 0 .35rem; font-style: italic; }
.sb-scaled {
	margin: -.1rem 0 .3rem;
	font: 700 10px/1.4 var(--sb-body);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sb-head);
}

/* a flat 2px bar, the way the books set it */
.sb-rule {
	height: 2px;
	margin: .45rem 0;
	background: var(--sb-rule);
}

.sb-line { margin: 0; }
.sb-line b { font-weight: 700; }

.num { font-weight: 700; }

/* Armour class and initiative share a row, initiative flush right under the
   book's name, the way the 2024 blocks are set. */
.sb-ac-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}
.sb-ac-row > * { margin: 0; }

/* The 2024 ability block, laid out as 5etools sets it and tinted as the
   publisher's own pages are: sand and rose across the top row, sage and
   lilac beneath. */
.sb-abilities {
	width: 100%;
	margin: .45rem 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 11px;
	line-height: 1.35;
	color: var(--ab-text);
	text-align: center;
}
.sb-abilities th {
	padding: 0 0 .1rem;
	font: 400 9.5px/1.2 var(--sb-body);
	font-variant: small-caps;
	letter-spacing: .05em;
	color: var(--ab-head);
	background: none;
}
.sb-abilities td { padding: .12rem .1rem; }
.ab-name { font-weight: 700; }
.ab-score { font-weight: 700; }
.ab-name { width: 2.6em; }
.ab-score { width: 2.1em; }
.ab-gap { width: .5rem; background: none !important; }

.ab-top .ab-name, .ab-top .ab-score { background: var(--ab-top-a); }
.ab-top .ab-mod { background: var(--ab-top-b); }
.ab-bottom .ab-name, .ab-bottom .ab-score { background: var(--ab-bot-a); }
.ab-bottom .ab-mod { background: var(--ab-bot-b); }

.sb-abilities .roll { color: inherit; }

.sb-section {
	margin: .7rem 0 .1rem;
	padding-bottom: .05rem;
	border-bottom: 1px solid var(--sb-rule);
	font: 400 18px/1.25 var(--sb-disp);
	font-variant: small-caps;
	color: var(--sb-head);
}
.sb-section .note {
	font: italic 400 10px/1 var(--sb-body);
	font-variant: normal;
	opacity: .7;
}

.sb-entry { margin: .35rem 0; }
.sb-entry--bullet { padding-left: .9rem; text-indent: -.9rem; }
/* a feature the book prints indented beneath its parent */
.sb-sub { margin: .3rem 0 0 1.1rem; }
.sb-sub--bullet { padding-left: .9rem; text-indent: -.9rem; }

/* the eight properties a herb is marked with on its plate in the book */
.sb-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .1rem 0 .35rem; }
.sb-tag {
	padding: .05rem .4rem;
	border: 1px solid var(--sb-rule);
	border-radius: 2px;
	color: var(--sb-rule);
	font: 600 .72rem/1.5 var(--sb-disp);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.sb-entry--bullet::before,
.sb-sub--bullet::before { content: "• "; color: var(--sb-head); }
.sb-entry .en { font-weight: 700; font-style: italic; }
.sb-entry p { margin: .25em 0 0; }

.sb-legendary-header { margin: .3rem 0 .1rem; }

/* the asterisked note under the block: body text, just smaller and quieter */
.sb-note {
	margin: .5rem 0 0;
	font-size: 11.5px;
	line-height: 1.45;
}

.sb-foot {
	margin: .7rem 0 0;
	padding-top: .35rem;
	border-top: 1px solid var(--parch-edge);
	font-size: 10px;
	opacity: .7;
}
.sb-foot a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.sb-foot a:hover { color: var(--roll); }
.sb-foot__code { color: var(--src-color, inherit); font-weight: 700; }

/* -------------------------------------------------------------- rollers */

.roller {
	color: var(--roll);
	cursor: pointer;
	border-bottom: 1px dotted transparent;
}
.roller:hover { color: var(--roll-hover); border-bottom-color: currentColor; }

.ref {
	color: var(--roll);
	cursor: help;
	border-bottom: 1px dotted currentColor;
}
.ref:hover, .ref:focus { color: var(--roll-hover); outline: none; }

/* -------------------------------------------------------------- CR scaling */

.cr-btn {
	margin-left: .3rem;
	padding: 0 .28rem;
	height: 1.15em;
	vertical-align: baseline;
	background: transparent;
	border: 1px solid var(--parch-edge);
	border-radius: 2px;
	cursor: pointer;
	color: var(--sb-head);
	font-size: 11px;
	line-height: 1;
}
.cr-btn:hover,
.cr-btn[aria-expanded="true"] { background: var(--sb-rule); border-color: var(--sb-rule); color: #fff; }
.cr-btn svg { fill: currentColor; vertical-align: -1px; }

.cr-slider {
	margin: .35rem 0 .45rem;
	padding: .3rem .45rem .15rem;
	border: 1px solid var(--parch-edge);
	border-radius: 2px;
}
.cr-slider__row { display: flex; align-items: center; gap: .5rem; }
.cr-slider__pips {
	display: flex;
	justify-content: space-between;
	padding-right: 3.1rem;
	font: 700 10px/1.6 var(--sb-body);
	opacity: .6;
}
.cr-slider output {
	min-width: 2.6rem;
	padding: .05rem .3rem;
	border: 1px solid var(--parch-edge);
	border-radius: 2px;
	text-align: center;
	font: 700 12.6px/1.4 var(--sb-body);
	color: var(--sb-head);
}
.cr-slider input[type="range"] {
	flex: 1;
	min-width: 0;
	height: 1rem;
	margin: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.cr-slider input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--parch-edge); border-radius: 2px; }
.cr-slider input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 11px; height: 15px; margin-top: -5.5px;
	background: var(--sb-rule); border: 0; border-radius: 2px;
}
.cr-slider input[type="range"]::-moz-range-track { height: 4px; background: var(--parch-edge); border-radius: 2px; }
.cr-slider input[type="range"]::-moz-range-thumb { width: 11px; height: 15px; background: var(--sb-rule); border: 0; border-radius: 2px; }
.cr-slider input[type="range"]:focus-visible { outline: 2px solid var(--sb-rule); outline-offset: 2px; }

@media print {
	.statblock { break-inside: avoid; }
	.cr-btn, .cr-slider { display: none !important; }
	.roller, .ref { color: inherit; border-bottom: 0; background: none; }
	.refpop { display: none !important; }
}