/* ── Self-hosted Cascadia Mono (OFL 1.1, microsoft/cascadia-code v2407.24) ── */
@font-face {
    font-family: "Cascadia Mono";
    src: url("/fonts/cascadia-mono.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
	/* ── Phosphor Refined design tokens ── */
	--bg: #0e0f11;
	--surface: #16181b;
	--surface-2: #1c1f23;
	--surface-3: #101113;
	--text: #e9edf0;
	--text-dim: #9aa3ab;
	--text-faint: #5f6870;
	--border: #262a2f;
	--border-soft: #1d2024;
	--accent: #00f5b7;
	--accent-dim: rgb(0,191,143);
	--accent-on: #03150f;
	--glow: 0,245,183;
	--radius: 9px;
	--radius-lg: 14px;
	--cpad: 1.875rem;
	--nav-letterspacing: 0.01em;
	/* Documentation only: the mobile breakpoint. CSS media queries can't read a
	   custom property in their condition, so every @media uses the literal 760px —
	   keep them in sync with this value (and with sharpmushLayout.isNarrow in layout.js). */
	--mobile-bp: 760px;
	/* Container padding to use inside mobile (<=760px) media queries — tighter than the
	   desktop --cpad (1.875rem) without depending on the density-compact toggle. Pages
	   should prefer var(--cpad-mobile) over a hardcoded 1rem in their @media blocks.
	   Sizing is rem (16px root) so type + spacing honor the user's browser font size;
	   borders, shadows, fixed dimensions, radii, and breakpoints stay px. */
	--cpad-mobile: 1rem;
	--font-ui: 'Hanken Grotesk', system-ui, sans-serif;
	--font-mono: "Cascadia Mono", "Sarasa Mono SC", "DejaVu Sans Mono", "JetBrains Mono", monospace;
	--font-display: 'Hanken Grotesk', system-ui, sans-serif;
	--shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 4px 16px rgba(0,0,0,0.4);
	--mud-palette-background-gradient: radial-gradient(120% 100% at 80% -10%, #16181c 0%, #0e0f11 55%);
	--mud-palette-navbar-gradient: linear-gradient(90deg, #101113 0%, #0d0e10 100%);
}

/* ── Not Authorized — centered, designed panel ── */
.not-authorized {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: var(--cpad);
}
.not-authorized-card {
	max-width: 420px;
	text-align: center;
}
.not-authorized-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1.125rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(var(--glow), 0.08);
	border: 1px solid rgba(var(--glow), 0.2);
	color: var(--accent);
}
.not-authorized-card h1 {
	margin: 0 0 0.5rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text);
}
.not-authorized-card p {
	margin: 0 0 1.25rem;
	font-family: var(--font-ui);
	font-size: 0.875rem;
	color: var(--text-dim);
}
.not-authorized-home {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5625rem 1rem;
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--accent-on);
	text-decoration: none;
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	transition: filter 0.12s;
}
.not-authorized-home:hover {
	filter: brightness(1.08);
}

/* ── Section kicker (mono uppercase labels — stat tiles, panel headers, meta fields) ── */
.section-kicker {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* ── Density compact toggle ── */
.density-compact {
	--cpad: 1rem;
}

/* Prevent mobile browsers (notably Chrome on Android) from auto-inflating
   text — "font boosting" overrides explicit small font-sizes on wide text
   blocks, which breaks fixed-width terminal layout and any fit-to-width sizing. */
html, body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	background-image: var(--mud-palette-background-gradient);
	background-size: 200% 200%;
}

/* ═══════════════════════════════════════════════════════════════════════
   Phosphor Refined app shell — full-height sidebar + content column.
   Mirrors prototype app.jsx: position:absolute; inset:0; display:flex.
   ═══════════════════════════════════════════════════════════════════════ */
.phosphor-shell {
	position: absolute;
	inset: 0;
	display: flex;
	overflow: hidden;
	background: var(--bg);
	background-image: var(--mud-palette-background-gradient);
}

/* Content column: topbar + scrollable main + footer/terminal */
.phosphor-content-col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* ── Topbar: glass-morphism, spans content column only ── */
.phosphor-topbar {
	height: 60px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0 1rem;
	border-bottom: 1px solid var(--border-soft);
	background: color-mix(in srgb, var(--surface-3) 80%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	position: relative;
	z-index: 5;
}

.phosphor-topbar-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* ── Topbar icon buttons (menu, terminal, close) ── */
.phosphor-icon-btn {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: var(--radius);
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--text-dim);
	transition: background 0.14s, color 0.14s;
	flex-shrink: 0;
	padding: 0;
}
.phosphor-icon-btn:hover {
	background: var(--surface-2);
	color: var(--text);
}
.phosphor-icon-btn--active {
	color: var(--accent) !important;
	background: rgba(var(--glow), 0.12) !important;
}

/* ── Topbar search box ── */
.phosphor-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 220px;
	height: 34px;
	padding: 0 0.625rem;
	background: var(--surface-2);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	color: var(--text-faint);
	flex-shrink: 0;
	transition: border-color 0.14s;
}
.phosphor-search:focus-within {
	border-color: var(--accent);
}
.phosphor-search-icon {
	font-size: 0.9375rem;
	line-height: 1;
	flex-shrink: 0;
}
.phosphor-search input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--text);
	font-size: 0.78125rem;
	font-family: inherit;
}
.phosphor-search input::placeholder {
	color: var(--text-faint);
}
.phosphor-search input::-webkit-search-cancel-button {
	display: none;
}
.phosphor-search-kbd {
	margin-left: auto;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.65625rem;
	color: var(--text-faint);
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0 0.25rem;
	flex-shrink: 0;
}

/* ── Scrollable main content ── */
.phosphor-main {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}
/* When the command-terminal drawer is open, reserve its height so content isn't
   hidden beneath it. The drawer is a fixed 300px on desktop and 70svh on mobile
   (see the mobile block), and this offset tracks both. */
.phosphor-main--terminal {
	padding-bottom: 18.75rem;
}

/* ── Widget aside columns (left / right sidebar zones) ── */
.phosphor-widget-aside {
	flex-shrink: 0;
	border-right: 1px solid var(--border-soft);
	background: var(--surface);
	overflow-y: auto;
}
.phosphor-widget-aside--right {
	border-right: none;
	border-left: 1px solid var(--border-soft);
}

/* ── Footer widget zone ── */
.phosphor-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--border-soft);
	background: var(--surface);
	padding: 0.5rem 1rem;
}

/* ── Terminal drawer: slides up over the bottom of the content column ── */
.phosphor-terminal {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 300px;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
	z-index: 10;
}
.phosphor-terminal-header {
	display: flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	background: var(--surface-3);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Phosphor Refined sidebar (NavMenu) — full-height, logo · groups · profile.
   Mirrors prototype components.jsx Sidebar.
   ═══════════════════════════════════════════════════════════════════════ */
.phosphor-sidebar {
	width: 232px;
	flex-shrink: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface-3);
	border-right: 1px solid var(--border-soft);
}
.phosphor-sidebar--collapsed {
	width: 62px;
}

/* ── Logo / brand ── */
.phosphor-logo {
	height: 60px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.6875rem;
	padding: 0 1.125rem;
	cursor: pointer;
	text-decoration: none;
}
.phosphor-sidebar--collapsed .phosphor-logo {
	padding: 0;
	justify-content: center;
}
.phosphor-logo-mark {
	display: block;
	flex-shrink: 0;
	filter: drop-shadow(0 0 6px rgba(var(--glow), 0.35));
}
.phosphor-brand {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	color: var(--text);
	white-space: nowrap;
}
.phosphor-brand-tag {
	font-family: var(--font-mono);
	font-size: 0.65625rem;
	color: var(--text-faint);
	letter-spacing: 0.08em;
	white-space: nowrap;
}

/* ── Nav scroll area + groups ── */
.phosphor-nav {
	flex: 1;
	overflow-y: auto;
	padding: 0.375rem 0.625rem;
}
.nav-group {
	margin-bottom: 0.875rem;
}
.nav-group-label {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-faint);
	padding: 0.25rem 0.625rem 0.4375rem;
	pointer-events: none;
	user-select: none;
}
.phosphor-sidebar--collapsed .nav-group-label {
	display: none;
}

/* ── Nav links (shared with ApplicationNavLinks) ── */
.phosphor-nav-link {
	display: flex;
	align-items: center;
	gap: 0.6875rem;
	padding: 0.5625rem 0.625rem;
	margin-bottom: 0.125rem;
	border-radius: var(--radius);
	color: var(--text-dim);
	font-family: var(--font-ui);
	font-size: 0.84375rem;
	font-weight: 500;
	letter-spacing: var(--nav-letterspacing);
	text-decoration: none;
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	transition: background 0.14s ease, color 0.14s ease;
}

/* Play-session status dot: present while the play terminal is active, brighter/pulsing when there is
   unread activity (output arrived while not viewing /play). */
.phosphor-nav-dot {
	position: absolute;
	top: 8px;
	right: 9px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 4px rgba(var(--glow), 0.45);
}
.phosphor-nav-dot--unread {
	box-shadow: 0 0 9px 2px rgba(var(--glow), 0.95);
	animation: phosphor-nav-pulse 1.4s ease-in-out infinite;
}
@keyframes phosphor-nav-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.phosphor-nav-link:hover {
	background: var(--surface-2);
	color: var(--text);
}
.phosphor-nav-link.active {
	background: rgba(var(--glow), 0.10);
	color: var(--accent);
	font-weight: 600;
}
.phosphor-nav-link.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 2px;
	background: var(--accent);
	box-shadow: 0 0 8px rgba(var(--glow), 0.7);
}
.phosphor-nav-icon {
	font-size: 1.125rem !important;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: inherit !important;
}
.phosphor-nav-text {
	flex: 1;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
}
.phosphor-sidebar--collapsed .phosphor-nav-link {
	justify-content: center;
	padding: 0.625rem 0;
}

/* ── Bottom profile card ── */
.phosphor-profile-wrap {
	padding: 0.625rem;
	border-top: 1px solid var(--border-soft);
	flex-shrink: 0;
	position: relative;
}
.phosphor-profile-card {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.5rem 0.5625rem;
	background: var(--surface-2);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.14s ease;
}
.phosphor-profile-card:hover {
	border-color: rgba(var(--glow), 0.4);
}
.phosphor-sidebar--collapsed .phosphor-profile-card {
	justify-content: center;
	padding: 0.5rem 0;
}
.phosphor-avatar-wrap {
	position: relative;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}
.phosphor-avatar {
	width: 28px;
	height: 28px;
	border-radius: var(--radius);
	display: grid;
	place-items: center;
	font-size: 0.6875rem;
	font-weight: 600;
	font-family: var(--font-ui);
	letter-spacing: 0.02em;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.phosphor-avatar-dot {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 10px;
	height: 10px;
	border-radius: 99px;
	border: 2px solid var(--surface-2);
}
.phosphor-avatar-dot--online {
	background: var(--accent);
	box-shadow: 0 0 6px rgba(var(--glow), 0.7);
}
.phosphor-avatar-dot--offline {
	background: #555;
}
.phosphor-profile-name {
	font-family: var(--font-ui);
	font-size: 0.78125rem;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.phosphor-profile-sub {
	font-family: var(--font-mono);
	font-size: 0.65625rem;
	color: var(--text-faint);
	white-space: nowrap;
}
.phosphor-profile-chevron {
	font-size: 1rem !important;
	flex-shrink: 0;
	color: var(--text-faint) !important;
	transition: transform 0.14s ease, color 0.14s ease;
}
.phosphor-profile-card[aria-expanded="true"] .phosphor-profile-chevron {
	color: var(--accent) !important;
	transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════════════
   Configuration section nav (ConfigNavDrawer) — prototype AdminScreen list.
   ═══════════════════════════════════════════════════════════════════════ */
.config-nav-title {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 0.5rem;
	padding: 0 0.75rem;
}
.config-nav-group-label {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-faint);
	padding: 0.75rem 0.75rem 0.3125rem;
}
.config-nav-link {
	display: flex;
	align-items: center;
	gap: 0.6875rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: none;
	border-radius: var(--radius);
	background: none;
	color: var(--text-dim);
	font-family: var(--font-ui);
	font-size: 0.84375rem;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.14s ease, color 0.14s ease;
}

/* Separator before the maintenance group in the config nav */
.config-nav-sep {
	height: 1px;
	background: var(--border-soft);
	margin: 0.875rem 0.75rem 0.25rem;
}
.config-nav-link:hover {
	background: var(--surface-2);
	color: var(--text);
}
.config-nav-link.active {
	background: rgba(var(--glow), 0.10);
	color: var(--accent);
	font-weight: 600;
}
.config-nav-icon {
	font-size: 1rem !important;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: inherit !important;
}

/* LOADING AREA */
@keyframes b-loading-indicator-flipper {
	100% {
		transform: rotateY(360deg);
	}
}

.b-demo-loading {
	animation: b-loading-indicator-flipper 1200ms linear infinite;
}

/* ── Terminal ── */
.sharp-terminal-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Fixed-grid font rules: disable ligatures/kerning so column widths are stable for NAWS grid measurement */
.sharp-terminal-output,
.term-input {
    font-family: "Cascadia Mono", "Sarasa Mono SC", "DejaVu Sans Mono", monospace;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
    font-kerning: none;
    letter-spacing: 0;
}

/* Stable scrollbar gutter prevents layout shift when content overflows */
.sharp-terminal-output {
    scrollbar-gutter: stable;
}

/* Bottom terminal drawer: ensure mud-drawer-content is flex so GlobalTerminal fills it */
.terminal-bottom-drawer .mud-drawer-content {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
    padding: 0 !important;
}

/* Softcode editor terminal tab: make tab panel a flex column */
.softcode-editor-tabs .mud-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.terminal-line {
    line-height: 1.6;
    padding: 0.0625rem 0;
}

/* Sent (echoed) commands — dim cyan, prefixed with an accent caret in markup */
.terminal-sent {
    color: #7fb0c4;
    opacity: 0.85;
}

/* System/diagnostic lines — accent-dim, matches the prototype terminal */
.terminal-system {
    color: var(--accent-dim);
}

/* ── Terminal input bar (prototype MushTerminal form) ── */
.sharp-terminal-connbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    background: var(--surface);
    border-top: 1px solid var(--border-soft);
}

.sharp-terminal-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--surface);
    border-top: 1px solid var(--border-soft);
}

.term-prompt {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.term-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.84375rem;
    caret-color: var(--accent);
}

.term-input::placeholder {
    color: var(--text-faint);
}

.term-input:disabled {
    opacity: 0.5;
}

.term-send,
.term-clear {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.14s;
}

.term-send {
    background: rgba(var(--glow), 0.12);
    border: 1px solid rgba(var(--glow), 0.25);
    color: var(--accent);
}

.term-send:hover:not(:disabled) {
    background: rgba(var(--glow), 0.2);
}

.term-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.term-clear {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-faint);
}

.term-clear:hover {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface-2);
}

/* ── MarkupString (MString) non-color attributes ──
   Colors arrive as inline `style` from AnsiMarkup.WrapAsHtmlClass; these classes carry
   the remaining text attributes. Class names match AnsiMarkup.HtmlClassNames. */
.ms-bold { font-weight: bold; }
.ms-faint { opacity: 0.6; }
.ms-italic { font-style: italic; }
.ms-underline { text-decoration: underline; }
.ms-strike { text-decoration: line-through; }
.ms-underline.ms-strike { text-decoration: underline line-through; }
.ms-overline { text-decoration: overline; }
.ms-blink { animation: ms-blink 1s steps(2, start) infinite; }

@keyframes ms-blink {
    to { visibility: hidden; }
}

/* Command links (xch_cmd) — clickable, run a MUSH command. Distinct from URL links. */
.ms-cmd-link {
    color: var(--primary, #6cf);
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
}
.ms-cmd-link:hover {
    text-decoration-style: solid;
}
/* Command links carry role="button" tabindex="0"; show a focus ring for keyboard users. */
.ms-cmd-link:focus-visible {
    outline: 2px solid var(--primary, #6cf);
    outline-offset: 2px;
    text-decoration-style: solid;
}

/* ── Softcode Editor ── */
.mush-editor-fill {
    width: 100%;
    height: 100%;
    background-color: #1a1a2e;
}

.mush-editor-fill .monaco-editor-container {
    height: 100%;
}

/* Force dark background on all Monaco editor layers so it's dark even before theme loads */
.mush-editor-fill > div,
.mush-editor-fill .monaco-editor,
.mush-editor-fill .monaco-editor .overflow-guard,
.mush-editor-fill .monaco-editor-background,
.mush-editor-fill .inputarea.ime-input {
    background-color: #1a1a2e !important;
}

/* Keep flex-panel inside MudTabs filling available height */
.flex-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Bottom terminal drawer */
.terminal-bottom-drawer .mud-drawer-content {
    padding: 0;
}

/* ── Dark DataGrid (attribute list) ── */
.mush-dark-grid .mud-table-root,
.mush-dark-grid .mud-table-container,
.mush-dark-grid .mud-table,
.mush-dark-grid thead tr,
.mush-dark-grid tbody tr {
    background-color: transparent !important;
}
.mush-dark-grid thead tr th {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333 !important;
    color: rgba(255,255,255,0.6) !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mush-dark-grid tbody tr td {
    border-bottom: 1px solid #282828 !important;
    color: rgba(255,255,255,0.87) !important;
}
.mush-dark-grid tbody tr:hover td {
    background-color: rgba(255,255,255,0.04) !important;
}
.mush-dark-grid .mud-table-pagination {
    background-color: #1a1a1a !important;
    border-top: 1px solid #333 !important;
}

/* ── Eval result panel ── */
.mush-eval-output {
    font-family: monospace;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-all;
    padding: 0.375rem 0.625rem;
    background: #111;
    color: #a3e8a0;
    border-top: 1px solid #333;
    max-height: 120px;
    overflow-y: auto;
}

/* ── Monaco Editor: ensure hover/suggestion widgets appear above MudBlazor tabs ── */
/* fixedOverflowWidgets:true moves them to document body, but belt-and-suspenders z-index */
.monaco-editor-overlaymessage,
.monaco-hover,
.monaco-editor .suggest-widget,
.monaco-editor .parameter-hints-widget {
    z-index: 10000 !important;
}

/* ── MUSH Help Dialog content ── */
.mush-help-content pre {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    overflow-x: auto;
}
.mush-help-content code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
}

/* ── HelpDrawer markdown rendering ── */
.mush-help-md {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #d4d4d4;
}
.mush-help-md p { margin: 0 0 0.5rem; }
.mush-help-md pre {
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    white-space: pre;
}
.mush-help-md code {
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 0.0625rem 0.25rem;
    font-family: inherit;
    font-size: 0.92em;
    color: #ce9178;
}
.mush-help-md pre code {
    background: none;
    padding: 0;
    color: #d4d4d4;
}
.mush-help-md a[href^="help:"] {
    color: #4ec9b0;
    text-decoration: none;
    cursor: pointer;
}
.mush-help-md a[href^="help:"]:hover {
    text-decoration: underline;
}
.mush-help-md h1, .mush-help-md h2, .mush-help-md h3 {
    color: #9cdcfe;
    margin: 0.75rem 0 0.375rem;
}
.mush-help-md ul, .mush-help-md ol {
    padding-left: 1.25rem;
    margin: 0 0 0.5rem;
}
.mush-help-md blockquote {
    border-left: 3px solid #555;
    padding-left: 0.625rem;
    color: #888;
    margin: 0 0 0.5rem;
}
.mush-help-md strong { color: #dcdcaa; }

/* ── Scene log ── */

/* Scrollable transcript container */
.scene-log {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.8125rem;
    line-height: 1.55;
    background: #111;
    color: #d4d4d4;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    flex: 1;
    min-height: 0;
}

/* Live variant: fills available height and scrolls to bottom */
.scene-log--live {
    border: 1px solid #333;
}

/* Single transcript line */
.scene-line {
    padding: 0.125rem 0;
    word-break: break-word;
}

/* ── Per-type scene line colours ── */

.scene-line--pose {
    color: #c8c8c8;
    font-style: italic;
}

.scene-line--say {
    color: #9cdcfe;
}

.scene-line--whisper {
    color: #888;
    font-style: italic;
}

.scene-line--ooc {
    color: #a3be8c;
}

.scene-line--system {
    color: #d7ba7d;
    font-size: 0.6875rem;
    opacity: 0.75;
}

.scene-line--normal {
    color: #d4d4d4;
}

/* Archived lines (visible in live view once scene closes) */
.scene-line--archived {
    opacity: 0.65;
}

/* Lines actively arriving in a live scene */
.scene-line--live {
    color: #d4d4d4;
}

/* ── Wiki rendered content ── */
/* Applied to the MudCard wrapping rendered wiki HTML (WikiDisplay.razor).      */
/* Colors lean on MudBlazor palette variables so they follow the active theme. */

.WikiContent {
    line-height: 1.65;
}

/* Links inside wiki content — themed color, underline on hover */
.WikiContent .mud-card-content a {
    color: var(--mud-palette-secondary, #80cbc4);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms ease, color 120ms ease;
}

.WikiContent .mud-card-content a:hover,
.WikiContent .mud-card-content a:focus-visible {
    color: var(--mud-palette-secondary-lighten, #b2dfdb);
    border-bottom-color: currentColor;
}

/* External links (absolute URLs) get a subtle visual distinction */
.WikiContent .mud-card-content a[href^="http"] {
    font-style: italic;
}

/* Redlinks — wiki links to pages that don't exist yet */
.WikiContent .mud-card-content a.wiki-redlink {
    color: var(--mud-palette-error, #f44336);
    border-bottom: 1px dashed currentColor;
}

.WikiContent .mud-card-content a.wiki-redlink:hover {
    color: var(--mud-palette-error-lighten, #e57373);
}

/* Headings */
.WikiContent .mud-card-content h1,
.WikiContent .mud-card-content h2,
.WikiContent .mud-card-content h3,
.WikiContent .mud-card-content h4,
.WikiContent .mud-card-content h5,
.WikiContent .mud-card-content h6 {
    color: var(--mud-palette-text-primary, rgba(255,255,255,0.87));
    margin: 1.2em 0 0.4em;
    line-height: 1.25;
}

.WikiContent .mud-card-content h1,
.WikiContent .mud-card-content h2 {
    border-bottom: 1px solid var(--mud-palette-lines-default, #333);
    padding-bottom: 0.2em;
}

/* Paragraphs and lists */
.WikiContent .mud-card-content p {
    margin: 0 0 0.9em;
}

.WikiContent .mud-card-content ul,
.WikiContent .mud-card-content ol {
    padding-left: 1.6em;
    margin: 0 0 0.9em;
}

.WikiContent .mud-card-content li {
    margin: 0.2em 0;
}

/* Inline code and code blocks */
.WikiContent .mud-card-content code {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 3px;
    padding: 0.0625rem 0.3125rem;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.9em;
}

.WikiContent .mud-card-content pre {
    background: #0d0d0d;
    border: 1px solid var(--mud-palette-lines-default, #333);
    border-radius: 4px;
    padding: 0.625rem 0.875rem;
    overflow-x: auto;
    margin: 0 0 1em;
}

.WikiContent .mud-card-content pre code {
    background: none;
    padding: 0;
}

/* Blockquotes */
.WikiContent .mud-card-content blockquote {
    border-left: 3px solid var(--mud-palette-secondary, #80cbc4);
    margin: 0 0 1em;
    padding: 0.2em 0 0.2em 1em;
    color: var(--mud-palette-text-secondary, rgba(255,255,255,0.6));
}

/* Tables (Markdig pipe tables) */
.WikiContent .mud-card-content table {
    border-collapse: collapse;
    margin: 0 0 1em;
    width: 100%;
}

.WikiContent .mud-card-content th,
.WikiContent .mud-card-content td {
    border: 1px solid var(--mud-palette-lines-default, #333);
    padding: 0.375rem 0.75rem;
    text-align: left;
}

.WikiContent .mud-card-content th {
    background: rgba(255, 255, 255, 0.05);
}

.WikiContent .mud-card-content tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Horizontal rules */
.WikiContent .mud-card-content hr {
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default, #333);
    margin: 1.5em 0;
}

/* ── Hero mode (home page) ── */
/* The hero card uses text-align:center; these rules make block-level content
   follow suit instead of pinning to the left edge. */

/* Images are display:block, so text-align can't center them — auto margins do. */
.WikiContent--hero .wiki-img {
    margin-left: auto;
    margin-right: auto;
}

/* Lists: shrink-wrap the list box so it centers as a unit, keeping bullets
   adjacent to their (left-aligned) items instead of at the page edge. */
.WikiContent--hero .mud-card-content ul,
.WikiContent--hero .mud-card-content ol {
    display: inline-block;
    text-align: left;
}

/* ── Wiki directive blocks (dynamic listings: category / tag / pagelist / recent) ── */

.wiki-directive-block {
    border-left: 3px solid var(--mud-palette-secondary, #80cbc4);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 4px 4px 0;
    padding: 0.6em 1.1em;
    margin: 0 0 1em;
}

.wiki-directive-block .wiki-directive-header {
    color: var(--mud-palette-text-primary, rgba(255, 255, 255, 0.87));
    font-weight: 600;
    margin-bottom: 0.35em;
}

.wiki-directive-block .wiki-directive-empty,
.wiki-directive-block .wiki-directive-loading {
    color: var(--mud-palette-text-secondary, rgba(255, 255, 255, 0.6));
    margin: 0;
}

.WikiContent .mud-card-content .wiki-directive-list,
.wiki-directive-list {
    list-style: none;
    padding-left: 0.2em;
    margin: 0.3em 0 0;
}

.wiki-directive-list li {
    margin: 0.3em 0;
}

.wiki-directive-list .wiki-directive-date {
    color: var(--mud-palette-text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 0.85em;
}

/* ── Wiki revision history dialog ── */

.wiki-revision-item {
    cursor: pointer;
    border-radius: 4px;
}

.wiki-revision-item--selected {
    background: rgba(255, 255, 255, 0.06);
}

/* Line diff: revision → current */
.wiki-diff {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    background: #0d0d0d;
    border: 1px solid var(--mud-palette-lines-default, #333);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    max-height: 320px;
    overflow: auto;
}

.wiki-diff-line {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0 0.25rem;
}

.wiki-diff-line--added {
    background: rgba(80, 200, 120, 0.12);
    color: #a3e8a0;
}

.wiki-diff-line--removed {
    background: rgba(244, 67, 54, 0.12);
    color: #e57373;
    text-decoration: line-through;
}

/* Wiki images — lazy loading, constrained width, lightbox-ready */
.wiki-img {
    max-width: 100%;
    display: block;
    margin: 0.5rem 0;
    cursor: zoom-in;
}

/* Only auto-size images that don't carry an explicit height attribute
   (authors can size via ![alt](src){width=200 height=100}) */
.wiki-img:not([height]) {
    height: auto;
}

/* Lightbox overlay: activated by JS adding data-lightbox-open to <body> */
.wiki-img-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.wiki-img-lightbox-overlay.is-open {
    display: flex;
}

.wiki-img-lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ── Package review: MUSHcode highlighting ─────────────────────────────── */
.mush-pane {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    padding: 0.5rem 0.625rem;
    font-family: 'Cascadia Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 280px;
    overflow-y: auto;
}

.mush-cmdpattern { color: #c792ea; font-weight: 600; }
.mush-fn { color: #82aaff; }
.mush-sub { color: #f78c6c; }
.mush-dbref { color: #89ddff; text-decoration: underline dotted; }
.mush-ref { color: #c3e88d; font-style: italic; }
.mush-atcmd { color: #ffcb6b; }
.mush-danger { background: rgba(255, 83, 80, 0.25); border-bottom: 2px solid #ff5350; }

/* CharacterPicker popover width. Global (not scoped .razor.css) because the class sits
   on the component's root <MudPaper>, which carries MudPaper's scope, not the picker's —
   a scoped `::deep` rule has no HTML ancestor to anchor to. */
.char-picker {
	min-width: 320px;
}
@media (max-width: 760px) {
	.char-picker {
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE TOOLKIT + RESPONSIVE SHELL
   Phone / tablet-landscape / desktop, split by width AND input capability.

   Responsive model (3 tiers, width × input capability):
     • PHONE content — `@media (max-width: 760px)`. Single-column stacking, condensed
       chrome. This is the breakpoint page authors use for content. In Razor <style>
       blocks write `@@media (max-width: 760px)` (Razor escapes `@`; a bare `@media`
       is parsed as a code transition and fails to compile).
     • TABLET / landscape phone — wider than 760px, so they KEEP the desktop
       multi-column content (more readable). Don't add a single-column rule for them.
     • TOUCH CHROME — `@media (max-width: 760px), (pointer: coarse)`. The shell nav
       (drawer + bottom bar vs. desktop sidebar) keys off this so any touch device,
       including a wide tablet or landscape phone, gets touch-friendly chrome while a
       mouse/trackpad desktop keeps the sidebar. Mirrored by sharpmushLayout.isTouchChrome().
     • TOUCH ergonomics — `@media (pointer: coarse)`: 44px min tap targets, no hover-only UI.
     • Full-height regions: size with `svh` and a `vh` fallback, e.g.
       "height: 100vh;" then "height: 100svh;" — the vh line is the fallback for
       browsers without svh; svh fits the SMALL viewport, so it never crops under
       the mobile address bar and never resizes on scroll.
       Default to `svh`, NOT `dvh`. `dvh` tracks the live viewport and recalculates
       every time the toolbar slides in/out (layout jank); reserve it for the rare
       element that must follow the visible viewport in real time.
     • Any flex/grid child holding wide content (terminal, tables, code, pre)
       needs `min-width: 0`; prefer `minmax(0, 1fr)` over a bare `1fr` track.
     • Min touch target 44px for interactive controls.
   Helper classes below are available to every page.
   ═══════════════════════════════════════════════════════════════════════ */

/* Backdrop behind the off-canvas nav drawer — inert until the shell is .nav-open. */
.phosphor-nav-backdrop {
	display: none;
}

/* ── Hybrid bottom navigation (mobile only; hidden here, shown in the @media block).
   Primary destinations stay visible; the "Menu" tab opens the full grouped drawer. ── */
.phosphor-bottomnav {
	display: none;
}
.phosphor-bottomtab {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	background: transparent;
	border: none;
	cursor: pointer;
	text-decoration: none;
	color: var(--text-faint);
	font-family: var(--font-ui);
	transition: color 0.14s;
}
.phosphor-bottomtab-icon {
	font-size: 1.375rem !important;
}
.phosphor-bottomtab-label {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.65625rem;
	letter-spacing: 0.02em;
}
.phosphor-bottomtab--on {
	color: var(--accent);
}

/* ══ PHONE-WIDTH content: single-column helpers + a condensed topbar. Tablets and
   landscape phones are WIDER than this, so they keep the desktop multi-column content
   (the readability win) — only their chrome goes touch-friendly (next block). ══ */
@media (max-width: 760px) {

	/* Condense the topbar: drop the search box, kbd hint, and language picker.
	   Tablets (>760px) keep them — they have the room. */
	.phosphor-topbar { gap: 0.375rem; padding: 0 0.625rem; }
	.phosphor-search,
	.phosphor-search-kbd,
	.phosphor-lang { display: none !important; }
	.phosphor-topbar-title {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.9375rem;
	}
}

/* ══ TOUCH CHROME: the nav becomes an off-canvas drawer + a bottom tab bar. Applies to
   any touch device (pointer: coarse) OR any narrow window — so phones, tablets, and
   landscape phones all get the touch-friendly chrome instead of the desktop sidebar,
   while a mouse/trackpad desktop (pointer: fine + wide) keeps the sidebar. Keep this
   media condition in sync with sharpmushLayout.isTouchChrome() in layout.js. ══ */
@media (max-width: 760px), (pointer: coarse) {
	/* The sidebar leaves the flex flow and slides in over the content, full-width. */
	.phosphor-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 248px !important;
		z-index: 1001;
		transform: translateX(-100%);
		transition: transform 0.22s ease;
		box-shadow: 2px 0 24px rgba(0, 0, 0, 0.5);
	}
	.phosphor-shell--nav-open .phosphor-sidebar { transform: translateX(0); }
	/* Keep brand/labels/text visible even if the desktop rail was collapsed. */
	.phosphor-sidebar--collapsed { width: 248px !important; }

	/* Dimmed backdrop, shown only while the drawer is open. */
	.phosphor-nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.55);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.22s ease;
	}
	.phosphor-shell--nav-open .phosphor-nav-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* Content column owns the full width now the sidebar is out of flow. */
	.phosphor-content-col { width: 100%; }

	/* Global widget asides step aside so content keeps the full width. */
	.phosphor-widget-aside { display: none !important; }

	/* Bottom command-terminal drawer: svh keeps the input row on-screen under the
	   address bar without resizing on scroll. */
	.phosphor-terminal {
		height: 70vh;
		height: 70svh;
		max-height: 70svh;
	}

	/* ── Hybrid bottom navigation bar ── */
	.phosphor-bottomnav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		height: 58px;
		padding-bottom: env(safe-area-inset-bottom);
		background: color-mix(in srgb, var(--surface-3) 92%, transparent);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-top: 1px solid var(--border-soft);
	}
	/* Keep page content clear of the fixed bar. */
	.phosphor-shell--bottomnav .phosphor-main {
		padding-bottom: calc(3.625rem + env(safe-area-inset-bottom));
	}
	/* When the terminal drawer is open it grows to 70svh and covers the bottom bar,
	   so the content offset must match the drawer (not the 300px desktop value).
	   Listed after the bar rule so it wins at equal specificity. */
	.phosphor-main--terminal,
	.phosphor-shell--bottomnav .phosphor-main--terminal {
		padding-bottom: 70vh;
		padding-bottom: 70svh;
	}
}

/* ══ Touch ergonomics: 44px tap targets on any touch device, regardless of width. ══ */
@media (pointer: coarse) {
	.phosphor-nav-link { min-height: 44px; }
	.phosphor-icon-btn { min-width: 44px; min-height: 44px; }
}