/* "What can I cook?" — tokens from home-v2.css */
.pt-page { max-width: 1180px; margin: 0 auto; padding: 0 16px 48px; color: #1f2f3d; box-sizing: border-box; }
.pt-hero { margin-bottom: 18px; }

.pt-panel { background: #fff; border: 1px solid #eeece8; border-radius: 16px; padding: 20px; box-shadow: 0 1px 3px rgba(45,62,79,.06); }
.pt-label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.pt-input-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 52px; padding: 8px 10px; border: 1.5px solid #eeece8; border-radius: 12px; background: #faf9f7; cursor: text; box-sizing: border-box; }
.pt-input-wrap:focus-within { border-color: #e74c3c; background: #fff; }
.pt-chips { display: contents; list-style: none; margin: 0; padding: 0; }
.pt-chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 6px 0 12px; border-radius: 999px; background: #1f2f3d; color: #fff; font-size: 13.5px; font-weight: 700; }
.pt-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.pt-chip button:hover { background: rgba(255,255,255,.3); }
.pt-input-wrap input[type=text] { flex: 1 1 220px; min-width: 160px; height: 34px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #1f2f3d; padding: 0 4px; box-shadow: none; outline: none; }

.pt-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: #6b7680; }
.pt-suggest-btn { height: 28px; padding: 0 10px; border: 1px dashed #d9d5ce; border-radius: 999px; background: #fff; color: #1f2f3d; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pt-suggest-btn:hover { border-color: #e74c3c; color: #e74c3c; }
.pt-suggest-btn[hidden] { display: none; }

.pt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.pt-photo-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid #eeece8; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; overflow: hidden; }
.pt-photo-btn svg { width: 18px; height: 18px; color: #e74c3c; }
.pt-photo-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pt-photo-btn:hover { border-color: #d9d5ce; background: #faf9f7; }
.pt-photo-btn.is-busy { pointer-events: none; opacity: .7; }
.pt-photo-btn.is-busy svg { animation: pt-pulse 1s ease-in-out infinite; }
.pt-photo-btn.is-locked { opacity: .75; }
@keyframes pt-pulse { 50% { opacity: .3; } }

.pt-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #34495e; cursor: pointer; user-select: none; }
.pt-actions .pt-toggle input[type=checkbox] { position: absolute !important; opacity: 0 !important; width: 1px; height: 1px; display: block !important; pointer-events: none; }
.pt-toggle-ui { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #d9d5ce; transition: background .15s; flex: 0 0 auto; }
.pt-toggle-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.pt-toggle input:checked + .pt-toggle-ui { background: #27ae60; }
.pt-toggle input:checked + .pt-toggle-ui::after { transform: translateX(16px); }
.pt-toggle input:focus-visible + .pt-toggle-ui { outline: 2px solid #e74c3c; outline-offset: 2px; }

.pt-find { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: #e74c3c; color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 16px rgba(231,76,60,.25); }
.pt-find svg { width: 18px; height: 18px; }
.pt-find:hover { background: #d84333; }
.pt-find:disabled { opacity: .7; cursor: default; }
.pt-note { margin: 12px 0 0; font-size: 12px; color: #97a3ad; }
.pt-error { margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; background: #fdecea; color: #c0392b; font-size: 13px; font-weight: 600; }
.pt-error[hidden] { display: none; }

/* results */
.pt-results-wrap { margin-top: 28px; scroll-margin-top: 90px; }
.pt-results-wrap[hidden], .pt-empty[hidden] { display: none; }
.pt-results-title { margin: 0 0 14px; font-size: 20px; font-weight: 800; }
.pt-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.pt-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eeece8; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(45,62,79,.06); }
.pt-card.is-complete { border-color: #a9dfbf; }
.pt-card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: #f4f3f1 center / cover no-repeat; }
.pt-ring { --pct: 0; position: absolute; right: 10px; bottom: 10px; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#27ae60 calc(var(--pct) * 1%), rgba(255,255,255,.55) 0); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.pt-ring span { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #1f2f3d; }
.pt-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.pt-card-title { font-size: 15px; font-weight: 800; line-height: 1.3; color: #1f2f3d; text-decoration: none; }
.pt-card-title:hover { color: #e74c3c; }
.pt-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12.5px; color: #6b7680; }
.pt-card-meta strong { color: #1f2f3d; }
.pt-dot { color: #c9c4bc; margin: 0 2px; }
.pt-ready { margin: 2px 0 0; padding: 7px 10px; border-radius: 8px; background: #eafaf1; color: #1e8449; font-size: 13px; font-weight: 700; }
.pt-missing-label { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: #6b7680; }
.pt-missing { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.pt-missing li { padding: 0; border-radius: 999px; background: #fdf2e9; color: #a04000; font-size: 12px; font-weight: 600; }
.pt-missing li.pt-more { background: #f4f3f1; color: #6b7680; }
.pt-add { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #eeece8; border-radius: 999px; background: #fff; color: #1f2f3d; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pt-card-body .pt-add { margin-top: 8px; }
.pt-add svg { width: 15px; height: 15px; color: #e74c3c; }
.pt-add:hover { border-color: #d9d5ce; background: #faf9f7; }
.pt-add.is-done { background: #eafaf1; border-color: #a9dfbf; color: #1e8449; }
.pt-add.is-done svg { color: #1e8449; }

.pt-empty { margin-top: 28px; padding: 40px 20px; text-align: center; background: #fff; border: 1px solid #eeece8; border-radius: 14px; color: #6b7680; }
.pt-empty strong { display: block; margin-bottom: 6px; font-size: 17px; color: #1f2f3d; }
.pt-empty p { margin-top: 14px; }

/* Cook Tonight additions */
.pt-info { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.pt-info p { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.45; color: #34495e; }
.pt-info svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: #27ae60; }
.pt-info a { color: #e74c3c; font-weight: 700; white-space: nowrap; }
.pt-uses { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: #1e8449; }
.pt-uses strong { color: #1f2f3d; }
.pt-reason { margin: 0; font-size: 12.5px; color: #6b7680; }
.pt-missing-item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; cursor: pointer; }
.pt-missing .pt-missing-item input[type=checkbox] { display: inline-block !important; position: static !important; opacity: 1 !important; width: 13px; height: 13px; margin: 0; accent-color: #e74c3c; }
.pt-missing .pt-missing-item input:not(:checked) + span { color: #97a3ad; text-decoration: line-through; }
.pt-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f4f3f1; }
.pt-action { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #eeece8; border-radius: 999px; background: #fff; color: #1f2f3d; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.pt-action:hover { border-color: #d9d5ce; background: #faf9f7; color: #1f2f3d; text-decoration: none; }
.pt-action svg { width: 14px; height: 14px; color: #e74c3c; }
.pt-action-primary { background: #e74c3c; border-color: #e74c3c; color: #fff; }
.pt-action-primary svg { color: #fff; }
.pt-action-primary:hover { background: #d8432f; border-color: #d8432f; color: #fff; }
.pt-plan.is-done { background: #eafaf1; border-color: #a9dfbf; color: #1e8449; }
.pt-plan.is-done svg { color: #1e8449; }
.pt-relax { display: inline-flex; flex-direction: column; gap: 6px; margin: 14px auto 0; padding: 0; list-style: none; text-align: left; }
.pt-relax[hidden] { display: none; }
.pt-relax li { padding: 8px 12px; border-radius: 10px; background: #fff7ec; color: #a04000; font-size: 13px; font-weight: 600; }

#pt-toast.is-visible { pointer-events: auto; }
#pt-toast a { color: #fff; text-decoration: underline; font-weight: 800; }

/* entry point on the Recipes page */
.pt-entry { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; height: 40px; padding: 0 16px; border-radius: 999px; background: #1f2f3d; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.pt-entry:hover { background: #2c3e50; color: #fff; }
.pt-entry svg { width: 17px; height: 17px; }

@media (max-width: 600px) {
	.pt-panel { padding: 16px; }
	.pt-find { margin-left: 0; width: 100%; justify-content: center; }
	.pt-photo-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.pt-photo-btn.is-busy svg { animation: none; }
	.pt-toggle-ui, .pt-toggle-ui::after { transition: none; }
}
.pt-missing li.pt-missing-plain { padding: 3px 9px; }