.hero-panel{border:1px solid var(--outline);border-radius:var(--hero-panel-radius);padding:17px 19px 22px;background:linear-gradient(145deg,var(--surface-elevated) 10%,var(--surface-warm));box-shadow:var(--shadow);overflow:hidden}.hero-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:15px}.hero-head h1{font-size:var(--type-section-title)}.outline-control{border:1px solid var(--outline);background:var(--white);color:var(--copper);height:42px;padding:0 12px;border-radius:13px;display:flex;align-items:center;gap:5px;font:500 var(--type-support) var(--font-ui);white-space:nowrap}.hero-window{overflow:hidden;border-radius:var(--hero-tile-radius);margin-right:-1px;touch-action:pan-y;overscroll-behavior-x:contain}.hero-track{display:flex;gap:11px;width:max-content;transition:transform var(--motion-slide) var(--motion-ease)}.hero-track.is-sliding{transform:translate3d(calc(-1 * var(--hero-step,254px)),0,0)}.hero-tile{border:1px solid var(--outline);border-radius:var(--hero-tile-radius);background:var(--white);text-align:left;padding:0;overflow:hidden;width:243px;height:133px;display:grid;grid-template-columns:89px 1fr;flex:none;color:var(--ink)}.hero-tile-next{width:243px}.hero-illustration{border-radius:var(--hero-image-radius) 0 0 var(--hero-image-radius);display:flex;align-items:center;justify-content:center;background:var(--image-warm);overflow:hidden}.hero-illustration img{width:100%;height:100%;object-fit:cover}.hero-info{min-width:0;display:flex;flex-direction:column;padding:13px 11px 12px;text-align:left}.hero-info-center{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;justify-content:center;align-items:stretch}.hero-info-head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}.hero-info-head small{font:500 var(--type-small)/1.4 var(--font-ui);color:var(--copper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-go{display:grid;place-items:center;color:var(--copper);opacity:.82;flex:none;transition:transform var(--motion-fast) ease}.hero-tile:hover .hero-go{transform:translateX(2px)}.hero-info strong{font:700 var(--type-card-title)/1.5 var(--head);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px}.hero-meta{margin-top:auto;font:400 var(--type-meta)/1.35 var(--font-ui);padding:0}.discovery{margin-top:32px;margin-bottom:26px}.compact-controls{display:flex;gap:8px;color:var(--copper)}.compact-controls button{border:0;background:transparent;width:32px;height:35px;display:grid;place-items:center;color:var(--copper)}.category-row{display:flex;gap:7px;overflow:auto hidden;scrollbar-width:none;margin-top:20px;padding-bottom:1px;white-space:nowrap}.category-row::-webkit-scrollbar{display:none}.category-pill{transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease;flex:none;border:1px solid var(--outline);border-radius:25px;padding:7px 12px;background:transparent;color:var(--text-secondary);font:500 var(--type-control)/1.5 var(--font-ui)}.category-pill.active{color:var(--copper);border-color:var(--outline);background:var(--surface-elevated);font-weight:700}.catalog-section{margin-top:18px}.catalog-line{align-items:center;margin-bottom:18px}.catalog-line h2{font-size:var(--type-section-title)}.catalog-line p{font:400 var(--type-small)/1.7 var(--font-ui);color:var(--muted);margin-top:5px}.count-pill{background:var(--accent-subtle);border:1px solid var(--outline);color:var(--copper);border-radius:25px;padding:6px 12px;font:500 var(--type-small) var(--font-ui);white-space:nowrap}.recipe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}.recipe-card{min-width:0;position:relative;border:1px solid var(--outline);border-radius:var(--radius-surface-card);background:var(--white);overflow:hidden;min-height:170px}.card-open{display:block;width:100%;text-align:left;border:0;padding:0;background:transparent}.recipe-cover{width:100%;height:88px;background:var(--image-warm);display:grid;place-items:center;overflow:hidden}.recipe-cover img{width:100%;height:100%;object-fit:cover}.card-main{padding:7px 9px 1px;min-height:52px;display:flex;flex-direction:column}.card-category{font:500 var(--type-small)/1.35 var(--font-ui);color:var(--copper)}.card-main strong{font:700 var(--type-card-title)/1.5 var(--head);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recipe-meta{display:flex;justify-content:space-between;align-items:center;gap:2px;font:400 var(--type-meta)/1.35 var(--font-ui);color:var(--muted);white-space:nowrap;min-width:0}.recipe-meta>span:first-child{display:flex;align-items:center;gap:2px;flex:none}.recipe-meta>span:last-child{color:var(--copper);min-width:0;overflow:hidden;text-overflow:ellipsis}.card-meta{padding:4px 9px 8px}.heart-action{transition:transform var(--motion-fast) ease,background-color var(--motion-fast) ease;position:absolute;right:10px;top:9px;background:var(--white);border:1px solid var(--outline);border-radius:13px;width:40px;height:40px;display:grid;place-items:center;color:var(--copper);box-shadow:0 2px 8px #4e291a13}.heart-action.is-on .glyph{fill:#c3572b22}.more-recipes{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;border:1px solid var(--outline);border-radius:15px;background:var(--surface-warm);color:var(--copper);padding:12px;margin:24px 0;font-weight:600}.empty-state{grid-column:1/-1;border:1px dashed var(--outline);background:var(--surface-warm);text-align:center;padding:40px 15px;border-radius:18px}.empty-icon{display:inline-flex;color:var(--copper);margin-bottom:10px}.empty-state p{color:var(--muted);margin-top:4px}.page-heading{margin:18px 0 26px}.page-heading p,.collection-header p{font:400 var(--type-support)/1.7 var(--font-ui);color:var(--muted);margin-top:6px}.collection-search button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--outline);border-radius:13px;padding:10px;flex:1;color:var(--copper);background:var(--surface-warm)}/* Recipe-grouped shopping view. Groups are derived without duplicated storage. */
.shopping-summary{font:400 var(--type-support)/1.8 var(--font-ui);margin:0 0 18px;color:var(--muted)}
.shopping-section{margin:16px 0 22px}
.shopping-section h2{font-size:var(--type-section-title);margin:0 0 12px}
.shopping-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shopping-group-head .minor-danger{margin:0 0 12px;padding:7px 10px}
.shopping-list{background:var(--white);border:1px solid var(--outline);border-radius:16px;padding:0 13px}
.shopping-row{display:flex;gap:10px;align-items:center;min-height:51px;border-bottom:1px solid var(--outline-faint);font:400 var(--type-list)/1.6 var(--font-ui)}
.shopping-row:last-child{border-bottom:0}
.shopping-row input{width:18px;height:18px;accent-color:var(--copper);flex:none}
.shopping-row.checked .shopping-name{text-decoration:line-through;color:var(--muted)}
.shopping-name{min-width:0;flex:1}
.shopping-amount{margin-left:auto;white-space:nowrap;font:400 var(--type-small)/1.5 var(--font-ui);color:var(--copper)}
.shopping-recipe-list{background:var(--surface-warm);border:1px solid var(--outline);border-radius:15px;padding:4px 13px}
.shopping-recipe{display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:52px;border-bottom:1px solid var(--outline-faint)}
.shopping-recipe:last-child{border-bottom:0}
.shopping-recipe span{font:600 var(--type-list)/1.6 var(--font-ui)}
.shopping-recipe small{color:var(--muted)}
.shopping-recipe button,.minor-danger{background:var(--white);border:1px solid var(--outline);border-radius:10px;color:var(--copper);padding:7px 12px;font:600 var(--type-small) var(--font-ui)}
.shopping-disclaimer{color:var(--muted);font:400 var(--type-support)/1.7 var(--font-ui)}

/* Recipes and Favourites use the same collection/header/card geometry. */
.cook-restart{display:flex;align-items:center;justify-content:center;gap:6px;margin:-4px auto 12px;border:0;background:transparent;color:var(--copper);font:600 var(--type-support)/1.6 var(--font-ui);padding:8px}
.cook-timer-quick{margin:12px 0;border:1px solid var(--outline);background:var(--surface-warm);border-radius:12px;padding:0 13px}
.cook-timer-quick summary{padding:13px 0;cursor:pointer;list-style:none;font:700 var(--type-ui-body) var(--head)}
.cook-timer-quick summary:after{content:'+';float:right;color:var(--copper);font-size:18px}
.cook-timer-quick[open] summary:after{content:'−'}
.cook-timer-quick summary span{margin-left:5px;color:var(--copper);font:600 var(--type-support) var(--font-ui)}
/* Predictable tap targets and control rows in the expanded cooking timer. */
.cook-timer-controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:3px 0 11px}
.cook-timer-controls>button{grid-column:span 2;min-width:0;min-height:44px;padding:6px 5px;border:1px solid var(--outline);border-radius:10px;background:var(--white);color:var(--copper);font:600 var(--type-support) var(--font-ui)}
.cook-timer-controls>button[data-action="timer-toggle"],.cook-timer-controls>button[data-action="timer-reset"]{grid-column:span 3}
.cook-timer-custom{grid-column:1/-1;min-width:0;width:100%;display:grid;gap:5px;margin:1px 0 0}
.cook-timer-custom label{font:500 var(--type-support)/1.5 var(--font-ui);color:var(--text-secondary)}
.cook-timer-custom-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(95px,36%);gap:8px}
.cook-timer-custom-row input{width:100%;min-width:0;min-height:44px;border:1px solid var(--control-outline);border-radius:10px;background:var(--white);text-align:center;color:var(--ink);font:500 16px/1.5 var(--font-ui)}
.cook-timer-controls .cook-timer-custom-row button{min-height:44px;background:var(--copper);color:var(--white);border-color:var(--copper)}
.cook-timer-note{grid-column:1/-1;display:block;width:100%;font:400 var(--type-small)/1.6 var(--font-ui);color:var(--muted);padding:1px 0 0}

.backup-sheet{width:min(100%,410px)}
.backup-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--outline);border-radius:14px;background:var(--surface-elevated);margin:16px 0;overflow:hidden}
.backup-stats>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 5px;border-right:1px solid var(--outline-faint)}
.backup-stats>div:last-child{border-right:0}
.backup-stats strong{color:var(--copper);font:700 22px var(--font-ui)}
.backup-stats span{color:var(--muted);font:500 var(--type-micro)/1.5 var(--font-ui);text-align:center}
.backup-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;margin:13px 0}
.backup-actions .primary-full,.backup-actions .restore-label{display:flex!important;min-height:45px;align-items:center;justify-content:center;gap:5px;margin:0!important;border-radius:12px;font:600 var(--type-support)/1.3 var(--font-ui);padding:7px;cursor:pointer}
.backup-actions .primary-full{background:var(--copper);border:1px solid var(--copper);color:var(--white)}
.backup-footnote{font-size:var(--type-small)!important;color:var(--muted)}
.restore-review{border-top:1px solid var(--outline);margin-top:18px;padding-top:15px}
.restore-review-head{display:flex;flex-wrap:wrap;gap:7px;justify-content:space-between;align-items:baseline}
.restore-review-head strong{font:700 14px var(--head)}
.restore-review-head span{font:400 var(--type-micro) var(--font-ui);color:var(--muted);overflow-wrap:anywhere;max-width:100%}
.restore-preview{font-weight:600!important;color:var(--copper)}
.restore-explain{font-size:var(--type-small)!important}
.restore-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;margin-top:13px}
.restore-actions button{min-height:43px;padding:7px;border:1px solid var(--outline);background:var(--surface-warm);border-radius:11px;color:var(--copper);font-weight:600;font-size:var(--type-support)}
.restore-actions button.primary-full{background:var(--copper);color:white;border-color:var(--copper)}
.about-sheet h3{font:700 15px var(--head);margin:17px 0 6px}
.about-sheet .sheet-content p{font:400 var(--type-support)/1.85 var(--font-ui);margin:8px 0}
.about-sheet .storage-alert{border:1px solid var(--outline);border-radius:13px;background:var(--surface-warm);padding:12px}
.about-sheet .privacy-note,.about-sheet .editorial-policy-note{color:var(--text-secondary)}
.editor-inline-error:not([hidden]){display:block;color:var(--danger)!important;background:var(--accent-subtle);border:1px solid var(--outline-strong);border-radius:11px;padding:10px;font:600 var(--type-support)/1.6 var(--font-ui)!important;margin:0 0 10px!important}
.completion-sheet{width:min(100%,420px);padding:0}
.completion-sheet .sheet-content{text-align:center;padding:28px 22px 23px}
.completion-sheet .sheet-content p{text-align:center;margin-bottom:22px}
.completion-sheet .primary-full{width:100%;min-height:48px}
.modal-layer:has(.confirm-card){align-items:end;justify-items:stretch;padding:0}
.confirm-card{position:relative;z-index:1;width:min(100%,450px);margin:0 auto;background:var(--surface-elevated);border:1px solid var(--outline);border-radius:23px 23px 0 0;padding:25px 20px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 40px rgba(51,25,11,.15)}
.confirm-content h2{font:700 21px var(--head);text-align:center}
.confirm-content p{font:400 var(--type-ui-body)/1.8 var(--font-ui);text-align:center;margin:12px 0 24px}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.confirm-actions button{min-height:46px;border:1px solid var(--outline);background:var(--surface-warm);color:var(--copper);border-radius:12px;font-weight:700}
.confirm-actions button:last-child{background:var(--copper);border-color:var(--copper);color:var(--white)}
.confirm-actions button.danger{background:var(--copper);border-color:var(--copper)}
@media(max-width:699px){.modal-layer:has(.completion-sheet){align-items:end;justify-items:stretch;padding:0}.completion-sheet{width:100%;margin:0;border-radius:var(--radius-sheet-mobile) var(--radius-sheet-mobile) 0 0}}

.backup-alert{color:var(--copper)!important;font:500 var(--type-small)/1.7 var(--font-ui)!important;margin:5px 0 15px!important}
@media(max-width:699px){.modal-layer:has(.backup-sheet),.modal-layer:has(.about-sheet){align-items:end;justify-items:stretch;padding:0}.backup-sheet,.about-sheet{width:100%;margin:0;border-radius:var(--radius-sheet-mobile) var(--radius-sheet-mobile) 0 0;max-height:calc(100dvh - 50px)}}

/* Pass 13: targeted visual alignment to the Pass 01 page measurements. */
.home-view-all{display:inline-flex;justify-content:center;align-items:center;gap:3px;flex:none;white-space:nowrap;min-height:32px;margin:0;padding:4px 8px;border:1px solid var(--outline);border-radius:11px;background:var(--surface-elevated);color:var(--copper);font:600 var(--type-meta)/1.4 var(--font-ui)}
.home-view-all .glyph{width:14px;height:14px;flex:none}
.catalog-line:has(.home-view-all){justify-content:space-between;gap:6px}
.catalog-line:has(.home-view-all) h2{min-width:0}
/* Time / effort separator is owned by the shared compact metadata component. */
.recipe-meta>.meta-time{display:inline-flex;align-items:center;min-width:0;flex:none;gap:2px}
.recipe-meta>.meta-divider{width:1px;height:12px;display:block;align-self:center;flex:none;background:var(--outline-strong);margin-inline:2px}
@media(max-width:360px){.home-view-all{padding-inline:5px;gap:2px;font-size:var(--type-micro)}.home-view-all .glyph{width:12px;height:12px}.catalog-line:has(.home-view-all){gap:4px}.card-meta{padding-inline:7px}.recipe-meta>.meta-divider{margin-inline:1px}}
.shopping-intro{margin:8px 0 22px}
.shopping-intro .collection-breadcrumb{margin-bottom:12px!important}
.shopping-intro h1{font-size:var(--type-page-title);margin:0 0 7px}
.shopping-intro>p:last-child{font:400 var(--type-support)/1.7 var(--font-ui);color:var(--muted);margin:0}
.shopping-panel{background:var(--white); border:1px solid var(--outline);border-radius:var(--radius-surface-outer);padding:15px 13px 24px;box-shadow:var(--shadow);margin-bottom:26px}
.shopping-browse{display:flex;justify-content:flex-end;align-items:center;gap:5px;width:100%;min-height:31px;background:transparent;border:0;color:var(--copper);font:600 var(--type-small)/1.5 var(--font-ui);padding:3px 3px 7px;text-align:right}
.shopping-panel .shopping-summary{margin:8px 0 21px;line-height:1.85;font-size:11.5px}
.shopping-panel .shopping-section{margin:13px 0 19px}
.shopping-panel .shopping-section h2{font-size:var(--type-section-title)}
.shopping-panel .shopping-list{padding:0 13px;border-radius:16px}
.shopping-panel .shopping-row{min-height:51px}
.shopping-panel .shopping-disclaimer{margin:17px 0 0;line-height:1.8}
.shopping-panel .empty-state{margin-top:5px}
@media(min-width:700px){.shopping-panel{max-width:700px;padding:18px 22px 27px}}
/* One accessible filled/empty checkbox language for shopping and recipe ingredients. */
.shopping-row input[type="checkbox"],.ingredient-line input[type="checkbox"]{
 appearance:none;-webkit-appearance:none;display:grid;place-items:center;flex:0 0 18px;
 width:18px;height:18px;margin:0;border:1px solid var(--control-outline);border-radius:5px;
 background:var(--white);color:var(--white);cursor:pointer;transition:border-color .15s,background-color .15s;
}
.shopping-row input[type="checkbox"]::after,.ingredient-line input[type="checkbox"]::after{
 content:"";width:5px;height:9px;transform:translateY(-1px) rotate(45deg) scale(0);
 border:solid currentColor;border-width:0 2px 2px 0;transform-origin:center;
}
.shopping-row input[type="checkbox"]:checked,.ingredient-line input[type="checkbox"]:checked{
 background:var(--copper-strong);border-color:var(--copper-strong)
}
.shopping-row input[type="checkbox"]:checked::after,.ingredient-line input[type="checkbox"]:checked::after{
 transform:translateY(-1px) rotate(45deg) scale(1)
}
@media(prefers-reduced-motion:reduce){.shopping-row input[type="checkbox"],.ingredient-line input[type="checkbox"]{transition:none}}

/* Motion: feedback without affecting card dimensions or position at rest. */
.recipe-grid.is-updating .recipe-card,.recipe-card.is-added{animation:rb-card-enter var(--motion-medium) var(--motion-ease) both}
@keyframes rb-card-enter{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.heart-action:active{transform:scale(.94)}


/* Pass 62: shared recipe effort signal; same visual language in every context. */
.difficulty-display{display:inline-flex;align-items:center;justify-content:flex-start;gap:4px;min-width:0;vertical-align:middle;white-space:nowrap;line-height:inherit;color:inherit}
.difficulty-display .effort-bars{flex:none;display:block;width:.92em;height:1em;color:var(--copper);overflow:visible}
.difficulty-display .effort-step{opacity:.18}
.difficulty-display .effort-step:nth-child(1){fill:#5c8968}
.difficulty-display .effort-step:nth-child(2){fill:#d19e3e}
.difficulty-display .effort-step:nth-child(3){fill:#ba6840}
.difficulty-level-1 .effort-step:nth-child(1),
.difficulty-level-2 .effort-step:nth-child(-n+2),
.difficulty-level-3 .effort-step{opacity:1}
.difficulty-display .difficulty-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recipe-meta>.difficulty-display{flex:none;max-width:60%}
.hero-meta>.difficulty-display{max-width:58%}
.detail-meta .difficulty-display{max-width:none}

/* Design Trial 06: home search affordance and a native category-scroll cue. */
.discovery .compact-controls{gap:6px;align-items:center}
.discovery .compact-controls .home-search-entry{display:inline-flex;align-items:center;justify-content:center;gap:4px;
 width:auto;min-width:73px;height:35px;min-height:35px;padding:0 9px;
 border:1px solid var(--outline);border-radius:11px;background:var(--surface-elevated);
 color:var(--copper);font:500 var(--type-control)/1.3 var(--font-ui);white-space:nowrap}
.discovery .home-search-entry .glyph{flex:none}
.home-category-scroll{position:relative;margin-top:20px;min-width:0}
.home-category-scroll .category-row{margin-top:0}
.home-category-scroll.has-overflow-right::after{content:"";position:absolute;pointer-events:none;
 right:0;top:0;bottom:0;width:19px;background:linear-gradient(90deg,transparent,var(--paper));border-radius:0 15px 15px 0}