#krug-root {
	min-height: 100vh;
}

#app {
	min-height: 100vh;
}

.custom-cursor-anchor {
	display: none;
}

a.tb-btn,
a.footer-link {
	text-decoration: none;
}

.tb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.home-empty {
	text-align: center;
	font-family: var(--F-display);
	font-style: italic;
	font-size: 16px;
	color: #bbb;
	padding: 60px 0;
}

/* The rating row inside a feed card. It inherits inline-flex from .star-rating,
   and a vertical margin on an inline-level box is thrown away - which is one way
   this row came to sit hard against whatever is above it. Block-level here, and
   the same inset as the rest of the card's copy: 20px on a desktop, 16px on a
   phone (see .pin .pin-rating in base.css). */
.pin-rating {
	display: flex;
	margin: 12px 20px 0;
}

.feed-row-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.feed-heart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: none;
	background: transparent;
	color: var(--muted);
	padding: 0;
	cursor: pointer;
}

.feed-save-count,
.feed-rating-count,
.feed-tap-rate {
	font-family: var(--F-sans);
	font-size: 10px;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.feed-tap-rate {
	display: inline-block;
	margin-top: 8px;
	font-size: 9px;
}

.week-empty {
	padding: 80px 0;
	text-align: center;
}

.form-hint {
	color: var(--muted);
	font-size: 7px;
	margin-left: 6px;
}

/* The note that stands above the paired language fields. .form-hint is the tiny
   inline hint inside a label; this one is a sentence on its own, so it takes the
   readable size the field errors (.form-error) already use. */
.form-note {
	margin: 0 0 16px;
	color: var(--muted);
	font-family: var(--F-sans);
	font-size: 12px;
	line-height: 1.5;
}

.so-item {
	width: 100%;
	border-left: none;
	border-right: none;
	border-top: none;
	background: transparent;
	color: var(--ink);
	text-align: left;
}

.rate-star {
	border: none;
	background: transparent;
	line-height: 1;
	padding: 0;
}

.event-form-shell {
	display: grid;
	gap: 24px;
}

.add-form .add-success.shown,
.add-event-success-view .add-success.shown {
	display: block;
}

.add-event-success-view {
	padding: 18px 18px 48px;
}

.add-event-success-view .add-success {
	margin-bottom: 18px;
	padding: 22px 18px;
	text-align: center;
}

.add-event-success-view h2 {
	margin: 0 0 8px;
	font-family: var(--F-condensed);
	font-size: 24px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.add-event-success-view p {
	margin: 0;
	color: var(--muted);
	font-family: var(--F-sans);
	font-size: 12px;
	line-height: 1.5;
}

.ghost-link {
	display: block;
	width: max-content;
	margin: 14px auto 0;
	border: none;
	background: transparent;
	color: var(--muted);
	font-family: var(--F-sans);
	font-size: 11px;
	text-decoration: underline;
	cursor: pointer;
}

.auth-panel {
	border: 1px solid var(--line);
	background: var(--card);
	border-radius: var(--r-card);
	padding: 18px;
	margin-bottom: 24px;
}

.auth-panel-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
}

.auth-panel h2 {
	font-family: var(--F-condensed);
	font-size: 16px;
	text-transform: uppercase;
	margin: 0 0 5px;
}

.auth-panel p,
.form-error {
	margin: 0;
	color: var(--muted);
	font-family: var(--F-sans);
	font-size: 12px;
	line-height: 1.5;
}

.auth-form {
	display: grid;
	gap: 13px;
}

.auth-form label {
	display: grid;
	gap: 7px;
	font-family: var(--F-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.auth-form input {
	height: 42px;
	border: 1px solid var(--line);
	background: var(--field);
	color: var(--ink);
	border-radius: var(--r-pill);
	padding: 0 14px;
	font: 500 14px var(--F-sans);
	letter-spacing: 0;
	text-transform: none;
}

.auth-form .password-requirement {
	margin-top: -2px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.auth-tabs {
	display: flex;
	gap: 8px;
}

.auth-tabs button,
.auth-session button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink);
	border-radius: var(--r-pill);
	padding: 9px 12px;
	cursor: pointer;
}

.auth-tabs button.active {
	border-color: var(--sheet-accent);
	color: var(--sheet-accent);
}

.auth-session {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--F-sans);
	font-size: 13px;
}

.auth-session span {
	border: 1px solid var(--sheet-accent);
	border-radius: var(--r-pill);
	color: var(--sheet-accent);
	padding: 4px 9px;
	font-size: 10px;
	text-transform: uppercase;
}

.auth-verify-sent .auth-panel-head {
	margin-bottom: 12px;
}

.auth-verify-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.admin-pending-list {
	display: grid;
	gap: 10px;
	margin-top: 16px;
}

.admin-main-tabs {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 14px 0 20px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	scrollbar-width: none;
}

.admin-main-tabs::-webkit-scrollbar {
	display: none;
}

.admin-main-tabs button {
	position: relative;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--muted);
	border-radius: 0;
	padding: 4px 0 7px;
	font-family: var(--F-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		color 0.18s ease,
		border-color 0.18s ease;
}

.admin-main-tabs button:hover,
.admin-main-tabs button.active {
	color: var(--ink);
}

.admin-main-tabs button.active {
	border-bottom-color: var(--ink);
}

.admin-status-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 12px;
}

.admin-sub-tabs {
	margin: 0 0 12px;
}

.admin-status-tabs button {
	border: 1px solid var(--line-mid);
	background: transparent;
	color: var(--muted);
	border-radius: var(--r-pill);
	padding: 7px 12px;
	font-family: var(--F-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
}

.admin-status-tabs button.active {
	border-color: var(--ink);
	color: var(--ink);
}

.admin-row-actions {
	flex-wrap: wrap;
	justify-content: flex-end;
}

.admin-page-inner {
	max-width: 760px;
	margin: 0 auto;
}

.policy-copy {
	font-family: var(--F-sans);
	font-size: 14px;
	line-height: 1.8;
	color: var(--muted);
}

.policy-copy h3 {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 24px 0 8px;
	color: var(--ink);
}

.policy-copy a {
	color: var(--ink);
}

.secret-event-control {
	border: 1px solid var(--line-mid);
	padding: 12px 14px;
}

.secret-event-check {
	width: fit-content;
}

.secret-password-panel {
	display: grid;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.secret-page-inner {
	max-width: 720px;
	margin: 0 auto;
}

.secret-unlock-form {
	border: 1px solid var(--line-mid);
	padding: 16px;
	margin: 28px 0;
	display: grid;
	gap: 10px;
}

.secret-unlock-form label {
	font-family: var(--F-sans);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.secret-unlock-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
}

.secret-input-wrap {
	height: 46px;
	border: 1px solid var(--line);
	background: var(--field);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 13px;
	color: var(--muted);
}

.secret-input-wrap input {
	width: 100%;
	height: 100%;
	border: none;
	background: transparent !important;
	color: var(--ink);
	font: 500 14px var(--F-sans);
	outline: none;
}

.secret-submit {
	width: auto;
	height: 46px;
	margin: 0;
	padding: 0 18px;
	white-space: nowrap;
}

.secret-error {
	margin: 0;
	color: #ff7f7f;
	font: 600 11px var(--F-sans);
}

.secret-event-card {
	border: 1px solid var(--line-mid);
	background: var(--card);
	display: grid;
	grid-template-columns: 8px minmax(0, 1fr);
	margin-bottom: 48px;
}

.secret-event-band {
	min-height: 100%;
}

.secret-event-body {
	padding: 22px;
}

.secret-event-kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.secret-event-kicker span {
	border: 1px solid var(--line-mid);
	color: var(--muted);
	border-radius: var(--r-sm);
	padding: 4px 9px;
	font: 700 8px var(--F-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.secret-event-card h2 {
	margin: 0 0 14px;
	font-family: var(--F-display);
	font-size: clamp(24px, 4vw, 42px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
}

.secret-event-meta {
	display: grid;
	gap: 8px;
	margin-bottom: 10px;
	color: var(--muted);
	font: 600 12px var(--F-sans);
}

.secret-event-meta span,
.secret-event-actions a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.secret-event-organizer {
	margin-bottom: 16px;
	color: var(--ink);
	font: 700 11px var(--F-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.secret-event-description {
	margin: 0 0 18px;
	font-family: var(--F-serif);
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-dim);
}

.secret-event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.admin-secret-badge,
.mine-secret-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	border: 1px solid var(--line-mid);
	color: var(--ink);
	background: var(--soft);
	border-radius: var(--r-sm);
	padding: 4px 8px;
	font-family: var(--F-sans);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.admin-secret-badge {
	margin-left: 6px;
}

.mine-secret-badge {
	margin-top: 8px;
}

@media (max-width: 600px) {
	.secret-unlock-row {
		grid-template-columns: 1fr;
	}

	.secret-submit {
		width: 100%;
	}

	.secret-event-body {
		padding: 18px;
	}
}

.page-actions {
	margin: 24px 0 34px;
	text-align: center;
}

#map-shell {
	flex: 1;
	height: calc(100vh - var(--top-h));
	padding-top: 0;
	overflow: hidden;
	position: relative;
}

#map-area {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 100%;
}

#map-el {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #090909;
}

.event-row {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--line);
	background: transparent;
	color: inherit;
	text-align: left;
}

.detail-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.detail-btn.danger {
	color: #ff8f8f;
	border-color: rgba(255, 143, 143, 0.45);
}

#mobile-nav {
	display: none;
}

@media (max-width: 600px) {
	#map-shell {
		min-height: calc(100vh - 74px);
	}

	/* The map fills the shell from the header down to the tab bar. This has to be here
	   rather than in base.css because app.css loads second: the `position: relative`
	   above turned the header and tab-bar insets there into a 54px downward shift, and
	   the bottom of the map — with the zoom stack anchored to it — ran on behind the
	   navbar, where the − button could not be reached. */
	#map-area {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
		height: auto;
		min-height: 0;
	}

	#mobile-nav {
		display: flex !important;
	}
}

/* Sizes that survive a thumb. The compact type scale stops at the edge of a field
   somebody types into: under 16px a phone browser zooms to the focused control and
   leaves the page enlarged after the keyboard closes. The matching rule for the event
   form is in base.css, and this one has to be here rather than there because app.css
   loads second and the `font` shorthand above would otherwise win. */
@media (max-width: 600px) {
	.auth-form input {
		height: 44px;
		font: 500 16px var(--F-sans);
	}
}