/* ════════════════════════════════════════════════════════
   app.css — app-shell + app-specific composites
   Linked AFTER design-system files so app-shell rules can
   override DS primitives where needed (e.g. .recipe-card,
   .detail-modal, .search-input positioned within .topbar).

   No raw hex, no raw font-size px. All values route through
   design-system tokens (docs/css/tokens.css). Where no DS
   token exists for a faded/soft variant, derive via
   color-mix(in oklab, var(--color-X) NN%, transparent).
   ponytail: gaps marked inline; the close ones are flagged.
════════════════════════════════════════════════════════ */

@layer app {
	/* ════════════════════════════════════════════════════════
     APP SHELL — SIDEBAR (desktop) → BOTTOM TAB BAR (mobile)
  ════════════════════════════════════════════════════════ */
	.sidebar {
		width: 240px;
		/* ponytail: sidebar width is a layout constant, not a DS token;
       promote to --sidebar-w if a third consumer appears. */
		background: var(--color-fg);
		color: var(--color-bg-elevated);
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 50;
		/* ponytail: DS spec §5.9 only defines --z-toast; sidebar nav z
       needs a constant — using 50 (same magnitude) for compatibility. */
		padding: 32px 0 24px;
	}
	.sidebar-brand {
		padding: 0 24px 28px;
		border-bottom: 1px solid
			color-mix(in oklab, var(--color-bg-elevated) 10%, transparent);
	}
	.sidebar-brand h1 {
		font-family: var(--font-display);
		font-size: var(--text-2xl);
		font-weight: 700;
		color: var(--color-accent-fg);
		line-height: var(--leading-tight);
	}
	.sidebar-brand p {
		font-size: var(--text-xs);
		font-weight: 500;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-fg-subtle);
		margin-top: 5px;
	}
	.sidebar-nav {
		padding: 22px 12px;
		flex: 1;
	}
	.nav-item {
		display: flex;
		align-items: center;
		gap: 11px;
		padding: 11px 12px;
		border-radius: var(--radius-md);
		cursor: pointer;
		font-size: var(--text-sm);
		font-weight: 400;
		color: var(--color-fg-subtle);
		transition:
			background var(--dur-fast) var(--ease-out),
			color var(--dur-fast) var(--ease-out);
		margin-bottom: 2px;
		border: none;
		background: none;
		width: 100%;
		text-align: left;
		font-family: inherit;
	}
	.nav-item svg {
		opacity: 0.6;
		flex-shrink: 0;
	}
	.nav-item:hover {
		background: color-mix(
			in oklab,
			var(--color-bg-elevated) 7%,
			transparent
		);
		color: var(--color-accent-fg);
	}
	.nav-item:hover svg {
		opacity: 1;
	}
	.nav-item.active {
		background: var(--color-accent);
		color: var(--color-accent-fg);
		font-weight: 500;
	}
	.nav-item.active svg {
		opacity: 1;
	}
	.nav-sep {
		height: 1px;
		background: color-mix(
			in oklab,
			var(--color-bg-elevated) 10%,
			transparent
		);
		margin: 14px 12px;
	}
	.nav-tab-label {
		display: inline;
	} /* inline on desktop, stacked on mobile */
	.sidebar-footer {
		padding: 0 24px;
		font-size: var(--text-xs);
		color: var(--color-fg-subtle);
		line-height: var(--leading-normal);
	}
	.sidebar-footer a {
		color: var(--color-fg-subtle);
	}

	/* ════════════════════════════════════════════════════════
     MAIN
  ════════════════════════════════════════════════════════ */
	.main {
		margin-left: 240px;
		/* ponytail: matches sidebar width above; tied 1:1. */
		flex: 1;
		min-width: 0;
		min-height: 100vh;
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
	}

	/* ════════════════════════════════════════════════════════
     TOPBAR + SEARCH + CHIPS
  ════════════════════════════════════════════════════════ */
	.topbar {
		background: var(--color-bg-elevated);
		border-bottom: 1px solid var(--color-border);
		padding: 14px 28px;
		display: flex;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap; /* chips-scroll (basis 100%) drops to row 2 */
		position: sticky;
		top: 0;
		z-index: 40;
		/* ponytail: topbar z not in DS token set; 40 < 50 sidebar — fine. */
	}
	/* Topbar is recipe-page only. On pantry/cart/settings the search bar,
     category chips, and "Can make" toggle are useless — hide them all. */
	body:not([data-panel="recipes"]) .topbar {
		display: none;
	}
	/* Search bar = a flex row that LOOKS like a single input box. The wrap
     carries the border/background; the inner input is transparent and
     fills the remaining space. Icons sit naturally in the row, not
     absolute-positioned — no cascade-layer gymnastics required. */
	.search-wrap {
		display: flex;
		align-items: center;
		flex: 0 1 360px;
		min-width: 0;
		border: 1px solid var(--color-border-strong);
		background: var(--color-bg-elevated);
		border-radius: var(--radius-md);
		min-height: 44px;
		transition: border-color var(--dur-fast) var(--ease-out);
	}
	.search-wrap:focus-within {
		border-color: var(--color-accent);
	}
	.search-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		color: var(--color-fg-subtle);
		flex-shrink: 0;
	}
	.search-clear {
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		display: none; /* shown when input has a value */
		align-items: center;
		justify-content: center;
		color: var(--color-fg-subtle);
		background: none;
		border: none;
		cursor: pointer;
		border-radius: var(--radius-pill);
		padding: 0;
	}
	.search-clear.show {
		display: inline-flex;
	}
	.search-clear:hover {
		color: var(--color-fg);
	}
	/* The actual input is plain — strip its own border/bg/radius since the
     wrap already provides the visual frame. */
	.search-wrap > .input {
		flex: 1;
		min-width: 0;
		width: 100%;
		background: transparent;
		border: none;
		border-radius: 0;
		min-height: 0;
		padding: var(--space-2) var(--space-2) var(--space-2) 0;
	}
	.search-wrap > .input:focus-visible {
		outline: none;
	}

	/* Category quick filters — horizontally scrolling chip row under the
     search bar. Each chip is a fixed-width pill; the row scrolls on
     overflow with the scrollbar hidden. Tap toggles .is-active. */
	.chips-scroll {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		flex: 1 1 100%;
		padding-bottom: 2px;
		/* fade the trailing edge to hint at scroll overflow */
		mask-image: linear-gradient(
			to right,
			black calc(100% - 24px),
			transparent
		);
		-webkit-mask-image: linear-gradient(
			to right,
			black calc(100% - 24px),
			transparent
		);
	}
	.chips-scroll::-webkit-scrollbar {
		display: none;
	}
	.chip {
		flex-shrink: 0;
		padding: 7px 14px;
		border-radius: var(--radius-pill);
		font-size: var(--text-xs);
		font-weight: 500;
		cursor: pointer;
		border: 1px solid var(--color-border);
		background: var(--color-bg-elevated);
		color: var(--color-fg-muted);
		transition:
			border-color var(--dur-fast) var(--ease-out),
			color var(--dur-fast) var(--ease-out),
			background var(--dur-fast) var(--ease-out);
		white-space: nowrap;
		font-family: inherit;
		min-height: 32px;
	}
	.chip:hover {
		border-color: var(--color-accent);
		color: var(--color-accent);
	}
	.chip.is-active {
		background: var(--color-accent);
		border-color: var(--color-accent);
		color: var(--color-accent-fg);
	}

	/* Ready-to-make checkbox lives in the recipe panel header.
     Inline with title block on desktop, wraps below on narrow. */
	.ready-toggle {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		cursor: pointer;
		font-size: var(--text-sm);
		color: var(--color-fg-muted);
		white-space: nowrap;
		user-select: none;
		align-self: center;
	}
	.ready-toggle input {
		width: auto;
		accent-color: var(--color-accent);
	}

	/* ════════════════════════════════════════════════════════
     PANELS
  ════════════════════════════════════════════════════════ */
	.panel {
		display: none;
		padding: 28px;
		flex: 1;
	}
	/* ponytail: app.js (line 288) toggles .active on panels; .is-active
     seeds the initial HTML. Both selectors needed. */
	.panel.active,
	.panel.is-active {
		display: block;
	}
	.panel-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24px;
		gap: 16px;
	}
	.panel-header h2 {
		font-family: var(--font-display);
		font-size: var(--text-2xl);
		font-weight: 600;
	}
	.panel-header p {
		font-size: var(--text-sm);
		color: var(--color-fg-muted);
		margin-top: 4px;
	}

	/* ════════════════════════════════════════════════════════
     RECIPE GRID + CARDS (app-shell override on DS .recipe-card)
  ════════════════════════════════════════════════════════ */
	.recipe-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
		gap: 20px;
	}
	.empty-state svg {
		margin: 0 auto 16px;
		display: block;
		opacity: 0.4;
	}
	.empty-state strong {
		font-family: var(--font-display);
		font-size: var(--text-lg);
		color: var(--color-fg-muted);
		display: block;
		margin-bottom: 6px;
	}
	.empty-state p {
		font-size: var(--text-sm);
	}

	.recipe-card {
		cursor: pointer;
		transition:
			box-shadow var(--dur-base) var(--ease-out),
			transform var(--dur-base) var(--ease-out);
		position: relative;
	}
	@media (hover: hover) {
		.recipe-card:hover {
			box-shadow: var(--shadow-lg);
			transform: translateY(-2px);
		}
	}
	.recipe-card:active {
		transform: scale(0.99);
	}

	/* Folded corner — eligibility indicator (originals painted with
     --parchment / --sage / --amber / --rose — modernized to DS tokens). */
	.recipe-card::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 42px 42px 0;
		border-color: transparent var(--color-bg) transparent transparent;
		z-index: 2;
	}
	.recipe-card::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 42px;
		height: 42px;
		z-index: 1;
		background: var(--color-fg-subtle);
	}
	.card-fold-complete::after {
		background: var(--color-success);
	}
	.card-fold-partial::after {
		background: var(--color-warning);
	}
	.card-fold-none::after {
		background: var(--color-danger);
	}

	/* Override stripe color in cards.css based on eligibility. */
	.card-fold-complete .card-stripe {
		background: var(--color-success);
	}
	.card-fold-partial .card-stripe {
		background: var(--color-warning);
	}
	.card-fold-none .card-stripe {
		background: var(--color-danger);
	}

	.card-body {
		user-select: none;
		padding: 18px 22px 16px;
	}
	.card-category {
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-fg-subtle);
		margin-bottom: 6px;
	}
	.card-title {
		font-family: var(--font-display);
		font-size: var(--text-lg);
		font-weight: 600;
		line-height: var(--leading-snug);
		margin-bottom: 10px;
		padding-right: 28px;
	}
	.card-meta {
		display: flex;
		gap: 16px;
		flex-wrap: wrap;
		margin-bottom: 14px;
	}
	.meta-pill {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: var(--text-xs);
		color: var(--color-fg-muted);
	}
	.meta-pill svg {
		color: var(--color-fg-subtle);
		flex-shrink: 0;
	}

	.card-ingredients {
		border-top: 1px solid var(--color-border);
		padding-top: 12px;
		margin-bottom: 14px;
	}
	.ingredients-label {
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-fg-subtle);
		margin-bottom: 8px;
	}
	.ingredient-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
	.ing-tag {
		font-size: var(--text-xs);
		padding: 4px 11px;
		border-radius: var(--radius-pill);
		border: 1px solid var(--color-border);
		color: var(--color-fg-muted);
		line-height: var(--leading-snug);
	}
	.ing-tag.have {
		background: color-mix(in oklab, var(--color-success) 22%, transparent);
		border-color: color-mix(
			in oklab,
			var(--color-success) 65%,
			transparent
		);
		color: var(--color-success);
		font-weight: 500;
	}
	.ing-tag.have::before {
		content: "✓";
		opacity: 0.9;
		margin-right: 5px;
		font-weight: 700;
	}
	.ing-tag.missing {
		background: color-mix(in oklab, var(--color-danger) 14%, transparent);
		border-color: color-mix(in oklab, var(--color-danger) 60%, transparent);
		color: var(--color-danger);
		opacity: 0.82;
	}
	.ing-tag.missing::before {
		content: "+";
		opacity: 0.9;
		margin-right: 5px;
		font-weight: 700;
		text-decoration: none;
	}

	.card-footer {
		border-top: 1px solid var(--color-border);
		padding: 9px 12px 9px 18px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: var(--color-bg-sunken);
	}
	.card-status {
		font-size: var(--text-xs);
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 6px;
		color: var(--color-fg-muted);
	}
	.status-dot {
		width: 7px;
		height: 7px;
		border-radius: var(--radius-pill);
		flex-shrink: 0;
		background: var(--color-fg-subtle);
	}
	.card-fold-complete .status-dot {
		background: var(--color-success);
	}
	.card-fold-partial .status-dot {
		background: var(--color-warning);
	}
	.card-fold-none .status-dot {
		background: var(--color-danger);
	}
	.card-actions {
		display: flex;
		gap: 4px;
	}

	/* ════════════════════════════════════════════════════════
     OVERLAYS + SHEETS (detail modal + drawer)
  ════════════════════════════════════════════════════════ */
	.overlay {
		position: fixed;
		inset: 0;
		background: color-mix(in oklab, var(--color-fg) 45%, transparent);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--dur-base) var(--ease-out);
	}
	.overlay.open {
		opacity: 1;
		pointer-events: all;
	}
	#detail-overlay {
		z-index: 149;
	} /* below detail-modal (150) */
	#drawer-overlay {
		z-index: 159;
	} /* below drawer (160) */

	/* Detail modal — slides up, anchored right of sidebar on desktop. */
	.detail-modal {
		position: fixed;
		left: 240px; /* ponytail: matches sidebar width above */
		right: 0;
		top: 0;
		bottom: 0;
		background: var(--color-bg-elevated);
		z-index: 150;
		display: flex;
		flex-direction: column;
		transform: translateY(100%);
		transition: transform var(--dur-base) var(--ease-out);
	}
	.detail-modal.open {
		transform: translateY(0);
	}

	.detail-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		padding: 26px 32px 18px;
		padding-top: max(26px, env(safe-area-inset-top, 0px));
		border-bottom: 1px solid var(--color-border);
		flex-shrink: 0;
	}
	.detail-header-left {
		flex: 1;
		min-width: 0;
	}
	.detail-eyebrow {
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-fg-subtle);
		margin-bottom: 6px;
	}
	.detail-title {
		font-family: var(--font-display);
		font-size: var(--text-2xl);
		font-weight: 700;
		line-height: var(--leading-tight);
	}
	.detail-meta-row {
		display: flex;
		gap: 14px 32px;
		flex-wrap: wrap;
		align-items: baseline;
		margin-top: 18px;
		flex: 1 1 auto; /* fill header-left width; pills flow in a row */
	}
	.detail-meta-item {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
		flex: 0 0 auto; /* horizontal pill — k + v inline */
	}
	.detail-meta-item .k {
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-fg-subtle);
	}
	.detail-meta-item .v {
		font-size: var(--text-md);
		font-weight: 600;
		color: var(--color-fg);
	}
	.detail-close {
		flex-shrink: 0;
		background: var(--color-bg-sunken);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: 0 14px;
		cursor: pointer;
		font-size: var(--text-sm);
		font-weight: 500;
		color: var(--color-fg-muted);
		display: flex;
		align-items: center;
		gap: 6px;
		transition: background var(--dur-fast) var(--ease-out);
		min-height: 44px;
		font-family: inherit;
	}
	.detail-close:hover {
		background: var(--color-bg-sunken);
	}
	/* ponytail: original hovered --parchment2 = --color-bg-sunken; identical
     result but visually flat — the click target still has a cursor cue. */

	.detail-body {
		flex: 1;
		overflow-y: auto;
		display: grid;
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		-webkit-overflow-scrolling: touch;
	}
	.section-label {
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-fg-subtle);
		margin-bottom: 14px;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--color-border);
	}
	/* Header row carrying a section label + a trailing action button.
     The label still carries its bottom-border + margin; the row keeps
     them aligned on the same baseline. */
	.section-label-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 14px;
	}
	.section-label-row .section-label {
		flex: 1;
		min-width: 0;
		margin-bottom: 0;
	}
	.section-label .sub {
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0;
		color: var(--color-fg-subtle);
		font-size: var(--text-xs);
	}

	.detail-ingredients {
		border-right: 1px solid var(--color-border);
		padding: 26px 26px 40px;
		background: var(--color-bg);
	}
	.detail-ing-list {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.detail-ing-item {
		display: flex;
		align-items: center;
		gap: 11px;
		padding: 9px 10px;
		border-radius: 5px;
		font-size: var(--text-sm);
		line-height: var(--leading-snug);
		cursor: pointer;
		transition:
			background var(--dur-fast) var(--ease-out),
			border-color var(--dur-fast) var(--ease-out);
	}
	.detail-ing-item:hover {
		background: var(--color-bg-sunken);
	}
	.detail-ing-item.missing-item .detail-ing-text {
		color: var(--color-fg-subtle);
	}
	.detail-ing-check {
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		border-radius: var(--radius-pill);
		display: flex;
		align-items: center;
		justify-content: center;
		transition:
			background var(--dur-fast) var(--ease-out),
			border-color var(--dur-fast) var(--ease-out);
	}
	.detail-ing-check.have {
		background: color-mix(in oklab, var(--color-success) 18%, transparent);
		border: 1.5px solid
			color-mix(in oklab, var(--color-success) 60%, transparent);
		color: var(--color-success);
	}
	.detail-ing-check.missing {
		background: var(--color-bg-sunken);
		border: 1.5px dashed var(--color-border);
	}
	.detail-pantry-note {
		margin-top: 18px;
		padding: 11px 13px;
		background: var(--color-bg-elevated);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		font-size: var(--text-xs);
		color: var(--color-fg-muted);
		line-height: var(--leading-normal);
	}
	.detail-pantry-note strong {
		color: var(--color-fg);
	}

	.detail-steps {
		padding: 26px 32px 48px;
	}
	.detail-step {
		display: flex;
		gap: 15px;
		margin-bottom: 24px;
		align-items: flex-start;
	}
	.detail-step:last-child {
		margin-bottom: 0;
	}
	.step-num {
		flex-shrink: 0;
		width: 30px;
		height: 30px;
		border-radius: var(--radius-pill);
		background: var(--color-accent);
		color: var(--color-accent-fg);
		font-size: var(--text-sm);
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 1px;
	}
	.step-text {
		font-size: var(--text-md);
		line-height: var(--leading-relaxed);
		color: var(--color-fg-muted);
		padding-top: 4px;
	}

	/* Override DS primitive: .detail-nutrition is a block container (label
     on top, grid below) — the DS version is `display: grid; repeat(auto-fit)`,
     which would lay out the label and the grid as two columns side-by-side. */
	.detail-nutrition {
		display: block;
		margin-top: 30px;
		padding-top: 22px;
		border-top: 1px solid var(--color-border);
	}
	.detail-nutrition .section-label {
		margin-bottom: 14px;
	}
	/* Single row of 4 equal cells inside the steps column. */
	.nutrition-grid {
		display: grid;
		gap: 12px;
		grid-template-columns: repeat(4, 1fr);
	}
	.nutrition-cell {
		background: var(--color-bg-elevated);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: 12px 14px;
		min-width: 0;
		text-align: center;
	}
	.nutrition-cell .k {
		display: block;
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-fg-subtle);
		margin-bottom: 4px;
	}
	.nutrition-cell .v {
		font-size: var(--text-sm);
		font-weight: 600;
		color: var(--color-fg);
	}

	.detail-footer {
		flex-shrink: 0;
		border-top: 1px solid var(--color-border);
		padding: 12px 32px;
		padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
		display: flex;
		gap: 10px;
		justify-content: flex-end;
		background: var(--color-bg);
	}

	/* ════════════════════════════════════════════════════════
     DRAWER (create/edit)
  ════════════════════════════════════════════════════════ */
	.drawer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 460px;
		max-width: 100vw;
		/* ponytail: drawer width not a DS token; one-shot, fine. */
		background: var(--color-bg-elevated);
		z-index: 160;
		transform: translateX(100%);
		transition: transform var(--dur-base) var(--ease-out);
		display: flex;
		flex-direction: column;
		box-shadow: -8px 0 32px
			color-mix(in oklab, var(--color-fg) 12%, transparent);
	}
	.drawer.open {
		transform: translateX(0);
	}
	.drawer-header {
		padding: 22px 26px 18px;
		padding-top: max(22px, env(safe-area-inset-top, 0px));
		border-bottom: 1px solid var(--color-border);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-shrink: 0;
	}
	.drawer-header h3 {
		font-family: var(--font-display);
		font-size: var(--text-xl);
	}
	.drawer-close {
		background: none;
		border: none;
		cursor: pointer;
		color: var(--color-fg-muted);
		padding: 10px;
		border-radius: 6px;
		display: flex;
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
	}
	.drawer-close:hover {
		color: var(--color-fg);
		background: var(--color-bg);
	}
	.drawer-body {
		flex: 1;
		overflow-y: auto;
		padding: 22px 26px;
		-webkit-overflow-scrolling: touch;
	}
	.drawer-footer {
		border-top: 1px solid var(--color-border);
		padding: 14px 26px;
		padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
		display: flex;
		gap: 10px;
		justify-content: flex-end;
		flex-shrink: 0;
		flex-wrap: wrap;
	}

	/* ════════════════════════════════════════════════════════
     FORM (drawer fields — input/select have DS primitives;
     these rules style the FORM scaffolding around them)
  ════════════════════════════════════════════════════════ */
	.form-group {
		margin-bottom: 16px;
	}
	.form-row {
		display: flex;
		gap: 12px;
		margin-bottom: 16px;
	}
	.form-col {
		flex: 1;
		min-width: 0;
	}
	/* The native <label> in forms. (DS .label is for FormField wrappers.) */
	.recipe-form label,
	form label {
		display: block;
		font-size: var(--text-sm);
		font-weight: 500;
		color: var(--color-fg-muted);
		margin-bottom: 6px;
	}
	label .req {
		color: var(--color-accent);
	}
	.form-hint {
		font-size: var(--text-xs);
		color: var(--color-fg-subtle);
		margin-top: 4px;
	}
	.form-section-label {
		font-size: var(--text-xs);
		font-weight: 600;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-fg-subtle);
		margin: 22px 0 12px;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--color-border);
	}
	.form-section-label:first-child {
		margin-top: 0;
	}

	.ing-editor,
	.steps-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.ing-row {
		display: flex;
		gap: 8px;
		align-items: center;
	}
	.ing-row input {
		flex: 1;
	}
	.row-remove {
		flex-shrink: 0;
		background: none;
		border: 1px solid var(--color-border);
		border-radius: 6px;
		cursor: pointer;
		color: var(--color-danger);
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		transition: background var(--dur-fast) var(--ease-out);
	}
	.row-remove:hover {
		background: color-mix(in oklab, var(--color-danger) 12%, transparent);
	}
	.add-row {
		display: flex;
		gap: 8px;
		margin-top: 8px;
	}
	.add-row input {
		flex: 1;
	}
	.step-row {
		display: flex;
		gap: 9px;
		align-items: flex-start;
	}
	.step-badge {
		flex-shrink: 0;
		width: 28px;
		height: 28px;
		border-radius: var(--radius-pill);
		background: var(--color-accent-soft);
		color: var(--color-accent);
		font-size: var(--text-sm);
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 9px;
	}
	.step-row textarea {
		min-height: 64px;
	}

	/* ════════════════════════════════════════════════════════
     PANTRY
  ════════════════════════════════════════════════════════ */
	.pantry-add {
		display: flex;
		gap: 8px;
		max-width: 520px;
	}
	.pantry-add input {
		flex: 1;
	}
	.pantry-hint {
		font-size: var(--text-xs);
		color: var(--color-fg-subtle);
		margin-top: 8px;
		max-width: 520px;
		line-height: var(--leading-normal);
	}
	.pantry-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 20px;
	}
	.pantry-tag {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 8px 8px 8px 14px;
		border-radius: var(--radius-pill);
		background: var(--color-bg-elevated);
		font-size: var(--text-sm);
		color: var(--color-fg);
		border: 1px solid var(--color-border);
		box-shadow: var(--shadow-sm);
	}
	.pantry-remove {
		background: var(--color-bg-sunken);
		border: none;
		cursor: pointer;
		color: var(--color-fg-muted);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		border-radius: var(--radius-pill);
		transition: all var(--dur-fast) var(--ease-out);
		flex-shrink: 0;
	}
	.pantry-remove:hover {
		background: color-mix(in oklab, var(--color-danger) 12%, transparent);
		color: var(--color-danger);
	}

	/* ════════════════════════════════════════════════════════
     JSON-LD MODAL
  ════════════════════════════════════════════════════════ */
	.schema-overlay {
		position: fixed;
		inset: 0;
		background: color-mix(in oklab, var(--color-fg) 50%, transparent);
		z-index: 200;
		display: none;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}
	.schema-overlay.open {
		display: flex;
	}
	.schema-modal {
		background: var(--color-fg);
		border-radius: 10px;
		max-width: 640px;
		width: 100%;
		max-height: 82vh;
		display: flex;
		flex-direction: column;
	}
	.schema-modal-header {
		padding: 16px 20px;
		border-bottom: 1px solid
			color-mix(in oklab, var(--color-bg-elevated) 10%, transparent);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-shrink: 0;
	}
	.schema-modal-header h4 {
		font-family: var(--font-display);
		color: var(--color-accent-fg);
		font-size: var(--text-md);
	}
	.schema-modal-header button {
		background: none;
		border: none;
		color: var(--color-fg-subtle);
		cursor: pointer;
		display: flex;
		padding: 6px;
	}
	.schema-actions {
		display: flex;
		gap: 8px;
	}
	.schema-copy {
		background: color-mix(
			in oklab,
			var(--color-bg-elevated) 10%,
			transparent
		);
		border: none;
		color: var(--color-bg-elevated);
		cursor: pointer;
		font-size: var(--text-xs);
		font-weight: 500;
		padding: 6px 12px;
		border-radius: 5px;
		font-family: inherit;
	}
	.schema-copy:hover {
		background: color-mix(
			in oklab,
			var(--color-bg-elevated) 18%,
			transparent
		);
	}
	.schema-modal pre {
		flex: 1;
		overflow: auto;
		padding: 20px;
		font-size: var(--text-xs);
		line-height: 1.6;
		color: var(--color-fg-subtle);
		font-family: ui-monospace, "SF Mono", Menlo, monospace;
		white-space: pre;
	}

	/* ════════════════════════════════════════════════════════
     TOAST — DS .toast already has position; app.css adds bottom offset
  ════════════════════════════════════════════════════════ */
	/* The DS .toast (components.css) already positions bottom-center.
     This rule overrides for stacked-mobile positioning (safe-area + FAB). */
	/* ponytail: original had unique positioning; DS rule owns the visual.
     Kept here only to add the mobile-up shift in the media query below. */

	.fab {
		display: none;
	}

	.fab-stack {
		position: fixed;
		right: 16px;
		bottom: 24px;
		z-index: 60;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 8px;
	}
	.fab-stack .fab {
		display: flex;
	} /* show on every viewport now */

	.fab-dropdown {
		background: var(--color-bg-elevated);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-md);
		padding: 4px;
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 180px;
	}
	.fab-dropdown[hidden] {
		display: none;
	}
	.fab-dropdown-item {
		background: none;
		border: none;
		cursor: pointer;
		text-align: left;
		padding: 10px 14px;
		border-radius: var(--radius-sm);
		font-size: var(--text-sm);
		color: var(--color-fg);
		min-height: 44px;
		font-family: inherit;
	}
	.fab-dropdown-divider {
		height: 1px;
		background: var(--color-border);
		margin: 4px 6px;
	}
	.fab-dropdown-item:hover {
		background: var(--color-bg-sunken);
	}
	.fab-dropdown-item:focus-visible {
		outline: 2px solid var(--color-focus-ring);
		outline-offset: 2px;
	}

	/* Settings panel */
	.auth-signed-in {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap;
		font-size: var(--text-sm);
		color: var(--color-fg-muted);
	}
	.auth-email {
		color: var(--color-fg);
	}
	.auth-signout {
		background: none;
		border: 1px solid var(--color-border);
		cursor: pointer;
		padding: 8px 14px;
		border-radius: var(--radius-md);
		font-size: var(--text-sm);
		color: var(--color-fg);
		font-family: inherit;
		min-height: 36px;
	}
	.auth-signout:hover {
		background: var(--color-bg-sunken);
	}
	.settings-section {
		margin-bottom: 32px;
	}
	.settings-section-label {
		font-size: var(--text-xs);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--color-fg-muted);
		font-weight: 600;
		margin-bottom: 12px;
	}
	.settings-row {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
	}
	.settings-hint {
		font-size: var(--text-xs);
		color: var(--color-fg-subtle);
	}
	#settings-auth-zone {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* ════════════════════════════════════════════════════════
     MOBILE  ≤  760px
  ════════════════════════════════════════════════════════ */
	@media (max-width: 760px) {
		.sidebar {
			flex-direction: row;
			width: 100%;
			height: auto;
			top: auto;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 6px 4px;
			padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
			border-top: 1px solid
				color-mix(in oklab, var(--color-bg-elevated) 12%, transparent);
			justify-content: space-around;
		}
		.sidebar-brand,
		.sidebar-footer {
			display: none;
		}
		.sidebar-nav {
			display: flex;
			padding: 0;
			flex: 1;
			justify-content: space-around;
			gap: 2px;
		}
		.nav-item {
			flex-direction: column;
			gap: 3px;
			padding: 7px 4px;
			width: auto;
			flex: 1;
			align-items: center;
			font-size: var(--text-xs);
			border-radius: 10px;
			max-width: 90px;
		}
		.nav-item svg {
			width: 20px;
			height: 20px;
			opacity: 0.7;
		}
		.nav-item.active {
			background: transparent;
			color: var(--color-accent);
		}
		.nav-item.active svg {
			color: var(--color-accent);
		}
		.nav-tab-label {
			display: block;
			font-size: var(--text-xs);
		}

		.main {
			margin-left: 0;
			padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
		}

		.topbar {
			padding: 10px 14px;
			padding-top: max(10px, env(safe-area-inset-top, 0px));
		}
		.search-wrap {
			flex: 1 1 auto;
		}

		.panel {
			padding: 18px 14px;
		}
		.panel-header h2 {
			font-size: var(--text-xl);
		}
		.recipe-grid {
			grid-template-columns: 1fr;
			gap: 14px;
		}

		.detail-modal {
			left: 0;
		}
		.detail-body {
			grid-template-columns: 1fr;
		}
		.detail-nutrition-inner {
			grid-template-columns: 1fr;
			gap: 14px;
		}
		.nutrition-grid {
			grid-template-columns: repeat(2, 1fr);
		} /* 2x2 on phone */
		.detail-ingredients {
			border-right: none;
			border-bottom: 1px solid var(--color-border);
			padding: 22px 18px 28px;
		}
		.detail-header {
			padding: 18px;
			padding-top: max(18px, env(safe-area-inset-top, 0px));
		}
		.detail-title {
			font-size: var(--text-xl);
		}
		.detail-meta-row {
			gap: 16px;
		}
		.detail-steps {
			padding: 22px 18px 32px;
		}
		.detail-footer {
			padding: 12px 18px;
			padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
		}

		.drawer {
			width: 100vw;
		}

		.fab-stack {
			right: 16px;
			bottom: calc(72px + env(safe-area-inset-bottom, 0px));
		}
		.fab-stack .fab {
			width: 56px;
			height: 56px;
			border-radius: var(--radius-pill);
			background: var(--color-accent);
			color: var(--color-accent-fg);
			border: none;
			cursor: pointer;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4px 16px
				color-mix(in oklab, var(--color-accent) 45%, transparent);
		}
		.fab-stack .fab:active {
			transform: scale(0.94);
		}

		/* Lift the toast above the bottom tab bar. DS .toast has
       bottom: var(--space-6); override for mobile-stacked UI. */
		#toast {
			bottom: calc(80px + env(safe-area-inset-bottom, 0px));
		}
	}

	@media (max-width: 380px) {
		.card-actions .icon-btn:first-child {
			display: none;
		} /* drop edit on tiny screens; use detail sheet */
	}
}