/* ChugCheck Account 1.0.0
 *
 * Colours come from the dark plugin when it is active (it sets --cc-* on the
 * body), so the door matches the rooms. The fallbacks carry the page on their
 * own if that plugin is ever off: light ink on a white theme does not look
 * wrong, it disappears, and a sign-in form nobody can read is a site nobody
 * can get into.
 */

.cca {
	--cca-ink: var(--cc-ink, #F2EDE4);
	--cca-dim: var(--cc-dim, #9A9183);
	--cca-accent: var(--cc-accent, #C9A96A);
	--cca-line: rgba(233, 231, 227, .14);

	max-width: 430px;
	margin: 0 auto;
	padding: 52px 20px 72px;
	color: var(--cca-ink);
	background: transparent;
	font-size: 16px;
	line-height: 1.5;
}

.cca--me { max-width: 760px; }

/* .cca itself as well as its children: without it the padding is added to
   the max-width and the card is 470px when the rule says 430. */
.cca, .cca *, .cca *::before, .cca *::after { box-sizing: border-box; }
.cca a { color: var(--cca-accent); text-decoration: none; }
.cca a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cca__h {
	margin: 0;
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 800;
	letter-spacing: -.028em;
	line-height: 1.08;
	color: var(--cca-ink);
}

.cca__lede { margin: 10px 0 0; font-size: 14.5px; color: var(--cca-dim); }
.cca__alt { margin: 20px 0 0; font-size: 14px; color: var(--cca-dim); }

.cca-bad {
	margin: 20px 0 0;
	padding: 12px 15px;
	border-radius: 10px;
	background: color-mix(in srgb, #A02E27 22%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #A02E27 55%, transparent);
	font-size: 14.5px;
}

.cca-note {
	margin: 14px 0 0;
	padding: 12px 15px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--cca-ink) 6%, transparent);
	box-shadow: inset 0 0 0 1px var(--cca-line);
	font-size: 13.5px;
	color: var(--cca-dim);
}

/* ------------------------------------------------------------- the form -- */

.cca-form { display: grid; gap: 16px; margin: 26px 0 0; }

.cca-field { display: grid; gap: 6px; }
.cca-field > span { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.cca-field > em { font-size: 12.5px; font-style: normal; color: var(--cca-dim); }

/* The element as well as the class.
 *
 * A theme rule as ordinary as `.entry-content input { … }` is one class and
 * one element, which beats one class of ours -- and the way that loses is a
 * white box with black text in the middle of a dark form, on the one page
 * where looking untrustworthy costs the most. */
.cca input[type="text"],
.cca input[type="email"],
.cca input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	border: 0;
	border-radius: 10px;
	background: color-mix(in srgb, var(--cca-ink) 7%, transparent);
	box-shadow: inset 0 0 0 1px var(--cca-line);
	color: var(--cca-ink);
	font: inherit;
	font-size: 15.5px;
}
.cca input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--cca-accent); }

.cca-check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: var(--cca-dim);
}

/* The tick, in the site's gold rather than the browser's blue. One property,
   and without it the only saturated blue on the whole site sits in the middle
   of the one form a stranger is deciding whether to trust. */
.cca-check input[type="checkbox"] { accent-color: var(--cca-accent); width: 15px; height: 15px; }

.cca button.cca-go {
	width: 100%;
	margin-top: 4px;
	padding: 13px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--cca-accent);
	color: #17130C;
	font: inherit;
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
}
.cca button.cca-go:hover { filter: brightness(1.07); }

/* ------------------------------------------------------- your own page --- */

.cca-sec { margin: 38px 0 0; }
.cca-sec__h {
	margin: 0 0 14px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--cca-line);
	font-size: 18px;
	font-weight: 700;
	color: var(--cca-ink);
}

.cca-none { margin: 0; color: var(--cca-dim); }

.cca-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.cca-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--cca-line);
}
.cca-row:last-child { border-bottom: 0; }
.cca-row__name { font-size: 15.5px; font-weight: 600; color: var(--cca-ink); }
.cca-row__name:hover { color: var(--cca-accent); }
.cca-row__said { font-size: 14px; color: var(--cca-dim); flex: 1 1 260px; }
.cca-row__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* The reader's own answer, in the colour the drink page gave it. A rating of
   "Poured it out" is red there and has to be red here, or the two pages are
   describing different things. */
.cca-tag {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cca-c, #6E675C) 30%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cca-c, #6E675C) 70%, transparent);
	font-size: 12.5px;
	white-space: nowrap;
}
.cca-tag em {
	font-style: normal;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .72;
}

@media (max-width: 700px) {
	.cca { padding-top: 34px; }
	.cca-row { flex-direction: column; align-items: flex-start; }
}