/* The calm redesign (Oct 16, 2026): Plant Finder (inventory/plants.js, plant-list.js, plant-size.js). Loaded after styles.css, so a rule here wins over the same rule there.
   Docs/Hub design standard.md has the rules (Motion; Calm and focus). Colours only from the tokens in styles.css. */

/* The hero: the search box, big at the top (Brandon OK'd it, Oct 16, 2026). In Search it finds a plant; in Browse everything
   it narrows the list. */
.pl-hero { margin-top: 4px; }
.pl-hero .field.search { position: relative; }
[data-screen="plants"] .pl-hero .search .ic { top: 50%; left: 20px; width: 24px; height: 24px; transform: translateY(-50%); color: var(--text-2); }
[data-screen="plants"] .pl-hero .field.search input[type="search"] { min-height: 64px; height: 64px; padding: 0 18px 0 56px !important; border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill); background: var(--surface); color: var(--text); font: 500 1.25rem/1.2 var(--rt-body); }
[data-screen="plants"] .pl-hero .field.search input[type="search"]::placeholder { color: var(--text-3); font-weight: 400; }
[data-screen="plants"] .pl-hero .field.search input[type="search"]:focus { border-color: var(--ink-strong); }
body.big-text [data-screen="plants"] .pl-hero .field.search input[type="search"] { min-height: 72px; height: 72px; font-size: 1.3rem; }
@media (min-width: 900px) { .pl-hero { margin-top: 8px; } }

/* While the answer comes: soft shapes where it will be (no title lines: the screen has its own). */
.pl-wait .skel > .sk { display: none; }
.pl-wait .skel { gap: 0; }
/* The last answer stays a little paler while a new search runs. */
.pl-stale { opacity: .55; }

/* "Lists as of 9/23 · 3 lists" opens to each list's date; a list that didn't update shows above it, always. */
.pl-lists > .more-s { min-height: 44px; font-size: .875rem; color: var(--text-3); }
.pl-dates { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--text-2); }
.pl-dates li { display: flex; justify-content: space-between; gap: 16px; }
.pl-dt { color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; }

/* Browse everything: the bar is only Filters and Sort now (the name box is the hero above). */
.pl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
@media (min-width: 720px) { .pl-bar { display: flex; } }
.pl-sort { flex: 0 1 auto; }
@media (min-width: 720px) { .pl-hero { max-width: 760px; } }