/* Shared controls, rules and type scale for the meal picker and menu library. */
:root{--control-border:#d3d7d2;--control-icon-inset:16px;--dish-title-size:14px;--dish-meta-size:12px;--detail-size:13px}
.quick-controls select,#menu-filters select,.rice-row select{appearance:none;-webkit-appearance:none;width:100%;min-height:44px;border:1px solid var(--control-border);border-radius:999px;padding:6px 40px 6px 12px;font-family:'Noto Sans JP',sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:#455153;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23455153' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--control-icon-inset) center;background-size:12px 12px}
#cards>.card:nth-child(n){border-bottom:1px solid var(--control-border)}#cards>.card:last-child{border-bottom:0}
.menu{border-bottom:1px solid var(--control-border);align-self:start;padding-bottom:12px}.menu:last-child{border-bottom:0}
.card h3,.menu h2{font-size:var(--dish-title-size);font-weight:500;line-height:1.5}.menu h2{margin:8px 0 3px}.card .kcal,.menu .meta{font-size:var(--dish-meta-size);line-height:1.6;color:#53615b;margin:0}
.menu details,.menu details p,.card details p{font-size:var(--detail-size);line-height:1.8}.menu details{margin-top:4px}.menu summary{font-size:12px;min-height:28px;padding:3px 0;list-style:none;cursor:pointer}.menu summary::-webkit-details-marker{display:none}.menu summary:before{content:'＋';margin-right:8px}.menu details[open]>summary:before{content:'−'}
.menu>a{display:inline-flex;align-items:center;min-height:28px;font-size:12px;line-height:1.6;border:1px solid var(--control-border);border-radius:999px;padding:2px 10px;text-decoration:none;margin-top:4px}.menu .use-dish{font-size:12px;min-height:36px;margin:10px 0}
#menu-filters label,#menu-filters button,#count{font-size:13px}#menu-filters input{border-color:var(--control-border);font-size:16px}#menu-filters button{border-color:var(--control-border)}.menu-tags span{font-size:12px}

/* Quiet filter area and tighter disclosure spacing. */
#menu-filters{background:transparent;border:0;padding:0;border-radius:0;margin-top:20px}
#menu-filters input,#advanced input[type=search]{font-size:14px;line-height:1.6}#menu-filters input::placeholder,#advanced input[type=search]::placeholder{font-size:13px}
.back-to-dinner{display:inline-flex;align-items:center;min-height:40px;font-size:13px;margin-bottom:12px;text-decoration:underline;text-underline-offset:4px}
#advanced .filter-heading{margin:10px 0 4px}#advanced .filter-heading+.detail-grid{padding-top:0;gap:12px}#advanced .detail-grid input{margin-top:5px}
.more-conditions>summary{display:flex;align-items:center;justify-content:space-between;gap:8px}.more-conditions .more-symbol{float:none;flex:none;font-size:18px;line-height:1}.more-conditions .more-symbol:before{content:'＋'}.more-conditions[open] .more-symbol:before{content:'−'}

/* Give the introduction a little breathing room without crowding the result. */
body:has(#filters) .intro .eyebrow{margin-top:7px;margin-bottom:8px}body:has(#filters) .intro h1{margin-top:8px;margin-bottom:12px}
body:has(#filters) .meal-tray{max-width:min(100%,clamp(120px,calc(100svh - 580px),280px))}
@media(max-height:740px){body:has(#filters) .intro .eyebrow{margin-top:4px;margin-bottom:6px}body:has(#filters) .intro h1{margin-top:6px;margin-bottom:8px}}

:root{--note-font-size:11px}
.notes summary,.notes>p:not(:has(a)),.notes details p,.calorie-note,#rice-result,#advanced .hint,#notice{font-size:var(--note-font-size);line-height:1.8}

/* Result thumbnails and compact search action. */
#cards .card{grid-template-columns:42px minmax(0,1fr) 36px;column-gap:8px;position:relative}
#cards .card .dish-thumb{display:block;grid-column:1;grid-row:1/3;width:42px;height:42px;object-fit:contain;align-self:center}#cards .card .dish-thumb[hidden]{display:none}
#cards .card h3{grid-column:2;grid-row:1;min-width:0}#cards .card .kcal{grid-column:2;grid-row:2}
#cards .card .dish-actions{grid-column:3;grid-row:1/3;align-self:start;justify-content:flex-end}
#cards .card .dish-actions .recipe{width:36px;height:36px;min-height:36px;padding:8px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-color:var(--control-border)}#cards .recipe:before{content:'';width:18px;height:18px;display:block;background:url('icons/search.svg') center/contain no-repeat}
#cards .card details{grid-column:2/-1;grid-row:3}#cards .card details summary{max-width:100%}
.notice-box{border:1px solid var(--control-border);border-radius:12px;padding:12px 14px;margin:14px 0;color:#667371;font-size:var(--note-font-size);line-height:1.8;text-align:left}.notice-box ul{list-style:disc;margin:0;padding-left:1.4em}.notice-box li{margin:0 0 5px;padding:0;text-align:left;font-size:var(--note-font-size);line-height:1.8}.notice-box li:last-child{margin-bottom:0}.notice-box .calorie-note,.notice-box #rice-result{text-align:left;margin:0 0 5px;font-size:var(--note-font-size)}.notice-box #rice-result:last-child{margin-bottom:0}.notes .notice-box details{border-top:1px solid var(--control-border);padding-top:10px;margin-top:10px}.notes .notice-box summary{font-size:var(--note-font-size);text-align:left}.notes .notice-box details[open] summary{margin-bottom:8px}#result:not(.has-result) .result-notes{display:none}

/* Preserve readable food sizes on short screens; allow natural vertical scrolling. */
body:has(#filters) .meal-tray{max-width:min(100%,clamp(180px,calc(100svh - 580px),280px))}

/* Move only the chopsticks slightly toward the front of the tray. */
.meal-tray .tray-cutlery .utensil-chopsticks{translate:0 5px}

/* Vertical dish roles replace duplicate food thumbnails. */
#cards .card{grid-template-columns:24px minmax(0,1fr) 36px;column-gap:10px}
#cards .card .dish-thumb{display:none}
#cards .card .role{display:block;grid-column:1;grid-row:1/4;align-self:center;justify-self:center;writing-mode:vertical-rl;text-orientation:upright;font-size:11px;line-height:1.5;letter-spacing:.12em;color:#667371;margin:0;padding:0;background:none;border:0}
#cards .card .dish-actions{grid-column:3;grid-row:1/4;align-self:center}
#cards .card details{grid-column:2;grid-row:3}#cards .card details[open]{grid-column:2/-1}#cards .card:has(details[open]) .dish-actions{grid-row:1/3}
.meal-tray .tray-cutlery .utensil-chopsticks{translate:0 8px}
.spin-row .primary,.secondary-spin{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#7b8560;color:#fff;border-color:#7b8560}
.spin-row .primary:hover,.secondary-spin:hover{background:#68734f;border-color:#68734f}
.spin-row .primary:after,.secondary-spin:after{display:none}
.spin-row .primary:before,.secondary-spin:before{content:none;display:none}

#advanced .filter-heading+.chips{margin-top:8px}#advanced .detail-grid{padding-top:14px;gap:12px}
#advanced .more-conditions>summary .more-symbol{transform:none;rotate:none;transition:none}
#advanced .more-conditions>summary .more-symbol:before{content:'＋'}#advanced .more-conditions[open]>summary .more-symbol:before{content:'−'}

/* Compact results and a green cooking action. */
#cards .card{grid-template-columns:minmax(0,1fr) 36px;column-gap:10px}
#cards .card h3{grid-column:1;grid-row:1;gap:6px;color:#344139}
#cards .card .kcal{grid-column:1;grid-row:2;padding-left:0;color:#546158}
#cards .card .dish-actions{grid-column:2;grid-row:1/4}
#cards .card details{grid-column:1;grid-row:3;padding-left:0}
#cards .card details[open]{grid-column:1/-1}
.notice-box,#advanced .hint,#notice{color:#58645d}
.spin-row .primary,.secondary-spin{background:#526b50;color:#fff;border-color:#526b50}
.spin-row .primary:hover,.secondary-spin:hover{background:#41583f;border-color:#41583f}
.spin-row .primary:before,.secondary-spin:before{content:none;display:none}

/* Plain checkbox labels: keep the full label easy to tap. */
#advanced .chips label,#advanced .checks label,#advanced .chips label:has(:checked),#advanced .checks label:has(:checked){border:0;border-radius:0;background:transparent;box-shadow:none;padding:8px 4px;min-height:44px;display:inline-flex;align-items:center;cursor:pointer}

/* Compact checkbox rows and group spacing. */
#advanced .chips,#advanced .checks{row-gap:2px;margin-top:14px;margin-bottom:6px}
#advanced .chips legend{margin-bottom:4px}
#advanced .chips label,#advanced .checks label,#advanced .chips label:has(:checked),#advanced .checks label:has(:checked){min-height:32px;padding:4px}

/* Shrink only the side dish, keeping its center and the soup size. */
.meal-tray .tray-dish[data-category="副菜"] .dish-picture{width:calc(100% - 6px);height:calc(100% - 6px);margin:3px auto}

/* Rules align with the total; the rice-free subtotal sits below. */
#result .result-heading{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px;row-gap:2px}
#result .result-heading:before{grid-column:1;grid-row:1}#result .result-heading:after{grid-column:3;grid-row:1}
#result .result-heading:before,#result .result-heading:after{align-self:center;background:var(--control-border);width:100%;height:1px}
#result .result-heading #sum{grid-column:2;grid-row:1;margin:0;line-height:1.5;text-align:center}
#result .result-heading .dishes-only{grid-column:1/-1;grid-row:2;margin:0;text-align:center;font-size:11px;line-height:1.6;color:#58645d}

/* Ingredients first, followed by quiet hashtag labels. */
#cards .card details .dish-ingredients{font-size:var(--dish-meta-size);line-height:1.6;color:#546158;margin:6px 0}
#cards .card details .tags{min-height:0;margin-top:6px;gap:4px 10px}
#cards .card details .tag{background:none;border:0;border-radius:0;padding:0;font-size:var(--dish-meta-size);line-height:1.6;color:#58645d}

/* Match library details to the meal results. */
.menu details .dish-ingredients{font-size:var(--dish-meta-size);line-height:1.6;color:#546158;margin:6px 0}
.menu .menu-tags{margin-top:6px;gap:4px 10px}
.menu .menu-tags span{background:none;border:0;border-radius:0;padding:0;font-size:var(--dish-meta-size);line-height:1.6;color:#58645d}

.meal-tray:not(.is-served) .tray-dish,.meal-tray:not(.is-served) .tray-rice{display:none}
.meal-steam{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.meal-steam[hidden],.spinning .meal-steam{display:none}
.meal-steam i{position:absolute;left:32%;top:35%;width:10%;height:31%;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);filter:blur(4px);opacity:0;transform-origin:bottom;animation:meal-steam-rise 5.5s linear infinite}
.meal-steam i:nth-child(2){left:54%;top:24%;height:32%;animation-delay:1.8s}
.meal-steam i:nth-child(3){left:70%;top:47%;height:24%;animation-delay:3.6s}
@keyframes meal-steam-rise{0%{opacity:0;transform:translateY(0)}30%{opacity:.28}65%{opacity:.18}100%{opacity:0;transform:translateY(-32px)}}
@media(prefers-reduced-motion:reduce){.meal-steam{display:none}}

.menu details .dish-equipment{font-size:var(--dish-meta-size);line-height:1.6;color:#546158;margin:6px 0}
.menu a.menu-action{display:inline-flex;align-items:center;justify-content:center;min-height:28px;font-size:12px;line-height:1.6;border:1px solid var(--control-border);border-radius:999px;padding:2px 10px;text-decoration:none;margin:4px 0 0;background:transparent;color:inherit}
.menu a.menu-action:before,.menu a.menu-action:after{content:none}

/* Readable supporting text and comfortably sized result controls. */
:root{--dish-meta-size:13px;--note-font-size:12px}
.condition-summary{display:flex;flex-wrap:wrap;gap:3px 12px;margin:8px 0 4px;font-size:12px;line-height:1.65;color:#435247;overflow-wrap:anywhere}
.condition-summary[hidden]{display:none}
.condition-summary span:not(:last-child)::after{content:' /';margin-left:10px;color:#737e74}
#cards .card .kcal,#cards .card details summary,#cards .card details p,#cards .card details .tag,.menu .meta,.menu details p,.menu .menu-tags span{color:#435247}
#cards .card details summary,.menu summary{font-size:13px}
.notice-box,#advanced .hint,#notice,.notes summary,#result .result-heading .dishes-only{color:#4b594f}
#result .result-heading .dishes-only{font-size:12px}
#cards .card{grid-template-columns:minmax(0,1fr) 44px}
#cards .card h3 .keep-dish{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:14px;margin:-6px 0;position:relative}
#cards .card h3 .keep-dish:before{width:15px;height:15px}
#cards .card .dish-actions .recipe{width:44px;height:44px;min-height:44px;padding:12px}
#cards .keep-dish:focus-visible,#cards .recipe:focus-visible{outline:2px solid #435b42;outline-offset:2px}

#cards .card h3 .keep-dish{margin:-10px 0}
body:has(#condition-summary:not([hidden])) .meal-tray{max-width:min(100%,clamp(180px,calc(100svh - 604px),256px))}

/* Center the condition-submit button independently of inline controls. */
#advanced .secondary-spin{display:flex;width:fit-content;max-width:100%;min-width:min(290px,100%);margin:20px auto 0;box-sizing:border-box;justify-content:center}

#menu-filters .search{position:relative}.menu-suggestions{position:absolute;top:100%;left:0;right:0;z-index:20;max-height:320px;overflow-y:auto;background:#fffdf9;border:1px solid var(--control-border);border-radius:12px;box-shadow:0 6px 18px #33443318;padding:4px}.menu-suggestions[hidden]{display:none}.menu-suggestions [role=option]{padding:10px 12px;min-height:44px;box-sizing:border-box;font-size:14px;line-height:1.6;color:#354638;cursor:pointer;border-radius:8px}.menu-suggestions [role=option]:hover,.menu-suggestions [aria-selected=true]{background:#edf1e9}