Release Nouri 1.3.2 with mobile selection improvements

nouri/static/css/styles.css

@@ -659,6 +659,10 @@ h3 {
     margin: 0 0 1rem;
 }
 
+.selected-component-stack.is-live {
+    margin: 0.8rem 0 1rem;
+}
+
 .selected-components-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
@@ -677,6 +681,10 @@ h3 {
     align-content: start;
 }
 
+.selected-component-card.is-needed {
+    border-color: color-mix(in srgb, var(--accent) 42%, var(--line) 58%);
+}
+
 .selected-component-main {
     display: grid;
     gap: 0.15rem;
@@ -692,6 +700,103 @@ h3 {
     line-height: 1.25;
 }
 
+.selected-component-main small {
+    color: var(--muted);
+    font-size: 0.82rem;
+    line-height: 1.25;
+}
+
+.meal-component-search {
+    display: grid;
+    gap: 0.75rem;
+}
+
+.meal-component-results {
+    display: grid;
+    gap: 0.75rem;
+}
+
+.meal-component-option-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+    gap: 0.75rem;
+}
+
+.meal-component-option {
+    position: relative;
+    display: block;
+}
+
+.meal-component-option input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.meal-component-option-card {
+    min-height: 92px;
+    display: grid;
+    grid-template-columns: 58px minmax(0, 1fr);
+    gap: 0.85rem;
+    align-items: center;
+    padding: 0.85rem 0.95rem;
+    border-radius: 22px;
+    border: 1px solid var(--line);
+    background: color-mix(in srgb, var(--surface-strong) 86%, var(--accent-soft) 14%);
+    color: var(--text);
+    cursor: pointer;
+    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.meal-component-option-card:hover {
+    transform: translateY(-1px);
+    border-color: color-mix(in srgb, var(--accent) 38%, var(--line) 62%);
+}
+
+.meal-component-option input:focus-visible + .meal-component-option-card {
+    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent 55%);
+    outline-offset: 3px;
+}
+
+.meal-component-option input:checked + .meal-component-option-card {
+    border-color: color-mix(in srgb, var(--accent) 58%, var(--line) 42%);
+    background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface-strong) 72%);
+    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 13%, transparent 87%);
+}
+
+.meal-component-option-visual {
+    width: 58px;
+    height: 58px;
+    border-radius: 18px;
+    overflow: hidden;
+    display: grid;
+    place-items: center;
+    background: color-mix(in srgb, var(--surface-soft) 84%, transparent 16%);
+    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent 20%);
+}
+
+.meal-component-option-visual img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.meal-component-option-visual .ui-icon {
+    width: 1.2rem;
+    height: 1.2rem;
+}
+
+.meal-component-option-copy {
+    min-width: 0;
+    display: grid;
+    gap: 0.22rem;
+}
+
+.meal-component-option-copy strong {
+    overflow-wrap: anywhere;
+    line-height: 1.18;
+}
+
 .selected-component-visual {
     display: flex;
     align-items: center;
@@ -765,6 +870,42 @@ h3 {
     border-color: color-mix(in srgb, rgba(243, 177, 125, 0.36) 48%, var(--line) 52%);
 }
 
+[data-theme="dark"] .selected-component-card.is-needed,
+[data-theme="dark"] .meal-component-option input:checked + .meal-component-option-card {
+    border-color: color-mix(in srgb, rgba(243, 177, 125, 0.54) 52%, var(--line) 48%);
+}
+
+[data-theme="dark"] .meal-component-option-card {
+    background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--surface-soft) 70%, #4a3e3a 30%),
+        color-mix(in srgb, var(--surface) 92%, #241f1d 8%)
+    );
+    border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.16) 42%);
+    color: var(--text);
+}
+
+[data-theme="dark"] .meal-component-option input:checked + .meal-component-option-card {
+    background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--surface-soft) 58%, #5d4a40 42%),
+        color-mix(in srgb, var(--surface) 88%, #302824 12%)
+    );
+}
+
+[data-theme="dark"] .meal-component-option-visual {
+    background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--surface-soft) 60%, #453a37 40%),
+        color-mix(in srgb, var(--surface) 90%, #2b2523 10%)
+    );
+    border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.18) 42%);
+}
+
+[data-theme="dark"] .food-status-badge.is-needed {
+    color: color-mix(in srgb, var(--accent-strong) 82%, white 18%);
+}
+
 [data-theme="dark"] .selected-component-fallback {
     background:
         linear-gradient(
@@ -1226,6 +1367,10 @@ h3 {
     align-items: end;
 }
 
+.shopping-add-form .shopping-add-results {
+    grid-column: 1 / -1;
+}
+
 .shopping-add-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
@@ -1256,6 +1401,12 @@ h3 {
     border-color: color-mix(in srgb, var(--line) 72%, var(--accent) 28%);
 }
 
+.shopping-add-card[hidden],
+.meal-component-option[hidden],
+.selected-component-card[data-selected-preview-card][hidden] {
+    display: none;
+}
+
 .shopping-add-card-visual,
 .shopping-add-card-fallback,
 .shopping-entry-visual,
@@ -1301,6 +1452,23 @@ h3 {
     font-size: 0.92rem;
 }
 
+.food-status-badge {
+    width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.28rem;
+    color: var(--muted);
+}
+
+.food-status-badge .ui-icon {
+    width: 0.86rem;
+    height: 0.86rem;
+}
+
+.food-status-badge.is-needed {
+    color: color-mix(in srgb, var(--accent-strong) 72%, var(--text) 28%);
+}
+
 .shopping-entry-card {
     position: relative;
     display: grid;
@@ -2904,6 +3072,11 @@ legend {
     mask-image: url("../icons/fa/cart-shopping.svg");
 }
 
+.icon-shopping-cart {
+    -webkit-mask-image: url("../icons/fa/shopping-cart.svg");
+    mask-image: url("../icons/fa/shopping-cart.svg");
+}
+
 .icon-calendar {
     -webkit-mask-image: url("../icons/fa/calendar.svg");
     mask-image: url("../icons/fa/calendar.svg");