/**
 * Rate your box — page styling.
 *
 * Matches the approved design: left-aligned, hairline rules, 2px corners,
 * uppercase letter-spaced labels, brand-green stars. Deliberately not the
 * rounded-card treatment used elsewhere on the site; this page is a form, and
 * reads as one.
 */

.tgrev {
	--tgrev-bg: #FDFBF7;
	--tgrev-card: #FFFFFF;
	--tgrev-ink: #1A1A1A;
	--tgrev-muted: #6B6B6B;
	--tgrev-rule: #E8E4DF;
	--tgrev-green: #23A74A;
	--tgrev-green-dk: #1B8239;
	--tgrev-off: #CFC9BD;

	max-width: 620px;
	margin: 0 auto;
	padding: 56px 20px 120px;
	color: var(--tgrev-ink);
	font-family: "Nunito Sans", "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	box-sizing: border-box;
}

.tgrev *,
.tgrev *::before,
.tgrev *::after {
	box-sizing: border-box;
}

/* The theme's stylesheet now loads on this page (it has to, or the nav is
   unstyled), so anything it sets globally on headings, buttons and form
   controls has to be neutralised here rather than fought element by element. */
.tgrev h1,
.tgrev h2,
.tgrev p {
	text-align: left;
}

.tgrev h2 {
	text-transform: none;
	letter-spacing: normal;
}

.tgrev button,
.tgrev textarea,
.tgrev input {
	font-family: inherit;
}

.tgrev button {
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.tgrev-head {
	border-bottom: 1px solid var(--tgrev-rule);
	padding-bottom: 22px;
	margin-bottom: 4px;
}

.tgrev-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tgrev-muted);
	font-variant-numeric: tabular-nums;
	margin-bottom: 12px;
}

/* Beats the theme's own h1 rules without !important: two classes, one element. */
.tgrev .tgrev-head h1 {
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: clamp(26px, 5vw, 34px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--tgrev-ink);
	margin: 0 0 12px;
	text-align: left;
	text-wrap: balance;
}

.tgrev-lede {
	margin: 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.6;
	color: #4A4A4A;
}

/* ── One meal ─────────────────────────────────────────────────────────── */

.tgrev-item {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	gap: 4px 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--tgrev-rule);
}

.tgrev-item > img {
	width: 60px;
	height: 60px;
	max-width: 100%;
	object-fit: cover;
	border-radius: 2px;
	grid-row: span 2;
	display: block;
}

.tgrev-item h2 {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	font-family: inherit;
}

.tgrev-meta {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--tgrev-muted);
	font-variant-numeric: tabular-nums;
}

/* ── Stars ────────────────────────────────────────────────────────────── */

.tgrev-rate {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.tgrev-rate legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tgrev-stars {
	display: flex;
}

.tgrev-stars input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.tgrev-stars label {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	cursor: pointer;
}

.tgrev-stars svg {
	width: 27px;
	height: 27px;
	overflow: visible;
}

.tgrev-stars path {
	fill: none;
	stroke: var(--tgrev-off);
	stroke-width: 1.6;
	transition: fill 0.12s, stroke 0.12s;
	transition-delay: calc(var(--i) * 40ms);
	transform-origin: 50% 55%;
	transform-box: fill-box;
}

.tgrev-stars label.is-on path {
	fill: var(--tgrev-green);
	stroke: var(--tgrev-green);
}

.tgrev-stars label.is-pop path {
	animation: tgrev-pop 0.4s cubic-bezier(0.3, 1.7, 0.5, 1);
}

@keyframes tgrev-pop {
	0% { transform: scale(1); }
	42% { transform: scale(1.26); }
	100% { transform: scale(1); }
}

.tgrev-stars input:focus-visible + label {
	outline: 2px solid var(--tgrev-green);
	outline-offset: 2px;
}

.tgrev-word {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tgrev-muted);
	min-width: 0;
}

/* ── Tap-to-write phrases ─────────────────────────────────────────────── */

.tgrev-chipwrap {
	grid-column: 1 / -1;
	display: grid;
	grid-template-rows: 1fr;
	opacity: 1;
}

/* Collapsed only where JS can expand it again. */
.tgrev-js .tgrev-chipwrap {
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.32s ease, opacity 0.25s ease;
}

.tgrev-js .tgrev-item.is-rated .tgrev-chipwrap {
	grid-template-rows: 1fr;
	opacity: 1;
}

.tgrev-chipwrap > div {
	overflow: hidden;
	min-height: 0;
}

.tgrev-chips-lbl {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tgrev-muted);
	padding: 12px 0 8px;
}

.tgrev-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tgrev-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.tgrev-chip span {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	border: 1px solid var(--tgrev-rule);
	background: var(--tgrev-card);
	color: var(--tgrev-ink);
	border-radius: 2px;
	padding: 9px 11px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tgrev-chip input:checked + span {
	background: var(--tgrev-green);
	border-color: var(--tgrev-green);
	color: #fff;
}

.tgrev-chip input:focus-visible + span {
	outline: 2px solid var(--tgrev-ink);
	outline-offset: 1px;
}

/* ── Optional writing ─────────────────────────────────────────────────── */

.tgrev-note {
	grid-column: 1 / -1;
	margin-top: 8px;
}

.tgrev-note summary {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tgrev-green-dk);
	cursor: pointer;
	list-style: none;
	padding: 6px 0;
}

.tgrev-note summary::-webkit-details-marker {
	display: none;
}

.tgrev-note textarea {
	width: 100%;
	max-width: 100%;
	min-height: 72px;
	border: 1px solid var(--tgrev-rule);
	border-radius: 2px;
	padding: 10px;
	font: inherit;
	font-size: 14px;
	line-height: 1.45;
	color: var(--tgrev-ink);
	background: var(--tgrev-card);
	resize: vertical;
}

.tgrev-note textarea:focus-visible {
	outline: 2px solid var(--tgrev-green);
	border-color: transparent;
}

/* ── Submit ───────────────────────────────────────────────────────────── */

.tgrev-bar {
	position: sticky;
	bottom: 0;
	margin-top: 18px;
	padding: 14px 0 18px;
	background: var(--tgrev-bg);
	border-top: 1px solid var(--tgrev-rule);
}

.tgrev-submit {
	width: 100%;
	border: 0;
	border-radius: 2px;
	background: var(--tgrev-green);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1;
	padding: 17px;
	cursor: pointer;
}

.tgrev-submit[disabled] {
	background: #D9D5CC;
	color: #8A857C;
	cursor: default;
}

.tgrev-submit:focus-visible {
	outline: 3px solid var(--tgrev-ink);
	outline-offset: 2px;
}

/* ── Thanks / expired / invalid ───────────────────────────────────────── */

.tgrev-centered {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	padding-top: 48px;
}

.tgrev-centered h1 {
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
}

.tgrev-centered p {
	margin: 0;
	color: var(--tgrev-muted);
	max-width: 34ch;
}

.tgrev-centered a {
	margin-top: 6px;
	color: var(--tgrev-green-dk);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
}

.tgrev-rule {
	width: 44px;
	height: 3px;
	background: var(--tgrev-green);
}

.tgrev-tick {
	width: 40px;
	height: 40px;
}

.tgrev-tick path {
	fill: none;
	stroke: var(--tgrev-green);
	stroke-width: 2.4;
	stroke-linecap: square;
	stroke-dasharray: 44;
	stroke-dashoffset: 0;
	animation: tgrev-draw 0.5s ease-out both;
}

@keyframes tgrev-draw {
	from { stroke-dashoffset: 44; }
	to { stroke-dashoffset: 0; }
}

.tgrev-summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	border-top: 1px solid var(--tgrev-rule);
	padding-top: 14px;
}

.tgrev-summary > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

.tgrev-nm {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tgrev-sc {
	color: var(--tgrev-green-dk);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	flex: none;
}

.tgrev-said {
	margin: -4px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--tgrev-muted);
}

@media (prefers-reduced-motion: reduce) {
	.tgrev *,
	.tgrev *::before,
	.tgrev *::after {
		animation: none !important;
		transition: none !important;
	}
}