/* The meal color is a family of tints; nutritional status colors stay independent. */
.meal-card{border-color:var(--meal-line);background:var(--meal-alt)}
.meal-header,.meal-card.collapsed .meal-header{background:var(--meal-heading);border-color:var(--meal-line)}
.meal-identity{display:flex;align-items:center;flex:0 0 auto;border:0;border-radius:8px;padding:0;background:transparent;color:var(--meal-ink);cursor:pointer;touch-action:manipulation}
.meal-identity,.meal-identity *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.meal-header-toggle .meal-header-title{min-width:0!important;flex:1}
.meal-header-toggle .meal-header-title strong{color:var(--meal-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meal-identity .meal-icon,.meal-custom-preview .meal-icon{color:var(--meal-accent);background:var(--meal-icon-bg);flex:none}
.meal-identity:hover{background:var(--meal-icon-bg)}
.meal-identity:focus-visible{outline:2px solid var(--meal-accent);outline-offset:4px}
.meal-header>.meal-header-toggle{width:auto;min-height:38px;align-self:stretch;flex:1;justify-content:flex-start}
.meal-card.collapsed .meal-header-title{flex:0 1 180px}
.meal-card.collapsed .meal-collapsed-totals{flex:1 1 auto;width:auto;max-width:420px}
.meal-card .meal-body{background:var(--meal-alt)}
.meal-card .composition-heading{background:var(--meal-soft);border-color:var(--meal-line);color:var(--meal-ink)}
.meal-card .food-row{background:var(--meal-alt)}
.meal-card .food-row-shell:nth-child(even) .food-row{background:var(--meal-soft)}
.meal-card .food-row-shell{border-color:var(--meal-line)}
.meal-card .quantity-field{background:var(--meal-heading)}
.meal-card .quantity-step{color:var(--meal-ink);background:var(--meal-icon-bg);border-color:var(--meal-line)}
.meal-card .quantity-step:hover{background:var(--meal-line);border-color:var(--meal-accent)}
.meal-card .quantity-step:active{background:var(--meal-ink);color:white}
.meal-card .quantity-field input{border-color:var(--meal-line)}
.meal-card .meal-add-element{background:var(--meal-soft);border-color:var(--meal-line);color:var(--meal-ink)}
.meal-card .meal-add-element:hover{background:var(--meal-heading)}
.meal-card .food-row-shell.row-selected .food-row{background:var(--meal-heading);box-shadow:inset 3px 0 var(--meal-accent)}
.meal-card .food-row-shell:focus-within .food-row{box-shadow:inset 2px 0 var(--meal-accent)}
@media(hover:hover){.meal-card .food-row-shell:hover .food-row{background:var(--meal-heading)}}
.meal-dock{background:var(--meal-soft);border-color:var(--meal-line)}
.meal-dock .dock-actual{background:var(--meal-heading);border-color:var(--meal-line);color:var(--meal-ink)}
.meal-dock .dock-labels,.meal-dock .meal-dock-heading{color:var(--meal-ink)}
.meal-dock .dock-reference{background:var(--meal-alt);border-color:var(--meal-line);color:var(--meal-ink)}
.meal-dock .dock-reference [data-dock-reference]{color:inherit}
.planner-table tr[data-grid-meal]>td{background:var(--meal-alt);border-bottom-color:var(--meal-line)}
.planner-table tr[data-grid-meal]>td:first-child{background:var(--meal-soft);border-right-color:var(--meal-line)}
.grid-meal-name .grid-meal-edit{max-width:175px;flex:1;min-height:36px;font-size:12px}
.grid-meal-edit .meal-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center}
.grid-meal-edit .meal-icon svg{width:19px;height:19px}
.grid-meal-edit strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.meal-custom-preview{display:flex;align-items:center;gap:10px;padding:13px;border-radius:12px;border:1px solid var(--meal-line);background:var(--meal-heading);margin:0 0 18px;color:var(--meal-ink)}
.meal-custom-preview>strong{flex:1;min-width:0;overflow-wrap:anywhere;font-size:15px}
.meal-preview-shades{display:flex;gap:3px;flex:none}
.meal-preview-shades i{width:14px;height:32px;border-radius:5px;background:var(--meal-color)}
.meal-preview-shades i:nth-child(2){background:var(--meal-line)}
.meal-preview-shades i:nth-child(3){background:var(--meal-alt)}
.meal-appearance-field{border:0;padding:0;margin:20px 0 0;min-width:0}
.meal-appearance-field legend{padding:0;margin:0 0 9px;font-size:12px;font-weight:650}
.meal-icon-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.meal-icon-options button{display:grid;place-items:center;min-height:46px;border:1px solid var(--brand-border);border-radius:10px;background:#fffefa;color:#657348;cursor:pointer}
.meal-icon-options button svg{width:25px;height:25px}
.meal-icon-options button[aria-pressed=true]{background:var(--brand-olive-soft);border-color:var(--brand-leaf);box-shadow:inset 0 0 0 1px var(--brand-leaf);color:#3e5220}
.meal-color-options{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.meal-color-options>button{position:relative;width:36px;height:36px;display:grid;place-items:center;border:2px solid transparent;border-radius:50%;padding:3px;background:transparent;cursor:pointer}
.meal-color-options>button>span{position:absolute;inset:3px;border-radius:50%;background:var(--swatch)}
.meal-color-options>button>svg{position:relative;width:19px;height:19px;color:white;filter:drop-shadow(0 1px 2px #0009);opacity:0}
.meal-color-options>button[aria-pressed=true]{border-color:var(--ink)}
.meal-color-options>button[aria-pressed=true]>svg{opacity:1}
.meal-custom-color{display:flex;align-items:center;gap:5px;margin:0;font-size:10px;cursor:pointer}
.meal-custom-color input{width:35px;height:35px;padding:2px;cursor:pointer}
#meal-appearance-form .modal-actions{margin-top:22px}
@media(max-width:600px){
 .meal-header,.meal-card.collapsed .meal-header{gap:5px}
 .meal-card.collapsed .meal-header-title{flex:0 1 30%}
 .meal-card.collapsed .meal-identity .meal-icon{width:25px;height:29px}
 .meal-card.collapsed .meal-identity .meal-icon svg{width:18px;height:18px}
 .meal-card.collapsed .meal-collapsed-totals{flex:1;width:auto;min-width:0;gap:4px}
 .meal-card.collapsed .meal-header-toggle{min-width:0;flex:1}
 .meal-card.collapsed .meal-header-title strong{font-size:11px}
}
@media(max-width:350px){.meal-card.collapsed .meal-header-title{flex-basis:27%}.meal-card.collapsed .meal-header-title strong{font-size:10px}.meal-card.collapsed .meal-identity .meal-icon{width:21px}.meal-card.collapsed .meal-collapsed-totals{gap:2px}}

/* White meal bodies and a colored edge separate cards from their surroundings. */
.meals{gap:24px}
.meal-card{border:1px solid var(--meal-line);border-left:4px solid var(--meal-accent);background:#fff;box-shadow:0 4px 15px #30351c0b}
.meal-card .meal-header,.meal-card.collapsed .meal-header{border-bottom:1px solid var(--meal-line)}
.meal-card .meal-body{background:#fff}
.meal-card .composition-heading{background:#f0f2ed;border-color:#dce1d5;color:#566047}
.meal-card .food-row,.meal-card .food-row-shell:nth-child(even) .food-row{background:#fff}
.meal-card .food-row-shell:nth-child(4n) .food-row{background:var(--meal-alt)}
.meal-card .food-row-shell{border-color:#e7eadf}
.meal-card .meal-add-element{background:#fafbf7;border-top:1px dashed var(--meal-line);color:var(--meal-ink)}
.meal-card .food-row-shell.row-selected .food-row{background:var(--meal-heading)}
@media(hover:hover){.meal-card .food-row-shell:hover .food-row{background:var(--meal-soft)}}

/* A framed floating sheet, with a dark header distinct from the food table. */
.meal-dock{isolation:isolate;background:transparent;border:0;box-shadow:none;padding-top:7px;padding-bottom:7px}
.meal-dock::before{content:'';position:absolute;inset:0 7px;z-index:-1;pointer-events:none;border:1px solid var(--meal-line);border-top:3px solid var(--meal-accent);border-radius:12px 12px 0 0;background:#fff;box-shadow:0 -6px 24px #29301d2b,0 0 0 3px #ffffffb8}
.meal-dock .dock-labels{background:var(--meal-ink);border-radius:6px 6px 0 0;color:#f6f8ee;min-height:26px;padding:4px 0}
.meal-dock .dock-meal-tools .meal-dock-heading{display:flex;justify-content:flex-start;align-items:center;gap:5px;color:#fff;min-width:0;font-weight:800}
.meal-dock-heading>svg{flex:none;width:15px;height:15px}
.meal-dock-heading>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meal-dock .dock-actual{background:#fff;color:var(--meal-ink);border-color:#e0e5d9;min-height:24px}
.meal-dock .dock-reference{background:#f0f2ed;color:#657052;border-color:#e0e5d9}
.meal-dock .dock-reference [data-dock-reference]{color:inherit}

.local-recovery{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;margin:3px 0 18px;border:1px solid #e2cf9f;border-left:4px solid #b58c36;border-radius:10px;background:#fffaf0;color:#655425}
.local-recovery strong{display:block;font-size:12px}
.local-recovery p{margin:4px 0 0;font-size:11px;line-height:1.4}
.local-recovery .btn{flex:none;white-space:nowrap}
.recovery-list{display:grid;gap:14px;margin-top:16px}
.recovery-entry{padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff}
.recovery-entry>strong{display:block;font-size:14px}
.recovery-entry>small{display:block;margin-top:4px;color:var(--muted);font-size:10px}
.recovery-comparison{display:grid;gap:7px;margin-top:15px}
.recovery-comparison>strong{font-size:11px;color:var(--muted)}
.recovery-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-bottom:6px}
.recovery-metrics>span{display:grid;gap:4px;text-align:right;font-variant-numeric:tabular-nums}
.recovery-metrics small{font-size:8px;color:var(--muted)}
.recovery-metrics b{font-size:12px}
.recovery-entry .modal-actions{gap:7px;margin-top:12px}
@media(max-width:600px){.meals{gap:21px}.meal-dock::before{left:5px;right:5px}.local-recovery{gap:7px;padding:9px}.local-recovery p{font-size:10px}.local-recovery .btn{padding:7px;font-size:10px}.meal-dock-heading>svg{width:12px;height:12px}}