/* Page 4: the plant library, scoped to preserve the accepted shared pages. */
body[data-page="plants"] .plant-library-hero { padding: 32px 0 36px; }
body[data-page="plants"] .plant-library-hero .page-hero-grid { grid-template-columns: 1.3fr .7fr; gap: 64px; align-items: center; }
body[data-page="plants"] .plant-library-hero h1 { font-size: clamp(2.3rem,4.5vw,4rem); max-width: 690px; line-height: 1.08; margin: 18px 0; }
body[data-page="plants"] .plant-library-hero p { max-width: 640px; font-size: 1rem; line-height: 1.7; }
.plant-library-total { display: inline-block; margin-top: 10px; font-size: .82rem; color: #526b62; }
.plant-library-feature { display: grid; justify-items: center; align-content: center; min-height: 290px; border-radius: 50% 50% 18px 18px; background: radial-gradient(ellipse at 50% 65%,#deeee3 0%,#f7faf9 70%); }
.plant-library-feature img { width: 260px; height: 260px; max-width: 100%; object-fit: contain; }
.plant-library-feature span { font-size: .85rem; color: #345b46; padding: 10px; }
body[data-page="plants"] .plant-library-section { padding-top: 36px; }
.plant-library-toolbar { display: grid; grid-template-columns: minmax(240px,1fr) minmax(250px,1fr); align-items: end; gap: 24px; }
.plant-library-toolbar h2 { font-size: clamp(1.5rem,2.5vw,2rem); margin: 8px 0 0; }
.plant-library-search { width: 100%; margin: 0; }
.plant-library-search .search-field { display: flex; width: 100%; }
.plant-library-search input { min-width: 0; width: 100%; font-size: .9rem; min-height: 46px; }
.plant-library-controls { display: grid; grid-template-columns: repeat(2,minmax(0,190px)); gap: 12px; margin: 24px 0 16px; }
.plant-library-controls .btn,.plant-library-controls .smooth-select-trigger { width: 100%; height: 46px; min-height: 46px; padding: 6px 14px; font-size: .85rem; }
.plant-library-controls .smooth-select { min-width: 0; width: 100%; }
.plant-library-controls .smooth-select-menu { right: 0; left: auto; }
.plant-library-controls .smooth-select-value { white-space: normal; text-overflow: clip; }
.plant-filter-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; background: #f0f6f2; }
.plant-filter-fields[hidden] { display: none; }
.plant-filter-fields label { min-width: 0; display: grid; gap: 8px; font-size: .85rem; color: #3e6054; }
.plant-filter-fields .smooth-select-trigger { min-height: 46px; font-size: .85rem; }
.plant-filter-fields .smooth-select-value { white-space: normal; text-overflow: clip; }
.plant-filter-fields p { grid-column: 1 / -1; margin: 0; color: #536e63; font-size: .82rem; line-height: 1.6; }
.plant-library-result-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; margin-bottom: 14px; color: #526d63; font-size: .85rem; }
.plant-library-reset { padding: 8px 0 8px 16px; min-height: 44px; background: none; border: 0; color: #275c48; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
body[data-page="plants"] [data-all-plants] { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; overflow: visible; scroll-snap-type: none; padding: 0; }
body[data-page="plants"] .plant-library-card { min-width: 0; width: auto; display: flex; flex-direction: column; border-radius: 18px; background: #fff; }
body[data-page="plants"] .plant-library-card .card-image { flex-shrink: 0; height: 220px; background: #eef4ee; }
body[data-page="plants"] .plant-library-card .save-btn { top: 12px; right: 12px; width: 44px; height: 44px; }
body[data-page="plants"] .plant-library-card .card-body { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 20px; }
.plant-setting { display: block; margin-bottom: 12px; color: #497453; font-size: .78rem; line-height: 1.5; }
.plant-setting.is-above { color: #845618; }
.plant-name { display: block; min-height: 62px; }
body[data-page="plants"] .plant-name h3 { font-size: 1.18rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
body[data-page="plants"] .plant-name .latin { display: block; font-size: .82rem; line-height: 1.55; white-space: normal; overflow: visible; margin-top: 5px; overflow-wrap: anywhere; }
body[data-page="plants"] .plant-library-card .spec-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
body[data-page="plants"] .plant-library-card .spec-row > div { min-width: 0; }
body[data-page="plants"] .plant-library-card .spec-row small { font-size: .75rem; }
body[data-page="plants"] .plant-library-card .spec-row strong { font-family: inherit; font-weight: 500; font-size: .85rem; line-height: 1.55; white-space: normal; overflow: visible; overflow-wrap: anywhere; display: block; min-height: 0; max-height: none; -webkit-line-clamp: unset; }
body[data-page="plants"] .plant-library-card .plant-submersion { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line); }
body[data-page="plants"] .plant-library-card .card-action-row { margin-top: auto; padding-top: 6px; }
body[data-page="plants"] .plant-library-card .card-tank-action { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; height: 44px; padding: 6px 8px; font-size: .82rem; line-height: 1.3; }
body[data-page="plants"] .plant-library-card .card-tank-action svg { width: 16px; height: 16px; flex-shrink: 0; }
.plant-library-more { display: flex; justify-content: center; padding: 32px 0 0; }
.plant-library-more .btn { min-width: 190px; min-height: 46px; }
.plant-empty { grid-column: 1 / -1; padding: 48px 24px; background: #eef4ee; border-radius: 18px; text-align: center; }
.plant-empty p { margin: 12px auto 22px; max-width: 540px; line-height: 1.7; overflow-wrap: anywhere; }
.plant-library-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; border-top: 1px solid var(--line); margin-top: 48px; padding-top: 32px; }
.plant-library-notes h3 { font-size: 1.15rem; }
.plant-library-notes p { color: var(--muted); font-size: .9rem; line-height: 1.7; margin: 12px 0; }
.plant-library-notes a { display: inline-flex; align-items: center; min-height: 44px; color: #285e4d; font-size: .88rem; text-decoration: underline; text-underline-offset: 4px; }
body[data-page="plants"] :is(.plant-name,.plant-library-feature,.plant-library-notes a,.plant-library-reset):focus-visible { outline: 3px solid var(--aqua); outline-offset: 4px; border-radius: 6px; }
[data-plant-route-note]:not([hidden]) { padding: 16px; border-left: 3px solid #ac7c3c; background: #f8f0e3; margin: 16px 0; }
@media (max-width:1159px) {
  body[data-page="plants"] [data-all-plants] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body[data-page="plants"] .plant-library-hero .page-hero-grid { gap: 24px; }
}
@media (max-width:679px) {
  body[data-page="plants"] .filter-bar { position: static; }
  body[data-page="plants"] .plant-library-hero { padding: 24px 0; }
  body[data-page="plants"] .plant-library-hero .page-hero-grid { grid-template-columns: 1fr; }
  body[data-page="plants"] .plant-library-hero h1 { font-size: 2.35rem; max-width: 350px; }
  body[data-page="plants"] .plant-library-hero p { font-size: .9rem; }
  .plant-library-feature { display: none; }
  body[data-page="plants"] .plant-library-section { padding-top: 24px; }
  .plant-library-toolbar { grid-template-columns: 1fr; gap: 18px; }
  .plant-library-controls { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 16px; }
  .plant-filter-fields { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .plant-filter-fields .smooth-select-menu { right: 0; left: auto; }
  body[data-page="plants"] [data-all-plants] { gap: 14px; }
  body[data-page="plants"] .plant-library-card .card-image { height: 160px; }
  body[data-page="plants"] .plant-library-card .save-btn { top: 7px; right: 7px; }
  body[data-page="plants"] .plant-library-card .card-body { padding: 14px 12px; }
  body[data-page="plants"] .plant-name h3 { font-size: 1rem; }
  body[data-page="plants"] .plant-name .latin { font-size: .75rem; }
  .plant-setting { font-size: .75rem; min-height: 36px; }
  body[data-page="plants"] .plant-library-card .spec-row { gap: 10px; }
  body[data-page="plants"] .plant-library-card .spec-row strong { font-size: .78rem; }
  body[data-page="plants"] .plant-library-card .card-tank-action { font-size: .75rem; }
  .plant-library-notes { grid-template-columns: 1fr; gap: 24px; }
}