/* ==========================================================================
   Character creator
   Keeps the Lower Levels palette and the pixel font for headings, but sets
   dense UI in a readable sans so stat blocks and spell lists work on a phone.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700&display=swap');

.creator {
	--bg:          #181818;
	--panel:       #232323;
	--panel-2:     #1e1e1e;
	--ink:         #F8F8F2;
	--ink-dim:     #a8a8a2;
	--blue:        #2B7FFF;
	--yellow:      #FFD600;
	--green:       #3ddc84;
	--red:         #ff5c5c;
	--line:        #3a3a3a;

	--pixel: 'Press Start 2P', Courier, monospace;
	--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--radius: 4px;
	--gap: 16px;

	font-family: var(--sans);
	color: var(--ink);
	font-size: 15px;
	line-height: 1.55;
}

.creator *,
.creator *::before,
.creator *::after { box-sizing: border-box; }

.creator h2, .creator h3 {
	font-family: var(--pixel);
	line-height: 1.5;
	color: var(--yellow);
	margin: 0 0 8px;
}
.creator h2 { font-size: 0.95rem; }
.creator h3 { font-size: 0.8rem; }
.creator h4 { font-size: 0.95rem; margin: 0 0 4px; color: var(--yellow); }
.creator h5 { font-size: 0.85rem; margin: 0 0 4px; color: var(--blue); text-transform: uppercase; letter-spacing: 0.04em; }
.creator p { margin: 0 0 10px; }
.creator .muted { color: var(--ink-dim); font-size: 0.88rem; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.creator-shell {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--gap);
}

.screen { display: flex; flex-direction: column; gap: var(--gap); }
.screen__title { margin: 0; }
.screen__hint { color: var(--ink-dim); margin: 0; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.creator .btn,
.creator .toggle-btn {
	font-family: var(--sans);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink);
	background: var(--panel);
	border: 2px solid var(--blue);
	border-radius: var(--radius);
	padding: 9px 16px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.creator .btn:hover:not(:disabled),
.creator .toggle-btn:hover { background: var(--blue); color: #fff; }
.creator .btn:disabled { opacity: 0.4; cursor: not-allowed; }

.creator .btn--primary { background: var(--blue); color: #fff; }
.creator .btn--primary:hover:not(:disabled) { background: var(--yellow); color: #181818; border-color: var(--yellow); }
.creator .btn--danger { border-color: var(--red); color: var(--red); }
.creator .btn--danger:hover { background: var(--red); color: #fff; }

.creator .toggle-btn.is-active { background: var(--yellow); color: #181818; border-color: var(--yellow); }

.creator .link-btn {
	background: none; border: none; padding: 0;
	color: var(--blue); font-family: var(--sans); font-size: 0.88rem;
	cursor: pointer; text-decoration: underline;
}
.creator .link-btn:hover { color: var(--yellow); }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.icon-btn {
	background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-dim);
	border-radius: var(--radius); padding: 5px 9px; font-size: 0.78rem;
	cursor: pointer; font-family: var(--sans);
}
.icon-btn:hover { border-color: var(--blue); color: var(--ink); }
.icon-btn--danger:hover { border-color: var(--red); color: var(--red); }

/* --------------------------------------------------------------------------
   Roster
   -------------------------------------------------------------------------- */

.roster__head {
	display: flex; flex-wrap: wrap; gap: var(--gap);
	justify-content: space-between; align-items: flex-end;
	border-bottom: 2px solid var(--line); padding-bottom: var(--gap);
}
.roster__grid {
	display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.roster-card {
	background: var(--panel); border: 2px solid var(--line);
	border-radius: var(--radius); overflow: hidden;
	display: flex; flex-direction: column;
}
.roster-card:hover { border-color: var(--blue); }
.roster-card__main {
	background: none; border: none; color: inherit; font-family: var(--sans);
	text-align: left; padding: 14px; cursor: pointer; flex: 1;
}
.roster-card__name { font-family: var(--pixel); font-size: 0.72rem; color: var(--yellow); margin: 0 0 8px; line-height: 1.6; }
.roster-card__meta { margin: 0; font-size: 0.88rem; }
.roster-card__date { margin: 4px 0 0; font-size: 0.78rem; color: var(--ink-dim); }
.roster-card__actions {
	display: flex; gap: 6px; padding: 8px 14px 12px; flex-wrap: wrap;
	border-top: 1px solid var(--line);
}
.roster__footer { border-top: 1px solid var(--line); padding-top: 12px; }

.empty-state {
	border: 2px dashed var(--line); border-radius: var(--radius);
	padding: 36px 20px; text-align: center;
}

/* --------------------------------------------------------------------------
   Wizard
   -------------------------------------------------------------------------- */

.wizard__head {
	display: flex; flex-wrap: wrap; gap: 12px;
	align-items: center; justify-content: space-between;
	border-bottom: 2px solid var(--line); padding-bottom: 12px;
}
.wizard__charname { margin: 0; font-size: 0.8rem; }

.step-nav {
	display: flex; gap: 4px; overflow-x: auto;
	padding-bottom: 4px; scrollbar-width: thin;
}
.step-nav__item {
	display: flex; align-items: center; gap: 6px;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 7px 12px;
	color: var(--ink-dim); font-family: var(--sans); font-size: 0.84rem;
	cursor: pointer; white-space: nowrap;
}
.step-nav__item:hover { border-color: var(--blue); color: var(--ink); }
.step-nav__item.is-current { background: var(--blue); border-color: var(--blue); color: #fff; }
.step-nav__item.is-done .step-nav__index { color: var(--green); }
.step-nav__item.is-current .step-nav__index { color: #fff; }
.step-nav__index { font-weight: 700; }

.wizard__main {
	background: var(--panel); border: 2px solid var(--line);
	border-radius: var(--radius); padding: 20px;
	max-height: 62vh; overflow-y: auto;
}
.wizard__heading { border-bottom: 1px solid var(--line); margin-bottom: 16px; padding-bottom: 10px; }
.wizard__heading h3 { margin: 0 0 4px; }
.wizard__body { display: flex; flex-direction: column; gap: 22px; }

.wizard__footer {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; border-top: 2px solid var(--line); padding-top: 12px;
}
.wizard__progress { color: var(--ink-dim); font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   Steps and pickers
   -------------------------------------------------------------------------- */

.step-section { display: flex; flex-direction: column; gap: 10px; }
.step-section__title { margin: 0; }
.step-section__hint { color: var(--ink-dim); font-size: 0.88rem; margin: 0; }

/* Flashed when arrived at from a "Change this" link, so the eye lands on it. */
.step-section.is-flash {
	animation: section-flash 1.6s ease-out;
	border-radius: var(--radius);
}
@keyframes section-flash {
	0%, 25% { box-shadow: 0 0 0 3px var(--yellow); background: rgba(255, 214, 0, 0.09); }
	100% { box-shadow: 0 0 0 3px transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.step-section.is-flash { animation: none; box-shadow: 0 0 0 3px var(--yellow); }
}

.pick-grid {
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.pick-grid--compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.pick-card {
	position: relative; text-align: left; cursor: pointer;
	background: var(--panel-2); border: 2px solid var(--line);
	border-radius: var(--radius); padding: 12px;
	color: var(--ink); font-family: var(--sans);
	display: flex; flex-direction: column; gap: 6px;
	transition: border-color 0.15s, transform 0.1s;
}
.pick-card:hover { border-color: var(--blue); transform: translateY(-1px); }
.pick-card.is-selected { border-color: var(--yellow); background: #2a2818; }
.pick-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pick-card__title { font-weight: 700; color: var(--yellow); font-size: 0.98rem; }
.pick-card__badge {
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
	background: var(--blue); color: #fff; padding: 2px 6px; border-radius: 2px;
}
.pick-card__subtitle { font-size: 0.82rem; color: var(--blue); font-weight: 600; }
.pick-card__blurb {
	margin: 0; font-size: 0.85rem; color: var(--ink-dim); line-height: 1.45;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pick-card__meta { display: flex; flex-wrap: wrap; gap: 4px; }
.pick-card__info {
	align-self: flex-start; font-size: 0.78rem; color: var(--blue);
	text-decoration: underline; cursor: pointer;
}
.pick-card__info:hover { color: var(--yellow); }

.chip {
	display: inline-block; font-size: 0.72rem; padding: 2px 7px;
	background: #2c2c2c; border: 1px solid var(--line); border-radius: 10px;
	color: var(--ink-dim);
}
.chip--granted { border-color: var(--green); color: var(--green); }
.chip--feat { cursor: pointer; border-color: var(--blue); color: var(--blue); font-family: var(--sans); }
.chip--small { font-size: 0.66rem; padding: 1px 5px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Choice lists ------------------------------------------------------------ */

.choice-list {
	display: grid; gap: 6px;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.choice {
	display: flex; align-items: flex-start; gap: 8px;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 8px 10px; cursor: pointer;
}
.choice:hover { border-color: var(--blue); }
.choice.is-chosen { border-color: var(--yellow); background: #2a2818; }
.choice.is-locked, .choice.is-disabled { opacity: 0.45; cursor: not-allowed; }
.choice__body { display: flex; flex-direction: column; }
.choice__label { font-size: 0.9rem; font-weight: 500; }
.choice__hint {
	font-size: 0.76rem; color: var(--ink-dim);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.choice__lock { margin-left: auto; font-size: 0.68rem; color: var(--green); }
.choice { position: relative; }
.choice .info-btn { align-self: flex-start; }
.pick-help { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* Fields ------------------------------------------------------------------ */

.field { display: flex; flex-direction: column; gap: 4px; }
.field__label { font-size: 0.8rem; font-weight: 600; color: var(--blue); }
.field__hint { font-size: 0.76rem; color: var(--ink-dim); }

.creator input[type="text"], .creator input[type="number"],
.creator input[type="search"], .creator select, .creator textarea,
.assign-input, .assign-select, .detail-input, .currency-input, .level-input, .search-input {
	background: #141414; color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius);
	padding: 8px 10px; font-family: var(--sans); font-size: 0.92rem;
	width: 100%;
}
.creator input:focus, .creator select:focus, .creator textarea:focus {
	outline: none; border-color: var(--blue);
}
.creator textarea { resize: vertical; min-height: 60px; }

.assign-grid {
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.detail-grid {
	display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.currency-row {
	display: grid; gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}
.level-row { display: flex; align-items: center; gap: 12px; }
.level-input { max-width: 90px; }
.level-row__note { font-size: 0.85rem; color: var(--ink-dim); }

/* Wide enough for a label, a stepper and a cost without crushing any of
   them. Below this the columns drop to one per row rather than overflowing. */
.pointbuy-grid {
	display: grid; gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.pointbuy-row {
	display: flex; align-items: center; gap: 8px;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 6px 8px;
	/* Nothing here may spill onto the row beside it. */
	overflow: hidden;
}
/* The label is the only part allowed to give way; min-width:0 is what lets a
   flex item shrink below its content at all. */
.pointbuy-row__label {
	flex: 1 1 auto; min-width: 0; font-size: 0.86rem;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pointbuy-row__cost {
	flex: none; font-size: 0.72rem; color: var(--ink-dim);
	min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums;
}
.stepper { flex: none; display: flex; align-items: center; gap: 4px; }
.stepper__btn {
	flex: none;
	width: 28px; height: 28px; background: var(--panel);
	display: flex; align-items: center; justify-content: center;
	padding: 0;
	border: 1px solid var(--blue); color: var(--ink);
	border-radius: var(--radius); cursor: pointer; font-size: 1rem; line-height: 1;
}
.stepper__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.stepper__value {
	flex: none; min-width: 2ch; text-align: center; font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ability-summary {
	display: grid; gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}
.ability-summary__cell {
	background: var(--panel-2); border: 2px solid var(--blue);
	border-radius: var(--radius); padding: 10px 6px; text-align: center;
	display: flex; flex-direction: column; gap: 2px;
}
.ability-summary__abbr { font-size: 0.7rem; color: var(--blue); font-weight: 700; letter-spacing: 0.06em; }
.ability-summary__mod { font-size: 1.5rem; font-weight: 700; color: var(--yellow); font-family: var(--pixel); }
.ability-summary__score { font-size: 0.8rem; color: var(--ink-dim); }

.roll-summary { font-size: 0.85rem; color: var(--ink-dim); }

/* House-rule toggles sit next to the restriction they relax. */
.house-rule-toggle {
	display: flex; align-items: flex-start; gap: 8px;
	background: var(--panel-2); border: 1px dashed var(--line);
	border-radius: var(--radius); padding: 8px 10px;
	font-size: 0.83rem; color: var(--ink-dim); cursor: pointer;
}
.house-rule-toggle:hover { border-color: var(--yellow); color: var(--ink); }
.house-rule-toggle input { width: auto; margin-top: 2px; }

/* Traits and rules text --------------------------------------------------- */

.trait-list, .feature-list { display: flex; flex-direction: column; gap: 12px; }
.trait, .feature-block {
	background: var(--panel-2); border-left: 3px solid var(--blue);
	border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 12px;
}
.trait__name { margin: 0 0 4px; }
.rules-text { font-size: 0.9rem; line-height: 1.6; }
.rules-text p { margin: 0 0 8px; }
.rules-text ul { margin: 6px 0; padding-left: 20px; }
.rules-text table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.85rem; }
.rules-text th, .rules-text td { border: 1px solid var(--line); padding: 4px 7px; text-align: left; }
.rules-text th { background: var(--panel); color: var(--blue); }
/* Cross-references in rules text are clickable and open their entry. */
.rr-ref { color: var(--blue); font-weight: 500; }
.rr-ref[data-ref] {
	cursor: pointer;
	border-bottom: 1px dotted currentColor;
}
.rr-ref[data-ref]:hover,
.rr-ref[data-ref]:focus-visible {
	color: var(--yellow);
	border-bottom-style: solid;
	outline: none;
}
/* Dice expressions are clickable and roll in a small popover. */
.rr-dice {
	color: var(--yellow); font-weight: 600; font-variant-numeric: tabular-nums;
	cursor: pointer; border-bottom: 1px dotted currentColor;
}
.rr-dice:hover { color: #fff; background: rgba(255, 214, 0, 0.15); border-bottom-style: solid; }

/* --------------------------------------------------------------------------
   Dice roller popover
   -------------------------------------------------------------------------- */

.dice-popover {
	position: fixed; z-index: 300; width: 240px;
	background: var(--panel); border: 2px solid var(--yellow);
	border-radius: var(--radius);
	box-shadow: 0 0 0 1px #000, 0 14px 32px rgba(0, 0, 0, 0.7);
	font-family: var(--sans);
}
.dice-popover__head {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	background: var(--panel-2); border-bottom: 1px solid var(--line); padding: 6px 10px;
}
.dice-popover__expr {
	font-size: 0.76rem; font-weight: 700; color: var(--yellow);
	font-variant-numeric: tabular-nums;
}
.dice-popover__close {
	background: none; border: none; color: var(--ink-dim);
	font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.dice-popover__close:hover { color: var(--red); }
.dice-popover__body { padding: 10px; }
.dice-popover__actions {
	display: flex; gap: 6px; padding: 0 10px 10px;
}
.dice-btn { flex: 1; padding: 6px 8px; font-size: 0.78rem; }
.dice-popover__note {
	margin: 0; padding: 0 10px 10px; font-size: 0.68rem; color: var(--ink-dim);
}

.dice-result__total {
	display: flex; align-items: baseline; gap: 8px; justify-content: center;
	margin-bottom: 8px;
}
.dice-result__value {
	font-size: 2rem; font-weight: 700; color: var(--yellow);
	font-variant-numeric: tabular-nums; line-height: 1;
}
.dice-result__crit {
	font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
	background: var(--red); color: #fff; padding: 2px 5px; border-radius: 2px;
}
.dice-result__breakdown { display: flex; flex-direction: column; gap: 5px; }
.dice-group { display: flex; align-items: center; gap: 6px; }
.dice-group__label {
	font-size: 0.68rem; color: var(--blue); font-weight: 700;
	min-width: 40px; font-variant-numeric: tabular-nums;
}
.dice-group__rolls { display: flex; flex-wrap: wrap; gap: 3px; }
.die {
	min-width: 21px; text-align: center; font-size: 0.76rem;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: 2px; padding: 1px 3px; font-variant-numeric: tabular-nums;
}
/* A natural max or a 1 is worth spotting without counting. */
.die.is-max { border-color: var(--green); color: var(--green); font-weight: 700; }
.die.is-min { border-color: var(--red); color: var(--red); }
.dice-result__mod { margin: 8px 0 0; font-size: 0.72rem; color: var(--ink-dim); text-align: center; }
.dice-result__kept { margin: 8px 0 0; font-size: 0.7rem; color: var(--blue); text-align: center; }

.feature-row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.feature-row__level { color: var(--yellow); font-weight: 700; min-width: 34px; font-size: 0.82rem; }

.stat-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; }
.stat-list dt { color: var(--blue); font-size: 0.82rem; font-weight: 600; }
.stat-list dd { margin: 0; font-size: 0.88rem; }

/* Equipment --------------------------------------------------------------- */

.inventory { display: flex; flex-direction: column; gap: 5px; }
.inventory__row {
	display: flex; align-items: center; gap: 8px;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 6px 10px;
}
.inventory__qty { max-width: 62px; }
.inventory__name { flex: 1; font-size: 0.9rem; }
.inventory__equip { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--ink-dim); }
.inventory__equip input { width: auto; }
.inventory__remove {
	background: none; border: none; color: var(--red);
	font-size: 1.15rem; cursor: pointer; line-height: 1; padding: 0 4px;
}

.search-results { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 280px; overflow-y: auto; }
.search-hit {
	display: flex; justify-content: space-between; gap: 10px; align-items: center;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 7px 10px;
	color: var(--ink); font-family: var(--sans); cursor: pointer; text-align: left;
}
.search-hit:hover { border-color: var(--blue); }
.search-hit__meta { font-size: 0.75rem; color: var(--ink-dim); }

/* Spells ------------------------------------------------------------------ */

.spell-levels { display: flex; flex-direction: column; gap: 6px; }
.spell-level {
	background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.spell-level summary {
	cursor: pointer; padding: 8px 12px; font-weight: 600;
	color: var(--yellow); font-size: 0.9rem;
}
.spell-grid {
	display: grid; gap: 5px; padding: 0 12px 12px;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.spell-chip {
	display: flex; align-items: center; gap: 6px;
	background: #141414; border: 1px solid var(--line);
	border-radius: var(--radius); padding: 5px 8px; cursor: pointer; font-size: 0.85rem;
}
.spell-chip:hover { border-color: var(--blue); }
.spell-chip.is-chosen { border-color: var(--yellow); background: #2a2818; }
.spell-chip input { width: auto; }
.spell-chip__name { flex: 1; }
/* The circular "?" that opens an explanation. One affordance everywhere. */
.info-btn {
	flex: 0 0 auto;
	background: none; border: 1px solid var(--line); color: var(--ink-dim);
	border-radius: 50%; width: 19px; height: 19px; padding: 0;
	font-family: var(--sans); font-size: 0.7rem; font-weight: 700; line-height: 1;
	cursor: pointer; margin-left: auto;
	display: inline-flex; align-items: center; justify-content: center;
}
.info-btn:hover, .info-btn:focus-visible {
	border-color: var(--blue); color: var(--blue);
	background: var(--panel); outline: none;
}
/* Inside a compact row the icon sits beside its label, not pushed to the edge. */
.timeline__pick .info-btn,
.prop-chips .info-btn { margin-left: 4px; }

.spell-chip__info {
	background: none; border: 1px solid var(--line); color: var(--ink-dim);
	border-radius: 50%; width: 19px; height: 19px; cursor: pointer;
	font-size: 0.7rem; line-height: 1; padding: 0;
}
.spell-chip__info:hover { border-color: var(--blue); color: var(--blue); }

.timeline__pick-name { font-size: 0.84rem; color: var(--ink); }
.timeline__pick { display: inline-flex; align-items: center; gap: 2px; }

.stat-strip, .combat-grid {
	display: grid; gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.stat-box, .big-stat {
	background: var(--panel-2); border: 2px solid var(--blue);
	border-radius: var(--radius); padding: 9px 6px; text-align: center;
	display: flex; flex-direction: column; gap: 2px;
}
.stat-box__label, .big-stat__label {
	font-size: 0.66rem; color: var(--blue); text-transform: uppercase;
	letter-spacing: 0.05em; font-weight: 700;
}
.stat-box__value, .big-stat__value { font-size: 1.3rem; font-weight: 700; color: var(--yellow); }
.big-stat__hint { font-size: 0.64rem; color: var(--ink-dim); line-height: 1.3; }

.slot-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.slot-box {
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 5px 9px; text-align: center; min-width: 42px;
}
.slot-box__level { display: block; font-size: 0.64rem; color: var(--blue); }
.slot-box__count { display: block; font-weight: 700; color: var(--yellow); }

/* --------------------------------------------------------------------------
   Sheet
   -------------------------------------------------------------------------- */

.sheet { display: flex; flex-direction: column; gap: var(--gap); }
.sheet__header {
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
	align-items: flex-start; border-bottom: 3px solid var(--yellow); padding-bottom: 12px;
}
.sheet__name { margin: 0 0 6px; font-size: 1rem; }
.sheet__subtitle { margin: 0; color: var(--blue); font-weight: 600; font-size: 0.92rem; }
.sheet__meta { margin: 2px 0 0; color: var(--ink-dim); font-size: 0.82rem; }

.sheet__grid {
	display: grid; gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	align-items: start;
}
.sheet__col { display: flex; flex-direction: column; gap: var(--gap); }

.sheet-box {
	background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius);
	overflow: hidden;
}
.sheet-box__head {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	background: var(--panel-2); border-bottom: 2px solid var(--blue); padding: 9px 12px;
}
.sheet-box__title { margin: 0; font-size: 0.7rem; }
.sheet-box__edit {
	background: none; border: 1px solid var(--line); color: var(--ink-dim);
	border-radius: var(--radius); padding: 2px 8px; font-size: 0.68rem;
	cursor: pointer; font-family: var(--sans);
}
.sheet-box__edit:hover { border-color: var(--yellow); color: var(--yellow); }
.feature-detail__body { padding: 0 10px 10px; }
.feature-detail__body .rules-text { padding: 0; }
.sheet-box__body { padding: 12px; }

.ability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ability-cell {
	background: var(--panel-2); border: 2px solid var(--blue); border-radius: var(--radius);
	padding: 9px 4px; text-align: center; display: flex; flex-direction: column; gap: 1px;
}
.ability-cell__name { font-size: 0.66rem; color: var(--blue); font-weight: 700; letter-spacing: 0.06em; }
.ability-cell__mod { font-size: 1.35rem; font-weight: 700; color: var(--yellow); }
.ability-cell__score { font-size: 0.76rem; color: var(--ink-dim); }

.line-list { list-style: none; margin: 0; padding: 0; }
.line-list__row {
	display: flex; align-items: center; gap: 7px;
	padding: 3px 0; border-bottom: 1px solid #2a2a2a; font-size: 0.87rem;
}
.line-list__marker { color: #555; font-size: 0.75rem; }
.line-list__marker.is-on { color: var(--green); }
.line-list__marker.is-expert { color: var(--yellow); }
.line-list__label { flex: 1; }
.line-list__ability { font-size: 0.68rem; color: var(--ink-dim); }
.line-list__value { font-weight: 700; color: var(--yellow); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- hit points -------------------------------------------------- *
   Four rows, each using the full width of the box: caption and adjuster,
   then the numbers, then the bar, then hit dice and the rests. The earlier
   version stacked five centred rows, which left a column of empty space
   down both sides and made the block twice as tall as its content. */
.hp-block {
	display: flex; flex-direction: column; gap: 7px;
	margin-top: 12px; padding-top: 10px;
	border-top: 1px solid var(--line);
}

.hp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hp-row--numbers { align-items: flex-end; }

.hp-label {
	font-size: 0.68rem; letter-spacing: 0.1em; font-weight: 700;
	color: var(--blue); text-transform: uppercase; white-space: nowrap;
}

/* −[ n ]+ , sized as the nudge it is rather than as the main control. */
.hp-adjust { display: flex; align-items: center; gap: 3px; }
.hp-adjust__btn {
	width: 21px; height: 21px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--panel-2); color: var(--ink-dim);
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--sans); font-size: 0.95rem; font-weight: 700;
	line-height: 1; cursor: pointer;
}
.hp-adjust__btn:hover { border-color: var(--blue); color: var(--blue); }
.creator input.hp-adjust__amount {
	width: 2.5em; padding: 2px 0; text-align: center;
	background: var(--panel-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.creator input.hp-adjust__amount::-webkit-outer-spin-button,
.creator input.hp-adjust__amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.creator input.hp-adjust__amount:focus { outline: 1px solid var(--blue); }

/* The big number. Two digits is the normal case, so the field is sized for
   that and sits hard against the slash. */
.hp-readout { display: flex; align-items: baseline; gap: 3px; min-width: 0; }
.creator input.hp-readout__current {
	/* Width comes from the markup, matched to the digit count. */
	min-width: 2ch; padding: 0; border: none; background: none;
	color: var(--yellow); font-family: var(--sans);
	font-size: 2.5rem; font-weight: 700; line-height: 1;
	text-align: center; font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.creator input.hp-readout__current::-webkit-outer-spin-button,
.creator input.hp-readout__current::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.creator input.hp-readout__current:focus { outline: 1px solid var(--blue); border-radius: var(--radius); }
.creator input.hp-readout__current.is-hurt { color: var(--yellow); }
.creator input.hp-readout__current.is-down { color: var(--red); }
.hp-readout__slash { color: var(--line); font-size: 1.6rem; font-weight: 300; }
.hp-readout__max {
	padding: 0; background: none; border: none;
	color: var(--ink-dim); font-family: var(--sans);
	font-size: 1.5rem; font-weight: 700; line-height: 1;
	font-variant-numeric: tabular-nums; cursor: pointer;
	border-bottom: 1px dotted transparent;
}
.hp-readout__max:hover { color: var(--blue); border-bottom-color: var(--blue); }
.hp-readout__max-print { display: none; }

/* Temporary hit points: a small boxed stat, quiet at zero and lit when it
   matters, so it never competes with the main total. */
.hp-temp {
	display: flex; align-items: baseline; gap: 5px;
	padding: 2px 7px;
	border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--panel-2);
}
.hp-temp__label {
	font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
	font-weight: 700; color: var(--ink-dim);
}
.creator input.hp-temp__input {
	width: 1.9em; padding: 0; border: none; background: none;
	color: var(--ink-dim); font-family: var(--sans);
	font-size: 1.05rem; font-weight: 700; text-align: right;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.creator input.hp-temp__input::-webkit-outer-spin-button,
.creator input.hp-temp__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hp-temp.is-on { border-color: var(--blue); background: rgba(43, 127, 255, 0.1); }
.hp-temp.is-on .hp-temp__label { color: var(--blue); }
.creator .hp-temp.is-on input.hp-temp__input { color: var(--blue); }

.hp-bar {
	height: 5px; border-radius: 3px;
	background: var(--panel-2); border: 1px solid var(--line); overflow: hidden;
}
.hp-bar__fill { height: 100%; background: var(--green); transition: width 120ms linear; }
.hp-bar__fill.is-hurt { background: var(--yellow); }
.hp-bar__fill.is-down { background: var(--red); }

.hp-dice { display: flex; align-items: baseline; gap: 5px; font-size: 0.72rem; }
.hp-dice__label {
	font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
	font-weight: 700; color: var(--ink-dim);
}
.hp-dice__value { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hp-dice__value.is-spent { color: var(--red); }
.hp-dice__group {
	padding: 0 5px; border: 1px solid var(--line); border-radius: 999px;
	background: var(--panel-2); color: var(--ink-dim); font-size: 0.65rem;
}
.hp-dice__group.is-spent { opacity: 0.45; text-decoration: line-through; }

/* ---- rest buttons ------------------------------------------------ */
.rest-buttons { display: flex; gap: 5px; }
.rest-buttons .btn { padding: 3px 9px; font-size: 0.68rem; white-space: nowrap; }
.btn--rest { border-color: var(--blue); color: var(--blue); }
.btn--rest:hover { background: var(--blue); color: #fff; }
.btn--rest-long { border-color: var(--yellow); color: var(--yellow); }
.btn--rest-long:hover { background: var(--yellow); color: #181818; }

/* ---- the rest dialogs -------------------------------------------- */
.rest-dialog h4 {
	margin: 14px 0 6px; font-size: 0.7rem; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--blue);
}
.rest-dialog__hp { font-size: 0.95rem; }
.rest-dialog__list { margin: 4px 0 0; padding-left: 18px; font-size: 0.85rem; line-height: 1.6; }
.rest-dialog__list .is-spent { color: var(--yellow); font-weight: 700; }
.rest-dialog__confirm { margin-top: 16px; }

.hd-list { display: flex; flex-direction: column; gap: 6px; }
.hd-row {
	display: flex; align-items: center; gap: 10px;
	padding: 6px 8px; background: var(--panel-2);
	border: 1px solid var(--line); border-radius: var(--radius);
}
.hd-row__die { font-weight: 700; color: var(--yellow); min-width: 2.5em; }
.hd-row__count { flex: 1; font-size: 0.8rem; color: var(--ink-dim); }
.hd-row__count.is-spent { color: var(--red); }

/* ---- limited-use features ---------------------------------------- */
.resource-list { display: flex; flex-direction: column; gap: 10px; }
.resource-row { display: flex; flex-direction: column; gap: 4px; }
.resource-row__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resource-row__name { font-weight: 700; }
.resource-row__recharge {
	padding: 1px 6px; border-radius: 999px; font-size: 0.62rem;
	text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
	border: 1px solid var(--line); background: var(--panel-2);
}
.resource-row__recharge.is-short { color: var(--green); border-color: var(--green); }
.resource-row__recharge.is-long { color: var(--yellow); border-color: var(--yellow); }
.resource-row__pips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.resource-row__count { margin-left: 4px; font-size: 0.72rem; color: var(--ink-dim); }
.resource-row__count.is-spent { color: var(--red); }

.pip {
	width: 16px; height: 16px; padding: 0;
	background: var(--panel-2); border: 1px solid var(--ink-dim);
	border-radius: 3px; cursor: pointer;
}
.pip:hover { border-color: var(--blue); }
/* A spent use is filled in, the way a pencilled tick reads on paper. */
.pip.is-used { background: var(--red); border-color: var(--red); }
.mini-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; color: var(--ink-dim); flex: 1; }

/* The attacks table.
   `table-layout: fixed` is deliberate: with automatic layout the widest
   unbreakable content wins, so a long range ("5 ft · 30/120 thrown") plus a row
   of property chips pushed the table past the panel edge. Fixed layout makes the
   declared widths authoritative and lets the content wrap inside them. */
.sheet-table {
	width: 100%; max-width: 100%; table-layout: fixed;
	border-collapse: collapse; font-size: 0.83rem;
}
.sheet-table th, .sheet-table td {
	border-bottom: 1px solid var(--line); padding: 5px 6px; text-align: left;
	overflow-wrap: anywhere; /* never let one long token force a scrollbar */
}
.sheet-table th { color: var(--blue); font-size: 0.7rem; text-transform: uppercase; }
.sheet-table td { vertical-align: top; }

/* Weapon · Atk · Damage · Range. Properties live on their own full-width row
   underneath, so the four numeric columns stay narrow and aligned. */
.attack-table th:nth-child(1), .attack-table td:nth-child(1) { width: 32%; }
.attack-table th:nth-child(2), .attack-table td:nth-child(2) { width: 12%; text-align: center; }
.attack-table th:nth-child(3), .attack-table td:nth-child(3) { width: 30%; }
.attack-table th:nth-child(4), .attack-table td:nth-child(4) { width: 26%; }

/* The stat row keeps its bottom border off, so a weapon and its notes read as
   one block rather than two. */
.attack-row > td { border-bottom: none; padding-bottom: 1px; }
.attack-notes-row > td { padding-top: 0; padding-bottom: 7px; }
.attack-notes-row .prop-chips { margin-top: 2px; }
.attack-num { font-variant-numeric: tabular-nums; }

.attack-grip {
	display: block; font-size: 0.66rem; color: var(--ink-dim); text-transform: lowercase;
}
.attack-bonus { display: block; font-size: 0.66rem; color: var(--green); }
.attack-props { display: block; font-size: 0.72rem; color: var(--ink-dim); }

/* Reach or range: a core combat number, so it gets its own column. */
.attack-range {
	display: inline-block;
	font-size: 0.76rem; cursor: help; line-height: 1.35;
	border-bottom: 1px dotted var(--line);
}

/* Weapon properties and masteries, each opening its own rules text. */
.prop-chips {
	display: flex; flex-wrap: wrap; gap: 3px;
	min-width: 0; /* lets the flex row wrap instead of widening its cell */
}
.prop-chip {
	font-size: 0.66rem; padding: 1px 5px; cursor: pointer;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: 2px; color: var(--ink-dim); font-weight: 500;
}
.prop-chip:hover, .prop-chip:focus-visible {
	border-color: var(--blue); color: var(--blue); outline: none;
}
/* Masteries are a 2024 mechanic and worth distinguishing from properties. */
.prop-chip--mastery { border-color: var(--yellow); color: var(--yellow); }
.prop-chip--mastery:hover { background: var(--yellow); color: #181818; }
.attack-effect {
	display: block; font-size: 0.72rem; margin-top: 3px;
}
.attack-notes-row td { line-height: 1.4; }
.attack-effect.is-on { color: var(--green); }

.attack-inactive {
	margin-top: 10px; border: 1px dashed var(--line);
	border-radius: var(--radius); background: var(--panel-2);
}
.attack-inactive summary {
	cursor: pointer; padding: 6px 10px; font-size: 0.76rem; color: var(--ink-dim);
}
.attack-inactive summary:hover { color: var(--ink); }
.attack-inactive__list {
	margin: 0; padding: 0 12px 10px 26px; font-size: 0.78rem; color: var(--ink-dim);
}
.attack-inactive__list strong { color: var(--yellow); }

/* One/two-handed selector on versatile weapons. */
.grip-toggle { display: flex; gap: 4px; }
.grip-toggle__btn {
	background: var(--panel); border: 1px solid var(--line); color: var(--ink-dim);
	border-radius: var(--radius); padding: 3px 7px; font-size: 0.7rem;
	cursor: pointer; font-family: var(--sans); white-space: nowrap;
}
.grip-toggle__btn:hover { border-color: var(--blue); color: var(--ink); }
.grip-toggle__btn.is-active { background: var(--yellow); color: #181818; border-color: var(--yellow); }
.grip-toggle__btn.is-blocked { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.grip-toggle__note { font-size: 0.64rem; color: var(--ink-dim); align-self: center; }
details.timeline__row.is-missing { border-color: var(--yellow); }

.item-list { list-style: none; margin: 0; padding: 0; }
.item-list__row {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 3px 0; border-bottom: 1px solid #2a2a2a; font-size: 0.86rem;
}
.sheet__note { font-size: 0.78rem; color: var(--ink-dim); margin: 8px 0 0; }

.feature-accordion { display: flex; flex-direction: column; gap: 4px; }
.feature-detail { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.feature-detail summary {
	cursor: pointer; padding: 7px 10px; display: flex;
	justify-content: space-between; gap: 8px; align-items: center; font-size: 0.87rem;
}
.feature-detail__name { font-weight: 600; color: var(--yellow); }
.feature-detail__source { font-size: 0.7rem; color: var(--ink-dim); }
.feature-detail .rules-text { padding: 0 10px 10px; }

.prof-row { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid #2a2a2a; font-size: 0.85rem; }
.prof-row__label { color: var(--blue); font-weight: 600; min-width: 74px; }
.prof-row__value { flex: 1; text-transform: capitalize; }
/* A category label that links to the rule governing it. */
.prof-row__label.rr-ref { cursor: pointer; }
.item-list__qty { color: var(--ink-dim); font-size: 0.78rem; margin-left: 4px; }
.loadout__name .rr-ref { font-weight: 600; }

.effect-list { margin: 0; padding-left: 18px; font-size: 0.83rem; color: var(--ink-dim); }
.spell-list { margin-top: 10px; }
.spell-list__names { font-size: 0.85rem; margin: 0; }

.detail-readout { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.detail-readout__row p { margin: 0; font-size: 0.87rem; white-space: pre-wrap; }

/* --------------------------------------------------------------------------
   Modal, notices, toast
   -------------------------------------------------------------------------- */

/* Stacked windows: only the bottom one dims the page, each one above is
   offset so the stack reads clearly, and every panel is fully opaque. */
.modal-overlay {
	position: fixed; inset: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 20px; z-index: 100;
	background: transparent;
	pointer-events: none;
	--modal-offset: 0px;
}
.modal-overlay.is-backdrop { background: rgba(0, 0, 0, 0.8); }
.modal-overlay.is-top { pointer-events: auto; }
.modal-overlay > .modal { pointer-events: auto; }

.modal {
	/* Fully opaque: windows overlap, so nothing may show through. */
	background: var(--panel);
	border: 3px solid var(--blue);
	border-radius: var(--radius);
	max-width: 640px; width: 100%; max-height: 84vh;
	display: flex; flex-direction: column;
	transform: translate(var(--modal-offset), var(--modal-offset));
	/* A hard shadow separates one window from the one behind it. */
	box-shadow: 0 0 0 1px #000, 0 18px 44px rgba(0, 0, 0, 0.75);
}
/* Windows deeper in the stack recede slightly so the top one is obvious. */
.modal-overlay:not(.is-top) > .modal { border-color: var(--line); }
.modal-overlay:not(.is-top) > .modal .modal__title { color: var(--ink-dim); }
.modal__head {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 12px 16px; border-bottom: 2px solid var(--line);
}
.modal__title { margin: 0; font-size: 0.78rem; }
.modal__close {
	background: none; border: 1px solid var(--line); color: var(--ink-dim);
	border-radius: var(--radius); padding: 4px 10px; cursor: pointer; font-family: var(--sans);
}
.modal__close:hover { border-color: var(--red); color: var(--red); }
.modal__body { padding: 16px; overflow-y: auto; background: var(--panel); }
.modal__head { background: var(--panel-2); }

.notice {
	border-left: 3px solid var(--blue); background: var(--panel-2);
	padding: 9px 12px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.87rem;
}
.notice--warn { border-left-color: var(--yellow); }

.toast {
	position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
	background: var(--blue); color: #fff; padding: 10px 20px;
	border-radius: var(--radius); font-size: 0.88rem; font-weight: 600;
	z-index: 200; transition: opacity 0.35s;
}
.toast.is-out { opacity: 0; }

.loading { text-align: center; padding: 60px 20px; }
.loading__spinner {
	width: 34px; height: 34px; margin: 0 auto 14px;
	border: 3px solid var(--line); border-top-color: var(--blue);
	border-radius: 50%; animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fatal { border: 2px solid var(--red); border-radius: var(--radius); padding: 20px; }
.fatal h2 { color: var(--red); }

.breakdown { list-style: none; margin: 0; padding: 0; }
.breakdown li {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem;
}

.levelup__summary { color: var(--blue); font-weight: 600; }
.levelup__gain { color: var(--yellow); font-weight: 700; }
.levelup__roll { font-size: 0.85rem; color: var(--ink-dim); }
.levelup__actions { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }

/* Feat sub-choices: each question a feat asks gets its own block. */
.feat-detail {
	margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px;
}
.feat-options { display: flex; flex-direction: column; gap: 14px; }
.feat-option {
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 10px;
}
.feat-option__label { margin: 0 0 6px; color: var(--yellow); }
.feat-option__pending { margin: 6px 0 0; font-size: 0.76rem; color: var(--yellow); }

/* --------------------------------------------------------------------------
   Stat blocks (Wild Shape forms, companions, summons)
   -------------------------------------------------------------------------- */

.statblock {
	background: var(--panel-2); border: 2px solid var(--blue);
	border-radius: var(--radius); padding: 12px;
}
.sb-head { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 8px; }
.sb-name { margin: 0; color: var(--yellow); font-size: 0.95rem; }
.sb-meta { margin: 2px 0 0; font-size: 0.78rem; color: var(--ink-dim); }

.sb-core { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.sb-line { display: flex; gap: 8px; font-size: 0.85rem; }
.sb-line__label { color: var(--blue); font-weight: 600; min-width: 96px; }
.sb-line__value { flex: 1; }

.sb-abilities {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
	margin: 8px 0; padding: 8px 0; border-block: 1px solid var(--line);
}
.sb-ability { text-align: center; display: flex; flex-direction: column; }
.sb-ability__name { font-size: 0.62rem; color: var(--blue); font-weight: 700; }
.sb-ability__score { font-weight: 700; }
.sb-ability__mod { font-size: 0.72rem; color: var(--ink-dim); }

.sb-group { margin-top: 10px; }
.sb-group__title {
	margin: 0 0 4px; color: var(--yellow); font-size: 0.72rem;
	text-transform: uppercase; letter-spacing: 0.05em;
	border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.sb-entry { margin-bottom: 6px; font-size: 0.85rem; }
.sb-entry__name { color: var(--ink); }
.sb-entry .rules-text { display: inline; }

.creature-refs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.creature-refs__label { font-size: 0.78rem; color: var(--ink-dim); }
.chip--creature {
	cursor: pointer; border-color: var(--blue); color: var(--blue);
	font-family: var(--sans); background: var(--panel-2);
}
.chip--creature:hover { background: var(--blue); color: #fff; }

.summon-list { display: flex; flex-direction: column; gap: 6px; }
.summon-row {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 8px 10px;
}
.summon-row__spell { font-weight: 600; color: var(--yellow); font-size: 0.88rem; }
.summon-row .creature-refs { margin-top: 0; }

/* Homebrew badge */
.chip--homebrew, .pick-card__badge--homebrew {
	border-color: var(--green); color: var(--green);
}
.homebrew-list { display: flex; flex-direction: column; gap: 6px; }
.homebrew-row {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 8px 10px; font-size: 0.87rem;
}

/* --------------------------------------------------------------------------
   Spellbook and slot tracking
   -------------------------------------------------------------------------- */

.spell-class { margin-bottom: 12px; }
.spell-class__name { margin: 0 0 6px; color: var(--yellow); font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.spell-class__warn { margin: 6px 0 0; font-size: 0.78rem; color: var(--red); }

/* Clickable slot pips: click an open one to spend it, a spent one to get it back. */
.slot-track { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.slot-track__row { display: flex; align-items: center; gap: 8px; }
.slot-track__level {
	font-size: 0.72rem; color: var(--blue); font-weight: 700;
	min-width: 66px; white-space: nowrap;
}
.slot-track__pips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.slot-track__count {
	font-size: 0.72rem; color: var(--ink-dim);
	min-width: 34px; text-align: right; font-variant-numeric: tabular-nums;
}

.slot-pip {
	width: 20px; height: 20px; padding: 0; cursor: pointer;
	background: var(--panel-2); border: 2px solid var(--blue);
	border-radius: 3px; transition: background 0.12s, border-color 0.12s;
}
.slot-pip:hover { background: var(--blue); }
.slot-pip.is-used {
	background: #2a2a2a; border-color: var(--line);
	position: relative;
}
/* A spent slot reads as struck through rather than merely dimmer. */
.slot-pip.is-used::after {
	content: ""; position: absolute; inset: 3px;
	background: linear-gradient(45deg, transparent 44%, var(--red) 44%, var(--red) 56%, transparent 56%);
}
.slot-pip.is-used:hover { border-color: var(--yellow); }
.slot-pip--pact { border-color: var(--yellow); border-radius: 50%; }
.slot-pip--pact:hover { background: var(--yellow); }

.rest-row { margin-top: 10px; }

.spell-book { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.spell-book__title { margin: 0 0 6px; }
.spell-book__group { display: flex; gap: 8px; margin-bottom: 5px; align-items: baseline; }
.spell-book__label {
	font-size: 0.7rem; color: var(--blue); font-weight: 700;
	min-width: 58px; white-space: nowrap;
}
.spell-book__names { display: flex; flex-wrap: wrap; gap: 4px 8px; flex: 1; }

/* A prepared spell's name opens its description. */
.spell-link {
	background: none; border: none; padding: 0;
	color: var(--ink); font-family: var(--sans); font-size: 0.84rem;
	cursor: pointer; text-align: left;
	border-bottom: 1px dotted var(--blue);
}
.spell-link:hover { color: var(--yellow); border-bottom-color: var(--yellow); }

.spell-chip.is-disabled { opacity: 0.4; }
/* Already granted for free: shown, but not selectable, with the reason on hover. */
.spell-chip.is-granted {
	opacity: 0.55; border-style: dashed; border-color: var(--green); cursor: help;
}
.spell-chip.is-granted .spell-chip__name { text-decoration: line-through; }
.spell-chip__tag {
	font-size: 0.6rem; font-weight: 700; color: var(--blue);
	border: 1px solid var(--line); border-radius: 2px; padding: 0 3px;
}

.spell-detail .sb-core { margin-bottom: 10px; }

/* Spells granted for free, with a badge naming where they came from. */
.granted-list { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.granted-spell {
	display: inline-flex; align-items: center; gap: 5px;
	background: var(--panel-2); border: 1px solid var(--green);
	border-radius: var(--radius); padding: 4px 8px;
}
.granted-spell.is-locked { border-color: var(--line); opacity: 0.6; }
.granted-spell__badge {
	background: var(--green); color: #181818; border: none;
	border-radius: 2px; width: 17px; height: 17px; padding: 0;
	font-size: 0.64rem; font-weight: 700; cursor: pointer;
	font-family: var(--sans); line-height: 1;
}
.granted-spell__badge:hover { background: var(--yellow); }
.granted-spell__from { font-size: 0.68rem; color: var(--ink-dim); }

/* --------------------------------------------------------------------------
   Feature timeline: what you got, in the order you got it
   -------------------------------------------------------------------------- */

.timeline { display: flex; flex-direction: column; gap: 10px; }
.timeline__group { display: flex; flex-direction: column; gap: 4px; }
.timeline__level {
	font-size: 0.68rem; font-weight: 700; color: var(--blue);
	text-transform: uppercase; letter-spacing: 0.06em;
	border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.timeline__rows { display: flex; flex-direction: column; gap: 4px; }

/* A choice row shows the granting feature and the pick side by side. */
.timeline__row.is-missing { border-color: var(--yellow); }
div.timeline__row {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 7px 10px;
}
.timeline__head { display: flex; flex-direction: column; min-width: 110px; }
.timeline__name { font-weight: 600; color: var(--yellow); font-size: 0.86rem; }
.timeline__origin { font-size: 0.68rem; color: var(--ink-dim); }
.timeline__picks { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.timeline__pick { display: inline-flex; align-items: center; }
.timeline__warn { font-size: 0.78rem; color: var(--yellow); }
.timeline__edit {
	background: none; border: 1px solid var(--line); color: var(--ink-dim);
	border-radius: var(--radius); padding: 2px 8px; font-size: 0.7rem;
	cursor: pointer; font-family: var(--sans);
}
.timeline__edit:hover { border-color: var(--yellow); color: var(--yellow); }

/* Worn & held: don/doff, draw/stow and grip, all mid-session. */
.loadout { display: flex; flex-direction: column; gap: 12px; }
.loadout__group { display: flex; flex-direction: column; gap: 4px; }
.loadout__label { margin: 0 0 2px; }

.loadout__row {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 6px 8px;
}
.loadout__row.is-on { border-color: var(--green); }

/* The state IS the button: press it to change it. */
.loadout__toggle {
	background: var(--panel); border: 1px solid var(--line); color: var(--ink-dim);
	border-radius: var(--radius); padding: 3px 9px; cursor: pointer;
	font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em; min-width: 62px;
}
.loadout__row.is-on .loadout__toggle {
	background: var(--green); border-color: var(--green); color: #181818;
}
.loadout__toggle:hover { border-color: var(--yellow); color: var(--yellow); }
.loadout__row.is-on .loadout__toggle:hover { background: var(--yellow); color: #181818; }

.loadout__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.loadout__name { font-size: 0.86rem; font-weight: 600; }
.loadout__note { font-size: 0.68rem; color: var(--ink-dim); }

.loadout__effects {
	display: flex; flex-direction: column; gap: 2px;
	border-top: 1px solid var(--line); padding-top: 8px;
}
.loadout__effect { margin: 0; font-size: 0.74rem; }
.loadout__effect.is-on { color: var(--green); }
.loadout__effect.is-off { color: var(--ink-dim); }

.attack-effect.is-conflict { color: var(--red); }

/* Spellbook entries that are not currently prepared read as inactive. */
.spell-book__group.is-unprepared { opacity: 0.65; }
.spell-book__group.is-unprepared .spell-link { border-bottom-style: dashed; }

/* --------------------------------------------------------------------------
   Build / Play modes and the spell sheet
   -------------------------------------------------------------------------- */

.play__nav {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	border-bottom: 2px solid var(--line); padding-bottom: 10px;
}

/* Two modes, two jobs: making choices vs using the character. */
.mode-switch { display: flex; border: 2px solid var(--blue); border-radius: var(--radius); overflow: hidden; }
.mode-switch__btn {
	background: var(--panel); border: none; color: var(--ink-dim);
	font-family: var(--sans); font-size: 0.84rem; font-weight: 600;
	padding: 7px 16px; cursor: pointer;
}
.mode-switch__btn:hover { background: var(--panel-2); color: var(--ink); }
.mode-switch__btn.is-active { background: var(--blue); color: #fff; cursor: default; }

.page-tabs { display: flex; gap: 4px; margin-left: auto; }
.page-tabs__btn {
	background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-dim);
	border-radius: var(--radius); padding: 6px 14px;
	font-family: var(--sans); font-size: 0.84rem; cursor: pointer;
}
.page-tabs__btn:hover { border-color: var(--blue); color: var(--ink); }
.page-tabs__btn.is-active { background: var(--yellow); color: #181818; border-color: var(--yellow); font-weight: 600; }

/* Only the selected page shows on screen; both print. */
.play__page { display: none; }
.play__page.is-active { display: block; }

.spellsheet { display: flex; flex-direction: column; gap: var(--gap); }
.spellsheet__header {
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
	align-items: flex-start; border-bottom: 3px solid var(--yellow); padding-bottom: 10px;
}
.spellsheet__name { margin: 0; font-size: 0.95rem; }
.spellsheet__meta { margin: 4px 0 0; color: var(--blue); font-size: 0.88rem; font-weight: 600; }

.spellsheet__classes {
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ss-class {
	background: var(--panel); border: 2px solid var(--line);
	border-radius: var(--radius); padding: 10px 12px;
}
.ss-class__name { margin: 0 0 8px; font-size: 0.76rem; }
.ss-class__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-stat {
	background: var(--panel-2); border: 1px solid var(--blue);
	border-radius: var(--radius); padding: 5px 9px; text-align: center;
	display: flex; flex-direction: column; min-width: 62px;
}
.ss-stat.is-warn { border-color: var(--red); }
.ss-stat__label {
	font-size: 0.6rem; color: var(--blue); text-transform: uppercase;
	letter-spacing: 0.05em; font-weight: 700;
}
.ss-stat__value { font-size: 1rem; font-weight: 700; color: var(--yellow); }
.ss-stat.is-warn .ss-stat__value { color: var(--red); }

.ss-section__title {
	margin: 0 0 8px; font-size: 0.74rem;
	border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.ss-slots, .ss-granted, .ss-list {
	background: var(--panel); border: 2px solid var(--line);
	border-radius: var(--radius); padding: 12px;
}
.ss-slot-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ss-slot-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-slot-row__level {
	font-size: 0.76rem; color: var(--blue); font-weight: 700;
	min-width: 78px; white-space: nowrap;
}
.ss-pips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.ss-slot-row__count {
	font-size: 0.72rem; color: var(--ink-dim); min-width: 52px; text-align: right;
}

.ss-level { margin-bottom: 14px; }
.ss-level__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 10px; margin-bottom: 4px;
}
.ss-level__title {
	font-size: 0.72rem; font-weight: 700; color: var(--blue);
	text-transform: uppercase; letter-spacing: 0.05em;
}
.ss-level__slots { font-size: 0.7rem; color: var(--ink-dim); }

.ss-table {
	width: 100%; max-width: 100%; table-layout: fixed;
	border-collapse: collapse; font-size: 0.8rem;
}
.ss-table th, .ss-table td { overflow-wrap: anywhere; }
/* Prep · Spell · Time · Range · Comp · Duration */
.ss-table th.ss-table__prep, .ss-table td.ss-table__prep { width: 34px; }
.ss-table th:nth-last-child(4), .ss-table td:nth-last-child(4) { width: 15%; }
.ss-table th:nth-last-child(3), .ss-table td:nth-last-child(3) { width: 15%; }
.ss-table th:nth-last-child(2), .ss-table td:nth-last-child(2) { width: 12%; }
.ss-table th:nth-last-child(1), .ss-table td:nth-last-child(1) { width: 17%; }
.ss-table th {
	text-align: left; color: var(--blue); font-size: 0.64rem;
	text-transform: uppercase; letter-spacing: 0.04em;
	border-bottom: 1px solid var(--line); padding: 3px 6px; font-weight: 700;
}
.ss-table td { padding: 4px 6px; border-bottom: 1px solid #2a2a2a; vertical-align: middle; }
.ss-table__prep { width: 34px; text-align: center; }
.ss-table__prep input { width: auto; }
/* A spell in the book but not prepared is not usable right now. */
.ss-table tr.is-unprepared { opacity: 0.5; }
.ss-table tr.is-unprepared .spell-link { border-bottom-style: dashed; }

.ss-from { font-size: 0.7rem; color: var(--ink-dim); margin-left: 5px; }
.ss-granted .ss-table td:nth-child(2) { white-space: nowrap; }

.ss-tag {
	display: inline-block; margin-left: 4px;
	font-size: 0.58rem; font-weight: 700; color: var(--blue);
	border: 1px solid var(--line); border-radius: 2px; padding: 0 3px;
}

@media (max-width: 640px) {
	.play__nav { flex-direction: column; align-items: stretch; }
	.page-tabs { margin-left: 0; }
	.spellsheet__classes { grid-template-columns: 1fr; }
	/* Drop the least important columns rather than scrolling sideways. */
	.ss-table th:nth-child(5), .ss-table td:nth-child(5) { display: none; }
	/* Properties already sit on their own full-width row, so nothing needs
	   hiding on a phone -- just tighten the type. */
	.sheet-table { font-size: 0.76rem; }
	.sheet-table th, .sheet-table td { padding: 4px 3px; }
	.attack-range { border-bottom: none; font-size: 0.7rem; }
	.prop-chip { font-size: 0.6rem; padding: 1px 3px; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.creator { font-size: 14px; }
	.creator-shell { padding: 10px; }
	.wizard__main { max-height: none; padding: 14px; }
	.pick-grid, .pick-grid--compact { grid-template-columns: 1fr; }
	.choice-list { grid-template-columns: 1fr 1fr; }
	.ability-grid { grid-template-columns: repeat(2, 1fr); }
	.wizard__head, .roster__head { flex-direction: column; align-items: stretch; }
	.sheet__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Print: turn the sheet into paper
   -------------------------------------------------------------------------- */

@media print {
	body { background: #fff !important; }
	body > header, body > nav, body > footer,
	.legal-footer, .no-print, .step-nav, .wizard__footer, .creator-intro { display: none !important; }

	.creator {
		--bg: #fff; --panel: #fff; --panel-2: #fff;
		--ink: #000; --ink-dim: #444; --blue: #000; --yellow: #000; --line: #999;
		color: #000;
		/* 8.5pt is the size at which a level 5 character's sheet lands on one
		   page. Below that it stops being readable across a table. */
		font-size: 8.5pt;
		line-height: 1.25;
	}
	.creator-shell { max-width: none; padding: 0; }

	.sheet__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.sheet-box { border: 1px solid #000; break-inside: avoid; }
	.sheet-box__head { background: #eee; border-bottom: 1px solid #000; }
	.ability-cell, .stat-box, .big-stat, .slot-box { border: 1px solid #000; }
	.slot-pip { border: 1px solid #000; width: 14px; height: 14px; }
	.slot-pip.is-used::after { background: linear-gradient(45deg, transparent 44%, #000 44%, #000 56%, transparent 56%); }
	.spell-link { border-bottom: none; color: #000; }
	.sheet__header { border-bottom: 2px solid #000; }

	/* Features print as a LIST, not as their full text.
	   Printing every feature's rules expanded is what pushed the sheet onto a
	   third page: the point of the paper copy is the numbers you reach for
	   mid-turn, and the prose is a tap away on the screen. */
	.feature-detail .rules-text,
	.feature-detail .feature-detail__body > .btn-row,
	.feature-detail .timeline__picks .info-btn { display: none !important; }
	.feature-detail { break-inside: avoid; }
	.feature-detail > summary { list-style: none; padding: 1px 0; }
	.feature-detail > summary::-webkit-details-marker { display: none; }
	.feature-detail__name { font-weight: 700; }
	.feature-detail__source { color: #444; font-size: 0.9em; }
	.timeline__group { break-inside: avoid; }
	.timeline__rows { gap: 0 !important; }

	/* Derived explanations, not sheet content. */
	.effects-block, .sheet__note--derived { display: none !important; }

	/* Tighten everything: the sheet has to fit the page, not fill it. */
	.sheet-box__body { padding: 4px 6px; }
	.sheet-box__head { padding: 2px 6px; }
	.sheet-box__title { font-size: 0.72em; }
	.line-list__row { padding: 0; line-height: 1.3; }
	.sheet__grid { gap: 5px; }
	.ability-grid { gap: 3px; }
	.ability-cell { padding: 2px; }
	.big-stat { padding: 3px; }
	.combat-grid { gap: 4px; }
	.feature-block, .timeline__row { margin: 0; }
	.chip, .prop-chip { padding: 0 3px; font-size: 0.85em; }
	.sheet__header { padding-bottom: 4px; margin-bottom: 6px; }
	.sheet__meta, .sheet__subtitle { font-size: 0.85em; }

	/* Each level becomes one line of names; the interactive rows are hidden. */
	.timeline__group { display: flex; gap: 6px; align-items: baseline; break-inside: avoid; }
	.timeline__level { min-width: 5.5em; font-size: 0.8em; font-weight: 700; }
	.timeline__rows { display: none !important; }
	.timeline__print { display: block !important; }
	.statblock { border: 1px solid #000; break-inside: avoid; }
	.sb-abilities { border-block-color: #000; }

	a { text-decoration: none; color: #000; }

	/* Both Play pages print, the spell sheet starting a new page. */
	.play__page { display: block !important; }
	.play__page--spells { break-before: page; page-break-before: always; }
	.mode-switch, .page-tabs { display: none !important; }
	.ss-class, .ss-slots, .ss-granted, .ss-list { border: 1px solid #000; break-inside: avoid; }
	.ss-stat { border: 1px solid #000; }
	.ss-level { break-inside: avoid; }
	.ss-table td, .ss-table th { border-bottom: 1px solid #999; }
	.ss-table tr.is-unprepared { opacity: 1; }
	.spellsheet__header { border-bottom: 2px solid #000; }
	.rr-ref[data-ref] { border-bottom: none; cursor: auto; }
	.rr-dice { border-bottom: none; cursor: auto; background: none; }
	.prop-chip { border: 1px solid #999; color: #000; cursor: auto; }
	.info-btn { display: none !important; }
	.hp-adjust, .rest-buttons, .hp-readout__max { display: none !important; }
	.hp-readout__max-print {
		display: inline; font-weight: 700; font-size: 1.5rem; color: #000;
	}
	.hp-readout__current { color: #000; }
	.hp-temp, .hp-dice__group { border-color: #999; }
	.hp-temp__input, .hp-temp__label, .hp-dice__label { color: #000; }
	.hp-readout__current { color: #000; border-bottom: 1px solid #000; }
	.hp-bar { border-color: #999; }
	.hp-bar__fill { background: #ccc !important; }
	/* Empty boxes to pencil in, filled ones still filled. */
	.pip { border-color: #000; background: #fff; }
	.pip.is-used { background: #000 !important; border-color: #000; }
	.resource-row__recharge { border-color: #999; color: #000; }
	.dice-popover { display: none !important; }
	/* Death saves and rest buttons are screen affordances. */
	.rest-buttons, .hp-bar { display: none !important; }
	@page { margin: 10mm; }
}

/* ---- equipment actions ------------------------------------------- *
   Unpack, choose and sell, on both the build step and the sheet. */
.inventory__act {
	padding: 2px 7px; background: var(--panel-2); color: var(--ink-dim);
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--sans); font-size: 0.68rem; cursor: pointer;
	white-space: nowrap;
}
.inventory__act:hover { border-color: var(--blue); color: var(--blue); }

.item-list__acts { display: inline-flex; gap: 6px; margin-left: auto; }
.item-list__acts .link-btn { font-size: 0.68rem; }

/* ---- selling ----------------------------------------------------- */
.sell-dialog__grid { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0; }
.creator input.sell-dialog__input {
	width: 5em; padding: 4px 6px; text-align: center;
	background: var(--panel-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--sans); font-size: 0.95rem;
}
.sell-dialog__rate { display: flex; align-items: center; gap: 4px; }
.sell-dialog__presets { margin-bottom: 12px; }
.sell-dialog__total { font-size: 1rem; padding: 8px 0; border-top: 1px solid var(--line); }
.sell-dialog__total strong { color: var(--yellow); }

/* ---- choosing a member of a group ------------------------------- */
.group-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.group-choice__btn {
	padding: 8px 14px; background: var(--panel-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--sans); font-size: 0.9rem; cursor: pointer;
}
.group-choice__btn:hover { border-color: var(--blue); color: var(--blue); }

/* ---- the item builder ------------------------------------------- */
.creator input.item-builder__name, .creator textarea.item-builder__notes {
	width: 100%; padding: 6px 8px;
	background: var(--panel-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--sans); font-size: 0.95rem;
}
.creator textarea.item-builder__notes { resize: vertical; line-height: 1.5; }
.item-builder__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
.creator .item-builder__grid input, .creator .item-builder__grid select {
	width: 100%; padding: 4px 6px;
	background: var(--panel-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--sans); font-size: 0.9rem;
}
.item-builder__results { margin-top: 8px; }
.item-builder__hits { display: flex; flex-wrap: wrap; gap: 6px; }
.item-builder__hit {
	padding: 3px 8px; background: var(--panel-2); color: var(--ink-dim);
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--sans); font-size: 0.78rem; cursor: pointer;
}
.item-builder__hit:hover { border-color: var(--blue); color: var(--blue); }
.item-builder__hit.is-active { border-color: var(--yellow); color: var(--yellow); }
.item-builder__base { margin-top: 8px; font-size: 0.85rem; }
.item-builder__actions { margin-top: 18px; }

.checkbox-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 0.9rem; }

.custom-item-list { list-style: none; margin: 12px 0 0; padding: 0; }
.custom-item-list__row {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 6px 0; border-bottom: 1px solid var(--line);
}
.custom-item-list__name { font-weight: 700; }
.custom-item-list__meta { flex: 1; font-size: 0.75rem; color: var(--ink-dim); }

/* ---- languages --------------------------------------------------- */
.lang-known { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lang-chip {
	display: inline-flex; align-items: baseline; gap: 5px;
	padding: 2px 8px; background: var(--panel-2);
	border: 1px solid var(--line); border-radius: 999px; font-size: 0.82rem;
}
.lang-chip__src { font-size: 0.65rem; color: var(--ink-dim); }

/* ---- slot recovery (Arcane Recovery and friends) ----------------- */
.recovery-dialog__budget {
	margin: 12px 0; padding: 8px 10px;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius);
}
.recovery-dialog__budget strong { color: var(--yellow); }
.recovery-list { display: flex; flex-direction: column; gap: 6px; }
.recovery-row {
	display: flex; align-items: center; gap: 12px;
	padding: 6px 10px; background: var(--panel-2);
	border: 1px solid var(--line); border-radius: var(--radius);
}
.recovery-row__level { font-weight: 700; min-width: 5.5em; }
.recovery-row__spent { flex: 1; font-size: 0.8rem; color: var(--ink-dim); }
.recovery-row__controls { display: flex; align-items: center; gap: 6px; }
.recovery-row__count {
	min-width: 1.6em; text-align: center; font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---- editing the hit point maximum ------------------------------- */
.hp-max-dialog__field {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; margin: 14px 0 6px;
}
.creator .hp-max-dialog__field input {
	width: 5em; padding: 4px 6px; text-align: center;
	font-size: 0.95rem; font-weight: 700;
}

/* ---- weapon mastery index --------------------------------------- *
   Each mastery is a disclosure: the rule on top, the weapons that carry it
   underneath, so "what does Sap do" and "what has Sap" are one answer. */
.mastery-index { display: flex; flex-direction: column; gap: 6px; }
.mastery-index__item {
	border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--panel-2);
}
.mastery-index__summary {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none;
}
.mastery-index__summary::-webkit-details-marker { display: none; }
.mastery-index__summary:hover .mastery-index__name { color: var(--blue); }
.mastery-index__name { font-weight: 700; font-size: 0.95rem; }
.mastery-index__count { font-size: 0.7rem; color: var(--ink-dim); white-space: nowrap; }
.mastery-index__body { padding: 0 10px 10px; }
.mastery-index__item[open] .mastery-index__summary { border-bottom: 1px solid var(--line); }

.mastery-weapon-index { margin-top: 10px; }
.mastery-weapon-index__head {
	margin: 0 0 6px; font-size: 0.68rem; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--blue); font-weight: 700;
}
.mastery-group { margin-bottom: 8px; }
.mastery-group__label {
	margin: 0 0 4px; font-size: 0.62rem; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--ink-dim); font-weight: 700;
}
.mastery-weapons { display: flex; flex-wrap: wrap; gap: 5px; }
.mastery-weapon { display: inline-flex; align-items: baseline; gap: 4px; }
.mastery-weapon__name {
	padding: 2px 7px; border-radius: 999px;
	border: 1px solid var(--line); background: var(--bg);
	font-size: 0.76rem; cursor: pointer;
}
.mastery-weapon__name:hover { border-color: var(--blue); color: var(--blue); }
.mastery-weapon__tag { font-size: 0.6rem; color: var(--ink-dim); text-transform: uppercase; }
.mastery-weapon__note {
	max-width: 15em; font-size: 0.62rem; color: var(--yellow);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Text that 5etools links to a search page or a book chapter: real prose, but
   nothing this database can open, so it must not look clickable. */
.rr-plain { font-style: normal; }

/* ================================================================== *
 * The compendium: items, spells and feats to read rather than choose
 * ================================================================== */
.screen--compendium { display: flex; flex-direction: column; gap: var(--gap); }

.compendium__head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: var(--gap); flex-wrap: wrap;
}

.compendium__tabs {
	display: flex; gap: 2px;
	border-bottom: 1px solid var(--line);
}
.compendium__tab {
	padding: 8px 18px; background: none; color: var(--ink-dim);
	border: 1px solid transparent; border-bottom: none;
	border-radius: var(--radius) var(--radius) 0 0;
	font-family: var(--sans); font-size: 0.9rem; font-weight: 700;
	cursor: pointer; margin-bottom: -1px;
}
.compendium__tab:hover { color: var(--ink); }
.compendium__tab.is-active {
	background: var(--panel); color: var(--yellow);
	border-color: var(--line); border-bottom-color: var(--panel);
}

/* ---- the guide --------------------------------------------------- */
.compendium__help {
	background: var(--panel); border: 1px solid var(--line);
	border-radius: var(--radius);
}
.compendium__help > summary {
	padding: 8px 12px; cursor: pointer;
	font-size: 0.82rem; font-weight: 700; color: var(--blue);
}
.compendium__help-body { padding: 0 12px 12px; font-size: 0.85rem; line-height: 1.6; }
.compendium__rules { margin: 8px 0; padding-left: 20px; }
.compendium__rules li { margin-bottom: 3px; }
.compendium__help code, .compendium__example code {
	padding: 1px 5px; border-radius: 3px;
	background: var(--bg); border: 1px solid var(--line);
	color: var(--yellow); font-family: ui-monospace, Consolas, monospace;
	font-size: 0.82em;
}
.compendium__examples { margin-top: 10px; }
.compendium__examples h5 {
	margin: 0 0 6px; font-size: 0.65rem; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--ink-dim);
}
.compendium__example { margin: 3px 0; }

/* ---- search and sort --------------------------------------------- */
.compendium__controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.creator input.compendium__search { flex: 1; min-width: 240px; }
.compendium__sort { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-dim); }
.creator .compendium__sort select { width: auto; padding: 6px 8px; font-size: 0.85rem; }

/* ---- tag chips --------------------------------------------------- */
.compendium__facets { display: flex; flex-direction: column; gap: 7px; }
.facet { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.facet__label {
	min-width: 8.5em; font-size: 0.62rem; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--ink-dim); font-weight: 700;
}
.facet__chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.facet__chip {
	display: inline-flex; align-items: baseline; gap: 5px;
	padding: 2px 8px; border-radius: 999px;
	background: var(--panel-2); color: var(--ink-dim);
	border: 1px solid var(--line);
	font-family: var(--sans); font-size: 0.74rem; cursor: pointer;
	text-transform: capitalize;
}
.facet__chip:hover { border-color: var(--blue); color: var(--blue); }
.facet__chip.is-on {
	background: var(--blue); border-color: var(--blue); color: #fff;
}
.facet__count { font-size: 0.62rem; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* ---- results ----------------------------------------------------- */
.compendium__summary {
	display: flex; align-items: baseline; gap: 8px;
	margin: 0; font-size: 0.8rem; color: var(--ink-dim);
	padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.result-list {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 6px; margin-bottom: var(--gap);
}
.result {
	display: flex; flex-direction: column; gap: 2px;
	padding: 8px 10px; text-align: left;
	background: var(--panel); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--sans); cursor: pointer;
}
.result:hover { border-color: var(--blue); }
.result:hover .result__name { color: var(--blue); }
.result__name { font-size: 0.9rem; font-weight: 700; }
.result__meta {
	font-size: 0.7rem; color: var(--ink-dim); text-transform: capitalize;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.btn--reference { border-color: var(--yellow); color: var(--yellow); }
.btn--reference:hover { background: var(--yellow); color: #181818; }

@media (max-width: 720px) {
	.facet { flex-direction: column; align-items: stretch; gap: 3px; }
	.facet__label { min-width: 0; }
}

/* ---- enchantment templates -------------------------------------- */
.compendium__expand { white-space: nowrap; }
.compendium__expand.is-active { border-color: var(--yellow); color: var(--yellow); }

.variant-targets { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.variant-targets__head {
	margin: 0 0 8px; font-size: 0.68rem; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--blue); font-weight: 700;
}
.variant-targets__list { display: flex; flex-wrap: wrap; gap: 5px; }
.variant-target {
	padding: 2px 8px; border-radius: 999px;
	background: var(--panel-2); color: var(--ink-dim);
	border: 1px solid var(--line);
	font-family: var(--sans); font-size: 0.76rem; cursor: pointer;
}
.variant-target:hover { border-color: var(--blue); color: var(--blue); }

/* ---- suggested ability spreads ----------------------------------- */
.array-suggest { margin-bottom: 14px; }
.array-suggest__intro { margin: 0 0 8px; font-size: 0.82rem; color: var(--ink-dim); }
.array-suggest__options { display: flex; gap: 8px; flex-wrap: wrap; }
.array-suggest__btn {
	flex: 1; min-width: 220px;
	display: flex; flex-direction: column; gap: 3px;
	padding: 9px 12px; text-align: left;
	background: var(--panel-2); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--sans); cursor: pointer;
}
.array-suggest__btn:hover { border-color: var(--blue); }
.array-suggest__btn:hover .array-suggest__name { color: var(--blue); }
.array-suggest__name { font-size: 0.88rem; font-weight: 700; }
.array-suggest__spread {
	font-size: 0.76rem; color: var(--yellow); font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.array-suggest__why { font-size: 0.72rem; color: var(--ink-dim); line-height: 1.4; }

/* ---- adding a language by hand ----------------------------------- */
.lang-custom { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.creator input.lang-custom__input {
	flex: 1; min-width: 0; padding: 6px 8px; font-size: 0.85rem;
}
.lang-hand-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lang-chip--hand { border-color: var(--blue); }
.lang-chip__remove {
	padding: 0 2px; background: none; border: none;
	color: var(--ink-dim); font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.lang-chip__remove:hover { color: var(--red); }

/* ---- the item catalogue ------------------------------------------ */
.catalogue { display: flex; flex-direction: column; gap: 10px; }
.catalogue__cats { display: flex; flex-wrap: wrap; gap: 5px; }
.catalogue__cat {
	display: inline-flex; align-items: baseline; gap: 6px;
	padding: 4px 10px; border-radius: 999px;
	background: var(--panel-2); color: var(--ink-dim);
	border: 1px solid var(--line);
	font-family: var(--sans); font-size: 0.78rem; cursor: pointer;
}
.catalogue__cat:hover { border-color: var(--blue); color: var(--blue); }
.catalogue__cat.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.catalogue__count { font-size: 0.65rem; opacity: 0.75; font-variant-numeric: tabular-nums; }

.catalogue__summary { margin: 0; font-size: 0.75rem; color: var(--ink-dim); }
.catalogue__grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 5px;
}
.catalogue__item {
	display: flex; align-items: stretch; gap: 4px;
	border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--panel-2);
}
.catalogue__item:hover { border-color: var(--blue); }
.catalogue__item.is-carried { border-color: var(--green); }
.catalogue__add {
	flex: 1; min-width: 0;
	display: flex; flex-direction: column; gap: 2px;
	padding: 7px 9px; text-align: left;
	background: none; border: none; color: var(--ink);
	font-family: var(--sans); cursor: pointer;
}
.catalogue__name {
	display: flex; align-items: baseline; gap: 6px;
	font-size: 0.85rem; font-weight: 700;
}
.catalogue__have {
	padding: 0 5px; border-radius: 999px;
	background: rgba(61, 220, 132, 0.15); border: 1px solid var(--green);
	color: var(--green); font-size: 0.58rem; font-weight: 700; white-space: nowrap;
}
.catalogue__meta {
	font-size: 0.68rem; color: var(--ink-dim);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.catalogue__item .info-btn { align-self: center; margin-right: 6px; }

/* ---- the purse, at the top of the pack --------------------------- */
.purse {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-bottom: 12px; padding: 8px 10px;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: var(--radius);
}
.purse__coins { display: flex; gap: 6px; flex-wrap: wrap; }
.purse__coin { display: flex; align-items: center; gap: 4px; }
.purse__abbr {
	font-size: 0.6rem; letter-spacing: 0.06em; font-weight: 700;
	color: var(--ink-dim); text-transform: uppercase;
}
.creator input.purse__input {
	width: 4.2em; padding: 3px 5px; text-align: center;
	font-size: 0.85rem; font-weight: 700;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.creator input.purse__input::-webkit-outer-spin-button,
.creator input.purse__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.purse__total {
	margin-left: auto; font-size: 0.8rem; font-weight: 700;
	color: var(--yellow); white-space: nowrap;
}

/* ---- buying ------------------------------------------------------ */
.catalogue__buy {
	align-self: center; padding: 3px 9px; margin-right: 4px;
	background: var(--panel); color: var(--ink-dim);
	border: 1px solid var(--line); border-radius: var(--radius);
	font-family: var(--sans); font-size: 0.68rem; cursor: pointer;
	white-space: nowrap;
}
.catalogue__buy:hover { border-color: var(--yellow); color: var(--yellow); }
.buy-dialog__purse { margin: 10px 0; font-size: 0.9rem; }
.buy-dialog__purse strong { color: var(--yellow); }
.buy-dialog__short { color: var(--red); font-weight: 700; }

/* ==========================================================================
   Phones
   --------------------------------------------------------------------------
   One codebase, but below 640px the layout is genuinely different rather than
   a squeezed desktop: single column throughout, modals that fill the screen,
   and the wizard's Back/Next pinned to the bottom where a thumb reaches.

   Two rules here are not cosmetic:

   - Inputs are forced to 16px. Below that, iOS Safari zooms the page on focus
     and does not zoom back out, which makes every text field a trap.
   - Touch targets are enlarged under (pointer: coarse) rather than by width,
     so a small laptop window keeps the tighter desktop sizing while an actual
     finger gets something it can hit.
   ========================================================================== */

@media (max-width: 640px) {
	.creator-shell { padding: 8px; }

	/* Nested scroll panes are miserable on a phone: let the page scroll. */
	.wizard__main { max-height: none; overflow-y: visible; border-width: 1px; padding: 12px; }
	.wizard__body { gap: 16px; }

	/* The step bar scrolls sideways and keeps the current step in view. */
	.step-nav { gap: 6px; padding-bottom: 6px; scroll-snap-type: x proximity; }
	.step-nav__item { scroll-snap-align: start; }

	/* Back / Next where a thumb is, not at the end of a long scroll. */
	.wizard__footer {
		position: sticky; bottom: 0; z-index: 20;
		margin: 0 -8px -8px; padding: 10px 12px;
		background: var(--bg); border-top: 2px solid var(--line);
	}
	.wizard__progress { font-size: 0.75rem; }

	/* Everything that was a grid becomes a list. */
	.roster__grid,
	.catalogue__grid,
	.result-list,
	.item-builder__grid,
	.sell-dialog__grid { grid-template-columns: 1fr; }
	.choice-list { grid-template-columns: 1fr; }

	/* The sheet reads top to bottom. */
	.sheet__grid { grid-template-columns: 1fr; gap: 10px; }
	.sheet__header { flex-direction: column; align-items: stretch; gap: 10px; }
	.sheet__actions { justify-content: stretch; }
	.sheet__actions .btn { flex: 1; }

	.compendium__head { flex-direction: column; }
	.compendium__controls { flex-direction: column; align-items: stretch; }
	.compendium__tab { flex: 1; padding: 10px 8px; text-align: center; }

	.purse { gap: 6px; }
	.purse__total { margin-left: 0; width: 100%; }

	.hp-row--head, .hp-row--foot { gap: 6px; }
	.rest-buttons { flex: 1; }
	.rest-buttons .btn { flex: 1; }

	/* Modals fill the screen. A centred 84vh card with a backdrop wastes the
	   space a phone does not have. */
	.modal-overlay { padding: 0; }
	.modal {
		max-width: none; width: 100%; max-height: 100%; height: 100%;
		border-width: 0; border-top: 3px solid var(--blue); border-radius: 0;
	}
	.modal__head {
		position: sticky; top: 0; z-index: 2;
		background: var(--panel); padding: 12px;
	}
	.modal__close { padding: 8px 14px; }
	/* Stacked windows cannot offset on a phone; they simply cover each other. */
	.modal { transform: none !important; }
}

/* Anything driven by a finger rather than a cursor. */
@media (pointer: coarse) {
	/* 16px is the threshold below which iOS zooms in on focus. */
	.creator input[type="text"], .creator input[type="number"],
	.creator input[type="search"], .creator select, .creator textarea {
		font-size: 16px;
	}

	.creator .btn, .step-nav__item, .compendium__tab, .catalogue__cat,
	.facet__chip, .toggle-btn, .group-choice__btn, .mode-switch__btn,
	.page-tabs__btn { min-height: 40px; }

	.info-btn { width: 28px; height: 28px; font-size: 0.9rem; }

	/* Boxes you tick during play: big enough to hit without zooming. */
	.pip { width: 26px; height: 26px; }
	.slot-pip { width: 26px; height: 26px; }

	.hp-adjust__btn { width: 34px; height: 34px; font-size: 1.1rem; }
	/* Point buy is all stepper taps, so these need finger-sized targets too. */
	.stepper__btn { width: 36px; height: 36px; font-size: 1.15rem; }
	.stepper__value { min-width: 2.4ch; font-size: 1rem; }
	.creator input.hp-adjust__amount { width: 3em; font-size: 16px; }
	.creator input.hp-temp__input { width: 2.4em; font-size: 16px; }
	.creator input.hp-readout__current { font-size: 2.5rem; }

	.inventory__act, .catalogue__buy, .link-btn { min-height: 34px; padding: 6px 10px; }
	.item-list__acts { gap: 10px; }
	.lang-chip__remove { min-width: 28px; min-height: 28px; }

	/* Hover styling never un-sticks on touch, so do not rely on it. */
	.pick-card:hover { border-color: var(--line); }
	.pick-card.is-selected { border-color: var(--blue); }
}

/* ---- install / offline ------------------------------------------- */
.install-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.install-note { font-size: 0.78rem; margin: 0 0 8px; max-width: 60ch; }
@media (max-width: 640px) {
	.install-row { flex-direction: column; }
	.install-row .btn { width: 100%; }
}

/* Content that exists only on paper. The print block turns these on. */
.print-only { display: none; }

/* A generated sentence explaining how a piece of armour works. */
.item-armour-note {
	margin: 0 0 10px; padding: 8px 10px;
	background: var(--panel-2); border-left: 2px solid var(--blue);
	border-radius: var(--radius);
	font-size: 0.85rem; line-height: 1.5;
}

/* ---- sharing a character as a link -------------------------------- */
.share-dialog { display: flex; flex-direction: column; gap: 10px; }
.creator input.share-dialog__link {
	width: 100%; font-family: ui-monospace, Consolas, monospace;
	font-size: 0.72rem; padding: 8px;
}
.share-dialog__size { margin: 0; font-size: 0.75rem; color: var(--ink-dim); }
.share-dialog__size.is-warn { color: var(--yellow); }
.share-import__name { margin: 0 0 4px; }

/* ---- locked choices stay readable -------------------------------- *
   A greyed row still has to be legible: the reason it is locked, what it
   does, and the "?" that opens the full text are all things you read while
   planning several levels ahead. */
.choice__note {
	font-size: 0.72rem; font-weight: 700; color: var(--yellow);
	margin-bottom: 1px;
}
.choice.is-locked, .choice.is-disabled { opacity: 1; }
/* Dim the label and description rather than the whole row, so the
   requirement and the info button keep their contrast. */
.choice.is-locked .choice__label,
.choice.is-disabled .choice__label { color: var(--ink-dim); }
.choice.is-locked .choice__hint,
.choice.is-disabled .choice__hint { opacity: 0.7; }
.choice.is-locked input,
.choice.is-disabled input { opacity: 0.4; }
.choice.is-locked { border-style: dashed; }
.choice.is-locked .choice__lock { color: var(--ink-dim); }
/* The "?" is the way into a locked option, so it must never look disabled. */
.choice.is-locked .info-btn, .choice.is-disabled .info-btn { opacity: 1; }