/**
 * Layout: the shell, the header bar, the footer, modals and the toast.
 */

.shell {
	width: min(100% - 32px, var(--shell));
	margin-inline: auto;
}

.page-shell,
.wallet-shell,
.protest-shell,
.archive-shell {
	width: min(100% - 32px, var(--shell-narrow));
	padding-block: 24px 64px;
}

.site-main {
	display: block;
	min-height: 40vh;
}

/* ---------------------------------------------------------------- header */

.site-head {
	position: sticky;
	inset-block-start: 0;
	z-index: 40;
	padding: 14px 0;
	padding-block-start: calc(14px + env(safe-area-inset-top, 0px));
	background: linear-gradient(180deg, rgba(226, 241, 251, .96), rgba(226, 241, 251, .82));
	backdrop-filter: blur(8px);
}

.site-head__inner {
	width: min(100% - 32px, var(--shell));
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 10px 20px;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-soft);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.site-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 14px;
	border-radius: var(--r-pill);
	color: var(--muted);
	font-size: var(--fs-xs);
	font-weight: 700;
}

.site-nav__list a:hover {
	text-decoration: none;
	color: var(--navy-600);
}

.site-nav__list .current-menu-item a,
.site-nav__list li.current-menu-item > a {
	background: var(--tint-2);
	color: var(--navy-600);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	justify-self: center;
}

.brand:hover {
	text-decoration: none;
}

.brand__mark {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #fff 0 18%, transparent 19%),
		conic-gradient(var(--red-500) 0 25%, var(--navy-600) 0 50%, var(--red-500) 0 75%, var(--navy-600) 0);
	border: 3px solid var(--brass-400);
	flex: none;
}

.brand__text {
	display: grid;
	line-height: 1.1;
}

.brand__text strong {
	color: var(--navy-600);
	font-size: var(--fs-h4);
	font-weight: 800;
}

.brand__text span {
	color: var(--red-600);
	font-size: var(--fs-2xs);
	font-weight: 700;
}

.head-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

/* The phone's menu button. Hidden above the breakpoint, where the nav shows. */

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 44px;
	height: 44px;
	padding: 13px 11px;
	border: 1px solid var(--line-soft);
	border-radius: var(--r-control, 10px);
	background: var(--tint-2);
	cursor: pointer;
}

.menu-toggle span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--navy-600);
}

/* Only ever present with the drawer, which is only ever on small screens. */

.menu-scrim,
.menu-close,
.site-nav__account {
	display: none;
}

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

.site-foot {
	margin-block-start: 48px;
	padding-block: 32px;
	padding-block-end: calc(32px + env(safe-area-inset-bottom, 0px));
	background: var(--surface);
	border-block-start: 1px solid var(--line-soft);
}

.foot-share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 20px 24px;
	background: var(--tint);
	border-radius: var(--r-card);
}

.foot-share__copy {
	display: grid;
	gap: 2px;
}

.foot-share__copy strong {
	color: var(--navy-600);
	font-size: var(--fs-lg);
}

.foot-share__copy span {
	color: var(--muted-2);
	font-size: var(--fs-xs);
}

/*
 * Share buttons.
 *
 * Each carries its network's own mark in its own brand colour. They were
 * previously blank coloured squares — an icon font was never wired up — so the
 * marks are now inline SVG and cannot fail to load.
 */
.share-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.share-row__label {
	color: var(--muted-2);
	font-size: var(--fs-xs);
	font-weight: 700;
}

.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 11px;
	background: var(--navy-600);
	color: #fff;
	cursor: pointer;
	transition: transform .12s ease, filter .12s ease;
}

.share-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	text-decoration: none;
}

.share-btn .icon {
	display: block;
}

/* Brand colours, as each network publishes them. */
.share-btn--whatsapp  { background: #25D366; }
.share-btn--facebook  { background: #1877F2; }
.share-btn--x         { background: #000000; }
.share-btn--telegram  { background: #26A5E4; }
.share-btn--linkedin  { background: #0A66C2; }
.share-btn--mail      { background: var(--muted); }
.share-btn--link      { background: var(--navy-500); }

/* Instagram's mark sits on its gradient rather than a flat fill. */
.share-btn--instagram {
	background: radial-gradient(circle at 28% 108%, #FDF497 0%, #FD5949 45%, #D6249F 62%, #285AEB 92%);
}


.foot-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-block-start: 22px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--line-soft);
}

.foot-bar__brand {
	margin: 0;
	color: var(--muted-4);
	font-size: var(--fs-2xs);
}

.foot-bar__links {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.foot-bar__links a {
	color: var(--muted-2);
	font-size: var(--fs-2xs);
	font-weight: 700;
}

/* ---------------------------------------------------------------- panels */

.panel {
	margin-block-start: 20px;
	padding: 26px;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-card);
}

.panel h2 {
	font-size: var(--fs-h4);
}

.panel__note {
	color: var(--muted-2);
	font-size: var(--fs-xs);
	margin-block-start: -6px;
}

.page-head {
	margin-block: 8px 20px;
}

.page-head p {
	color: var(--muted-2);
}

.prose {
	padding: 32px;
	background: var(--surface);
	border-radius: var(--r-card);
	border: 1px solid var(--line-soft);
}

.prose--center {
	text-align: center;
}

.card-lite + .card-lite {
	margin-block-start: 18px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--line-soft);
}

/* ----------------------------------------------------------------- modal */

.modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(8, 28, 64, .48);
}

.modal[hidden] {
	display: none;
}

.modal__panel {
	position: relative;
	width: min(100%, 520px);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 32px;
	background: var(--surface);
	border-radius: var(--r-card);
	box-shadow: var(--shadow-lift);
}

.modal__panel h2 {
	text-align: center;
	font-size: var(--fs-h4);
}

.modal__close {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 16px;
	width: 32px;
	height: 32px;
	border: 1px solid var(--line-soft);
	border-radius: 50%;
	background: var(--surface);
	color: var(--muted-2);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* A confirm dialog is narrower and centred; the chip-pack popup keeps the
   wider default. */
.modal__panel--sm {
	width: min(100%, 420px);
	text-align: center;
}

.modal__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--tint);
	color: var(--navy-600);
	font-size: 24px;
}

.modal__lede {
	margin: 0;
	color: var(--muted-2);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.modal__actions {
	display: flex;
	gap: 10px;
	margin-block-start: 22px;
}

.modal__actions > * {
	flex: 1;
}

/* ----------------------------------------------------------------- toast */

.toast {
	position: fixed;
	inset-block-start: 96px;
	inset-inline: 0;
	z-index: 80;
	width: max-content;
	max-width: calc(100% - 32px);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: var(--cell-ink);
	color: #fff;
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	font-weight: 700;
	box-shadow: var(--shadow-lift);
}

.toast[hidden] {
	display: none;
}

.toast__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--green-600);
	font-size: 13px;
}

/* ------------------------------------------------------------ responsive */

/*
 * On a phone the nav wrapped into two or three ragged rows under the logo.
 * It folds into a menu button instead, and the bar keeps one clean row:
 * button, wordmark, and the one action worth reaching without opening it.
 */
@media (max-width: 900px) {
	.site-head__inner {
		/*
		 * The drawer leaves the flow, so the bar is the one row it shows:
		 * menu button on the start edge, wordmark dead centre, the one action
		 * on the end. The side tracks are equal so the centre really is the
		 * centre, whatever the button either side of it happens to measure.
		 */
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas: 'toggle brand actions';
		justify-items: stretch;
		align-items: center;
		gap: 10px;
		padding: 10px 14px;
		border-radius: var(--r-card);
	}

	.menu-toggle {
		display: flex;
		grid-area: toggle;
		justify-self: start;
	}

	.brand {
		grid-area: brand;
		justify-self: center;
		justify-content: center;
	}

	.head-actions {
		grid-area: actions;
		justify-self: end;
		justify-content: flex-end;
	}

	/*
	 * The nav is a drawer over the page, not rows pushed under the bar: it
	 * comes in from the start edge — the right, the site being in Hebrew —
	 * and everything behind it dims. Labels are centred so every row in the
	 * drawer reads the same way.
	 */
	.site-head[data-menu="false"] .site-nav,
	.site-head[data-menu="false"] .menu-scrim {
		display: none;
	}

	/*
	 * A backdrop-filter makes its element the containing block for fixed
	 * descendants, which would trap the drawer and its scrim inside the bar.
	 * The blur stands down while the drawer is open — there is a scrim over
	 * the page by then anyway — and the bar rises above the page with it.
	 */
	.site-head[data-menu="true"],
	.site-head[data-menu="true"] .site-head__inner {
		backdrop-filter: none;
	}

	.site-head[data-menu="true"] {
		z-index: 70;
	}

	.menu-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 60;
		border: 0;
		padding: 0;
		background: rgba(3, 7, 15, .66);
		backdrop-filter: blur(2px);
		cursor: pointer;
		animation: menu-scrim-in .2s ease;
	}

	.site-head[data-menu="true"] .site-nav {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: 61;
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: min(320px, 84vw);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
		background: var(--surface);
		border-inline-end: 1px solid var(--line-soft);
		box-shadow: -24px 0 60px rgba(0, 0, 0, .4);
		animation: menu-drawer-in .24s ease;
	}

	.site-head[data-menu="true"] .menu-close {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: flex-end;
		flex: none;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--line-soft);
		border-radius: var(--r-control, 10px);
		background: var(--tint-2);
		color: var(--navy-600);
		cursor: pointer;
	}

	.site-head[data-menu="true"] .menu-close svg {
		width: 20px;
		height: 20px;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	/* The list items stretch; the links inside them are inline by default and
	   would sit at the start of a full-width row, so they fill it too. */
	.site-nav__list a {
		display: flex;
		width: 100%;
		justify-content: center;
		min-height: 50px;
		text-align: center;
		border: 1px solid var(--line-soft);
	}

	/* The account rows close the drawer, below the pages. */
	.site-head[data-menu="true"] .site-nav__account {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin: 0;
		padding: 12px 0 0;
		border-block-start: 1px solid var(--line-soft);
		list-style: none;
	}

	.site-nav__account .pill {
		width: 100%;
		min-height: 48px;
		justify-content: center;
	}

	/* The bar itself keeps the one action it has room for. */
	.head-actions .pill:not(.pill--cta) {
		display: none;
	}
}

@keyframes menu-drawer-in {
	from { transform: translateX(100%); }
	to   { transform: none; }
}

@keyframes menu-scrim-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.menu-scrim,
	.site-head[data-menu="true"] .site-nav {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * Chip packs
 *
 * The purchase modal is printed in the footer on every page, so its styles
 * have to load on every page too — they live here rather than with the
 * wallet-page styles, which only load on that one template.
 * ---------------------------------------------------------------------- */
/* ------------------------------------------------------------ chip packs */

.packs__balance {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	margin-block: 18px;
	background: var(--surface-2);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-control);
}

.packs__balance strong {
	color: var(--red-600);
	font-size: var(--fs-h4);
	font-weight: 800;
}

.packs__balance span {
	color: var(--muted-3);
	font-size: var(--fs-xs);
}

.packs__lede {
	text-align: center;
	color: var(--muted-2);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.packs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.pack {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 16px 8px;
	background: var(--surface);
	border: 2px solid var(--line-soft);
	border-radius: var(--r-control);
	cursor: pointer;
	font: inherit;
}

.pack.is-active {
	border-color: var(--red-600);
	background: #FFF6F4;
}

.pack__icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--navy-600);
	border: 3px dashed rgba(255, 255, 255, .7);
}

.pack.is-active .pack__icon {
	background: var(--red-500);
}

.pack__name {
	color: var(--navy-600);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-align: center;
}

.pack__price {
	color: var(--muted-3);
	font-size: var(--fs-2xs);
	font-weight: 700;
}

.methods {
	display: grid;
	gap: 8px;
	margin-bottom: 16px;
}

.method {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--surface);
	border: 2px solid var(--line-soft);
	border-radius: var(--r-control);
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.method.is-active {
	border-color: var(--navy-600);
	background: var(--tint-2);
}

.method__mark {
	width: 34px;
	height: 22px;
	border-radius: 4px;
	flex: none;
	background: linear-gradient(135deg, var(--navy-600), var(--gold));
}

/* Stripe's indigo, and a flat neutral for the testing pass-through. */
.method__mark--isrollet_stripe {
	background: linear-gradient(135deg, #635BFF, #0A2540);
}

.method__mark--isrollet_free {
	background: repeating-linear-gradient(45deg, var(--line-3) 0 6px, var(--surface-3) 6px 12px);
}

.method__text {
	display: grid;
	flex: 1;
}

.method__text strong {
	color: var(--navy-600);
	font-size: var(--fs-xs);
}

.method__text span {
	color: var(--muted-3);
	font-size: var(--fs-2xs);
}

.packs__none {
	padding: 14px;
	margin-bottom: 14px;
	border-radius: var(--r-control);
	background: var(--surface-3);
	color: var(--muted-2);
	font-size: var(--fs-xs);
	text-align: center;
}

.packs__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--muted-2);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.packs__total strong {
	color: var(--green-700);
	font-size: var(--fs-h4);
}

.packs__secure {
	margin: 12px 0 0;
	color: var(--muted-4);
	font-size: var(--fs-2xs);
	text-align: center;
}


@media (max-width: 560px) {
	.packs {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pill--logout {
	color: var(--muted-2);
}

.pill--logout:hover {
	border-color: var(--red-600);
	color: var(--red-600);
}

.pill__icon {
	font-size: 13px;
	line-height: 1;
}