/* Leftovers and storage (task 823.25): /leftovers and its guides. Colors come from site.css (light and dark). Loaded on
   those pages only. Classes start with "lo-". */
.lo-finder { max-width: 640px; margin: 8px 0 20px; }
.lo-rules { margin: 0; padding-left: 1.2em; max-width: 76ch; }
.lo-rules li { margin-bottom: 8px; }
.lo-quick { max-width: 900px; margin: 0 0 20px; }
.lo-quick h2 { margin-bottom: .4em; }
.lo-found { padding-top: 0; }
.lo-useups { display: flex; flex-wrap: wrap; gap: 8px; }
.lo-results { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.lo-result h3 { font-size: 1.15rem; margin: 0 0 .2em; }
.lo-result p { margin: 0 0 8px; }
.lo-chips { margin: 4px 0 8px; }
.lo-fresh { background: var(--herb-soft); }

/* guide cards */
.lo-cards { list-style: none; padding: 0; margin: 8px 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lo-card { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--herb); border-radius: 14px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.lo-card:hover { border-color: var(--accent); color: var(--ink); }
.lo-card-title { font: 700 1.1rem/1.25 var(--serif); }

/* tables and groups */
.lo-table { max-width: 900px; }
.lo-table td { white-space: nowrap; }
.lo-table tbody th { white-space: normal; }
.lo-group { max-width: 900px; margin: 0 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; }
.lo-group > summary { cursor: pointer; padding: 8px 0; min-height: 24px; }
.lo-group-name { font-weight: 700; }
.lo-group[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.lo-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 4px 0 20px; }
.lo-cols h2 { font-size: 1.25rem; margin-bottom: .4em; }
.lo-freeze-list, .lo-uses { margin: 0 0 8px; padding-left: 1.1em; }
.lo-freeze-list li, .lo-uses li { margin-bottom: 8px; }
.lo-how { display: block; color: var(--muted); }
.lo-inline { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lo-keep { max-width: 76ch; margin: 0 0 18px; }
.lo-sources ul { padding-left: 1.2em; }
.lo-sources li { margin-bottom: 6px; }
@media (max-width: 900px) { .lo-cols { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .lo-results { grid-template-columns: 1fr; } .lo-table td { white-space: normal; } }