/**
 * [B] Juegocito Social - frontend styles.
 *
 * Every colour, radius, shadow and font here comes from Core's tokens.css.
 * There is not a single raw hex value in this file on purpose: the platform
 * has one palette and two themes, and a group card that hardcoded its own
 * would be the first thing to look wrong in dark mode.
 */

.bdw-js-page {
	max-width: 1080px;
}

.bdw-js-page > h1 {
	margin-bottom: 6px;
}

.bdw-js-page > .bdw-jc-muted {
	max-width: 68ch;
	margin-bottom: 24px;
}

/* ---------- Forms ---------- */

.bdw-js-form,
.bdw-js-search {
	background: var(--bdw-paper);
	border: 1px solid var(--bdw-line);
	border-radius: var(--bdw-radius-md);
	box-shadow: var(--bdw-shadow);
	padding: 16px 20px;
	margin-bottom: 24px;
}

.bdw-js-search {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	align-items: end;
}

.bdw-js-form p,
.bdw-js-search p {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 14px;
}

.bdw-js-search p {
	margin-bottom: 0;
}

.bdw-js-form label,
.bdw-js-search label {
	font-size: 13px;
	font-weight: 800;
	color: var(--bdw-accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bdw-js-form input[type="text"],
.bdw-js-form input[type="search"],
.bdw-js-form input[type="number"],
.bdw-js-form select,
.bdw-js-form textarea,
.bdw-js-search input,
.bdw-js-search select {
	font-family: var(--bdw-font-body);
	font-size: 15px;
	color: var(--bdw-ink);
	background: var(--bdw-paper);
	border: 1px solid var(--bdw-line);
	border-radius: var(--bdw-radius-sm);
	padding: 9px 13px;
	width: 100%;
	box-sizing: border-box;
}

/* Two tones, matching Core. Yellow alone measures 1.72:1 on the cream page
   and 1.81:1 on a card - both short of the 3:1 a focus indicator needs - so
   the halo in the offset gap is what actually makes the ring visible on a
   light surface. The fallbacks keep this working if Core is deactivated and
   its tokens are not defined. */
.bdw-js-form input:focus-visible,
.bdw-js-form select:focus-visible,
.bdw-js-form textarea:focus-visible,
.bdw-js-search input:focus-visible,
.bdw-js-search select:focus-visible,
.bdw-js button:focus-visible {
	outline: var(--bdw-focus-width, 3px) solid var(--bdw-focus-color, #F5B33C);
	outline-offset: var(--bdw-focus-offset, 2px);
	box-shadow: 0 0 0 calc(var(--bdw-focus-width, 3px) + var(--bdw-focus-offset, 2px)) var(--bdw-focus-halo, #0A3B31);
}

.bdw-js-input--small {
	max-width: 120px;
}

.bdw-js-fieldset {
	border: 1px solid var(--bdw-line);
	border-radius: var(--bdw-radius-sm);
	padding: 12px 16px;
	margin: 0 0 16px;
}

.bdw-js-fieldset legend {
	font-size: 13px;
	font-weight: 800;
	color: var(--bdw-accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0 6px;
}

.bdw-js-check,
.bdw-js-switch,
.bdw-js-share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 18px;
	font-size: 15px;
	font-weight: 400;
	color: var(--bdw-ink);
	text-transform: none;
	letter-spacing: normal;
}

.bdw-js-switch {
	font-weight: 700;
}

/* ---------- Availability grid ---------- */

.bdw-js-availability {
	border-collapse: collapse;
	width: 100%;
	max-width: 420px;
}

.bdw-js-availability th,
.bdw-js-availability td {
	border: 1px solid var(--bdw-line);
	padding: 6px 10px;
	text-align: center;
	font-size: 13px;
	color: var(--bdw-ink);
}

.bdw-js-availability thead th {
	color: var(--bdw-accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
}

.bdw-js-availability tbody th {
	text-align: left;
	font-weight: 700;
}

/* ---------- Result grids and cards ---------- */

.bdw-js-grid,
.bdw-js-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin-bottom: 28px;
}

.bdw-js-card {
	display: flex;
	flex-direction: column;
	background: var(--bdw-paper);
	border: 1px solid var(--bdw-line);
	border-radius: var(--bdw-radius-md);
	box-shadow: var(--bdw-shadow);
	overflow: hidden;
}

.bdw-js-card--person {
	flex-direction: row;
	gap: 14px;
	padding: 16px;
	align-items: flex-start;
}

.bdw-js-card__image {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.bdw-js-card__avatar {
	border-radius: var(--bdw-radius-pill);
	flex: 0 0 auto;
}

.bdw-js-card__body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bdw-js-card--person .bdw-js-card__body {
	padding: 0;
}

.bdw-js-card__body h3 {
	margin: 0;
	font-family: var(--bdw-font-display);
	font-size: 18px;
	color: var(--bdw-heading);
}

.bdw-js-card__excerpt {
	margin: 0;
	color: var(--bdw-ink);
	font-size: 14px;
}

.bdw-js-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

/* ---------- Chips ---------- */

.bdw-js-chip--open,
.bdw-js-chip--member,
.bdw-js-chip--sharing {
	background: var(--bdw-green-100);
	color: var(--bdw-on-tint);
	border-color: var(--bdw-green-300);
}

/* ---------- Match score ---------- */

.bdw-js-match {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

.bdw-js-match__score {
	font-family: var(--bdw-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--bdw-accent);
}

.bdw-js-match__reasons {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	color: var(--bdw-muted);
}

/* ---------- Group page ---------- */

.bdw-js-group {
	margin-top: 28px;
}

.bdw-js-facts {
	margin-bottom: 18px;
}

.bdw-js-venue {
	background: var(--bdw-sand);
	border-radius: var(--bdw-radius-sm);
	padding: 10px 14px;
	color: var(--bdw-ink);
}

.bdw-js-flag {
	background: var(--bdw-coral-100);
	color: var(--bdw-on-tint);
	border-radius: var(--bdw-radius-sm);
	padding: 10px 14px;
	font-weight: 700;
}

.bdw-js-rules {
	color: var(--bdw-ink);
	margin-bottom: 18px;
}

.bdw-js-group__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.bdw-js-queue {
	background: var(--bdw-paper);
	border: 1px solid var(--bdw-line);
	border-radius: var(--bdw-radius-md);
	padding: 14px 18px;
	margin-bottom: 22px;
}

.bdw-js-queue__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--bdw-line);
}

.bdw-js-queue__row:last-child {
	border-bottom: 0;
}

.bdw-js-members {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}

.bdw-js-members__item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.bdw-js-members__item img {
	border-radius: var(--bdw-radius-pill);
}

.bdw-js-members__name {
	color: var(--bdw-ink);
	font-weight: 600;
}

/* ---------- Shared shelf ---------- */

.bdw-js-shelf {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}

.bdw-js-shelf__item a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	color: var(--bdw-ink);
}

.bdw-js-shelf__item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--bdw-radius-sm);
	border: 1px solid var(--bdw-line);
}

.bdw-js-shelf__title {
	font-weight: 700;
	font-size: 14px;
}

/* ---------- Tabs ---------- */

.bdw-js-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.bdw-js-tabs__tab {
	background: var(--bdw-paper);
	border: 1px solid var(--bdw-line);
	border-radius: var(--bdw-radius-pill);
	padding: 7px 16px;
	font-family: var(--bdw-font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--bdw-ink);
	cursor: pointer;
}

.bdw-js-tabs__tab.is-current {
	background: var(--bdw-green-700);
	border-color: var(--bdw-green-700);
	color: var(--bdw-on-dark);
}

.bdw-js-tabs__count {
	margin-left: 6px;
	font-family: var(--bdw-font-mono);
	font-size: 12px;
}

/* ---------- The safety notice ---------- */

.bdw-js-waiver {
	max-width: 640px;
}

/* Bounded and scrollable on purpose: the whole notice in one unbroken
   column pushes the checkbox and the button off the bottom of a phone, and
   a person who cannot see the control they are being asked to use will
   scroll past the text to find it. */
.bdw-js-waiver__text {
	max-height: 46vh;
	overflow-y: auto;
	border: 1px solid var(--bdw-line);
	border-radius: var(--bdw-radius-sm);
	padding: 12px 16px;
	margin: 12px 0;
	background: var(--bdw-cream);
	color: var(--bdw-ink);
	font-size: 14px;
	line-height: 1.55;
}

.bdw-js-waiver__text h4 {
	margin: 14px 0 6px;
	font-family: var(--bdw-font-display);
	font-size: 15px;
	color: var(--bdw-heading);
}

.bdw-js-waiver__text h4:first-child {
	margin-top: 0;
}

.bdw-js-waiver__text p {
	margin: 0 0 8px;
}

.bdw-js-waiver__agree {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	font-weight: 700;
	color: var(--bdw-ink);
}

.bdw-js-notice {
	max-width: 70ch;
	margin-bottom: 28px;
}

.bdw-js-notice h3 {
	margin: 20px 0 6px;
	font-size: 17px;
	color: var(--bdw-heading);
}

/* ---------- Density and invitations ---------- */

.bdw-js-density {
	grid-column: 1 / -1;
	background: var(--bdw-sand);
	border-radius: var(--bdw-radius-md);
	padding: 16px 20px;
	color: var(--bdw-ink);
}

.bdw-js-density h3 {
	margin: 0 0 6px;
	font-family: var(--bdw-font-display);
	font-size: 17px;
	color: var(--bdw-heading);
}

.bdw-js-density p {
	margin: 0 0 10px;
	max-width: 60ch;
}

.bdw-js-invite {
	background: var(--bdw-paper);
	border: 1px solid var(--bdw-line);
	border-radius: var(--bdw-radius-md);
	box-shadow: var(--bdw-shadow);
	padding: 16px 20px;
	margin-bottom: 28px;
	max-width: 720px;
}

.bdw-js-invite__form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 10px;
	margin-bottom: 10px;
}

.bdw-js-invite__form label {
	font-size: 13px;
	font-weight: 800;
	color: var(--bdw-accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	flex: 1 0 100%;
}

.bdw-js-invite__form input[type="email"] {
	flex: 1 1 240px;
	font-family: var(--bdw-font-body);
	font-size: 15px;
	color: var(--bdw-ink);
	background: var(--bdw-paper);
	border: 1px solid var(--bdw-line);
	border-radius: var(--bdw-radius-sm);
	padding: 9px 13px;
}

.bdw-js-invite__stats {
	font-family: var(--bdw-font-mono);
	font-size: 13px;
	color: var(--bdw-muted);
	margin: 0;
}

/* ---------- Guidance and safety ---------- */

.bdw-js-guidance {
	max-width: 70ch;
	color: var(--bdw-ink);
}

.bdw-js-guidance li {
	margin-bottom: 8px;
}

.bdw-js-incident {
	max-width: 720px;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
	.bdw-js-card--person {
		flex-direction: column;
	}

	.bdw-js-search {
		grid-template-columns: 1fr;
	}
}