/* ==================================================================
   The registration gate.

   Built to sit over a listing without removing it: the page is whole
   in the HTML underneath, so a search engine reads the address, the
   price and the photograph exactly as it did before. Only a browser
   covers it. Doing it the other way — leaving the detail out of the
   page entirely — would take these pages out of Google, and they are
   where the visitors arrive from.
   ================================================================== */

/* In the page on every view, shown only when it is opened — by the
   listing it guards, or by Sign in and Register in the header. */
.jp-gate {
	display: none;
}

.jp-gate.is-open {
	position: fixed;
	inset: 0;
	z-index: 2500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

/* Escape stands it down rather than trapping anybody. */
.jp-gate.is-stood-down {
	display: none !important;
}

.jp-gate__veil {
	position: absolute;
	inset: 0;
	background: rgba(12, 13, 12, 0.78);
	backdrop-filter: blur(6px);
	animation: jp-veil-in 0.35s ease both;
}

.jp-gate__box {
	position: relative;
	width: 100%;
	max-width: 880px;
	max-height: calc(100vh - 48px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 40px 110px rgba(12, 13, 12, 0.45);
	animation: jp-box-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.jp-gate__side {
	padding: 44px 44px 38px;
	overflow-y: auto;
	max-height: calc(100vh - 48px);
	text-align: center;
}

.jp-gate__media {
	overflow: hidden;
	background: var(--paper, #f5f3ee);
}

.jp-gate__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.jp-gate__title {
	margin: 0 0 12px;
	font-size: clamp(1.4rem, 2.3vw, 1.75rem);
	line-height: 1.2;
}

.jp-gate__text {
	margin: 0 0 12px;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.6;
}

/* The line carrying today's date. Quieter than the reason above it —
   it is reassurance, not the argument. */
.jp-gate__note {
	margin: 0 0 22px;
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(12, 13, 12, 0.55);
}

.jp-gate__msg {
	margin: 0 0 14px;
	padding: 11px 14px;
	background: rgba(12, 13, 12, 0.05);
	font-size: 0.86rem;
	line-height: 1.5;
	text-align: left;
}

.jp-gate__msg.is-bad {
	background: rgba(179, 45, 46, 0.08);
	color: #8d2324;
}

.jp-gate__msg[hidden] {
	display: none;
}

.jp-gate__form .field {
	margin-bottom: 10px;
}

.jp-gate__form input {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid rgba(12, 13, 12, 0.16);
	background: #fff;
	font: inherit;
	font-size: 0.94rem;
	color: #0c0d0c;
	transition: border-color 0.2s ease;
}

.jp-gate__form input:focus {
	outline: 0;
	border-color: #0c0d0c;
}

.jp-gate__form .btn {
	margin-top: 8px;
}

.jp-gate__form[hidden] {
	display: none;
}

.jp-gate__swap {
	margin: 14px 0 0;
	font-size: 0.84rem;
	color: rgba(12, 13, 12, 0.6);
}

.jp-gate__swap button,
.jp-gate__swap a {
	border: 0;
	padding: 0;
	background: none;
	font: inherit;
	color: #0c0d0c;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}

/* The page behind stops scrolling while the gate is up, but only once
   the script has run — with no script the page is simply readable. */
body.jp-gated {
	overflow: hidden;
}

@media (max-width: 820px) {
	.jp-gate__box {
		max-width: 460px;
		grid-template-columns: 1fr;
	}

	.jp-gate__media {
		order: -1;
		height: 150px;
	}

	.jp-gate__side {
		padding: 32px 26px 28px;
		max-height: none;
	}
}

@media (max-height: 760px) {
	.jp-gate__side {
		padding: 28px 36px 24px;
	}

	.jp-gate__note {
		margin-bottom: 16px;
	}
}

/* ---------- The header's account links ---------- */

.header__who {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted, #7a756f);
	white-space: nowrap;
}

.header__acct {
	border: 0;
	padding: 0 2px;
	background: none;
	font: inherit;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #0c0d0c;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s ease;
}

.header__acct:hover {
	color: var(--gold-solid, #b08d57);
}

.header__acct--strong {
	font-weight: 600;
}

@media (max-width: 600px) {
	/* The bar has the button and the burger to fit already. The name goes
	   first — it is the least useful of the three. */
	.header__who {
		display: none;
	}
}

/* The line explaining where the password will arrive. */
.jp-gate__fine {
	margin: 12px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(12, 13, 12, 0.5);
}

/* The way out — and only where there is one. Over a listing the gate is a
   condition of seeing the detail, so the button is not there to press. */
.jp-gate__x {
	display: none;
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	font-size: 21px;
	font-weight: 300;
	line-height: 1;
	color: #0c0d0c;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(12, 13, 12, 0.2);
	transition: transform 0.24s ease, background-color 0.2s ease, color 0.2s ease;
}

.jp-gate.is-asked .jp-gate__x {
	display: grid;
}

.jp-gate__x:hover,
.jp-gate__x:focus-visible {
	background: #0c0d0c;
	color: #fff;
	transform: rotate(90deg);
}

/* ==================================================================
   Continue with Google
   ================================================================== */

/* White with a hairline border, which is what Google's own guidance asks
   for and what people have learned to recognise. It sits above the form
   because it is the shorter road, and the form reads as the fallback. */
.jp-gate__google{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:11px;
	width:100%;
	padding:14px 20px;
	margin:0 0 4px;
	background:#fff;
	border:1px solid rgba(12,13,12,.18);
	border-radius:2px;
	font-family:var(--display,inherit);
	font-size:.82rem;
	font-weight:600;
	letter-spacing:.06em;
	color:#3c4043;
	text-decoration:none;
	transition:border-color .2s ease,box-shadow .2s ease;
}

.jp-gate__google:hover{
	border-color:rgba(12,13,12,.34);
	box-shadow:0 1px 6px rgba(12,13,12,.12);
	color:#3c4043;
}

/* The mark carries its own four colours, so it must not take the stroke
   every other icon on the site is given. */
.jp-gate__google svg{
	width:18px;height:18px;
	flex:none;
	stroke:none;
}

/* A rule with the word sitting in a gap in it. */
.jp-gate__or{
	position:relative;
	margin:20px 0 18px;
	text-align:center;
	font-size:.7rem;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:rgba(12,13,12,.4);
}

.jp-gate__or::before{
	content:"";
	position:absolute;
	top:50%;left:0;right:0;
	height:1px;
	background:rgba(12,13,12,.12);
}

.jp-gate__or span{
	position:relative;
	padding:0 14px;
	background:#fff;
}

/* Filled in by Google and not up for editing — greyed so that reads as
   deliberate rather than as a field that will not focus. */
.jp-gate__form input[readonly]{
	background:rgba(12,13,12,.04);
	color:rgba(12,13,12,.6);
	cursor:default;
}

/* ==================================================================
   Agreeing to the terms
   ================================================================== */

/* Small, because it is fine print, but the box itself is not small —
   a tick box nobody can hit is a form nobody can send. */
.jp-gate__agree{
	display:flex;
	align-items:flex-start;
	gap:11px;
	margin:6px 0 18px;
	text-align:left;
	font-size:.78rem;
	line-height:1.6;
	color:rgba(12,13,12,.62);
	cursor:pointer;
}

.jp-gate__agree input{
	flex:none;
	width:17px;height:17px;
	margin:2px 0 0;
	accent-color:var(--gold-solid,#b58e43);
	cursor:pointer;
}

.jp-gate__agree a{
	color:var(--gold-solid,#b58e43);
	text-decoration:underline;
	text-underline-offset:2px;
}

/* The browser's own "please tick this" bubble points at the box, which
   is where it belongs — nothing here fights it. */
.jp-gate__agree input:focus-visible{
	outline:2px solid var(--gold-solid,#b58e43);
	outline-offset:2px;
}