/* --- Drawer root --- */

.drawer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 100;
}

.drawer.no-transition .drawer-panel,
.drawer.no-transition .drawer-tab,
.drawer.no-transition .drawer-backdrop,
body.no-drawer-transition { transition: none !important; }

.drawer-backdrop {
	position: absolute;
	inset: 0;
	/* Matches the unified .dnd-modal-backdrop blur in styles.css so the
	 * drawer's scrim doesn't read as "weaker than a popup". */
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 250ms ease-out;
}

.drawer[data-open="true"][data-pinned="false"] .drawer-backdrop {
	opacity: 1;
	pointer-events: auto;
}

.drawer-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(360px, 92vw);
	background: var(--panel-bg);
	border: 1px solid var(--border);
	pointer-events: auto;
	transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.drawer[data-side="left"] .drawer-panel {
	left: 0;
	border-left: none;
	transform: translateX(-100%);
	box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5);
}

.drawer[data-side="right"] .drawer-panel {
	right: 0;
	border-right: none;
	transform: translateX(100%);
	box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}

.drawer[data-open="true"] .drawer-panel {
	transform: translateX(0);
}

/* --- Edge tab --- */

.drawer-tab {
	position: absolute;
	top: clamp(60px, 10dvh, 120px);
	width: 26px;
	height: 64px;
	background: var(--panel-bg);
	border: 1px solid var(--border);
	color: var(--accent);
	cursor: pointer;
	pointer-events: auto;
	padding: 0;
	font-size: 1rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: left 260ms cubic-bezier(0.2, 0.7, 0.3, 1),
	            right 260ms cubic-bezier(0.2, 0.7, 0.3, 1),
	            background 150ms, color 150ms;
	z-index: 1;
}
.drawer-tab:hover { background: var(--panel-alt); color: var(--accent-hover); }

.drawer[data-side="left"] .drawer-tab {
	left: 0;
	border-left: none;
	border-radius: 0 6px 6px 0;
}
.drawer[data-side="left"][data-open="true"] .drawer-tab { left: min(360px, 92vw); }

.drawer[data-side="right"] .drawer-tab {
	right: 0;
	border-right: none;
	border-radius: 6px 0 0 6px;
}
.drawer[data-side="right"][data-open="true"] .drawer-tab { right: min(360px, 92vw); }

/* Hide the edge tab only when the drawer is pinned AND open. When pinned
   but closed (e.g., user clicked the × close button), the tab needs to
   come back so there's a way to reopen without un-pinning. */
.drawer[data-pinned="true"][data-open="true"] .drawer-tab { display: none; }

.drawer-tab-icon {
	display: inline-block;
	transition: transform 260ms;
	line-height: 1;
}
.drawer[data-side="left"][data-open="false"] .drawer-tab-icon { transform: none; }
.drawer[data-side="left"][data-open="true"] .drawer-tab-icon { transform: rotate(180deg); }
.drawer[data-side="right"][data-open="false"] .drawer-tab-icon { transform: rotate(180deg); }
.drawer[data-side="right"][data-open="true"] .drawer-tab-icon { transform: none; }

/* First-run hint is now handled by showHint() from /js/hints.js —
   see drawer.showFirstCloseNudge. The old .drawer-nudge element +
   its pulse/shift keyframes were retired in favor of the shared
   hint bubble so dismissals land in preferences.dismissedHints. */

/* --- Pinned body padding (desktop) --- */

@media (min-width: 960px) {
	body.drawer-pinned-left { padding-left: min(360px, 92vw); transition: padding 260ms cubic-bezier(0.2, 0.7, 0.3, 1); }
	body.drawer-pinned-right { padding-right: min(360px, 92vw); transition: padding 260ms cubic-bezier(0.2, 0.7, 0.3, 1); }
}

/* --- Drawer header --- */

.drawer-head {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--border);
	background: var(--panel-bg);
	position: sticky;
	top: 0;
	z-index: 1;
}
.dh-btn {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid transparent;
	border-radius: 5px;
	padding: 0.3rem 0.5rem;
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1;
	transition: background 120ms, color 120ms, border-color 120ms;
}
.dh-btn:hover { background: var(--panel-alt); color: var(--fg); }
.dh-btn[data-active="true"] { color: var(--accent); border-color: var(--accent); }
.dh-title { flex: 1; font-weight: 600; color: var(--fg); font-size: 0.95rem; letter-spacing: 0.02em; }

/* --- Header tabs (narrow only, campaign pages) ---
   Hidden by default. Swap in for the title on <1280px when the drawer owns
   a scene (i.e., we're on a campaign page where the external scene panel
   is hidden). */
.dh-tabs {
	flex: 1;
	display: none;
	gap: 0.3rem;
	justify-content: center;
}
.dh-tab {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 0.3rem 0.75rem;
	cursor: pointer;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	transition: color 120ms, border-color 120ms, background 120ms;
}
.dh-tab:hover { color: var(--fg); border-color: var(--muted); }
.dh-tab[aria-selected="true"] {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--panel-alt);
}
/* Drawer becomes menu-only under 1280px now that the scene-glance bar +
   bottom sheet own scene display on phones / tablets. The scene pane is
   still wired (drawer.setScene keeps state in sync) but is never visible. */

/* Pinning is a desktop-only concept — drawer already bails in the click
   handler on narrow screens, but the icon shouldn't even be shown there. */
@media (max-width: 959px) {
	.drawer .pin-btn { display: none; }
}

/* --- Drawer body --- */

.drawer-body {
	flex: 1;
	overflow-y: auto;
	/* No top padding — the sticky menu pins to top:0, so any padding-top
	 * here would be a gap inside the scroll viewport that content
	 * shows through as it scrolls past. Bottom padding is fine. */
	padding: 0 0 0.75rem;
}

/* --- Drawer panes (menu / scene) ---
   On wide screens the menu pane is always visible (the scene panel on the
   right of the chat handles scene display). On narrow screens the two
   panes swap based on which tab is active. */
.drawer-pane[data-pane="menu"] { display: block; }
.drawer-pane[data-pane="scene"] {
	display: none;
	padding: 1rem 0.9rem;
	flex-direction: column;
	gap: 1rem;
}
/* Scene pane is desktop-only context now (≥1280px the standalone
   #scene-panel handles it), but the drawer's scene pane is still useful
   when a desktop user toggles to it via the header tabs. The narrow
   breakpoint no longer reveals it — the glance bar + bottom sheet own
   that surface. */

/* The scene-panel rules in campaign.css style .scene-tag / .scene-combat /
   .scene-npc, but the head has its own layout inside the sticky scene panel
   aside. Tighten it a bit inside the drawer so it doesn't over-emphasize. */
.drawer-pane[data-pane="scene"] .scene-head {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border);
}
.drawer-pane[data-pane="scene"] .scene-head i { color: var(--accent); font-size: 1rem; }
.drawer-pane[data-pane="scene"] .scene-head .scene-label {
	color: var(--accent);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.drawer-section {
	padding: 0.5rem 0.9rem;
}

/* Menu nav sticks to the top of the drawer body's scroll context so the
 * player can hop to another page without scrolling back past the
 * campaign / character / notes sections. The sticky is hoisted out of
 * any wrapping <section> and lives as a direct child of the menu pane
 * — that way its containing block is the whole pane (= the whole
 * scrollable content), not a short Menu section that would scroll
 * away after a few hundred pixels. The user-strip stays non-sticky. */
.drawer-menu-sticky {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--panel-bg);
	padding: 0.5rem 0.9rem;
	border-bottom: 1px solid var(--border);
}
.drawer-menu-sticky h3 {
	margin: 0 0 0.55rem;
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.drawer-menu-sticky h3 .menu-h3-icon {
	margin-right: 0.45rem;
	font-size: 0.85rem;
}
.drawer-menu-sticky .drawer-nav { margin-bottom: 0; }
.drawer-section + .drawer-section {
	border-top: 1px solid var(--border);
	margin-top: 0.5rem;
	padding-top: 1rem;
}
.drawer-section h3 {
	margin: 0 0 0.55rem;
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* --- Nav links --- */

.drawer-nav {
	display: grid;
	gap: 0.15rem;
}
.nav-group { display: contents; }
.nav-item {
	display: flex;
	align-items: stretch;
	border-radius: 5px;
	overflow: hidden;
	transition: background 120ms;
}
.nav-item:hover { background: var(--panel-alt); }
.nav-link {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.7rem;
	color: var(--fg);
	text-decoration: none;
	border-radius: 5px;
	font-size: 0.95rem;
}
.nav-link i {
	width: 1.1rem;
	text-align: center;
	color: var(--muted);
	transition: color 120ms;
}
.nav-item:hover .nav-link i { color: var(--fg); }
.nav-link[data-active="true"] i { color: var(--accent); }
.nav-link[data-active="true"] { color: var(--accent); font-weight: 600; }

/* Developer-styled admin link: when the signed-in user is 'dev' the
   admin entry swaps to the Developer label + terminal icon and wears
   the green treatment so it reads as a distinct privileged tier that
   sits above the gold admin accent. */
.nav-link-dev { color: var(--dev); font-weight: 600; }
.nav-link-dev i { color: var(--dev); }
.nav-group-dev .nav-item:hover .nav-link-dev,
.nav-group-dev .nav-item:hover .nav-link-dev i { color: var(--dev-hover); }

.nav-chev {
	font: inherit;
	background: transparent;
	border: none;
	color: var(--muted);
	cursor: pointer;
	padding: 0.55rem 0.6rem;
	border-radius: 5px;
	font-size: 0.75rem;
	transition: color 120ms, background 120ms;
}
.nav-chev i { transition: transform 200ms ease-out; }
.nav-chev[aria-expanded="true"] i { transform: rotate(180deg); color: var(--accent); }
.nav-chev:hover { color: var(--fg); background: var(--panel-bg); }

.nav-submenu {
	display: grid;
	gap: 0.1rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height 220ms ease-out, padding 220ms ease-out;
	padding: 0 0 0 1.85rem;
}
.nav-submenu.open {
	max-height: 60vh;
	padding-top: 0.15rem;
	padding-bottom: 0.35rem;
}
.nav-sub-link {
	display: grid;
	gap: 0.1rem;
	padding: 0.4rem 0.6rem;
	color: var(--fg);
	text-decoration: none;
	border-radius: 5px;
	border-left: 2px solid var(--border);
	font-size: 0.9rem;
	transition: background 120ms, border-color 120ms;
}
.nav-sub-link:hover {
	background: var(--panel-alt);
	border-left-color: var(--accent);
}
.nav-sub-link .sub-name { color: var(--fg); }
.nav-sub-link .sub-meta { color: var(--muted); font-size: 0.78rem; }
.drawer-nav a:hover { background: var(--panel-alt); }
.drawer-nav a[data-active="true"] {
	background: var(--panel-alt);
	color: var(--accent);
	font-weight: 600;
}

/* Profile menu group — replaces the legacy user-strip section. The
 * top row is a regular nav-link (display name + circle-user icon)
 * with a chevron toggle; the submenu surfaces the email as a non-link
 * info row plus a Log out button styled to read as destructive. */
.nav-group-profile .nav-sub-info {
	cursor: default;
	border-left-color: transparent;
}
.nav-group-profile .nav-sub-info .sub-name {
	color: var(--muted);
	word-break: break-all;
	font-size: 0.85rem;
}
.nav-group-profile .nav-sub-link.nav-sub-info:hover {
	background: transparent;
	border-left-color: transparent;
}
.nav-group-profile .nav-sub-logout {
	font: inherit;
	background: transparent;
	color: var(--err);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 0.35rem 0.7rem;
	margin: 0.25rem 0 0;
	cursor: pointer;
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	transition: border-color 120ms, background 120ms;
	width: 100%;
	justify-content: flex-start;
}
.nav-group-profile .nav-sub-logout:hover { border-color: var(--err); background: rgba(255, 107, 107, 0.08); }

/* Acting-as chip shown in the drawer when an admin is impersonating
   another user. Distinct enough from normal UI to be unmistakable at a
   glance, small enough to stay out of the way. */
.acting-chip {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.7rem;
	margin: 0.5rem 0.7rem;
	border: 1px solid var(--accent);
	background: rgba(255, 215, 0, 0.1);
	border-radius: 5px;
	color: var(--accent);
	font-size: 0.8rem;
	flex-wrap: wrap;
}
.acting-chip i { font-size: 0.85rem; }
.acting-chip .acting-restore {
	margin-left: auto;
	font: inherit;
	background: var(--accent);
	color: #000;
	border: none;
	border-radius: 4px;
	padding: 0.25rem 0.6rem;
	cursor: pointer;
	font-weight: 700;
	font-size: 0.75rem;
}
.acting-chip .acting-restore:hover { filter: brightness(1.1); }

/* --- Character section --- */

.char-head {
	display: grid;
	gap: 0.15rem;
	margin-bottom: 0.8rem;
}
.char-head .name { color: var(--accent); font-weight: 600; font-size: 1rem; }
.char-head .sub { color: var(--muted); font-size: 0.8rem; }

.camp-title {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.2rem;
}
.camp-title-name {
	flex: 1;
	color: var(--fg);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.camp-title-edit {
	font: inherit;
	background: transparent;
	border: none;
	color: var(--muted);
	cursor: pointer;
	padding: 0.2rem 0.35rem;
	border-radius: 4px;
	transition: color 120ms, background 120ms;
}
.camp-title-edit:hover { color: var(--accent); background: var(--panel-alt); }
.camp-subtitle {
	color: var(--muted);
	font-size: 0.82rem;
	margin-bottom: 0.2rem;
	line-height: 1.35;
}
/* Character name inside the campaign subtitle is a button that pops
   the character-info modal. Keep it visually a link — accent color +
   dashed underline on hover — so the player understands it's an
   affordance without it shouting over the subtitle's muted tone. */
.camp-char-link {
	font: inherit;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	color: var(--accent);
	cursor: pointer;
	border-bottom: 1px dashed transparent;
	transition: border-color 120ms;
}
.camp-char-link:hover { border-bottom-color: var(--accent); }
.camp-char-link:focus { outline: none; border-bottom-color: var(--accent); }
.camp-stats {
	color: var(--muted);
	font-size: 0.72rem;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	margin-bottom: 0.25rem;
}

.camp-difficulty {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.4rem 0 0.1rem;
}
.camp-diff-label {
	color: var(--muted);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.diff-badge {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	border: 1px solid;
	cursor: default;
}
.diff-badge.diff-easy {
	color: var(--ok);
	border-color: #2d5a32;
	background: rgba(74, 224, 110, 0.08);
}
.diff-badge.diff-medium {
	color: var(--accent);
	border-color: #5a4420;
	background: rgba(255, 215, 0, 0.08);
}
.diff-badge.diff-hard {
	color: var(--err);
	border-color: #7a2a20;
	background: rgba(255, 107, 107, 0.1);
}

/* Subsection header inside a drawer-section (e.g., "Character" inside the
   top-level "Campaign" section). Smaller and muted vs the main <h3>. */
.drawer-section h4.sub-head {
	color: var(--muted);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin: 0.9rem 0 0.4rem;
	padding-top: 0.55rem;
	border-top: 1px dashed var(--border);
}

.hp-block {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 0.9rem;
	padding: 0.7rem;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 6px;
}
.hp-display {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}
.hp-display .label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.hp-display .current { font-size: 1.5rem; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.hp-display .current.low { color: var(--err); }
.hp-display .slash { color: var(--muted); }
.hp-display .max { color: var(--muted); font-size: 1rem; font-variant-numeric: tabular-nums; }

.hp-bar-wrap {
	position: relative;
	height: 10px;
	background: var(--panel-alt);
	border-radius: 5px;
	overflow: hidden;
}
.hp-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--ok) 0%, #6fb84c 100%);
	border-radius: 5px;
	transition: width 200ms ease-out, background 200ms;
}
.hp-bar.low { background: linear-gradient(90deg, #c08030 0%, #e6c200 100%); }
.hp-bar.crit { background: linear-gradient(90deg, var(--err) 0%, #d33a3a 100%); }

.hp-buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr) auto;
	gap: 0.3rem;
}
.hp-btn {
	font: inherit;
	background: var(--panel-alt);
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 0.35rem 0.2rem;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	transition: background 120ms, border-color 120ms;
}
.hp-btn:hover:not(:disabled) { background: var(--panel-bg); border-color: var(--muted); }
.hp-btn.minus { color: var(--err); }
.hp-btn.plus { color: var(--ok); }
.hp-btn.max {
	grid-column: span 1;
	background: transparent;
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: normal;
}
.hp-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.temp-hp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.2rem;
}
.temp-hp .label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.temp-hp .controls { display: flex; align-items: center; gap: 0.3rem; }
.temp-hp input {
	width: 3rem;
	font: inherit;
	background: var(--panel-alt);
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.2rem 0.4rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.temp-hp input:focus { outline: none; border-color: var(--accent); }
.temp-hp .temp-btn {
	font: inherit;
	background: var(--panel-alt);
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.15rem 0.45rem;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

/* --- Death saves --- */

.death-saves { margin-bottom: 0.9rem; }
.death-saves .ds-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.25rem 0;
}
.death-saves .label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; min-width: 4.5rem; }
.death-saves .pips { display: flex; gap: 0.25rem; }
.ds-pip {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--panel-alt);
	cursor: pointer;
	padding: 0;
	transition: background 120ms, border-color 120ms;
}
.ds-pip:hover { border-color: var(--muted); }
.ds-pip.on.success { background: var(--ok); border-color: var(--ok); }
.ds-pip.on.failure { background: var(--err); border-color: var(--err); }

/* --- Conditions --- */

.conditions-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.3rem;
	margin-top: 0.2rem;
}
.cond-chip {
	font: inherit;
	background: var(--panel-alt);
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 0.35rem 0.5rem;
	cursor: pointer;
	font-size: 0.8rem;
	text-align: center;
	text-transform: capitalize;
	transition: all 120ms;
}
.cond-chip:hover { border-color: var(--muted); }
.cond-chip.on {
	background: rgba(255, 107, 107, 0.12);
	border-color: var(--err);
	color: var(--err);
	font-weight: 600;
}

/* --- Collapsible read-only sections --- */

/* Bulk expand/collapse toggle sits above the first collapsible in the
   sheet so the player can open or close every section with one tap. */
.collapsible-bulk { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
.collapsible-bulk-btn {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.25rem 0.55rem;
	cursor: pointer;
	font-size: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: color 120ms, border-color 120ms;
}
.collapsible-bulk-btn:hover { color: var(--accent); border-color: var(--accent); }
.collapsible-bulk-btn i { font-size: 0.7rem; }

.collapsible { margin-top: 0.4rem; }
/* Pillar/ribbon header — full-width bar, left-accent border, icon +
   uppercase title. Border shifts from muted to accent on open so the
   open section reads as the active pillar. */
.collapsible summary {
	cursor: pointer;
	padding: 0.6rem 0.7rem 0.6rem 0.8rem;
	background: var(--panel-alt);
	border-left: 3px solid var(--muted);
	border-radius: 0 4px 4px 0;
	color: var(--fg);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	transition: background 140ms, border-color 140ms, color 140ms;
}
.collapsible summary::-webkit-details-marker { display: none; }
.collapsible summary .pillar-icon {
	color: var(--accent);
	font-size: 0.9rem;
	width: 1.1rem;
	text-align: center;
	flex: 0 0 auto;
}
.collapsible summary .pillar-title {
	flex: 1;
	min-width: 0;
}
.collapsible summary .pillar-extra {
	color: var(--muted);
	font-size: 0.72rem;
	letter-spacing: 0;
	text-transform: none;
	flex: 0 0 auto;
}
.collapsible summary::after {
	content: "▸";
	color: var(--muted);
	transition: transform 200ms;
	font-size: 0.72rem;
	flex: 0 0 auto;
}
.collapsible[open] summary {
	border-left-color: var(--accent);
	color: var(--accent);
}
.collapsible[open] summary::after { transform: rotate(90deg); }
.collapsible summary:hover {
	color: var(--accent);
	background: rgba(255, 215, 0, 0.04);
}

.ro-grid {
	display: grid;
	gap: 0.25rem;
	padding: 0.2rem 0.4rem 0.5rem;
	font-size: 0.85rem;
}
.ro-grid.two { grid-template-columns: 1fr 1fr; gap: 0.2rem 0.8rem; }
.ro-row { display: flex; justify-content: space-between; gap: 0.5rem; }
.ro-row .k { color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.ro-row .v { color: var(--fg); font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.ro-row .v.prof { color: var(--accent); }
.ro-row .ab-icon {
	color: var(--muted);
	font-size: 0.78rem;
	width: 0.95rem;
	text-align: center;
	opacity: 0.7;
}

/* --- Purse (wealth) --- */

.drawer .purse-row {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.55rem;
	background: linear-gradient(90deg, rgba(255, 215, 0, 0.08), rgba(255, 215, 0, 0));
	border-left: 2px solid var(--accent);
	border-radius: 0 5px 5px 0;
	margin: 0.15rem 0 0.5rem;
}
.drawer .purse-head {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.drawer .purse-head i { color: var(--accent); font-size: 0.85rem; }
.drawer .purse-label {
	color: var(--muted);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.drawer .purse-value {
	flex: 1;
	color: var(--accent);
	font-weight: 600;
	font-size: 0.92rem;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.drawer .purse-edit {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 0.2rem 0.4rem;
	cursor: pointer;
	font-size: 0.75rem;
	transition: color 120ms, border-color 120ms;
}
.drawer .purse-edit:hover { color: var(--accent); border-color: var(--accent); }
.drawer .purse-edit[data-active="true"] {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--panel-alt);
}

.drawer .purse-edit-form {
	display: grid;
	gap: 0.4rem;
	padding: 0.55rem 0.6rem;
	margin: 0 0 0.5rem;
	background: var(--panel-alt);
	border: 1px solid var(--accent);
	border-radius: 5px;
}
/* Explicit override — display: grid above would otherwise beat the
   browser's default display: none on the `hidden` attribute. */
.drawer .purse-edit-form[hidden] { display: none; }
.drawer .purse-edit-inputs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.35rem;
}
.drawer .purse-edit-inputs label {
	display: grid;
	gap: 0.15rem;
	color: var(--muted);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
}
.drawer .purse-edit-inputs input {
	font: inherit;
	background: var(--panel-bg);
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.3rem 0.4rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.drawer .purse-edit-inputs input:focus { outline: none; border-color: var(--accent); }
.drawer .purse-convert {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	align-items: center;
}
.drawer .purse-convert-label {
	color: var(--muted);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-right: 0.15rem;
}
.drawer .purse-convert-btn {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.2rem 0.45rem;
	cursor: pointer;
	font-size: 0.72rem;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	transition: color 120ms, border-color 120ms, background 120ms;
}
.drawer .purse-convert-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--panel-bg); }
.drawer .purse-edit-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.35rem;
}
.drawer .purse-edit-actions button {
	font: inherit;
	border-radius: 4px;
	padding: 0.3rem 0.75rem;
	cursor: pointer;
	font-size: 0.82rem;
}
.drawer #purse-cancel {
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--border);
}
.drawer #purse-cancel:hover { color: var(--fg); border-color: var(--muted); }
.drawer #purse-save {
	background: var(--ok);
	color: #000;
	border: none;
	font-weight: bold;
}
.drawer #purse-save:hover { filter: brightness(1.1); }

/* --- Inventory editor --- */

.drawer #inv-list {
	display: grid;
	gap: 0.2rem;
	padding: 0.2rem 0.1rem 0.35rem;
}
.drawer .inv-item { display: grid; gap: 0.1rem; }
/* Inventory mini-ribbons — smaller siblings of the pillar headers,
   wrapped in their own <details> so each tier (Equipment / Containers
   / Adventuring Gear) collapses independently. The label strip lives
   inside <summary>; chevron rotates on open. */
.drawer .inv-group { margin: 0.45rem 0 0.2rem; }
.drawer .inv-group:first-child { margin-top: 0.15rem; }
.drawer .inv-group-label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--muted);
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	padding: 0.3rem 0.4rem 0.3rem 0.5rem;
	border-left: 2px solid var(--accent);
	background: rgba(255, 215, 0, 0.03);
	cursor: pointer;
	list-style: none;
	transition: background 120ms, color 120ms;
}
.drawer .inv-group-label::-webkit-details-marker { display: none; }
.drawer .inv-group-label:hover {
	background: rgba(255, 215, 0, 0.06);
	color: var(--fg);
}
.drawer .inv-group-label i {
	color: var(--accent);
	font-size: 0.78rem;
	width: 0.9rem;
	text-align: center;
	flex: 0 0 auto;
}
.drawer .inv-group-label .igl-text { flex: 1; }
.drawer .inv-group-label .igl-count {
	color: var(--muted);
	font-size: 0.66rem;
	letter-spacing: 0;
	flex: 0 0 auto;
}
.drawer .inv-group-label::after {
	content: "▸";
	color: var(--muted);
	font-size: 0.66rem;
	transition: transform 200ms;
	flex: 0 0 auto;
}
.drawer .inv-group[open] > .inv-group-label::after {
	transform: rotate(90deg);
}
.drawer .inv-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.4rem;
	align-items: center;
	padding: 0.25rem 0.35rem;
	border-radius: 4px;
}
.drawer .inv-row:hover { background: var(--panel-alt); }
.drawer .inv-chev {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: none;
	padding: 0.1rem 0.25rem;
	cursor: pointer;
	font-size: 0.7rem;
	transition: color 120ms, transform 180ms ease-out;
	line-height: 1;
}
.drawer .inv-chev:hover { color: var(--accent); }
.drawer .inv-item[data-expanded="true"] > .pack-row .inv-chev { transform: rotate(90deg); color: var(--accent); }
.drawer .inv-chev-spacer { width: 1rem; height: 1rem; display: inline-block; }
.drawer .pack-row .inv-name { color: var(--accent); font-weight: 600; }
.drawer .inv-name {
	color: var(--fg);
	font-size: 0.88rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Inventory name is a button that opens the detail popup. Keep it
   visually identical to a plain label — no default button chrome —
   but highlight on hover so players know it's interactive. */
.drawer button.inv-name-btn {
	font: inherit;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
	border-bottom: 1px dashed transparent;
	transition: color 120ms, border-color 120ms;
}
.drawer button.inv-name-btn:hover { color: var(--accent); border-bottom-color: var(--border); }
/* Enchanted items get a small accent-colored wand-sparkles glyph after
   the name + a faint accent tint on the name itself. Subtle so the
   row still reads cleanly, but enough that the player can spot their
   enchanted gear at a glance. */
.drawer .inv-enchant-glyph { color: var(--accent); font-size: 0.78em; margin-left: 0.25rem; }
.drawer button.inv-name-enchanted { color: var(--accent); }
.drawer button.inv-name-enchanted:hover { color: var(--fg); }
.drawer .inv-ctrls {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
}
/* Direct-child only — without the `>`, this rule bleeds into the
   .inv-move-btn nested inside .inv-move-wrap and (worse) into every
   .inv-move-opt inside the popover menu, sizing the option buttons
   to 1.5rem squares so the menu renders as a wide empty box with
   tiny clipped option labels at the top-left. */
.drawer .inv-ctrls > button {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 4px;
	width: 1.5rem;
	height: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 0.8rem;
	padding: 0;
	transition: color 120ms, border-color 120ms;
}
.drawer .inv-ctrls > button:hover { color: var(--fg); border-color: var(--muted); }
/* Move-to-container popover. Replaces the old native <select>, which
   reserved horizontal space for its widest <option> (e.g. "Backpack >
   Coin pouch") and squeezed the item name out of the row. The wrapper
   is the popover's positioning context; the menu floats above neighbor
   rows on z-index. */
.drawer .inv-move-wrap {
	position: relative;
	display: inline-flex;
}
.drawer .inv-move-btn {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 4px;
	width: 1.5rem;
	height: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 0.75rem;
	padding: 0;
	transition: color 120ms, border-color 120ms;
}
.drawer .inv-move-btn:hover { color: var(--accent); border-color: var(--accent); }
.drawer .inv-move-btn:focus { outline: none; border-color: var(--accent); }
.drawer .inv-move-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 20;
	display: grid;
	gap: 0.1rem;
	min-width: 9rem;
	max-width: 14rem;
	max-height: 14rem;
	overflow-y: auto;
	padding: 0.25rem;
	background: var(--panel, var(--bg));
	border: 1px solid var(--border);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.drawer .inv-move-menu[hidden] { display: none; }
.drawer .inv-move-opt {
	font: inherit;
	background: transparent;
	color: var(--fg);
	border: none;
	border-radius: 4px;
	padding: 0.4rem 0.55rem;
	text-align: left;
	cursor: pointer;
	font-size: 0.82rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 120ms, color 120ms;
}
.drawer .inv-move-opt:hover,
.drawer .inv-move-opt:focus { background: var(--panel-alt); color: var(--accent); outline: none; }
.drawer .inv-ctrls .inv-del:hover { color: var(--err); border-color: var(--err); }
.drawer .inv-qty {
	min-width: 1.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-size: 0.85rem;
	color: var(--fg);
	font-family: ui-monospace, Menlo, Consolas, monospace;
}
.drawer .inv-empty {
	color: var(--muted);
	font-style: italic;
	font-size: 0.82rem;
	padding: 0.3rem 0.35rem;
}

/* --- Pack / container sub-contents (recursive, any depth) --- */
.drawer .inv-sublist {
	display: grid;
	gap: 0.1rem;
	margin: 0.1rem 0 0.35rem 1.35rem;
	padding: 0.25rem 0 0.3rem 0.5rem;
	border-left: 1px dashed var(--border);
}
.drawer .inv-subrow {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.4rem;
	align-items: center;
	padding: 0.2rem 0.35rem;
	border-radius: 4px;
}
/* Nested-container chevron rotation mirrors the top-level .pack-row
   rule so a sub-row container opens with the same visual cue. */
.drawer .inv-item[data-expanded="true"] > .inv-subrow .inv-chev { transform: rotate(90deg); color: var(--accent); }
.drawer .inv-subrow:hover { background: var(--panel-alt); }
.drawer .inv-subname {
	color: var(--fg);
	font-size: 0.82rem;
	opacity: 0.9;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.drawer .inv-sub-empty {
	color: var(--muted);
	font-style: italic;
	font-size: 0.78rem;
	padding: 0.2rem 0.35rem;
}
.drawer .inv-subadd {
	display: grid;
	gap: 0.25rem;
	margin-top: 0.25rem;
}
.drawer .sub-add-toggle {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px dashed var(--border);
	border-radius: 4px;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	font-size: 0.78rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	transition: color 120ms, border-color 120ms, background 120ms;
}
.drawer .sub-add-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--panel-alt); }
.drawer .sub-add-menu {
	display: grid;
	gap: 0.15rem;
	padding: 0.25rem 0.1rem;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--bg);
	max-height: 14rem;
	overflow-y: auto;
}
.drawer .sub-add-candidate {
	font: inherit;
	background: transparent;
	color: var(--fg);
	border: none;
	border-radius: 3px;
	padding: 0.3rem 0.5rem;
	cursor: pointer;
	font-size: 0.82rem;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	transition: background 120ms, color 120ms;
}
.drawer .sub-add-candidate:hover { background: var(--panel-alt); color: var(--accent); }
.drawer .sub-add-qty {
	color: var(--muted);
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.75rem;
}

/* Free-form add-item row inside a user-created container. */
.drawer .sub-add-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.3rem;
	margin-top: 0.25rem;
}
.drawer .sub-add-input {
	font: inherit;
	background: var(--panel-alt);
	color: var(--fg);
	border: 1px dashed var(--border);
	border-radius: 4px;
	padding: 0.3rem 0.5rem;
	font-size: 0.82rem;
}
.drawer .sub-add-input:focus { outline: none; border-style: solid; border-color: var(--accent); }
.drawer .sub-add-go {
	font: inherit;
	background: var(--accent);
	color: #000;
	border: none;
	border-radius: 4px;
	width: 1.9rem;
	cursor: pointer;
	font-weight: bold;
	transition: background 0.2s;
}
.drawer .sub-add-go:hover { background: var(--accent-hover); }
.drawer .inv-add {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.3rem;
	margin-top: 0.5rem;
}
.drawer .inv-add input {
	font: inherit;
	background: var(--panel-alt);
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.35rem 0.5rem;
	font-size: 0.85rem;
}
.drawer .inv-add input:focus { outline: none; border-color: var(--accent); }
.drawer .inv-add button {
	font: inherit;
	background: var(--accent);
	color: #000;
	border: none;
	border-radius: 4px;
	width: 1.9rem;
	cursor: pointer;
	font-weight: bold;
	transition: background 0.2s;
}
.drawer .inv-add button:hover { background: var(--accent-hover); }
.drawer .inv-add-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.3rem 0 0.1rem;
	color: var(--muted);
	font-size: 0.78rem;
	cursor: pointer;
	user-select: none;
}
.drawer .inv-add-toggle input { accent-color: var(--accent); cursor: pointer; }
.drawer .inv-add-toggle:hover { color: var(--fg); }

/* --- Notes --- */

.drawer .notes-body {
	display: grid;
	gap: 0.4rem;
	padding: 0.2rem 0.1rem 0.5rem;
}
.drawer .notes-empty {
	color: var(--muted);
	font-style: italic;
	font-size: 0.82rem;
	padding: 0.3rem 0.35rem;
}
.drawer .note-row {
	display: grid;
	gap: 0.25rem;
	padding: 0.45rem 0.55rem;
	/* Subtle box around each note so the list reads as separate cards
	 * instead of a continuous block. The thicker left accent
	 * (creator-border) anchors the row's identity; the thin border on
	 * the other three sides just gives it a frame. */
	border: 1px solid var(--border);
	border-left: 2px solid var(--creator-border);
	background: var(--creator-bg);
	border-radius: 0 5px 5px 0;
	touch-action: pan-y;
	/* Without min-width: 0, the implicit `auto` minimum size of grid
	 * children would let a long unbroken title push the row wider than
	 * the drawer (~360px). Explicit 0 lets every nested ellipsis +
	 * overflow:hidden chain actually take effect. */
	min-width: 0;
}
/* When manualSortNotes is on, the row gets a grip in the upper-left.
 * Two-column grid lets the grip sit on the side while title/text/meta
 * stack to the right. minmax(0, 1fr) (instead of plain 1fr) lets the
 * second column actually shrink to fit the drawer when the header has
 * a long title — plain 1fr's implicit `auto` minimum would let the
 * title push the column wider than the drawer. */
.drawer .note-row--draggable {
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.4rem;
}
.drawer .note-row--draggable > .note-grip { grid-row: 1 / span 3; align-self: stretch; }
.drawer .note-row--draggable > .note-header,
.drawer .note-row--draggable > .note-text,
.drawer .note-row--draggable > .note-meta { grid-column: 2; }
.drawer .note-grip {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 0 0.35rem;
	cursor: grab;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	touch-action: none;
	transition: color 120ms, border-color 120ms, background 120ms;
}
.drawer .note-grip:hover { color: var(--accent); border-color: var(--border); background: var(--panel-alt); }
.drawer .note-grip:active { cursor: grabbing; }
.drawer .note-row--dragging {
	opacity: 0.85;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	border-left-color: var(--accent);
}
/* While any note is being dragged, collapse every titled row's body
 * across the WHOLE list so the player can see the order at a glance
 * without scrolling. The expanded class is preserved in module state
 * — when the drag ends, normal expansion comes back. */
body.notes-dragging .drawer .note-row--collapsible .note-text { display: none; }
.drawer .note-title {
	color: var(--accent);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.01em;
}
/* Title row with the collapse caret. The caret button is small and
 * dim by default; it lights up on hover. Click toggles the body via
 * the .note-row--expanded class. */
.drawer .note-header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	/* Header is a flex container inside a (potentially) constrained
	 * grid cell. Without min-width:0 the flex layout's implicit min
	 * defeats the title's text-overflow:ellipsis. */
	min-width: 0;
}
.drawer .note-header .note-title {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.drawer .note-header .note-title--empty { flex: 1 1 0; min-width: 0; }
/* Action group (view / edit / delete) lives on the right side of the
 * header so the player reaches all three from the same row instead of
 * scanning down to the meta line. Tight spacing — same icon buttons
 * the meta row used to host. */
.drawer .note-header .note-actions {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	flex-shrink: 0;
}
/* DM-Aware badge — eye icon next to the title on tagged notes. Subtle
 * gold tint so it reads as 'this is canon-shared' without competing
 * with the title text. */
.drawer .note-dm-badge {
	display: inline-flex;
	align-items: center;
	color: var(--accent);
	font-size: 0.78rem;
	padding: 0 0.25rem;
	cursor: help;
	flex-shrink: 0;
}
/* Filter segment above the notes list — All / DM-aware / Private. */
.drawer .notes-filter {
	display: flex;
	gap: 0.3rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}
.drawer .notes-filter-btn {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.25rem 0.6rem;
	cursor: pointer;
	font-size: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	transition: color 120ms, border-color 120ms, background 120ms;
}
.drawer .notes-filter-btn:hover { color: var(--fg); border-color: var(--muted); }
.drawer .notes-filter-btn.active {
	color: var(--accent);
	border-color: var(--accent);
	background: rgba(255, 215, 0, 0.06);
}
.drawer .notes-filter-count {
	color: var(--muted);
	font-size: 0.7rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--panel-alt);
}
.drawer .notes-filter-btn.active .notes-filter-count { color: var(--accent); }
.drawer .note-toggle {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid transparent;
	border-radius: 3px;
	padding: 0 0.3rem;
	cursor: pointer;
	font-size: 0.85rem;
	line-height: 1;
	transition: color 120ms, border-color 120ms;
}
.drawer .note-toggle:hover { color: var(--accent); border-color: var(--accent); }
/* Collapsible note (has a title) hides its body until the player
 * expands it. Untitled notes never get this class so they always
 * render their body, same as before. */
.drawer .note-row--collapsible:not(.note-row--expanded) .note-text {
	display: none;
}
/* Persistent yellow pulse — applied when a canon-ref click jumps the
 * player to a specific note. Loops continuously until the player
 * clicks somewhere outside the focused row (handled in drawer.js).
 * Reduced-motion users get a steady tint instead. */
@keyframes note-row-pulse {
	0%, 100% {
		background: rgba(255, 215, 0, 0.16);
		border-left-color: var(--accent);
		box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.25);
	}
	50% {
		background: rgba(255, 215, 0, 0.36);
		border-left-color: var(--accent);
		box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.5);
	}
}
.drawer .note-row--focused {
	animation: note-row-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.drawer .note-row--focused {
		animation: none;
		background: rgba(255, 215, 0, 0.22);
		border-left-color: var(--accent);
		box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.35);
	}
}
.drawer .note-text {
	color: var(--fg);
	font-size: 0.87rem;
	line-height: 1.35;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.drawer .note-meta {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: wrap;
}
/* Color-only — shape comes from the .dnd-tag base (added via JS). */
.drawer .note-tag {
	color: var(--accent);
	border-color: #5a4420;
	background: rgba(255, 215, 0, 0.08);
}
.drawer .note-time {
	color: var(--muted);
	font-size: 0.7rem;
	margin-left: auto;
	font-family: ui-monospace, Menlo, Consolas, monospace;
}
.drawer .note-del {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid transparent;
	border-radius: 3px;
	padding: 0.1rem 0.35rem;
	cursor: pointer;
	font-size: 0.75rem;
	transition: color 120ms, border-color 120ms;
}
.drawer .note-del:hover { color: var(--err); border-color: var(--err); }
.drawer .note-edit {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid transparent;
	border-radius: 3px;
	padding: 0.1rem 0.35rem;
	cursor: pointer;
	font-size: 0.75rem;
	transition: color 120ms, border-color 120ms;
}
.drawer .note-edit:hover { color: var(--accent); border-color: var(--accent); }
.drawer .note-view {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid transparent;
	border-radius: 3px;
	padding: 0.1rem 0.35rem;
	cursor: pointer;
	font-size: 0.75rem;
	transition: color 120ms, border-color 120ms;
}
.drawer .note-view:hover { color: var(--accent); border-color: var(--accent); }

.drawer .notes-add {
	display: grid;
	gap: 0.3rem;
	margin-top: 0.35rem;
}
.drawer .notes-add textarea,
.drawer .notes-add input[type="text"] {
	font: inherit;
	background: var(--panel-alt);
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.4rem 0.55rem;
	font-size: 0.85rem;
	line-height: 1.35;
	resize: vertical;
}
.drawer .notes-add textarea:focus,
.drawer .notes-add input:focus { outline: none; border-color: var(--accent); }

/* Note-tags hint moved to the showHint() registry (sheet.notes-tags) so
 * dismissals land in preferences.dismissedHints alongside every other
 * first-run tip. The old custom popover was replaced; see drawer.js. */
.drawer #note-add-btn {
	font: inherit;
	background: var(--accent);
	color: #000;
	border: none;
	border-radius: 4px;
	padding: 0.4rem 0.7rem;
	cursor: pointer;
	font-weight: bold;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	transition: background 0.2s;
}
.drawer #note-add-btn:hover { background: var(--accent-hover); }

.end-camp-btn {
	font: inherit;
	background: transparent;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 0.4rem 0.75rem;
	cursor: pointer;
	font-size: 0.85rem;
	width: 100%;
	margin-top: 0.6rem;
	transition: color 120ms, border-color 120ms;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
}
.end-camp-btn:hover { color: var(--err); border-color: var(--err); }

/* === Touch-friendly drawer surfaces ===
 * The drawer's desktop density is too tight for finger taps. At
 * mobile widths, bump every common interactive surface to a comfier
 * size — note action icons, the note-add button, the inventory add
 * row, the As-container checkbox. Aiming for ~36-44px touch targets
 * (Apple HIG floor) without inflating the desktop UI. */
@media (max-width: 768px) {
	/* Note action cluster — view / edit / delete sit next to the
	 * title. Add gap + bigger hit area so the player doesn't fat-
	 * finger delete when they meant edit. */
	.drawer .note-header .note-actions { gap: 0.4rem; }
	.drawer .note-view,
	.drawer .note-edit,
	.drawer .note-del {
		padding: 0.45rem 0.55rem;
		font-size: 0.95rem;
		min-width: 2.4rem;
		min-height: 2.4rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	/* Note rows themselves get a bit more vertical breathing room so
	 * the title row doesn't read as cramped against the body. */
	.drawer .note-row { padding: 0.6rem 0.7rem; gap: 0.4rem; }
	.drawer .note-meta { gap: 0.5rem; padding-top: 0.15rem; }
	/* Inventory add row — stretch the + button to match input height
	 * for a confident tap target. Input is already 16px from the
	 * styles.css zoom-trap fix. */
	.drawer .inv-add { gap: 0.4rem; }
	.drawer .inv-add input { padding: 0.6rem 0.7rem; }
	.drawer .inv-add button {
		width: 2.6rem;
		min-height: 2.6rem;
		font-size: 1.1rem;
	}
	/* As-container checkbox row — larger checkbox, more padding,
	 * bigger hit area on the label. */
	.drawer .inv-add-toggle {
		font-size: 0.9rem;
		gap: 0.55rem;
		padding: 0.4rem 0.2rem;
		min-height: 2.4rem;
	}
	.drawer .inv-add-toggle input {
		width: 1.1rem;
		height: 1.1rem;
	}
	/* Note add textarea + tag input + Add button: room to breathe. */
	.drawer .notes-add { gap: 0.5rem; padding: 0.25rem 0; }
	.drawer .notes-add textarea,
	.drawer .notes-add input[type="text"] { padding: 0.6rem 0.7rem; }
	.drawer #note-add-btn {
		padding: 0.7rem 1rem;
		font-size: 0.95rem;
		min-height: 2.6rem;
	}
	/* Inventory chevron + qty buttons — too small at 0.7rem font on
	 * desktop; bump them to feel like real targets. */
	.drawer .inv-chev,
	.drawer .inv-minus,
	.drawer .inv-plus {
		min-width: 2.2rem;
		min-height: 2.2rem;
		padding: 0.4rem 0.5rem;
		font-size: 0.95rem;
	}
	/* Mobile-compact note layout — slightly smaller body when a title
	 * carries the headline, and tighter meta line so a long history
	 * scans faster. The collapse caret already shrinks titled notes
	 * to title-only by default; this just polishes the open state. */
	.drawer .note-row--collapsible .note-text {
		font-size: 0.85rem;
		color: var(--creator);
	}
	.drawer .notes-filter { gap: 0.4rem; margin-bottom: 0.6rem; }
	.drawer .notes-filter-btn {
		padding: 0.45rem 0.7rem;
		font-size: 0.85rem;
		min-height: 2.2rem;
	}
	.drawer .note-dm-badge { font-size: 0.95rem; padding: 0 0.4rem; }
}