/*
 * Account and profile styles.
 *
 * A standalone stylesheet on purpose, rather than a partial in css/sass. The webpack config
 * hardcodes mode: "development" and nothing sets NODE_ENV, so style-loader injects the whole
 * stylesheet through dist/styles.bundle.min.js. Every SCSS change therefore rewrites 1.6 MB of
 * JavaScript, which would give each pull request here an unreviewable diff and make any two of them
 * conflict. Bootstrap 5 is already in that bundle and its classes are available for layout.
 *
 * Fixing the build properly is its own small change. This feature should not be what finds out
 * whether that refactor is safe.
 */

.cc-account { max-width: 640px; margin: 0 auto; text-align: left; padding-bottom: 3rem; }
.cc-account h1 { margin-bottom: 1rem; }
.cc-account__lede { color: #bdbdbd; margin-bottom: 1.5rem; }
.cc-account__alt { margin-top: 2rem; color: #898989; }
.cc-account__alt a { color: #4ab7e0; }

.cc-form { margin: 0 0 2rem; }
.cc-field { display: block; margin-bottom: 1.25rem; }
.cc-field label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.cc-field input[type="text"],
.cc-field input[type="email"],
.cc-field input[type="password"],
.cc-field input[type="url"],
.cc-field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid #3a3a3a;
	border-radius: 4px;
	background: #111;
	color: #fff;
	/* 16px minimum, or iOS zooms the page on focus and does not zoom back out. */
	font-size: 16px;
}
.cc-field input:focus, .cc-field textarea:focus { outline: 2px solid #4ab7e0; outline-offset: 1px; }
.cc-field__hint { display: block; margin-top: 0.35rem; color: #898989; font-size: 0.9rem; }
.cc-field--check label { font-weight: 400; }

.cc-fieldset { border: 1px solid #2c2c2c; border-radius: 4px; padding: 1rem; }
.cc-fieldset legend { font-weight: 700; font-size: 1rem; padding: 0 0.4rem; width: auto; }

.cc-linkrow { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.cc-linkrow input { flex: 1 1 auto; min-width: 0; }

/* .cc-field label makes every label bold, and these radios sit inside a .cc-field fieldset. */
.cc-field .cc-radio { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.75rem; font-weight: 400; }
.cc-radio input { margin-top: 0.45rem; }
.cc-radio__status { display: block; font-size: 1.15rem; font-weight: 700; color: #fff; }

/* Heading with the profile form's Save button beside it. */
.cc-account__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.cc-account .cc-account__head h1 { margin: 0; }

/* Collection and privacy at a glance, above the profile form. */
.cc-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 2rem; }
.cc-summary__card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid #5a5a5a;
	border-radius: 6px;
	color: #fff;
	text-decoration: none;
}
.cc-summary__card:hover, .cc-summary__card:focus { border-color: #4ab7e0; color: #fff; text-decoration: none; }
.cc-summary__icon {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	fill: none;
	stroke: #bdbdbd;
	stroke-width: 1.6;
	stroke-linejoin: round;
	stroke-linecap: round;
}
/* Fill the lower cards so the stack reads as three sheets, not three outlines on top of each other. */
.cc-summary__icon rect { fill: #000; }
.cc-summary__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cc-summary__label { color: #bdbdbd; font-size: 0.9rem; }
.cc-summary__value { font-weight: 700; font-size: 1.15rem; color: #fff; }

.cc-button {
	display: inline-block;
	background: #4ab7e0;
	color: #06222c;
	border: 0;
	border-radius: 4px;
	padding: 0.7rem 1.4rem;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}
.cc-button:hover { background: #6ac7ea; }
.cc-button--quiet { background: transparent; color: #4ab7e0; border: 1px solid #4ab7e0; padding: 0.45rem 0.9rem; }
.cc-button[disabled] { background: #333; color: #777; cursor: not-allowed; }

.cc-notice { border-radius: 4px; padding: 0.85rem 1rem; margin-bottom: 1.5rem; }
.cc-notice--success { background: #12331f; border: 1px solid #2f7d4c; color: #b9f0cd; }
.cc-notice--error   { background: #331414; border: 1px solid #8a3030; color: #f3c3c3; }
.cc-notice--warning { background: #332b12; border: 1px solid #8a7130; color: #f0e2b9; }
.cc-notice p { margin: 0 0 0.6rem; }
.cc-notice p:last-child { margin-bottom: 0; }
.cc-notice a { color: inherit; text-decoration: underline; }

/* The honeypot. Hidden from people, reachable by a bot that fills every field it finds. */
.cc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cc-env-banner {
	background: #8a3030; color: #fff; text-align: center;
	padding: 0.5rem 1rem; font-weight: 700; font-size: 0.9rem;
}

@media (max-width: 575px) {
	.cc-linkrow { flex-direction: column; }
}
@media (max-width: 359px) {
	.cc-summary { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Two columns on a piece's page: the certification facts, then ownership.
 *
 * A CSS grid inside the existing Bootstrap column rather than a second row of
 * Bootstrap columns, so the markup change stays small and the ordering below is
 * possible at all. Bootstrap 5 is in the bundle and its grid would work, but it
 * cannot reorder these two on a phone without duplicating the panel.
 *
 * The facts list is centred by an inherited .text-center on the wrapper and by
 * rules in css/sass/_single.scss. Those overrides need one more class than the
 * SCSS uses, because the SCSS ships inside a JavaScript bundle whose <style>
 * lands in the head at an order this stylesheet cannot rely on. Specificity is
 * the dependable lever here, not source order.
 * ------------------------------------------------------------------------ */

.cc-detail {
	display: grid;
	gap: 2rem;
	margin-top: 2rem;
}

body.single-collectible .cc-detail__facts {
	text-align: left;
}

/* Fill the column instead of sitting in a centred 400px block. */
body.single-collectible .cc-detail .cc-collectible-verification-list__wrapper {
	max-width: none;
	margin: 0;
	display: block;
}

@media (min-width: 768px) {
	.cc-detail {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		/* Both columns take the row's height, so the divider below runs the whole
		   way down rather than stopping where the panel's content ends. */
		align-items: stretch;
	}
	.cc-detail__claim {
		border-left: 1px solid #2c2c2c;
		padding-left: 3rem;
	}
}

/*
 * On a phone, ownership comes first. Somebody standing at a table with the card
 * in their hand wants the button, not nine rows of data they are looking at on
 * the card itself.
 */
@media (max-width: 767.98px) {
	.cc-detail__claim {
		order: -1;
	}
}

/* Ownership panel. */
.cc-claim {
	margin: 0 auto;
	text-align: center;
}
.cc-claim__state { font-size: 1.1rem; margin-bottom: 1rem; }
.cc-claim__state a { color: #4ab7e0; }
.cc-claim__form { margin: 0; }
.cc-claim__hint { color: #898989; font-size: 0.9rem; margin-top: 0.75rem; }
.cc-claim__hint a { color: #4ab7e0; }
.cc-claim__confirm { color: #f0e2b9; margin-bottom: 1rem; }
.cc-claim__cancel { margin-left: 1rem; color: #898989; }
.cc-claim__disclaimer {
	margin-top: 1.5rem;
	color: #6f6f6f;
	font-size: 0.8rem;
	line-height: 1.4;
}
.cc-claim .cc-notice { text-align: left; }

/* Collector profile and the grid of owned collectibles. */
.cc-profile { max-width: 900px; margin: 0 auto; padding-bottom: 3rem; }
.cc-profile__name { text-align: center; margin-bottom: 0.75rem; }
.cc-profile__about { text-align: center; color: #cfcfcf; max-width: 560px; margin: 0 auto 1.25rem; }
.cc-profile__private-note { text-align: center; color: #f0e2b9; font-size: 0.9rem; }
.cc-profile__private-note a { color: #4ab7e0; }
.cc-profile__links { list-style: none; padding: 0; margin: 0 auto 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.cc-profile__links a { color: #4ab7e0; border: 1px solid #2c2c2c; border-radius: 999px; padding: 0.3rem 0.9rem; display: inline-block; }
.cc-profile__heading { text-align: center; font-size: 1.1rem; color: #898989; margin: 2rem 0 1.25rem; }
.cc-profile__empty { text-align: center; color: #898989; }

.cc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cc-card__link { display: block; text-align: center; color: inherit; text-decoration: none; }
.cc-card__image { width: 100%; height: auto; border-radius: 4px; display: block; }
.cc-card__image--empty { aspect-ratio: 3 / 4; background: #1a1a1a; border-radius: 4px; }
.cc-card__title { display: block; margin-top: 0.5rem; font-weight: 700; font-size: 0.95rem; }
.cc-card__number { display: block; color: #898989; font-size: 0.85rem; }
.cc-pagination { text-align: center; margin-top: 2rem; }
.cc-pagination a, .cc-pagination span { display: inline-block; padding: 0.35rem 0.7rem; color: #4ab7e0; }
.cc-pagination .current { color: #fff; font-weight: 700; }

@media (max-width: 767px) { .cc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .cc-grid { grid-template-columns: repeat(2, 1fr); } }

/*
 * The two photographs of a piece.
 *
 * They were butted straight up against one another, because an <img> is inline
 * and the markup put them on adjacent lines with nothing between. A flex column
 * with a gap separates them without relying on whitespace in the template.
 */
.cc-piece-images {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	margin-top: 2.5rem;
}
.cc-piece-images img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Account link in the top corner, on every page.
 *
 * A strip above the logo rather than something absolutely positioned beside it,
 * so it cannot overlap the logo when the viewport is narrow and the logo is at
 * its largest. Quiet by design: this is a utility, not navigation.
 * ------------------------------------------------------------------------ */
.cc-account-nav {
	font-size: 0.85rem;
	padding: 0.6rem 0 0;
}
.cc-account-nav__inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
}
.cc-account-nav a {
	color: #898989;
	text-decoration: none;
}
.cc-account-nav a:hover,
.cc-account-nav a:focus {
	color: #4ab7e0;
	text-decoration: underline;
}
.cc-account-nav__me {
	color: #e4e4e4 !important;
	font-weight: 700;
	max-width: 14rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cc-account-nav__sep {
	color: #4a4a4a;
}

/* ---------------------------------------------------------------------------
 * The certification lookup form on the home page.
 *
 * It overflowed every phone. The form is a nowrap flex row, and its two
 * children need about 471px between them (the input 308 and the button 163,
 * both carrying 42px of horizontal padding) inside a form that is only 369px
 * wide at 390px of viewport. The button ran 48px past the right edge, so the
 * whole page scrolled sideways.
 *
 * This is the site's single most important interaction, on the device somebody
 * is most likely holding when they have the card in their hand. The fix is to
 * let the two stack and fill the width below the small breakpoint.
 *
 * Lives here rather than in css/sass/_homepage.scss because that ships inside a
 * 1.6 MB JavaScript bundle, and a one-rule change there would rewrite the whole
 * of it. This file already loads on every page.
 * ------------------------------------------------------------------------ */
@media (max-width: 575.98px) {
	.cc-verification-search__form {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
	}
	.cc-verification-search__form input[type="text"],
	.cc-verification-search__form button {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		/* 42px each side is what made them too wide to sit together. */
		padding-left: 1rem;
		padding-right: 1rem;
		/* Keep the input at 16px or iOS zooms the page on focus and stays there. */
		font-size: 16px;
	}
}