/* =========================================================================
   BAND MANAGER — commercial demo theme
   Dark / copper palette matching the marketing site's index.html (Inter,
   #111 ground, #1b1b1b panels, #b87333 copper accent). Same structure and
   class names as the original build — only the tokens and a few
   dark-mode-specific treatments (translucent status pills instead of solid
   pastels) changed.
   ========================================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

body.bm-page {
	--bm-copper: #b87333;
	--bm-copper-dark: #96591f;
	--bm-copper-bright: #d68a44;

	--bm-bg: #111111;
	--bm-panel: #1b1b1b;
	--bm-soft: #202020;
	--bm-input: #161616;
	--bm-line: #2f2f2f;

	--bm-ink: #f5f5f5;
	--bm-muted: #b8b8b8;
	--bm-faint: #8a8a8a;

	--bm-good: #4fce7e;
	--bm-good-bg: rgba(79, 206, 126, .14);
	--bm-bad: #e2685f;
	--bm-bad-bg: rgba(226, 104, 95, .14);
	--bm-warn: #d9a441;
	--bm-warn-bg: rgba(217, 164, 65, .16);
	--bm-neutral-bg: #262626;

	--bm-radius: 14px;
	--bm-radius-sm: 8px;

	font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: var(--bm-bg);
	color: var(--bm-ink);
}

body.bm-page a { color: var(--bm-copper-bright); }
body.bm-page a:visited { color: var(--bm-copper-bright); }

body.bm-page ul li { text-align: left; }
body.bm-page section { text-align: left; padding: 0; margin: 0; box-shadow: none; }
body.bm-page p { font-size: 1em; color: var(--bm-ink); margin: 0; }

body.bm-page main {
	max-width: 1080px;
	margin: 0 auto;
	padding: 30px 20px 70px;
}

body.bm-page main.narrow { max-width: 660px; }
body.bm-page main.wide { max-width: 1180px; }

/* ---- top bar + member nav ------------------------------------------------ */

body.bm-page header { padding: 0; background: none; }

.bm-trial-banner {
	background: var(--bm-warn-bg, rgba(217, 164, 65, .16));
	color: #eec677;
	text-align: center;
	padding: 10px 16px;
	font-size: .85em;
	border-bottom: 1px solid var(--bm-line);
}

.bm-trial-banner a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	margin-left: 6px;
}

.bm-trial-banner-expired {
	background: var(--bm-bad-bg, rgba(226, 104, 95, .14));
	color: #ff8f86;
}

.bm-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(17, 17, 17, .95);
	border-bottom: 1px solid var(--bm-line);
	backdrop-filter: blur(6px);
}

.bm-topbar-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 20px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 20px;
}

.bm-logo-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bm-logo {
	display: flex;
	align-items: center;
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--bm-ink);
	text-decoration: none;
	letter-spacing: -.01em;
}

.bm-logo span { color: var(--bm-copper); }
.bm-logo-img { height: 44px; width: auto; display: block; }

/* Persistent marker that this is a trial account - distinct from the
   dismissible-feeling countdown banner further down the page, this stays
   visible on every screen including billing.php itself. */
.bm-trial-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: .68em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--bm-warn-bg);
	color: var(--bm-warn);
	border: 1px solid rgba(217, 164, 65, .35);
}

.bm-trial-badge-expired {
	background: var(--bm-bad-bg);
	color: var(--bm-bad);
	border-color: rgba(226, 104, 95, .35);
}

.bm-back-link {
	color: var(--bm-muted);
	text-decoration: none;
	font-size: .85em;
	letter-spacing: .05em;
}

.bm-back-link:hover { color: var(--bm-copper); }

.bm-bar-who { font-size: .85em; color: var(--bm-muted); text-align: right; white-space: nowrap; }
.bm-bar-who a { color: var(--bm-muted); }
.bm-bar-who a:hover { color: var(--bm-copper); }
.bm-logout-form { display: inline; }
.bm-bar-who button.bm-linkbtn { color: var(--bm-muted); font-size: 1em; font-weight: 400; }
.bm-bar-who button.bm-linkbtn:hover { color: var(--bm-copper); }

/* Centred in the middle grid column, with its items spread evenly across
   that column rather than clumped - the more nav items get added (Billing
   was the latest), the more this keeps them from drifting off to one side. */
.bm-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	gap: 8px 20px;
}

.bm-nav a {
	color: var(--bm-muted);
	font-size: .85em;
	text-decoration: none;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

.bm-nav a:hover, .bm-nav a.current { color: var(--bm-ink); border-bottom-color: var(--bm-copper); }

/* ---- boxes -------------------------------------------------------------- */

.bm-panel {
	background: var(--bm-panel);
	border: 1px solid var(--bm-line);
	border-radius: var(--bm-radius);
	padding: 30px;
	margin-bottom: 28px;
}

.bm-panel-title {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--bm-ink);
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--bm-copper);
}

.bm-panel.editing { box-shadow: inset 4px 0 0 var(--bm-copper); }

.bm-page-title { font-size: 1.7em; margin-bottom: 6px; color: var(--bm-ink); }
.bm-page-sub { color: var(--bm-muted); font-size: .95em; margin-bottom: 24px; }

.bm-back {
	display: inline-block;
	margin-bottom: 20px;
	color: var(--bm-copper);
	text-decoration: none;
	font-weight: 600;
}

.bm-back:hover { text-decoration: underline; }

.bm-sub-label {
	font-size: .75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--bm-muted);
	margin: 28px 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--bm-line);
}

.bm-muted { color: var(--bm-muted); font-size: .9em; }
.bm-hint { font-size: .8em; color: var(--bm-muted); margin-top: 5px; font-weight: 400; }

/* Small spacing utilities - stand in for the one-off style="margin..."
   attributes this app used to scatter throughout, which a strict CSP
   (no 'unsafe-inline' in style-src) can no longer allow. */
.bm-mb-14 { margin-bottom: 14px; }
.bm-mb-15 { margin-bottom: 15px; }
.bm-mb-16 { margin-bottom: 16px; }
.bm-mt-6 { margin-top: 6px; }
.bm-mt-10 { margin-top: 10px; }
.bm-mt-12 { margin-top: 12px; }
.bm-mt-15 { margin-top: 15px; }
.bm-mt-16 { margin-top: 16px; }
.bm-mt-20 { margin-top: 20px; }
.bm-mt-24 { margin-top: 24px; }
.bm-form-inline { display: inline; }
.bm-form-actions-row { display: flex; gap: 10px; margin-top: 10px; }
.bm-form-away { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--bm-line); }
.bm-text-centre { text-align: center; }
.bm-event-actions.bm-centre-actions { justify-content: center; margin-top: 18px; }

/* ---- messages ----------------------------------------------------------- */

.bm-alert {
	padding: 14px 16px;
	border-radius: var(--bm-radius-sm);
	margin-bottom: 22px;
	font-size: .95em;
}

.bm-alert-error { background: var(--bm-bad-bg); color: #ff8f86; border-left: 4px solid var(--bm-bad); }
.bm-alert-ok { background: var(--bm-good-bg); color: #7fe3a3; border-left: 4px solid var(--bm-good); }
.bm-alert-note { background: var(--bm-warn-bg); color: #eec677; border-left: 4px solid var(--bm-warn); }

/* ---- forms -------------------------------------------------------------- */

.bm-field { margin-bottom: 18px; }

.bm-field label, .bm-label {
	display: block;
	font-weight: 600;
	margin-bottom: 7px;
	font-size: .9em;
	color: var(--bm-ink);
}

.bm-password-field {
	position: relative;
}

.bm-password-field input {
	padding-right: 60px !important;
}

body.bm-page button.bm-password-toggle {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	background: none;
	border: none;
	padding: 6px 8px;
	color: var(--bm-copper);
	font-family: inherit;
	font-size: .82em;
	font-weight: 600;
	cursor: pointer;
}

.bm-password-toggle:hover,
.bm-password-toggle:focus-visible {
	text-decoration: underline;
}

body.bm-page input[type="text"],
body.bm-page input[type="email"],
body.bm-page input[type="password"],
body.bm-page input[type="url"],
body.bm-page input[type="date"],
body.bm-page input[type="time"],
body.bm-page input[type="number"],
body.bm-page select,
body.bm-page textarea {
	display: block;
	width: 100%;
	padding: 12px;
	border: 1px solid var(--bm-line);
	border-radius: 6px;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1em;
	background: var(--bm-input);
	color: var(--bm-ink);
	color-scheme: dark;
}

body.bm-page textarea { resize: vertical; min-height: 110px; }

body.bm-page input:focus,
body.bm-page select:focus,
body.bm-page textarea:focus {
	outline: none;
	border-color: var(--bm-copper);
	box-shadow: 0 0 0 3px rgba(184, 115, 51, .18);
}

body.bm-page input[readonly] { background: var(--bm-soft); color: var(--bm-muted); }

body.bm-page input[type="color"] {
	width: 100%;
	height: 46px;
	padding: 4px;
	cursor: pointer;
	background: var(--bm-input);
	border: 1px solid var(--bm-line);
	border-radius: 6px;
}

body.bm-page input[type="checkbox"] {
	width: 17px;
	height: 17px;
	flex: none;
	cursor: pointer;
	accent-color: var(--bm-copper);
}

.bm-currency-field { position: relative; }
.bm-currency-field .bm-currency-prefix {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bm-muted);
	font-weight: 600;
	pointer-events: none;
}
/* Specificity has to match the body.bm-page input[...] padding:12px rule
   above (which also sets padding-left) or this loses and the digits render
   underneath the £ symbol instead of after it. */
body.bm-page .bm-currency-field input { padding-left: 26px; }

.bm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bm-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 18px; align-items: start; }
.bm-half { max-width: 50%; }

.bm-check-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.bm-check-row label { margin: 0; font-weight: 400; font-size: .92em; }

.bm-radio-group { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }

.bm-radio-box {
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1.5px solid var(--bm-line);
	border-radius: 8px;
	padding: 10px 18px;
	cursor: pointer;
	background: var(--bm-panel);
	transition: border-color .15s, background .15s;
}
.bm-radio-box span { font-weight: 600; }
body.bm-page .bm-radio-box input[type="radio"] {
	width: 17px;
	height: 17px;
	flex: none;
	cursor: pointer;
	accent-color: var(--bm-copper);
	margin: 0;
}
.bm-radio-box.is-selected { border-color: var(--bm-copper); background: rgba(184, 115, 51, .12); }

.bm-radio-box:has(input:disabled) { cursor: not-allowed; opacity: .5; background: var(--bm-soft); }
.bm-radio-box input:disabled { cursor: not-allowed; }

/* ---- buttons ------------------------------------------------------------ */

.bm-btn,
body.bm-page button {
	background: var(--bm-copper);
	color: #fff;
	padding: 12px 22px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 700;
	font-family: inherit;
	font-size: .95em;
	transition: background .2s, transform .1s;
}

.bm-btn:hover, body.bm-page button:hover { background: var(--bm-copper-dark); }
body.bm-page button:active { transform: translateY(1px); }

.bm-btn { display: inline-block; text-decoration: none; text-align: center; }

body.bm-page button.bm-secondary, .bm-btn.bm-secondary { background: var(--bm-soft); color: var(--bm-ink); border: 1px solid var(--bm-line); }
body.bm-page button.bm-secondary:hover, .bm-btn.bm-secondary:hover { background: var(--bm-neutral-bg); }

body.bm-page button.bm-accept { background: #2f8f52; }
body.bm-page button.bm-accept:hover { background: #266f40; }
body.bm-page button.bm-decline { background: #4a4640; }
body.bm-page button.bm-decline:hover { background: #3a3630; }

.bm-actions { display: flex; gap: 12px; margin-top: 26px; }
.bm-actions .bm-btn, .bm-actions button { flex: 1; }

.bm-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }

.bm-inline-form { display: inline-block; margin-top: 16px; }

.bm-mfa-secret {
	background: var(--bm-soft);
	border: 1px solid var(--bm-line);
	border-radius: 6px;
	padding: 14px;
	margin: 12px 0;
	text-align: center;
}
.bm-mfa-secret code { font-size: 1.15em; letter-spacing: 2px; color: var(--bm-copper); }

.bm-recovery-codes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px 16px;
	margin: 12px 0;
	font-family: ui-monospace, monospace;
}

.bm-mfa-disable { margin-top: 18px; }
.bm-mfa-disable summary { cursor: pointer; color: var(--bm-bad); font-weight: 600; }
.bm-mfa-disable form { margin-top: 12px; }

.bm-row-actions a,
body.bm-page .bm-row-actions button,
.bm-mini {
	background: none;
	border: 1px solid var(--bm-line);
	color: var(--bm-muted);
	padding: 6px 12px;
	border-radius: 5px;
	font-size: .75em;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.bm-row-actions a:hover,
body.bm-page .bm-row-actions button:hover,
.bm-mini:hover { border-color: var(--bm-copper); color: var(--bm-copper-bright); background: none; }

body.bm-page .bm-row-actions button.bm-danger:hover { border-color: var(--bm-bad); color: var(--bm-bad); }

/* ---- badges ------------------------------------------------------------- */

.bm-badge {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 4px;
	font-size: .72em;
	font-weight: 700;
}

.bm-badge-admin { background: var(--bm-copper); color: #fff; }
.bm-badge-member { background: var(--bm-neutral-bg); color: var(--bm-ink); }
.bm-badge-active { background: var(--bm-good-bg); color: var(--bm-good); }
.bm-badge-invited { background: var(--bm-warn-bg); color: var(--bm-warn); }
.bm-badge-inactive { background: var(--bm-neutral-bg); color: var(--bm-muted); }
.bm-badge-cancelled { background: var(--bm-bad-bg); color: var(--bm-bad); }

.bm-badge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.bm-type {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 14px;
	color: #fff;
	font-size: .7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
}

.bm-pill {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 4px;
	font-size: .7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.bm-pill-accepted { background: var(--bm-good-bg); color: var(--bm-good); }
.bm-pill-pending  { background: var(--bm-warn-bg); color: var(--bm-warn); }
.bm-pill-declined { background: var(--bm-neutral-bg); color: var(--bm-muted); }
.bm-pill-none     { background: var(--bm-neutral-bg); color: var(--bm-faint); }
.bm-pill-confirmed { background: var(--bm-good-bg); color: var(--bm-good); }
.bm-pill-enquiry   { background: var(--bm-warn-bg); color: var(--bm-warn); }

/* ---- tables ------------------------------------------------------------- */

.bm-table-wrap { overflow-x: auto; }
.bm-table-wrap .bm-table { min-width: 680px; }

.bm-table { width: 100%; border-collapse: collapse; }

.bm-table th {
	background: var(--bm-soft);
	padding: 14px 12px;
	text-align: left;
	font-weight: 700;
	border-bottom: 2px solid var(--bm-line);
	font-size: .78em;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bm-muted);
}

.bm-table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--bm-line);
	vertical-align: middle;
	font-size: .92em;
}

.bm-table tr:hover { background: var(--bm-soft); }
.bm-table tr.bm-dim td { color: var(--bm-muted); background: #161616; }
.bm-table td:first-child, .bm-table td:last-child { white-space: nowrap; }

/* ---- CSV member import --------------------------------------------------- */

.bm-table tr.bm-csv-existing td { background: var(--bm-warn-bg); }
.bm-table tr.bm-csv-invalid td { background: var(--bm-bad-bg); }
.bm-csv-reason { display: block; font-size: .82em; color: var(--bm-muted); margin-top: 2px; }
.bm-csv-reason.is-bad { color: #ff8f86; }
.bm-csv-actions, .bm-action-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }

.bm-csv-upload-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.bm-csv-upload-row .bm-field { margin-bottom: 0; flex: 1 1 260px; }

/* ---- calendar ----------------------------------------------------------- */

.bm-calendar-bar {
	background: var(--bm-panel);
	border: 1px solid var(--bm-line);
	border-radius: var(--bm-radius);
	padding: 22px 30px;
	margin-bottom: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: center;
}

.bm-month-nav { display: flex; gap: 8px; }

.bm-month-nav a {
	padding: 10px 16px;
	background: var(--bm-soft);
	color: var(--bm-ink);
	text-decoration: none;
	border-radius: 6px;
	font-size: .85em;
	font-weight: 600;
	border: 1px solid var(--bm-line);
}

.bm-month-nav a:hover { background: var(--bm-copper); color: #fff; border-color: var(--bm-copper); }

.bm-events {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 24px;
}

.bm-event-card {
	background: var(--bm-panel);
	border: 1px solid var(--bm-line);
	border-radius: var(--bm-radius);
	padding: 24px;
	transition: border-color .2s, transform .2s;
}

.bm-event-card:hover { transform: translateY(-4px); border-color: var(--bm-copper); }

.bm-event-card.is-cancelled { opacity: .6; }
.bm-event-card.is-cancelled:hover { transform: none; border-color: var(--bm-line); }
.bm-cancelled-title, .bm-event-card.is-cancelled .bm-event-title { text-decoration: line-through; color: var(--bm-muted); }

body.bm-page button.bm-btn-cancel-event { background: #7a2f28; }
body.bm-page button.bm-btn-cancel-event:hover { background: #602420; }

.bm-event-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.bm-event-date { font-size: 1.35em; font-weight: 700; color: var(--bm-copper-bright); }
.bm-event-title { font-size: 1.1em; font-weight: 700; margin-bottom: 8px; }
.bm-event-meta { color: var(--bm-muted); font-size: .88em; margin-bottom: 5px; }

.bm-event-counts {
	display: flex;
	gap: 18px;
	font-size: .8em;
	color: var(--bm-muted);
	margin: 14px 0;
	padding-top: 12px;
	border-top: 1px solid var(--bm-line);
}

.bm-event-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.bm-event-actions button { flex: 1; padding: 10px 12px; font-size: .85em; }

.bm-empty { text-align: center; padding: 45px 20px; color: var(--bm-muted); }

/* ---- event detail ------------------------------------------------------- */

.bm-detail {
	display: flex;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--bm-line);
}

.bm-detail:last-child { border-bottom: none; }
.bm-detail-icon { font-size: 1.3em; min-width: 30px; }

.bm-detail h3 {
	font-size: .72em;
	color: var(--bm-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 6px;
}

.bm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }

.bm-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.bm-plan {
	background: var(--bm-soft);
	border: 1px solid var(--bm-line);
	border-radius: var(--bm-radius-sm);
	padding: 22px 18px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.bm-plan.is-current { border-color: var(--bm-copper); }

.bm-plan-price { font-size: 1.5em; font-weight: 800; color: var(--bm-copper-bright); }
.bm-plan-price span { font-size: .5em; font-weight: 600; color: var(--bm-muted); }
.bm-plan-label { font-size: .85em; color: var(--bm-muted); margin-bottom: 10px; }
.bm-plan .bm-btn, .bm-plan form { width: 100%; }
.bm-plan form { margin: 0; }
.bm-plan .bm-btn, .bm-plan button { width: 100%; }

.bm-stat { background: var(--bm-soft); border: 1px solid var(--bm-line); padding: 20px; border-radius: var(--bm-radius-sm); text-align: center; }
.bm-stat-n { font-size: 1.7em; font-weight: 700; color: var(--bm-copper-bright); }
.bm-stat-l { font-size: .72em; color: var(--bm-muted); text-transform: uppercase; letter-spacing: .05em; }

.bm-people { list-style: none; margin-top: 12px; }

.bm-person {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--bm-line);
}

.bm-person:last-child { border-bottom: none; }
.bm-person-name { flex: 1; font-weight: 600; font-size: .95em; }
.bm-person-email { display: block; font-size: .8em; font-weight: 400; color: var(--bm-muted); }

.bm-person-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.bm-add-person {
	display: flex;
	gap: 12px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--bm-line);
}

.bm-add-person select { flex: 1; }

.bm-respond {
	background: var(--bm-soft);
	border: 1px solid var(--bm-line);
	padding: 22px;
	border-radius: var(--bm-radius-sm);
	margin-top: 24px;
}

.bm-respond-buttons { display: flex; gap: 12px; }

.bm-maps { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.bm-maps a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--bm-line);
	border-radius: 6px;
	color: var(--bm-muted);
	text-decoration: none;
	font-size: .85em;
	font-weight: 600;
}

.bm-maps a:hover { border-color: var(--bm-copper); color: var(--bm-copper-bright); }
.bm-maps a.primary { background: var(--bm-copper); border-color: var(--bm-copper); color: #fff; }
.bm-maps a.primary:hover { background: var(--bm-copper-dark); color: #fff; }

/* ---- documents ---------------------------------------------------------- */

.bm-files { list-style: none; }

.bm-file {
	background: var(--bm-soft);
	border: 1px solid var(--bm-line);
	padding: 16px;
	margin-bottom: 12px;
	border-radius: var(--bm-radius-sm);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
}

.bm-file-name { font-weight: 600; font-size: .95em; }
.bm-file-date { font-size: .8em; color: var(--bm-muted); }
.bm-upload { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.bm-upload-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bm-upload input[type="file"] { flex: 1; font-size: .88em; color: var(--bm-muted); }
.bm-upload-row input[type="text"], .bm-upload-row input[type="url"] { flex: 1; min-width: 160px; }

.bm-add-link-form { margin-bottom: 22px; }
.bm-add-link-form .bm-row { margin-bottom: 4px; }

.bm-field-with-link { display: flex; align-items: center; gap: 10px; }
.bm-field-with-link input { flex: 1; min-width: 0; }
.bm-inline-link {
	flex: none;
	font-size: .85em;
	font-weight: 600;
	color: var(--bm-copper);
	text-decoration: none;
	white-space: nowrap;
}
.bm-inline-link:hover { text-decoration: underline; }

.bm-consent-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .82em;
	color: var(--bm-muted);
	cursor: pointer;
}

.bm-consent-row input[type="checkbox"] { margin-top: 2px; flex: none; }

.bm-song-doc-panel {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--bm-line);
}
.bm-song-doc-panel h3 { font-size: 1em; margin-bottom: 10px; }

.bm-song-doc-list { list-style: none; margin: 0 0 10px; padding: 0; }
.bm-song-doc-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--bm-line);
}
.bm-song-doc-list li:last-child { border-bottom: none; }
/* The title is a plain flex item, so a long unbroken filename (no spaces to
   wrap on) refuses to shrink and pushes the Remove button out past it
   instead of staying pinned to the row's right edge. min-width: 0 lets it
   actually shrink, and the button gets flex: none so it keeps a fixed size
   and position regardless of title length. */
.bm-song-doc-list li > a { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.bm-song-doc-list .bm-form-inline { margin-top: 0; flex: none; }

.bm-song-links { display: flex; gap: 10px; flex-wrap: wrap; }
.bm-generic-link-row { margin-bottom: 8px; }

/* ---- guest list picker -------------------------------------------------- */

.bm-picker-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.bm-picker-head label.bm-label-flush { margin: 0; }

body.bm-page button.bm-linkbtn {
	background: none;
	border: none;
	color: var(--bm-copper-bright);
	cursor: pointer;
	font-size: .82em;
	font-weight: 600;
	padding: 0;
	text-decoration: underline;
}

body.bm-page button.bm-linkbtn:hover { background: none; color: var(--bm-copper); }

.bm-picker { border: 1px solid var(--bm-line); border-radius: var(--bm-radius-sm); max-height: 280px; overflow-y: auto; }

.bm-picker-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--bm-line);
}

.bm-picker-row:last-child { border-bottom: none; }
.bm-picker-row:hover { background: var(--bm-soft); }
.bm-picker-badges { display: flex; gap: 8px; align-items: center; flex: none; }
.bm-picker-row label { margin: 0; font-weight: 400; cursor: pointer; flex: 1; font-size: .92em; }

/* ---- set list builder ---------------------------------------------------- */

.bm-setlist-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.bm-setlist-col h4 { font-size: .85em; color: var(--bm-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }

.bm-setlist-list {
	list-style: none;
	border: 1px solid var(--bm-line);
	border-radius: var(--bm-radius-sm);
	max-height: 340px;
	overflow-y: auto;
}

.bm-setlist-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--bm-line);
	font-size: .9em;
}

.bm-setlist-list li:last-child { border-bottom: none; }
#availableSongs li:hover { background: var(--bm-soft); }

.bm-setlist-selected { counter-reset: setlist-row; }
.bm-setlist-selected li { counter-increment: setlist-row; }
.bm-setlist-selected li::before {
	content: counter(setlist-row) ".";
	flex: none;
	color: var(--bm-faint);
	font-family: ui-monospace, monospace;
	width: 1.6em;
}

.bm-setlist-row-label { flex: 1; }
.bm-setlist-row-actions { display: flex; gap: 4px; flex: none; }

@media (max-width: 720px) {
	.bm-setlist-builder { grid-template-columns: 1fr; }
}

/* ---- set list sheet (view / print) --------------------------------------- */

.bm-setlist-sheet {
	background: var(--bm-panel);
	border: 1px solid var(--bm-line);
	border-radius: var(--bm-radius);
	padding: 32px;
	margin-bottom: 20px;
}

.bm-setlist-sheet-head { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--bm-copper); }
.bm-setlist-sheet-head h1 { font-size: 1.8em; margin-bottom: 6px; }
.bm-setlist-sheet-venue { font-size: 1.05em; }
.bm-setlist-sheet-event { font-size: .85em; color: var(--bm-muted); margin-top: 4px; }
.bm-setlist-sheet-notes { margin-top: 10px; font-size: .9em; color: var(--bm-muted); font-style: italic; }

.bm-setlist-sheet-table { width: 100%; border-collapse: collapse; }
.bm-setlist-sheet-table th, .bm-setlist-sheet-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bm-line); }
.bm-setlist-sheet-table th { font-size: .75em; text-transform: uppercase; letter-spacing: .04em; color: var(--bm-faint); }
.bm-setlist-sheet-table td:first-child { color: var(--bm-faint); font-family: ui-monospace, monospace; width: 2em; }

@media print {
	body.bm-page { background: #fff; color: #000; }
	.bm-topbar, .bm-trial-banner, .bm-trial-banner-expired, footer, .no-print { display: none !important; }
	main { padding: 0; max-width: none; }
	.bm-setlist-sheet { background: #fff; border: none; padding: 0; }
	.bm-setlist-sheet-head { border-bottom-color: #000; }
	.bm-setlist-sheet-table th, .bm-setlist-sheet-table td { border-bottom-color: #ccc; color: #000; }
	.bm-setlist-sheet-table th { color: #444; }
	.bm-setlist-sheet-venue, .bm-setlist-sheet-notes, .bm-setlist-sheet-head h1 { color: #000; }
}

/* ---- identity box (My Profile) ------------------------------------------ */

.bm-identity { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.bm-identity-avatar {
	flex: none;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--bm-copper);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em;
	font-weight: 700;
	letter-spacing: .04em;
}

.bm-identity-details { flex: 1; min-width: 220px; }

.bm-identity-name {
	font-size: 1.35em;
	font-weight: 700;
	color: var(--bm-ink);
	margin-bottom: 3px;
}

.bm-identity-email {
	display: inline-block;
	color: var(--bm-copper-bright);
	text-decoration: none;
	font-size: .95em;
	word-break: break-all;
}

.bm-identity-email:hover { text-decoration: underline; }

.bm-identity-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 12px;
}

/* ---- availability ------------------------------------------------------- */

.bm-week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
}

.bm-day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 6px;
	border: 2px solid var(--bm-line);
	border-radius: var(--bm-radius-sm);
	cursor: pointer;
	text-align: center;
	background: var(--bm-soft);
	transition: border-color .15s, background .15s;
}

.bm-day input { position: absolute; opacity: 0; pointer-events: none; }
.bm-day:hover { border-color: var(--bm-copper); }

.bm-day.on { background: var(--bm-good-bg); border-color: var(--bm-good); }
.bm-day.off { background: var(--bm-neutral-bg); border-color: var(--bm-line); }

.bm-day-short { font-weight: 700; font-size: .95em; color: var(--bm-ink); }
.bm-day-state { font-size: .68em; text-transform: uppercase; letter-spacing: .04em; color: var(--bm-muted); }
.bm-day.on .bm-day-state { color: var(--bm-good); }

.bm-matrix th:not(:first-child), .bm-matrix td:not(:first-child) { text-align: center; }
.bm-matrix td.bm-cell { font-weight: 700; font-size: 1.05em; white-space: nowrap; }
.bm-cell.yes { color: var(--bm-good); }
.bm-cell.no { color: var(--bm-bad); }

.bm-avail-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	background: var(--bm-soft);
	border: 1px solid var(--bm-line);
	border-radius: var(--bm-radius-sm);
	padding: 12px 16px;
	margin-top: 12px;
	font-size: .88em;
}

.bm-avail-summary strong { color: var(--bm-ink); }
.bm-avail-count.ok { color: var(--bm-good); font-weight: 700; }
.bm-avail-count.bad { color: var(--bm-bad); font-weight: 700; }

.bm-avail {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: .68em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
}

.bm-avail-available { background: var(--bm-good-bg); color: var(--bm-good); }
.bm-avail-unavailable { background: var(--bm-bad-bg); color: var(--bm-bad); }
.bm-avail-away { background: var(--bm-warn-bg); color: var(--bm-warn); }

.bm-picker-row.is-unavailable { background: rgba(226, 104, 95, .06); }
.bm-picker-row.is-away { background: rgba(217, 164, 65, .06); }

/* ---- centred single-card pages ------------------------------------------ */

.bm-centre { max-width: 540px; margin: 45px auto; padding: 0 20px; }
.bm-centre .bm-panel { padding: 40px; }
.bm-centre h1 { text-align: center; font-size: 1.6em; margin-bottom: 10px; }
.bm-centre .bm-page-sub { text-align: center; }
.bm-centre button { width: 100%; margin-top: 24px; padding: 14px; }
.bm-centre-link { text-align: center; margin-top: 20px; font-size: .9em; color: var(--bm-muted); }
.bm-centre-link a { color: var(--bm-copper-bright); }

.bm-big-mark { text-align: center; font-size: 3em; margin-bottom: 10px; color: var(--bm-copper-bright); }

/* ---- footer --------------------------------------------------------------*/

body.bm-page + footer,
body.bm-page footer {
	background: var(--bm-bg);
	border-top: 1px solid var(--bm-line);
	color: var(--bm-muted);
	text-align: center;
	padding: 26px;
	font-size: .85em;
}

body.bm-page footer .page-links { justify-content: center; margin-top: 10px; }

@media (max-width: 750px) {
	.bm-row, .bm-row-3, .bm-stats, .bm-plans { grid-template-columns: 1fr; }
	.bm-half { max-width: 100%; }
	.bm-topbar-inner { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
	.bm-nav { justify-content: flex-start; }
	.bm-bar-who { text-align: left; }
	.bm-panel { padding: 22px; }
	.bm-centre .bm-panel { padding: 26px; }
	.bm-week { grid-template-columns: repeat(4, 1fr); }
	.bm-identity { gap: 16px; }
	.bm-identity-avatar { width: 56px; height: 56px; font-size: 1.25em; }

	.bm-picker-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.bm-person, .bm-file {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.bm-person-actions {
		flex-basis: 100%;
		justify-content: flex-start;
	}
	.bm-person-actions .bm-row-actions {
		flex-basis: auto;
	}

	.bm-row-actions {
		flex-wrap: wrap;
		justify-content: flex-start;
		flex-basis: 100%;
	}

	.bm-picker-row {
		flex-wrap: wrap;
	}
	.bm-picker-badges {
		flex-basis: 100%;
		justify-content: flex-start;
	}

	.bm-upload-row, .bm-add-person {
		flex-direction: column;
		align-items: stretch;
	}
	.bm-upload input[type="file"],
	.bm-add-person select {
		flex: none;
		width: 100%;
	}
	.bm-upload button, .bm-add-person button {
		width: 100%;
	}
}

/* =========================================================================
   MARKETING SITE — index.html
   The public landing page. Unscoped (no .bm-page ancestor, this is a plain
   <body>), so nothing here needs a prefix - none of these selectors exist
   anywhere in the app styling above.
   ========================================================================= */

:root {
	--bg: #111;
	--panel: #1b1b1b;
	--copper: #b87333;
	--text: #f5f5f5;
	--muted: #b8b8b8;
	--border: #2f2f2f;
}

body {
	font-family: Inter, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
}

.container { width: min(1200px, 92%); margin: auto; }

nav {
	position: sticky;
	top: 0;
	background: rgba(17, 17, 17, .95);
	border-bottom: 1px solid var(--border);
}

.nav { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
.logo { display: flex; align-items: center; font-weight: 800; font-size: 1.3rem; color: var(--text); text-decoration: none; }
.logo span { color: var(--copper); }
.logo-img { height: 120px; width: auto; display: block; }

.btn {
	display: inline-block;
	background: var(--copper);
	color: #fff;
	text-decoration: none;
	padding: 14px 24px;
	border-radius: 8px;
	font-weight: 700;
}

.btn-outline { background: transparent; border: 1px solid var(--border); }

.hero { padding: 90px 0; }
.hero-single { max-width: 900px; margin: 0 auto; text-align: center; }

.no-whatsapp-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 10px 22px 10px 12px;
	margin-bottom: 28px;
	font-weight: 700;
	font-size: 1.05rem;
}
.no-whatsapp-icon { height: 34px; width: auto; display: block; border-radius: 50%; }

h1 { font-size: 4rem; line-height: 1.05; margin-bottom: 20px; }
.hero-title { font-size: 5.2rem; }
.accent { color: var(--copper); }
.lead { font-size: 1.3rem; color: var(--muted); margin-bottom: 30px; }

.cards, .audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }

.card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 28px;
}

section { padding: 80px 0; }
h2 { text-align: center; font-size: 2.6rem; margin-bottom: 15px; }
.sub { text-align: center; color: var(--muted); margin-bottom: 45px; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.step { text-align: center; background: var(--panel); padding: 25px; border-radius: 16px; }

.num {
	width: 44px;
	height: 44px;
	background: var(--copper);
	border-radius: 50%;
	margin: 0 auto 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.case { background: var(--panel); padding: 50px; border-radius: 20px; }

ul { max-width: 800px; margin: auto; }
.security li { margin: 12px 0; }

footer {
	padding: 40px;
	border-top: 1px solid var(--border);
	text-align: center;
	color: var(--muted);
}

@media (max-width: 900px) {
	h1 { font-size: 2.8rem; }
	.hero-title { font-size: 3.2rem; }
}

@media (max-width: 640px) {
	.nav { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 0; }
	.nav-right { flex-direction: column; align-items: flex-start; width: 100%; gap: 14px; }
	.page-links { flex-wrap: wrap; gap: 8px 18px; }
	.nav-right .btn { width: 100%; text-align: center; }
}

/* ---- secondary pages (about / support / legal) --------------------------
   Same nav bar as the landing page, but with a row of page links instead of
   a single CTA button - these are reference pages, not conversion pages. */

/* Groups the page links with whatever sits beside them (the CTA button on
   the homepage nav) so the outer nav's logo/right-side split stays a simple
   two-item space-between, same as it was before these links existed. */
.nav-right { display: flex; align-items: center; gap: 32px; }

.page-links { display: flex; gap: 26px; }

.page-links a {
	color: var(--muted);
	text-decoration: none;
	font-size: .95rem;
	font-weight: 600;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

.page-links a:hover,
.page-links a.current {
	color: var(--text);
	border-bottom-color: var(--copper);
}

.page-content {
	max-width: 720px;
	margin: 0 auto;
	padding: 70px 0;
}

.page-content h1 { font-size: 2.6rem; text-align: left; margin-bottom: 12px; }
.page-content .sub { text-align: left; margin-bottom: 40px; }
.page-content p { margin-bottom: 16px; }
.page-content h2 { font-size: 1.5rem; text-align: left; margin: 36px 0 14px; }
.page-content h3 { font-size: 1.1rem; text-align: left; margin: 24px 0 10px; }
.page-content code {
	font-family: ui-monospace, monospace;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: .92em;
}
.page-content pre {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 18px 20px;
	overflow-x: auto;
	margin-bottom: 20px;
}
.page-content pre code { background: none; border: none; padding: 0; font-size: .92rem; line-height: 1.6; }
.page-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.page-content th, .page-content td {
	text-align: left;
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	font-size: .95rem;
}
.page-content th { color: var(--muted); font-weight: 600; }
.page-content ul, .page-content ol { margin: 0 0 16px 22px; }
.page-content li { margin-bottom: 6px; }

/* ---- cookie notice -------------------------------------------------------
   Shared by the marketing pages and the app (both palettes use the same
   values under different custom-property names), so this uses the literal
   colours directly rather than depending on either token set. */

.bm-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	background: #1b1b1b;
	border-top: 1px solid #2f2f2f;
	padding: 16px 24px;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
}

.bm-cookie-banner p {
	margin: 0;
	max-width: 640px;
	color: #b8b8b8;
	font-size: .92rem;
	line-height: 1.5;
}

.bm-cookie-banner a { color: #d68a44; }

.bm-cookie-banner .bm-cookie-accept {
	flex: none;
	background: #b87333;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 22px;
	font-weight: 700;
	font-size: .92rem;
	font-family: inherit;
	cursor: pointer;
}

.bm-cookie-banner .bm-cookie-accept:hover { background: #96591f; }

@media (max-width: 560px) {
	.bm-cookie-banner { justify-content: flex-start; text-align: left; padding: 16px; }
}