/* ==========================================================================
   Quarter Recipes — front-end styles
   A working kitchen tool: legible at arm's length, quiet everywhere except the
   step timeline. Boldness concentrated in the timeline + monospace readouts.
   ========================================================================== */

:root {
	--qr-paper:     #faf7f1;
	--qr-paper-2:   #f1ece1;
	--qr-ink:       #211d18;
	--qr-ink-soft:  #6e6555;
	--qr-line:      #e4dcce;
	--qr-accent:    #7a2e43; /* wine / reduction — links + primary actions */
	--qr-accent-2:  #611f33;
	--qr-on-accent: #fbf6f0;
	--qr-heat:      #d2662f; /* ember — hands-on / active */
	--qr-cool:      #6e8b86; /* sage — passive / waiting */

	--qr-display: "Fraunces", Georgia, "Times New Roman", serif;
	--qr-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--qr-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--qr-radius:  10px;
	--qr-gap:     clamp(1rem, 2.5vw, 1.75rem);
	--qr-maxw:    52rem;
	--qr-lh:      1.65;      /* roomier line-height for readability */
	--qr-tracking: .006em;   /* a touch of letter-spacing */
}

/* ---- Font packs (switchable) ------------------------------------------- */
:root[data-qr-font="classic"] {
	--qr-display: "Source Serif 4", Georgia, serif;
	--qr-body:    "Source Sans 3", system-ui, sans-serif;
}
:root[data-qr-font="legible"] {
	--qr-display: "Atkinson Hyperlegible", system-ui, sans-serif;
	--qr-body:    "Atkinson Hyperlegible", system-ui, sans-serif;
	--qr-tracking: .012em;
}
:root[data-qr-font="rounded"] {
	--qr-display: "Nunito", system-ui, sans-serif;
	--qr-body:    "Nunito", system-ui, sans-serif;
}

/* Scope everything to our components so we don't fight the theme globally. */
.qr-steps,
.qr-ingredients,
.qr-timeline,
.qr-standalone-timer,
.qr-discovery {
	font-family: var(--qr-body);
	color: var(--qr-ink);
	line-height: var(--qr-lh);
	letter-spacing: var(--qr-tracking);
	max-width: var(--qr-maxw);
	margin-inline: auto;
	-webkit-font-smoothing: antialiased;
}

.qr-steps *,
.qr-ingredients *,
.qr-timeline *,
.qr-standalone-timer *,
.qr-discovery * { box-sizing: border-box; }

/* Focus: always visible. */
.qr-steps :focus-visible,
.qr-ingredients :focus-visible,
.qr-timeline :focus-visible,
.qr-standalone-timer :focus-visible,
.qr-discovery :focus-visible {
	outline: 2px solid var(--qr-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* --- Shared section furniture ------------------------------------------- */
.qr-eyebrow {
	font-family: var(--qr-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--qr-accent);
}
.qr-h2 {
	margin: 0;
	font-family: var(--qr-display);
	font-weight: 400;
}
.qr-empty {
	border: 1px dashed var(--qr-line);
	border-radius: var(--qr-radius);
	padding: 1.25rem 1.5rem;
	color: var(--qr-ink-soft);
	font-size: .95rem;
	background: var(--qr-paper);
}
.qr-empty p { margin: 0; }

/* Quantities + times read like an instrument. */
.qr-qty { font-family: var(--qr-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.qr-qty-unit { font-family: var(--qr-mono); color: var(--qr-ink-soft); font-size: .85em; }

/* ==========================================================================
   Ingredients
   ========================================================================== */
.qr-ingredients__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--qr-line);
	margin-bottom: 1rem;
}
.qr-scaler {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--qr-paper-2);
	border-radius: 100px;
	padding: .25rem;
}
.qr-scaler__btn {
	width: 2rem; height: 2rem;
	border: none;
	border-radius: 50%;
	background: var(--qr-paper);
	color: var(--qr-ink);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}
.qr-scaler__btn:hover { background: #fff; }
.qr-scaler__val {
	font-family: var(--qr-mono);
	font-size: .85rem;
	min-width: 6.5rem;
	text-align: center;
}
.qr-scaler__val [data-qr-servings] { font-weight: 500; }

.qr-ing-group { margin-bottom: 1rem; }
.qr-ing-group__label {
	font-family: var(--qr-mono);
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--qr-ink-soft);
	margin: 0 0 .4rem;
}
.qr-ing-list { list-style: none; margin: 0; padding: 0; }
.qr-ing {
	display: grid;
	grid-template-columns: minmax(4.5rem, auto) 1fr;
	gap: .25rem .9rem;
	align-items: baseline;
	padding: .5rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--qr-line) 60%, transparent);
}
.qr-ing__qty { white-space: nowrap; }
.qr-ing__name { color: var(--qr-ink); text-decoration: none; font-weight: 500; }
a.qr-ing__name { border-bottom: 1px solid var(--qr-line); }
a.qr-ing__name:hover { border-color: var(--qr-accent); color: var(--qr-accent); }
.qr-ing__note {
	grid-column: 2;
	color: var(--qr-ink-soft);
	font-size: .88rem;
	font-style: italic;
}

/* ==========================================================================
   Steps — the cook view
   ========================================================================== */
.qr-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.qr-step {
	position: relative;
	padding: var(--qr-gap) 0;
	border-top: 1px solid var(--qr-line);
}
.qr-step:first-child { border-top: none; }

.qr-step__head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .85rem; }
.qr-step__num {
	font-family: var(--qr-display);
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: clamp(1.9rem, 6vw, 2.9rem);
	line-height: .9;
	color: var(--qr-accent);
	font-variant-numeric: tabular-nums;
	flex: none;
}
.qr-step__heading { padding-top: .15rem; }
.qr-step__title {
	font-family: var(--qr-display);
	font-weight: 500;
	font-size: clamp(1.2rem, 3.5vw, 1.55rem);
	line-height: 1.15;
	margin: 0;
}
.qr-step__time {
	display: inline-block;
	margin-top: .3rem;
	font-family: var(--qr-mono);
	font-size: .78rem;
	color: var(--qr-ink-soft);
}
.qr-step__active { color: var(--qr-heat); }

.qr-step__body { padding-left: 0; }
@media (min-width: 40rem) {
	.qr-step__body { padding-left: calc(2.9rem + 1rem); }
}

/* Step ingredient chips */
.qr-step__ingredients {
	list-style: none; margin: 0 0 1rem; padding: 0;
	display: flex; flex-wrap: wrap; gap: .4rem;
}
.qr-chip {
	display: inline-flex;
	align-items: baseline;
	gap: .35rem;
	padding: .3rem .6rem;
	border-radius: 100px;
	font-size: .82rem;
	background: var(--qr-paper-2);
	border: 1px solid transparent;
	text-decoration: none;
	color: var(--qr-ink);
}
.qr-chip__qty { font-family: var(--qr-mono); color: var(--qr-accent); }
.qr-chip__name { font-weight: 500; }
.qr-chip__action { color: var(--qr-ink-soft); font-style: italic; }
.qr-chip--tech {
	background: transparent;
	border-color: var(--qr-line);
	color: var(--qr-accent);
	font-family: var(--qr-mono);
	font-size: .76rem;
}
.qr-chip--tech:hover { border-color: var(--qr-accent); background: var(--qr-paper-2); }

.qr-step__text { font-size: 1.02rem; }
.qr-step__text ul { padding-left: 1.1rem; }
.qr-step__text li { margin: .2rem 0; }

.qr-step__notes {
	margin-top: .9rem;
	padding: .7rem .9rem;
	background: var(--qr-paper);
	border-left: 3px solid var(--qr-heat);
	border-radius: 0 var(--qr-radius) var(--qr-radius) 0;
	font-size: .92rem;
	color: var(--qr-ink-soft);
}
.qr-note-label {
	display: block;
	font-family: var(--qr-mono);
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--qr-heat);
	margin-bottom: .2rem;
}

.qr-step__foot {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: .75rem;
	margin-top: 1rem;
}
.qr-techniques { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.qr-techniques__label {
	font-family: var(--qr-mono);
	font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--qr-ink-soft);
}

/* Media carousel / animate */
.qr-media {
	position: relative;
	margin: 0 0 1rem;
	border-radius: var(--qr-radius);
	overflow: hidden;
	background: var(--qr-paper-2);
	aspect-ratio: 16 / 10;
}
.qr-media__track { position: relative; width: 100%; height: 100%; }
.qr-media__slide {
	position: absolute; inset: 0; margin: 0;
	opacity: 0; transition: opacity .4s ease;
}
.qr-media__slide.is-active { opacity: 1; }
.qr-media__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-media__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 2.4rem; height: 2.4rem; border: none; border-radius: 50%;
	background: rgba(33,29,24,.55); cursor: pointer;
}
.qr-media__nav::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: .6rem; height: .6rem; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.qr-media__nav--prev { left: .6rem; }
.qr-media__nav--prev::after { transform: rotate(135deg); margin-left: 1rem; }
.qr-media__nav--next { right: .6rem; }
.qr-media__nav--next::after { transform: rotate(-45deg); margin-right: 1rem; }
.qr-media__dots {
	position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%);
	display: flex; gap: .35rem;
}
.qr-media__dot { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(255,255,255,.5); }
.qr-media__dot.is-active { background: #fff; }
.qr-media__badge {
	position: absolute; top: .6rem; left: .6rem;
	font-family: var(--qr-mono); font-size: .68rem; letter-spacing: .08em;
	background: rgba(33,29,24,.7); color: var(--qr-on-accent);
	padding: .2rem .5rem; border-radius: 100px;
}

/* Timer button */
.qr-timer-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .5rem .9rem; border-radius: 100px;
	border: 1px solid var(--qr-accent); background: transparent; color: var(--qr-accent);
	font-family: var(--qr-mono); font-size: .8rem; cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.qr-timer-btn:hover { background: var(--qr-accent); color: var(--qr-on-accent); }
.qr-timer-btn__icon {
	width: .85rem; height: .85rem; border: 1.5px solid currentColor; border-radius: 50%;
	position: relative;
}
.qr-timer-btn__icon::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 1.5px; height: .35rem; background: currentColor; transform: translate(-50%,-90%);
}
.qr-timer-btn.is-running { background: var(--qr-heat); border-color: var(--qr-heat); color: #fff; }
.qr-timer-btn.is-done { background: var(--qr-cool); border-color: var(--qr-cool); color: #fff; }

/* ==========================================================================
   Timeline — signature element
   ========================================================================== */
.qr-timeline__head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	border-bottom: 1px solid var(--qr-line); padding-bottom: .6rem; margin-bottom: .6rem;
}
.qr-timeline__total { font-family: var(--qr-mono); font-size: .82rem; color: var(--qr-ink-soft); }
.qr-timeline__legend { display: flex; gap: 1rem; margin-bottom: .75rem; }
.qr-legend { font-family: var(--qr-mono); font-size: .72rem; color: var(--qr-ink-soft); display: inline-flex; align-items: center; gap: .35rem; }
.qr-legend::before { content: ""; width: .8rem; height: .8rem; border-radius: 2px; }
.qr-legend--active::before { background: var(--qr-heat); }
.qr-legend--passive::before { background: var(--qr-cool); }

.qr-timeline__lanes { display: flex; flex-direction: column; gap: .35rem; }
.qr-lane { display: grid; grid-template-columns: minmax(6.5rem, 34%) 1fr; align-items: center; gap: .75rem; }
.qr-lane__label { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.qr-lane__num { font-family: var(--qr-mono); font-size: .78rem; color: var(--qr-accent); }
.qr-lane__title {
	font-size: .85rem; color: var(--qr-ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qr-lane__track {
	position: relative; height: 1.6rem;
	background: repeating-linear-gradient(90deg, var(--qr-paper-2) 0, var(--qr-paper-2) 1px, transparent 1px, transparent 12.5%);
	border-radius: 5px;
}
.qr-bar {
	position: absolute; top: 3px; bottom: 3px; min-width: 3px;
	background: var(--qr-cool);
	border-radius: 4px;
	overflow: hidden;
}
.qr-bar__active { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--qr-heat); }

/* ==========================================================================
   Standalone timer
   ========================================================================== */
.qr-standalone-timer {
	text-align: center;
	background: var(--qr-paper-2);
	border-radius: var(--qr-radius);
	padding: 1.25rem;
	max-width: 20rem;
}
.qr-standalone-timer__readout {
	font-family: var(--qr-mono); font-weight: 500;
	font-size: 2.75rem; line-height: 1; font-variant-numeric: tabular-nums;
	color: var(--qr-ink);
}
.qr-standalone-timer.is-running .qr-standalone-timer__readout { color: var(--qr-heat); }
.qr-standalone-timer.is-done .qr-standalone-timer__readout { color: var(--qr-cool); }
.qr-standalone-timer__controls { display: flex; justify-content: center; gap: .4rem; margin-top: 1rem; }
.qr-btn {
	border: 1px solid var(--qr-line); background: var(--qr-paper);
	color: var(--qr-ink); border-radius: 8px; padding: .5rem .85rem;
	font-family: var(--qr-mono); font-size: .82rem; cursor: pointer;
	transition: background .15s ease;
}
.qr-btn:hover { background: #fff; }
.qr-btn--primary { background: var(--qr-accent); border-color: var(--qr-accent); color: var(--qr-on-accent); min-width: 5rem; }
.qr-btn--primary:hover { background: var(--qr-accent-2); }

/* ==========================================================================
   Discovery
   ========================================================================== */
.qr-discovery { max-width: 74rem; }
.qr-filters {
	display: flex; flex-wrap: wrap; gap: 1.25rem;
	padding: 1rem 0 1.25rem; border-bottom: 1px solid var(--qr-line); margin-bottom: 1.25rem;
}
.qr-filter { border: none; margin: 0; padding: 0; min-width: 0; }
.qr-filter__label {
	font-family: var(--qr-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--qr-ink-soft); padding: 0; margin-bottom: .45rem;
}
.qr-filter__opts { display: flex; flex-wrap: wrap; gap: .35rem; }
.qr-chip--filter {
	cursor: pointer; background: var(--qr-paper-2); border: 1px solid transparent;
	color: var(--qr-ink); font-size: .8rem; padding: .3rem .7rem; border-radius: 100px;
	font-family: var(--qr-body);
}
.qr-chip--filter:hover { border-color: var(--qr-line); }
.qr-chip--filter.is-active { background: var(--qr-accent); color: var(--qr-on-accent); }

.qr-discovery__count { font-family: var(--qr-mono); font-size: .78rem; color: var(--qr-ink-soft); margin: 0 0 1rem; min-height: 1rem; }

.qr-grid {
	display: grid; gap: 1.1rem;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.qr-card {
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	background: var(--qr-paper); border: 1px solid var(--qr-line);
	border-radius: var(--qr-radius); overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.qr-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgba(33,29,24,.4); border-color: var(--qr-accent); }
.qr-card__media { aspect-ratio: 4 / 3; background: var(--qr-paper-2); display: grid; place-items: center; overflow: hidden; }
.qr-card__media img { width: 100%; height: 100%; object-fit: cover; }
.qr-card__placeholder {
	font-family: var(--qr-display); font-size: 3rem; color: var(--qr-accent);
	background: repeating-linear-gradient(135deg, var(--qr-paper-2) 0 10px, var(--qr-paper) 10px 20px);
	width: 100%; height: 100%; display: grid; place-items: center;
}
.qr-card__body { padding: .85rem 1rem 1.1rem; }
.qr-card__title { font-family: var(--qr-display); font-weight: 500; font-size: 1.12rem; margin: 0 0 .25rem; line-height: 1.2; }
.qr-card__meta { font-family: var(--qr-mono); font-size: .72rem; color: var(--qr-ink-soft); }
.qr-grid.is-loading { opacity: .5; transition: opacity .2s ease; }

/* ==========================================================================
   Motion & responsive
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.qr-media__slide { transition: none; }
	.qr-card { transition: none; }
	.qr-card:hover { transform: none; }
}

@media (max-width: 34rem) {
	.qr-ing { grid-template-columns: minmax(3.75rem, auto) 1fr; }
	.qr-lane { grid-template-columns: 1fr; gap: .2rem; }
	.qr-lane__track { height: 1.35rem; }
}

/* ==========================================================================
   Shopping list
   ========================================================================== */
.qr-shop { font-family: var(--qr-body); color: var(--qr-ink); max-width: 46rem; margin-inline: auto; }
.qr-shop__head { border-bottom: 1px solid var(--qr-line); padding-bottom: .6rem; margin-bottom: 1rem; }
.qr-shop__prompt { font-family: var(--qr-display); font-size: 1.25rem; margin: 0 0 .75rem; }
.qr-shop__search input {
	width: 100%; padding: .55rem .8rem; border: 1px solid var(--qr-line);
	border-radius: 8px; background: var(--qr-paper); font: inherit; margin-bottom: .75rem;
}
.qr-shop__recipes {
	list-style: none; margin: 0 0 1rem; padding: .25rem;
	max-height: 15rem; overflow-y: auto;
	border: 1px solid var(--qr-line); border-radius: var(--qr-radius); background: var(--qr-paper);
}
.qr-shop__recipe { margin: 0; }
.qr-shop__recipe label {
	display: flex; align-items: center; gap: .6rem;
	padding: .45rem .55rem; border-radius: 6px; cursor: pointer; font-size: .95rem;
}
.qr-shop__recipe label:hover { background: var(--qr-paper-2); }
.qr-shop__recipe.is-hidden { display: none; }
.qr-shop__recipe input { width: 1.05rem; height: 1.05rem; accent-color: var(--qr-accent); }
.qr-shop__actions { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.qr-btn--ghost { background: transparent; }

.qr-shop__result-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--qr-line); padding-top: 1rem; margin-bottom: 1rem; }
.qr-shop__result-count { font-family: var(--qr-mono); font-size: .8rem; color: var(--qr-ink-soft); }

.qr-shop-group { margin-bottom: 1.4rem; break-inside: avoid; }
.qr-shop-group__aisle {
	font-family: var(--qr-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--qr-accent); margin: 0 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--qr-line);
}
.qr-shop-item { display: flex; align-items: baseline; gap: .7rem; padding: .4rem 0; }
.qr-shop-item input { margin-top: .15rem; width: 1.05rem; height: 1.05rem; accent-color: var(--qr-cool); flex: none; }
.qr-shop-item__qty { font-family: var(--qr-mono); font-variant-numeric: tabular-nums; color: var(--qr-ink); min-width: 4.5rem; }
.qr-shop-item__name { font-weight: 500; }
.qr-shop-item__from { color: var(--qr-ink-soft); font-size: .8rem; font-style: italic; margin-left: .35rem; }
.qr-shop-item.is-checked .qr-shop-item__name,
.qr-shop-item.is-checked .qr-shop-item__qty { text-decoration: line-through; color: var(--qr-ink-soft); }

/* ==========================================================================
   Print — a clean recipe card for the kitchen
   ========================================================================== */
@media print {
	.qr-scaler,
	.qr-filters,
	.qr-discovery__count,
	.qr-timer-btn,
	.qr-media__nav,
	.qr-media__dots,
	.qr-shop__picker,
	.qr-shop__result-head .qr-btn,
	.qr-standalone-timer { display: none !important; }

	.qr-steps, .qr-ingredients, .qr-timeline, .qr-shop { max-width: none; }
	.qr-step { break-inside: avoid; border-color: #ccc; }
	.qr-media { aspect-ratio: auto; }
	.qr-media__slide { position: static; opacity: 1 !important; }
	.qr-media__slide:not(.is-active) { display: none; }
	.qr-card, .qr-chip, .qr-step__notes { box-shadow: none !important; }
	:root { --qr-paper: #fff; --qr-paper-2: #f5f5f5; }
	a[href]::after { content: ""; } /* don't print URLs */
}

/* ==========================================================================
   Cook View — tablet/desktop-first split (left nav / right step screens)
   ========================================================================== */
.qr-cook {
	font-family: var(--qr-body);
	color: var(--qr-ink);
}
.qr-cook__bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.qr-cook__snap {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--qr-mono); font-size: .7rem; letter-spacing: .04em;
	background: var(--qr-paper-2); border: 1px solid transparent; color: var(--qr-ink-soft);
	border-radius: 100px; padding: .3rem .6rem; cursor: pointer;
}
.qr-cook__snap[aria-pressed="true"] { background: var(--qr-accent); color: var(--qr-on-accent); }
.qr-cook__snap-dot { width: .6rem; height: .6rem; border-radius: 50%; border: 1.5px solid currentColor; }
.qr-cook__snap[aria-pressed="true"] .qr-cook__snap-dot { background: currentColor; }

.qr-cook__video { aspect-ratio: 16 / 9; border-radius: var(--qr-radius); overflow: hidden; background: var(--qr-paper-2); }
.qr-cook__video iframe, .qr-cook__video video { width: 100%; height: 100%; border: 0; display: block; }

.qr-cook__navlist { list-style: none; margin: 0; padding: 0; }
.qr-cook__navitem {
	display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .5rem;
	padding: .5rem .6rem; border-radius: 8px; text-decoration: none; color: var(--qr-ink);
	border-left: 2px solid transparent;
}
.qr-cook__navitem:hover { background: var(--qr-paper-2); }
.qr-cook__navitem.is-active { background: var(--qr-paper-2); border-left-color: var(--qr-accent); }
.qr-cook__navnum { font-family: var(--qr-mono); font-size: .78rem; color: var(--qr-accent); }
.qr-cook__navtitle { font-size: .92rem; line-height: 1.2; }
.qr-cook__navtime { font-family: var(--qr-mono); font-size: .68rem; color: var(--qr-ink-soft); }
.qr-cook__panel { scroll-margin-top: 1rem; }
.qr-cook__panel:focus { outline: none; }

/* Base (small screens): stacked; nav is a sticky horizontal rail. */
.qr-cook__aside {
	position: sticky; top: 0; z-index: 5;
	background: var(--qr-paper); border-bottom: 1px solid var(--qr-line);
	padding: .6rem 0; margin-bottom: .5rem;
}
.qr-cook__aside-inner { display: flex; flex-direction: column; gap: .6rem; }
@media (max-width: 47.99rem) {
	.qr-cook__navlist { display: flex; gap: .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .2rem; }
	.qr-cook__navitem { grid-template-columns: auto auto; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; flex: none; }
	.qr-cook__navitem.is-active { border-left: none; border-bottom-color: var(--qr-accent); }
	.qr-cook__navtitle { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
	.qr-cook__panel { padding: 1.5rem 0; border-top: 1px solid var(--qr-line); }
	.qr-cook__panel:first-child { border-top: none; }
}

/* Tablet + desktop: two columns; right column is the scroll region. */
@media (min-width: 48rem) {
	.qr-cook {
		display: grid;
		grid-template-columns: minmax(15rem, 19rem) 1fr;
		gap: 1.75rem;
		align-items: start;
	}
	.qr-cook__aside {
		position: sticky; top: 0; align-self: start;
		height: 100vh; height: 100dvh; overflow-y: auto;
		background: transparent; border-bottom: none; margin: 0; padding: 1.25rem .5rem 1.25rem 0;
	}
	.qr-cook__aside-inner { gap: 1rem; }

	.qr-cook__panels { height: 100vh; height: 100dvh; overflow-y: auto; scroll-behavior: smooth; }
	.qr-cook[data-snap="1"] .qr-cook__panels { scroll-snap-type: y mandatory; }
	.qr-cook[data-snap="1"] .qr-cook__panel {
		min-height: 100vh; min-height: 100dvh;
		scroll-snap-align: start;
		display: flex; flex-direction: column; justify-content: flex-start;
	}
	.qr-cook[data-snap="0"] .qr-cook__panel { border-top: 1px solid var(--qr-line); }
	.qr-cook[data-snap="0"] .qr-cook__panel:first-child { border-top: none; }
	.qr-cook__panel-inner { width: 100%; padding: 2rem 1.5rem 2rem 0; }
	.qr-cook[data-snap="1"] .qr-cook__panel-inner { max-height: 100dvh; overflow-y: auto; }
	/* In the cook view the step body already sits under the number; don't indent again. */
	.qr-cook .qr-step__body { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.qr-cook__panels { scroll-behavior: auto; }
}

/* ==========================================================================
   Recipe Details — hero, meta, tips, prep-ahead, notes
   ========================================================================== */
.qr-details { font-family: var(--qr-body); color: var(--qr-ink); max-width: 52rem; margin-inline: auto; }
.qr-details__hero { margin: 0 0 1.25rem; border-radius: var(--qr-radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--qr-paper-2); }
.qr-details__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-details__hero--drawn { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--qr-paper-2) 0 14px, var(--qr-paper) 14px 28px); }
.qr-details__hero--drawn span { font-family: var(--qr-display); font-weight: 500; font-size: clamp(3rem, 12vw, 6rem); color: var(--qr-accent); }

.qr-meta { display: flex; flex-wrap: wrap; gap: 1.75rem; padding: .85rem 0; border-top: 1px solid var(--qr-line); border-bottom: 1px solid var(--qr-line); }
.qr-meta__item { display: flex; flex-direction: column; gap: .1rem; }
.qr-meta__k { font-family: var(--qr-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--qr-ink-soft); }
.qr-meta__v { font-family: var(--qr-mono); font-size: 1rem; color: var(--qr-ink); }
.qr-details__source { color: var(--qr-ink-soft); font-style: italic; font-size: .9rem; margin: .6rem 0 0; }

.qr-details__block { margin-top: 1.75rem; }
.qr-prose p { margin: .5rem 0; }
.qr-prose ul { padding-left: 1.1rem; }
.qr-details__tips .qr-prose { padding: .9rem 1.1rem; background: var(--qr-paper); border-left: 3px solid var(--qr-cool); border-radius: 0 var(--qr-radius) var(--qr-radius) 0; }

.qr-checklist { list-style: none; margin: .5rem 0 0; padding: 0; }
.qr-checkline label { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; cursor: pointer; }
.qr-checkline input { width: 1.05rem; height: 1.05rem; accent-color: var(--qr-accent); flex: none; }
.qr-checkline.is-checked span { text-decoration: line-through; color: var(--qr-ink-soft); }

/* ==========================================================================
   Discovery: search + sort + load more
   ========================================================================== */
.qr-discovery__tools { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: .5rem; }
.qr-search { flex: 1 1 16rem; }
.qr-search input {
	width: 100%; padding: .6rem .9rem; border: 1px solid var(--qr-line);
	border-radius: 100px; background: var(--qr-paper); font: inherit;
}
.qr-sort { display: inline-flex; align-items: center; gap: .5rem; }
.qr-sort__label { font-family: var(--qr-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--qr-ink-soft); }
.qr-sort select {
	font: inherit; padding: .5rem 2rem .5rem .75rem; border: 1px solid var(--qr-line);
	border-radius: 8px; background: var(--qr-paper); cursor: pointer;
}
.qr-discovery__more { text-align: center; margin-top: 1.5rem; }
.qr-discovery__more .qr-btn { padding: .6rem 1.4rem; }

/* ==========================================================================
   Step deep-link anchor + copy button + target highlight
   ========================================================================== */
a.qr-step__num { text-decoration: none; transition: opacity .15s ease; }
a.qr-step__num:hover { opacity: .7; }

.qr-step__link {
	margin-left: auto; align-self: flex-start; flex: none;
	position: relative;
	width: 1.9rem; height: 1.9rem; border: none; border-radius: 7px;
	background: transparent; color: var(--qr-ink-soft); cursor: pointer;
	opacity: .5; transition: opacity .15s ease, color .15s ease, background .15s ease;
	display: inline-flex; align-items: center; justify-content: center;
}
.qr-step__head:hover .qr-step__link,
.qr-step__link:focus-visible { opacity: 1; }
.qr-step__link:hover { color: var(--qr-accent); background: var(--qr-paper-2); }
.qr-step__link::before {
	content: ""; width: 1rem; height: 1rem; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
}
.qr-step__link.is-copied { color: var(--qr-cool); opacity: 1; }
.qr-step__link.is-copied::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.qr-step__link.is-copied::after {
	content: "Copied"; position: absolute; top: -1.6rem; right: 0;
	font-family: var(--qr-mono); font-size: .62rem; letter-spacing: .06em;
	background: var(--qr-ink); color: var(--qr-on-accent); padding: .15rem .4rem; border-radius: 4px; white-space: nowrap;
}

.qr-step.is-target, .qr-cook__panel.is-target {
	background: color-mix(in srgb, var(--qr-heat) 13%, transparent);
	border-radius: var(--qr-radius);
}
@media (prefers-reduced-motion: no-preference) {
	.qr-step.is-target, .qr-cook__panel.is-target { animation: qr-target 1.6s ease forwards; background: transparent; }
	@keyframes qr-target {
		0% { background: color-mix(in srgb, var(--qr-heat) 20%, transparent); }
		100% { background: transparent; }
	}
}

/* ==========================================================================
   Equipment / kitchen supplies
   ========================================================================== */
.qr-chip--tool {
	background: transparent;
	border-color: var(--qr-line);
	color: var(--qr-cool);
	font-family: var(--qr-mono);
	font-size: .76rem;
}
.qr-chip--tool:hover { border-color: var(--qr-cool); background: var(--qr-paper-2); }
.qr-equipment .qr-techniques__label { color: var(--qr-cool); }

.qr-equip-list {
	list-style: none; margin: .5rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem;
}
.qr-equip__link {
	display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--qr-ink);
	padding: .45rem .55rem; border: 1px solid var(--qr-line); border-radius: var(--qr-radius);
	background: var(--qr-paper); transition: border-color .15s ease, transform .15s ease;
}
.qr-equip__link:hover { border-color: var(--qr-accent); transform: translateY(-2px); }
.qr-equip__img { width: 2.5rem; height: 2.5rem; border-radius: 7px; overflow: hidden; background: var(--qr-paper-2); flex: none; display: grid; place-items: center; }
.qr-equip__img img { width: 100%; height: 100%; object-fit: cover; }
.qr-equip__img--none { background: repeating-linear-gradient(135deg, var(--qr-paper-2) 0 6px, var(--qr-paper) 6px 12px); }
.qr-equip__name { font-size: .9rem; font-weight: 500; line-height: 1.15; }

@media (prefers-reduced-motion: reduce) {
	.qr-equip__link:hover { transform: none; }
}

/* ==========================================================================
   Cook-view readability + reading controls + time progress bar
   ========================================================================== */
.qr-cook {
	--qr-cook-scale: 1;
	font-family: var(--qr-body);
	color: var(--qr-ink);
	line-height: var(--qr-lh);
	letter-spacing: var(--qr-tracking);
}

/* Bigger, airier step content so it reads at a glance across the kitchen. */
.qr-cook .qr-step__title { font-size: calc(1.55rem * var(--qr-cook-scale)); line-height: 1.2; }
.qr-cook .qr-step__text  { font-size: calc(1.2rem * var(--qr-cook-scale)); line-height: 1.75; }
.qr-cook .qr-step__text p { margin: .65em 0; }
.qr-cook .qr-step__text li { margin: .4em 0; }
.qr-cook .qr-step__ingredients { gap: .5rem; margin-bottom: 1.25rem; }
.qr-cook .qr-chip { font-size: calc(.95rem * var(--qr-cook-scale)); padding: .4rem .75rem; }
.qr-cook .qr-step__notes { font-size: calc(1rem * var(--qr-cook-scale)); }
.qr-cook .qr-step__num { font-size: calc(2.9rem * var(--qr-cook-scale)); }
.qr-cook__panel-inner { padding-bottom: 4.5rem; }

.qr-reading { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.qr-fontpack { display: inline-flex; gap: .2rem; background: var(--qr-paper-2); padding: .2rem; border-radius: 9px; }
.qr-fontpack__btn {
	width: 2.1rem; height: 2.1rem; border: none; background: transparent; border-radius: 6px;
	cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--qr-ink);
}
.qr-fontpack__btn[data-qr-font="modern"]  { font-family: "Fraunces", Georgia, serif; }
.qr-fontpack__btn[data-qr-font="classic"] { font-family: "Source Serif 4", Georgia, serif; }
.qr-fontpack__btn[data-qr-font="legible"] { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; }
.qr-fontpack__btn[data-qr-font="rounded"] { font-family: "Nunito", system-ui, sans-serif; font-weight: 700; }
.qr-fontpack__btn:hover { background: var(--qr-paper); }
.qr-fontpack__btn.is-active { background: var(--qr-paper); box-shadow: inset 0 0 0 1.5px var(--qr-accent); color: var(--qr-accent); }

.qr-textsize { display: inline-flex; gap: .25rem; }
.qr-textsize__btn {
	min-width: 2.1rem; height: 2.1rem; border: 1px solid var(--qr-line); background: var(--qr-paper);
	border-radius: 6px; cursor: pointer; font-family: var(--qr-body); color: var(--qr-ink);
	display: inline-flex; align-items: baseline; justify-content: center; gap: .05rem; font-size: 1rem;
}
.qr-textsize__btn span { font-size: .7em; }
.qr-textsize__btn:hover { border-color: var(--qr-accent); }

/* Bottom time progress bar (fills left→right over the cook's total time). */
.qr-cookbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; pointer-events: none; opacity: 0; transform: translateY(110%); transition: opacity .25s ease, transform .25s ease; }
.qr-cookbar.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .qr-cookbar { transition: opacity .2s ease; transform: none; } }
.qr-cookbar__track { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: color-mix(in srgb, var(--qr-ink) 10%, transparent); }
.qr-cookbar__fill {
	height: 100%; width: 0;
	background: linear-gradient(90deg, var(--qr-heat), var(--qr-accent));
	box-shadow: 0 0 12px -2px var(--qr-heat);
}
.qr-cookbar.is-done .qr-cookbar__fill { background: var(--qr-cool); box-shadow: none; }
.qr-cookbar__panel {
	position: absolute; right: 1rem; bottom: 1.1rem; pointer-events: auto;
	display: flex; align-items: center; gap: .5rem;
	background: var(--qr-ink); color: var(--qr-on-accent);
	border-radius: 100px; padding: .3rem .55rem .3rem .3rem;
	box-shadow: 0 8px 22px -10px rgba(0,0,0,.55);
}
.qr-cookbar__btn { width: 2.2rem; height: 2.2rem; border: none; border-radius: 50%; background: var(--qr-heat); cursor: pointer; display: grid; place-items: center; }
.qr-cookbar.is-done .qr-cookbar__btn { background: var(--qr-cool); }
.qr-cookbar__icon { position: relative; width: 12px; height: 12px; }
.qr-cookbar__icon::before {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 0; height: 0; border-left: 11px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; left: 1px;
}
.qr-cookbar.is-running .qr-cookbar__icon::before { border: none; left: 1px; top: 0; width: 3px; height: 12px; background: #fff; }
.qr-cookbar.is-running .qr-cookbar__icon::after { content: ""; position: absolute; right: 1px; top: 0; width: 3px; height: 12px; background: #fff; }
.qr-cookbar__time { font-family: var(--qr-mono); font-size: .82rem; padding-right: .5rem; white-space: nowrap; }
.qr-cookbar__total { opacity: .55; }

/* ==========================================================================
   Media autoplay pause button + suggested brand
   ========================================================================== */
.qr-media__pause {
	position: absolute; top: .6rem; right: .6rem;
	width: 2rem; height: 2rem; border: none; border-radius: 50%;
	background: rgba(33,29,24,.55); cursor: pointer;
	opacity: 0; transition: opacity .15s ease;
}
.qr-media:hover .qr-media__pause,
.qr-media.is-paused .qr-media__pause,
.qr-media__pause:focus-visible { opacity: 1; }
/* Two bars = "pause" (shown while playing). */
.qr-media__pause::before,
.qr-media__pause::after {
	content: ""; position: absolute; top: 50%; width: 3px; height: .7rem;
	background: #fff; transform: translateY(-50%);
}
.qr-media__pause::before { left: .65rem; }
.qr-media__pause::after { right: .65rem; }
/* Paused -> show a single "play" triangle instead. */
.qr-media.is-paused .qr-media__pause::before {
	left: 50%; top: 50%; width: 0; height: 0; background: transparent;
	border-left: .55rem solid #fff; border-top: .35rem solid transparent; border-bottom: .35rem solid transparent;
	transform: translate(-40%, -50%);
}
.qr-media.is-paused .qr-media__pause::after { display: none; }

.qr-ing__brand, .qr-shop-item__brand {
	font-family: var(--qr-mono); font-size: .72rem; color: var(--qr-accent);
	text-decoration: none; white-space: nowrap;
}
a.qr-ing__brand, a.qr-shop-item__brand { border-bottom: 1px dotted var(--qr-accent); }
a.qr-ing__brand:hover, a.qr-shop-item__brand:hover { color: var(--qr-accent-2); }
.qr-ing__brand::before { content: "· "; color: var(--qr-ink-soft); }

/* ==========================================================================
   Author byline + submission form (multi-user)
   ========================================================================== */
.qr-byline { font-family: var(--qr-mono); font-size: .8rem; color: var(--qr-ink-soft); margin: .5rem 0 0; }
.qr-byline a { color: var(--qr-accent); text-decoration: none; border-bottom: 1px solid var(--qr-line); }
.qr-byline a:hover { border-color: var(--qr-accent); }
.qr-card__byline { font-family: var(--qr-mono); font-size: .66rem; color: var(--qr-ink-soft); margin-top: .3rem; }

.qr-submit {
	font-family: var(--qr-body); color: var(--qr-ink);
	max-width: 40rem; margin-inline: auto;
	display: flex; flex-direction: column; gap: 1rem;
}
.qr-submit--guest { background: var(--qr-paper-2); border-radius: var(--qr-radius); padding: 1.25rem 1.5rem; }
.qr-submit--guest a { color: var(--qr-accent); }
.qr-field { display: flex; flex-direction: column; gap: .3rem; }
.qr-field__label { font-family: var(--qr-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--qr-ink-soft); }
.qr-field__hint { font-size: .82rem; color: var(--qr-ink-soft); font-style: italic; }
.qr-field input, .qr-field textarea {
	font: inherit; width: 100%; padding: .6rem .8rem;
	border: 1px solid var(--qr-line); border-radius: 8px; background: var(--qr-paper); color: var(--qr-ink);
}
.qr-field textarea { resize: vertical; }
.qr-field input:focus, .qr-field textarea:focus { outline: 2px solid var(--qr-accent); outline-offset: 1px; border-color: var(--qr-accent); }
.qr-field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.qr-submit .qr-btn--primary { align-self: flex-start; padding: .7rem 1.5rem; }
.qr-submit__fineprint { font-size: .8rem; color: var(--qr-ink-soft); margin: 0; }
.qr-submit__notice { padding: .7rem 1rem; border-radius: 8px; font-size: .9rem; }
.qr-submit__notice--ok { background: color-mix(in srgb, var(--qr-cool) 20%, var(--qr-paper)); border: 1px solid var(--qr-cool); }
.qr-submit__notice--err { background: color-mix(in srgb, var(--qr-heat) 15%, var(--qr-paper)); border: 1px solid var(--qr-heat); }

@media (max-width: 34rem) {
	.qr-field-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Save recipe (favorites + private notes)
   ========================================================================== */
.qr-save { display: flex; flex-direction: column; gap: .8rem; margin: 1rem 0; }
.qr-save--guest a { color: var(--qr-accent); }
.qr-save__btn {
	display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
	font: 600 .95rem/1 var(--qr-body); color: var(--qr-ink);
	padding: .6rem 1.1rem; border: 1px solid var(--qr-line); border-radius: 999px;
	background: var(--qr-paper); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.qr-save__btn:hover { border-color: var(--qr-accent); }
.qr-save__btn[disabled] { opacity: .6; cursor: default; }
.qr-save__heart {
	width: 1.05rem; height: 1.05rem; flex: none;
	background: currentColor;
	-webkit-mask: var(--qr-heart) center / contain no-repeat; mask: var(--qr-heart) center / contain no-repeat;
	color: var(--qr-ink-soft); transition: color .15s ease;
}
.qr-save__btn.is-active { background: var(--qr-accent); border-color: var(--qr-accent); color: #fff; }
.qr-save__btn.is-active .qr-save__heart { color: #fff; }
.qr-save {
	--qr-heart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-10-9.2C.4 8.3 2 4.5 5.5 4.5c2 0 3.4 1.3 4.5 2.7 1.1-1.4 2.5-2.7 4.5-2.7 3.5 0 5.1 3.8 3.5 7.3C19.5 16.4 12 21 12 21z'/></svg>");
}
.qr-save__notes { display: flex; flex-direction: column; gap: .3rem; max-width: 40rem; }
.qr-save__notes-label { font-family: var(--qr-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--qr-ink-soft); }
.qr-save__notes-input {
	font: inherit; width: 100%; padding: .6rem .8rem; resize: vertical;
	border: 1px solid var(--qr-line); border-radius: 8px; background: var(--qr-paper); color: var(--qr-ink);
}
.qr-save__notes-input:focus { outline: 2px solid var(--qr-accent); outline-offset: 1px; border-color: var(--qr-accent); }
.qr-save__status { font-family: var(--qr-mono); font-size: .72rem; color: var(--qr-cool); min-height: 1em; }
.qr-saved--empty p, .qr-saved--guest a { color: var(--qr-ink-soft); }

/* ==========================================================================
   Account menu + contributions
   ========================================================================== */
.qr-account { position: relative; display: inline-block; font-family: var(--qr-body); }
.qr-account--guest { display: inline-flex; gap: .8rem; align-items: center; }
.qr-account--guest a { color: var(--qr-ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.qr-account--guest a:hover { color: var(--qr-accent); }
.qr-account__btn {
	display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
	background: transparent; border: 1px solid var(--qr-line); border-radius: 999px;
	padding: .3rem .7rem .3rem .35rem; color: var(--qr-ink); font: 600 .9rem/1 var(--qr-body);
}
.qr-account__btn:hover { border-color: var(--qr-accent); }
.qr-account__avatar { border-radius: 50%; display: block; }
.qr-account__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .6; }
.qr-account__menu {
	position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50;
	min-width: 12rem; margin: 0; padding: .35rem; list-style: none;
	background: var(--qr-paper); border: 1px solid var(--qr-line); border-radius: 12px;
	box-shadow: 0 12px 30px rgba(33,29,24,.14);
}
.qr-account__menu li { margin: 0; }
.qr-account__menu a { display: block; padding: .5rem .65rem; border-radius: 8px; text-decoration: none; color: var(--qr-ink); font-size: .9rem; }
.qr-account__menu a:hover { background: var(--qr-paper-2); color: var(--qr-accent); }
.qr-account__sep { border-top: 1px solid var(--qr-line); margin-top: .3rem; padding-top: .3rem; }

.qr-contrib__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.qr-contrib__item { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--qr-line); }
.qr-contrib__title { font-weight: 600; flex: 1 1 auto; }
.qr-contrib__actions { display: inline-flex; gap: .6rem; font-size: .85rem; }
.qr-contrib__actions a { color: var(--qr-accent); text-decoration: none; }
.qr-contrib__status {
	font-family: var(--qr-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
	padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--qr-line); color: var(--qr-ink-soft); white-space: nowrap;
}
.qr-contrib__status--publish { color: #2f6a4f; border-color: #2f6a4f; }
.qr-contrib__status--pending { color: var(--qr-heat); border-color: var(--qr-heat); }
.qr-contrib__new { margin: 0 0 .5rem; }
.qr-contrib--guest a { color: var(--qr-accent); }

/* ==========================================================================
   Star rating
   ========================================================================== */
.qr-rate { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.qr-rate__stars { display: inline-flex; gap: .1rem; }
.qr-rate__star {
	width: 1.4rem; height: 1.4rem; padding: 0; border: none; cursor: pointer; background: transparent;
	-webkit-mask: var(--qr-star) center / 1.25rem no-repeat; mask: var(--qr-star) center / 1.25rem no-repeat;
	background-color: var(--qr-line); transition: background-color .12s ease, transform .1s ease;
}
.qr-rate { --qr-star: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>"); }
.qr-rate__star:hover { transform: scale(1.15); background-color: var(--qr-heat); }
.qr-rate__star.is-on { background-color: var(--qr-heat); }
.qr-rate__summary { font-family: var(--qr-mono); font-size: .74rem; color: var(--qr-ink-soft); }

/* ==========================================================================
   Collection / profile / editor
   ========================================================================== */
.qr-collection__block { margin-bottom: 2.5rem; }
.qr-eyebrow { font-family: var(--qr-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--qr-ink-soft); }
.qr-muted { color: var(--qr-ink-soft); }
.qr-card__badge { display: inline-block; margin-top: .25rem; font-family: var(--qr-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--qr-heat); }
.qr-save__edit { display: inline-block; margin-top: .5rem; font-weight: 600; font-size: .9rem; color: var(--qr-accent); text-decoration: none; }
.qr-save__edit:hover { text-decoration: underline; }

.qr-profile__head { display: flex; gap: 1rem; align-items: center; }
.qr-profile__avatar { border-radius: 50%; }
.qr-profile__name { margin: 0; font-family: var(--qr-display); }
.qr-profile__bio { margin: .3rem 0; color: var(--qr-ink-soft); }
.qr-profile__stats { display: flex; gap: 1.5rem; margin-top: 1rem; }
.qr-profile__stat { font-size: .95rem; }
.qr-profile__stat strong { font-family: var(--qr-display); font-size: 1.3rem; margin-right: .25rem; }

.qr-editor { max-width: 46rem; }
.qr-editor--msg { color: var(--qr-ink-soft); padding: 1rem 0; }
.qr-editor__forknote { background: var(--qr-paper-2); border-left: 3px solid var(--qr-cool); padding: .6rem .9rem; border-radius: 0 8px 8px 0; font-size: .9rem; }
.qr-editor__field { display: block; margin: 1rem 0; }
.qr-editor__label { display: block; font-family: var(--qr-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--qr-ink-soft); margin-bottom: .25rem; }
.qr-editor__title { width: 100%; font-family: var(--qr-display); font-size: 1.6rem; padding: .4rem .5rem; border: 1px solid var(--qr-line); border-radius: 8px; background: var(--qr-paper); color: var(--qr-ink); }
.qr-editor__meta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.qr-editor__meta label { flex: 1 1 6rem; }
.qr-editor__meta input { width: 100%; padding: .4rem .5rem; border: 1px solid var(--qr-line); border-radius: 8px; background: var(--qr-paper); }
.qr-editor__section { margin: 1.75rem 0; }
.qr-editor__h { font-family: var(--qr-display); font-size: 1.25rem; margin: 0 0 .75rem; }
.qr-eirow { display: flex; gap: .5rem; margin-bottom: .5rem; }
.qr-eirow__input { flex: 1 1 auto; padding: .45rem .6rem; border: 1px solid var(--qr-line); border-radius: 8px; background: var(--qr-paper); }
.qr-eirow__rm, .qr-estep__rm, .qr-mediachip__rm {
	flex: none; width: 1.9rem; border: 1px solid var(--qr-line); background: var(--qr-paper); border-radius: 8px; cursor: pointer;
	color: var(--qr-ink-soft); font-size: 1.1rem; line-height: 1;
}
.qr-eirow__rm:hover, .qr-estep__rm:hover { border-color: var(--qr-accent); color: var(--qr-accent); }
.qr-editor__add { margin-top: .25rem; background: transparent; border: 1px dashed var(--qr-line); border-radius: 8px; padding: .5rem .9rem; cursor: pointer; color: var(--qr-ink); font-weight: 600; }
.qr-editor__add:hover { border-color: var(--qr-accent); color: var(--qr-accent); }
.qr-estep { border: 1px solid var(--qr-line); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; background: var(--qr-paper); }
.qr-estep__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.qr-estep__num { font-family: var(--qr-display); font-size: 1.2rem; color: var(--qr-accent); min-width: 1.2rem; }
.qr-estep__title { flex: 1 1 auto; padding: .4rem .5rem; border: 1px solid var(--qr-line); border-radius: 8px; background: var(--qr-paper); font-weight: 600; }
.qr-estep__body { width: 100%; padding: .5rem .6rem; border: 1px solid var(--qr-line); border-radius: 8px; background: var(--qr-paper); resize: vertical; font: inherit; }
.qr-estep__photos { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.qr-mediachip { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; }
.qr-mediachip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-mediachip__rm { position: absolute; top: 2px; right: 2px; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; }
.qr-estep__addphoto { background: transparent; border: none; color: var(--qr-accent); cursor: pointer; font-weight: 600; padding: 0; }
.qr-editor__actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.qr-editor__save { background: var(--qr-accent); color: #fff; border: none; border-radius: 999px; padding: .7rem 1.6rem; font-weight: 700; cursor: pointer; }
.qr-editor__save:hover { filter: brightness(1.08); }
.qr-editor__cancel { color: var(--qr-ink-soft); text-decoration: none; }
.qr-editor__status { font-family: var(--qr-mono); font-size: .78rem; color: var(--qr-cool); }