/**
 * Upstream deepika-builds/liquid-glass demo dressing, applied to the nav
 * pill, every button (.glass-accent / .ghost-pill), and the hero satellite
 * stat cards (rebuilt as DOM by liquid-glass-init.js so the glass has a
 * real backdrop to refract). Values verbatim from demo/index.html at
 * commit 98ed97b. This sheet is unlayered so it wins over the theme rules
 * inside @layer components.
 */
[data-fx="nav-pill"].glass-chrome,
.glass-accent,
.ghost-pill,
.lg-sat-wrap {
	border-color: transparent;
	background: linear-gradient(180deg, rgba(14, 14, 22, 0.18), rgba(14, 14, 22, 0.32));
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.45),
		inset 0 1px 1px rgba(255, 255, 255, 0.5),
		inset 0 -8px 20px rgba(255, 255, 255, 0.06),
		inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}
/* glass button labels stay white in every section (the theme's room swap
   would flip them dark on light backdrops); the demo's soft text-shadow
   keeps them readable when the backdrop behind the glass is light */
.glass-accent,
.ghost-pill {
	color: #f5f5f7;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
/* hover feedback: the theme's lime/accent hover fills are overridden by the
   glass background above, so deepen the tint instead */
.glass-accent:hover,
.ghost-pill:hover {
	background: linear-gradient(180deg, rgba(14, 14, 22, 0.28), rgba(14, 14, 22, 0.42));
}
/* suppress .glass-chrome's default 1px inner border; the glass ring comes
   from the inset box-shadow above */
[data-fx="nav-pill"].glass-chrome::after {
	border: 0;
}
/* Safari/Firefox/iOS frosted fallback (module adds .lg-fallback): no SVG
   refraction there, so the material must carry the glass read on its own —
   brighter specular, visible ring, top sheen and a soft bottom rim light.
   Selector doubled to outrank [data-fx="nav-pill"].glass-chrome. */
.lg-fallback.lg-fallback {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.01) 60%, rgba(255, 255, 255, 0.06)),
		linear-gradient(180deg, rgba(24, 26, 34, 0.30), rgba(14, 14, 22, 0.44));
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.45),
		inset 0 1.5px 1px rgba(255, 255, 255, 0.75),
		inset 0 -1px 1px rgba(255, 255, 255, 0.18),
		inset 0 -10px 24px rgba(255, 255, 255, 0.08),
		inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* --- hero satellite stat cards (DOM rebuild of the old PNG crops) ------ */
.lg-sat {
	display: flex;
	width: 100%;
	color: #f2f3f6;
	font-family: "Inter Tight", -apple-system, sans-serif;
	text-align: left;
}
.lg-sat-review  { aspect-ratio: 522 / 190; align-items: center; gap: 14px; padding: 14px 18px; }
.lg-sat-occupancy { aspect-ratio: 667 / 290; flex-direction: column; justify-content: space-between; padding: 13px 16px 12px; }
.lg-sat-rate    { aspect-ratio: 522 / 266; flex-direction: column; justify-content: space-between; padding: 15px 18px 14px; }
.lg-sat-task    { aspect-ratio: 526 / 197; align-items: center; gap: 14px; padding: 14px 18px; }

.lg-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lg-row { display: flex; align-items: center; gap: 8px; }
.lg-row-between { justify-content: space-between; width: 100%; }

.lg-tile {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
	color: #ccd2d9;
}
.lg-sat-task .lg-tile { width: 46px; height: 46px; border-radius: 14px; }
.lg-tile svg { width: 24px; height: 24px; }

.lg-num {
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	color: #f4f5f7;
	font-size: 27px;
}
.lg-sat-occupancy .lg-num { font-size: 30px; }
.lg-sat-rate .lg-num { font-size: 33px; }
.lg-sat-task .lg-num { font-size: 29px; }

.lg-cap {
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: rgba(242, 243, 246, 0.55);
	white-space: nowrap;
}
.lg-sat-occupancy .lg-cap { font-size: 7.5px; letter-spacing: 0.18em; }
.lg-sat-rate .lg-cap-top { font-size: 11px; }

.lg-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(217, 229, 211, 0.92);
	color: #21301e;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
}
.lg-chip svg { width: 11px; height: 11px; }

.lg-title { font-size: 14px; font-weight: 500; color: #eef0f3; }
.lg-iconbtn {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #dde1e6;
}
.lg-iconbtn svg { width: 10px; height: 10px; }
.lg-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	color: #e8eaee;
	font-size: 10.5px;
	font-weight: 500;
}
.lg-pill svg { width: 8px; height: 8px; }

.lg-chart { width: 45%; height: auto; display: block; color: #b8c4d2; }

/* --- Guesty scene: chat panel, stat/event cards, bubble, input bar ----- */
#guesty .lg-glass {
	border-color: transparent;
	background: linear-gradient(180deg, rgba(14, 14, 22, 0.18), rgba(14, 14, 22, 0.32));
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.45),
		inset 0 1px 1px rgba(255, 255, 255, 0.5),
		inset 0 -8px 20px rgba(255, 255, 255, 0.06),
		inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}
/* the gold question bubble and send button read white on glass */
#guesty .g-bubble.lg-glass,
#guesty .panel-inset span.lg-glass {
	color: #f5f5f7;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}