/* Plants: terracotta pots on a windowsill. Each plant is a card with a water-level bar that drains between waterings;
   the ones that are due turn the bar terracotta. Pale leaf-green page, deep green for actions. */
:root { --page: #eef3ea; --card: #ffffff; --ink: #172014; --soft: #56634f; --line: #d4ddcd; --field: #e6ede1; --act: #2d6a2f; --on-act: #ffffff; --stop: #b3261e; --water: #3d8fd1; --pot: #c0623b; --wide: 620px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #0f130d; --card: #182016; --ink: #e8f0e3; --soft: #a0ad98; --line: #2b3627; --field: #0f130d; --act: #8fd38f; --on-act: #0c240c; --stop: #ff8a80; --water: #7fbff0; --pot: #f08a5d; color-scheme: dark; }
}
.plants { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plants li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.plants h2 { font-size: 18px; overflow-wrap: anywhere; } .plants .soft { grid-column: 1; }
.plants .acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; }
.level { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--field); overflow: hidden; }
.level i { display: block; height: 100%; background: var(--water); border-radius: 4px; }
.late .level i { background: var(--pot); } .late .soft b { color: var(--pot); }
form.card > button { justify-self: start; }