:root {
  --bg: #f7f5ef;
  --card: #ffffff;
  --text: #2a3a1e;
  --muted: #6b7a5a;
  --primary: #5c8a3a;
  --primary-dark: #3f6522;
  --danger: #b5442f;
  --border: #dcd8ca;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

header {
  background: var(--primary);
  color: white;
  padding: 0.9rem 1.2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

header nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
}

header a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

header .logo {
  font-size: 1.25rem;
  margin-right: auto;
  font-weight: 600;
}

main {
  max-width: 820px;
  margin: 0 auto;
  padding: 1.2rem 1rem 3rem;
}

h1 { margin-top: 0.5rem; color: var(--primary-dark); }
h2 { margin: 0; }

.actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0 1.2rem;
  flex-wrap: wrap;
}

.summary {
  color: var(--muted);
  font-size: 0.95rem;
}

.btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  background: var(--primary);
  color: white;
  text-decoration: none;
  border: 1px solid var(--primary);
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}

.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn.primary { background: var(--primary); }
.btn.ghost { background: transparent; color: var(--primary); }
.btn.ghost:hover { background: var(--primary); color: white; }
.btn.small { padding: 0.35rem 0.75rem; font-size: 0.9rem; }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: #8f3625; border-color: #8f3625; }

.zone {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.zone-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.zone-head h2 {
  font-size: 1.25rem;
  color: var(--primary-dark);
}

.zone-title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
}
.zone-title-link:hover { border-bottom-color: var(--primary); }

.zone-actions { display: flex; gap: 0.4rem; }

.zone-notes {
  color: var(--muted);
  margin: 0.5rem 0 0.8rem;
  white-space: pre-wrap;
  font-size: 0.95rem;
}

.plants { list-style: none; padding: 0; margin: 0.5rem 0 0; }

.plant {
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
}

.plant:first-child { border-top: none; padding-top: 0.3rem; }

.plant-main strong { font-size: 1.05rem; }

.variety, .quantity {
  color: var(--muted);
  font-weight: normal;
  margin-left: 0.3rem;
}

.plant-notes {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 0.2rem;
  white-space: pre-wrap;
}

.plant-actions {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

.link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}

.link.danger { color: var(--danger); }
.inline { display: inline; }

form label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 500;
}

form input[type="text"], form textarea, form select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: white;
  color: var(--text);
}

form textarea { resize: vertical; }

.form-row {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.form-row > label {
  flex: 0 0 auto;
  min-width: 160px;
  margin-bottom: 0;
}
.form-row > label.grow { flex: 1 1 200px; }
.form-row > label input[type="text"],
.form-row > label input[type="number"],
.form-row > label select {
  width: 100%;
}

/* Catalog hub */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}
.catalog-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.1s;
}
.catalog-card:hover { border-color: var(--primary); }
.catalog-card h2 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 1.1rem;
}
.catalog-count {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0.4rem 0 0.5rem;
}
.catalog-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Generic entity card list (used by species / varieties / plantings) */
.entity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.6rem;
}
.entity-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.entity-card-link {
  display: block;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--text);
}
.entity-card-link:hover { background: var(--bg); }
.entity-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.entity-card-header strong { color: var(--primary-dark); font-size: 1.02rem; }
.entity-card-sub {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}
.species-common {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.95rem;
}
.planting-meta {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.planting-meta a {
  color: inherit;
  text-decoration: underline;
}


/* Chip variants */
.chip-warn {
  background: #f4e4c1;
  color: #7a5e1a;
  border-color: #e8d09c;
}

/* Missing-data filters on inventory */
.missing-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.8rem 0 1.2rem;
}
.missing-label {
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.chip-link {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  font-size: 0.85rem;
}
.chip-link:hover { border-color: var(--primary); color: var(--primary-dark); }
.chip-link.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Tree toolbar (search + expand/collapse) */
.tree-toolbar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
}
.tree-search-wrap {
  flex: 1 1 240px;
  position: relative;
  display: flex;
  align-items: center;
}
.tree-search-wrap input[type=search] {
  width: 100%;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: white;
  color: var(--text);
}
.tree-search-wrap input[type=search]:focus {
  outline: none;
  border-color: var(--primary);
}
#tree-search-clear {
  position: absolute;
  right: 0.6rem;
  font-size: 0.85rem;
}

/* Area picker (searchable combobox) */
.area-picker {
  position: relative;
  display: block;
  width: 100%;
}
.area-picker-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.area-picker-trigger:hover { border-color: var(--primary); }
.area-picker-trigger:focus { outline: none; border-color: var(--primary); }
.area-picker-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.area-picker-arrow {
  color: var(--muted);
  font-size: 0.85rem;
}
.area-picker-popover {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  z-index: 20;
  max-height: 360px;
  display: flex;
  flex-direction: column;
}
.area-picker-popover[hidden] { display: none; }

/* Drill-down area picker */
.area-drilldown-picker {
  position: relative;
  display: block;
}
.area-drilldown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.area-drilldown-trigger:hover { border-color: #b3a76f; }
.area-drilldown-label { flex: 1; }
.area-drilldown-arrow { color: var(--muted); margin-left: 0.5rem; }
.area-drilldown-popover {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  z-index: 30;
  max-height: 420px;
  display: flex;
  flex-direction: column;
}
.area-drilldown-popover[hidden] { display: none; }
.area-drilldown-search {
  padding: 0.55rem 0.8rem;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  outline: none;
}
.area-drilldown-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: #fdfaec;
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 28px;
}
.area-drilldown-crumb {
  background: transparent;
  border: 0;
  padding: 2px 4px;
  border-radius: 4px;
  font: inherit;
  color: #4a5a33;
  cursor: pointer;
}
.area-drilldown-crumb:hover { background: #eee4bc; }
.area-drilldown-crumb.is-current { color: #2f4a27; font-weight: 600; cursor: default; }
.area-drilldown-sep { color: #b6ab84; }
.area-drilldown-crumb-hint { color: var(--muted); font-style: italic; }
.area-drilldown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.area-drilldown-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #f0e7c4;
}
.area-drilldown-row:last-child { border-bottom: 0; }
.area-drilldown-select {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 0.55rem 0.75rem;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}
.area-drilldown-select:hover { background: #fffaec; }
.area-drilldown-path {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.area-drilldown-name { color: var(--text); }
.area-drilldown-drill {
  background: transparent;
  border: 0;
  border-left: 1px solid #f0e7c4;
  padding: 0 0.8rem;
  font-size: 1.1rem;
  color: #6a7a4a;
  cursor: pointer;
}
.area-drilldown-drill:hover { background: #eee4bc; color: #2f4a27; }
.area-drilldown-empty {
  padding: 0.7rem 0.9rem;
  color: var(--muted);
  font-style: italic;
  font-size: 0.9rem;
}
.area-drilldown-none { color: var(--muted); font-style: italic; }
.area-drilldown-pick-here { background: #fffaec; border-bottom: 1px solid #e8dca8; }
.area-drilldown-pick-here .area-drilldown-select { font-weight: 600; color: #2f4a27; }
.area-picker-search {
  padding: 0.55rem 0.8rem;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
}
.area-picker-search:focus {
  outline: none;
  background: white;
}
.area-picker-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  max-height: 300px;
}
.area-picker-list li {
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 0.93rem;
  border-top: 1px solid var(--border);
  line-height: 1.3;
}
.area-picker-list li:first-child { border-top: none; }
.area-picker-list li:hover { background: var(--bg); color: var(--primary-dark); }

.form-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.danger-zone {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.empty {
  color: var(--muted);
  font-style: italic;
}

.empty.small { font-size: 0.9rem; margin: 0.3rem 0 0; }

.meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.meta a { color: var(--primary); }

/* Nav logout */
.nav-logout { margin: 0; padding: 0; }
.nav-link-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  padding: 0;
}
.nav-link-btn:hover { text-decoration: underline; }

/* Login page */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}
.login-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  margin: 1rem;
}
.login-box h1 {
  text-align: center;
  margin: 0 0 1.5rem;
  color: var(--primary-dark);
}
.login-box .error {
  background: #fde8e3;
  border: 1px solid #e8b5a8;
  color: var(--danger);
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.login-box label.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.login-box label.checkbox input {
  width: auto;
  margin: 0;
}
.btn.block {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem;
  font-size: 1.05rem;
}

/* Tree view */
.tree { margin-top: 0.5rem; }

.tree-node {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.4rem;
  overflow: hidden;
}

.tree-node summary {
  padding: 0.7rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  list-style: none;
}
.tree-node summary::-webkit-details-marker { display: none; }
.tree-node summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 0.8rem;
  width: 0.9rem;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.tree-node[open] > summary::before {
  transform: rotate(90deg);
}
.tree-node summary:hover {
  background: var(--bg);
}
.tree-node .node-name {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
}
.tree-node .node-name:hover { text-decoration: underline; }
.tree-node .node-meta {
  margin-left: auto;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.chip {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.tree-body {
  padding: 0 1rem 0.8rem 2rem;
}

.tree-plants {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0.6rem;
}
.tree-plants li {
  padding: 0.25rem 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tree-plants .plant-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.tree-plants .plant-link:hover { text-decoration: underline; }

/* Breadcrumbs */
.breadcrumbs {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.5rem 0 1rem;
}
.breadcrumbs a {
  color: var(--primary);
  text-decoration: none;
}
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .sep { margin: 0 0.3rem; color: var(--border); }
.breadcrumbs .current { color: var(--text); font-weight: 500; }

/* Zone detail page */
.zone-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.zone-header h1 {
  margin: 0;
  color: var(--primary-dark);
}
.zone-header-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.area-quick-actions {
  margin: 0.1rem 0 0.8rem;
}
.zone-detail-notes {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  white-space: pre-wrap;
  color: var(--text);
  margin: 0.8rem 0 1.4rem;
  font-size: 0.95rem;
}

.section { margin: 1.5rem 0; }
.section h2 {
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 0.7rem;
  font-weight: 600;
}

.child-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}
.child-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: border-color 0.1s, transform 0.05s;
}
.child-card:hover {
  border-color: var(--primary);
}
.child-card strong {
  color: var(--primary-dark);
  font-size: 1rem;
}
.child-card .meta {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.child-card .note-preview {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.3rem;
  line-height: 1.35;
}

.plant-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.plant-item {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--border);
}
.plant-item:first-child { border-top: none; }
.plant-item-link {
  display: block;
  flex: 1;
  padding: 0.8rem 1.1rem;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}
.plant-item-link:hover { background: var(--bg); }
.plant-row-actions {
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  margin: 0;
}
.plant-item-main strong { color: var(--primary-dark); font-size: 1.02rem; }
.plant-item-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

/* Status badges */
.status {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--border);
  color: var(--text);
  white-space: nowrap;
}
.status-not-purchased { background: #e4d4c2; color: #6b4d2a; }
.status-not-planted   { background: #ede0b0; color: #7a5e1a; }
.status-planted       { background: #d4e5b8; color: #3f6522; }
.status-growing       { background: #b8dd9c; color: #2e4f17; }
.status-flowering     { background: #f4c4d6; color: #983256; }
.status-fruiting      { background: #ffcf8e; color: #8a5200; }
.status-harvesting    { background: #ffb347; color: #6b3e00; }
.status-dormant       { background: #d0cec8; color: #555; }
.status-dead          { background: #4a3838; color: #e2b9b2; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  html, body { font-size: 15px; }
  header { padding: 0.7rem 0.8rem; }
  header nav { gap: 0.9rem; flex-wrap: wrap; }
  header .logo { font-size: 1.1rem; margin-right: 0.3rem; }
  main { padding: 0.9rem 0.7rem 3rem; }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.05rem; }

  /* Native date/number inputs in iOS zoom on focus unless font >= 16 */
  input[type=text], input[type=password], input[type=number],
  input[type=search], input[type=date], textarea, select {
    font-size: 16px;
  }

  .actions {
    gap: 0.5rem;
  }

  /* Filter bar stacks */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.7rem;
  }
  .filter-bar label { min-width: 0; }
  .filter-bar button, .filter-bar .btn { width: 100%; }

  /* Tree toolbar stacks */
  .tree-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .tree-search-wrap { flex: 1 1 auto; }
  .tree-toolbar .btn { flex: 1; }
  .tree-hint { display: none; }

  /* Tree node body shallower indent */
  ul.area-children:not(.area-tree) { padding-left: 1rem; }
  .tree-body { padding: 0 0.7rem 0.7rem 1.2rem; }
  .tree-node summary { padding: 0.7rem 0.8rem; }
  .tree-node .node-meta { flex-basis: 100%; margin-left: 0; margin-top: 0.3rem; }
  .tree-plants li { font-size: 0.9rem; }

  /* Drag handle bigger touch target */
  .drag-handle {
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
  }

  /* Child cards single column */
  .child-grid { grid-template-columns: 1fr; }

  /* Station cards single column */
  .station-list { grid-template-columns: 1fr; }

  /* Area detail header — actions stack */
  .zone-header {
    flex-direction: column;
    align-items: stretch;
  }
  .zone-header-actions {
    justify-content: flex-start;
  }
  .zone-header-actions .btn { flex: 1; text-align: center; }

  /* Form row stacks */
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .form-row > label { margin-bottom: 0.8rem; min-width: 0; }

  /* Inventory table — horizontal scroll instead of breaking layout */
  .inv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .inv-table { min-width: 620px; }

  /* Plant item — duplicate button stacks below */
  .plant-item {
    flex-direction: column;
    align-items: stretch;
  }
  .plant-row-actions {
    padding: 0 1.1rem 0.6rem;
    justify-content: flex-start;
  }

  /* Area picker popover takes more of the screen */
  .area-picker-popover {
    max-height: 60vh;
  }
  .area-picker-list { max-height: calc(60vh - 44px); }

  /* Login box */
  .login-box { padding: 1.5rem; margin: 0.5rem; }

  /* Comment form — date picker on its own line on mobile */
  .comment-form-row { flex-wrap: wrap; }
  .comment-form-row .btn { flex: 1; min-width: 140px; }
}

/* Large touch areas always */
.btn, .mini-btn, .nav-link-btn {
  min-height: 34px;
}

/* Tree as UL (drag-and-drop structure) */
ul.area-tree, ul.area-children {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.area-children:not(.area-tree) {
  padding-left: 1.5rem;
  margin-top: 0.4rem;
  min-height: 0.4rem;
}
.area-node { margin-bottom: 0.4rem; }
.area-node > details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--muted);
  cursor: grab;
  user-select: none;
  border-radius: 4px;
  font-size: 1rem;
  flex-shrink: 0;
}
.drag-handle:hover {
  background: var(--bg);
  color: var(--primary);
}
.drag-handle:active { cursor: grabbing; }

.area-ghost {
  opacity: 0.4;
  background: var(--primary);
}
.area-ghost > details { border-color: var(--primary); }
.area-chosen > details { border-color: var(--primary); }

.tree-hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin-left: auto;
}
.handle-example {
  display: inline-block;
  padding: 0 0.3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}

/* Stations */
.station-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.7rem;
}
.station-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.station-card-link {
  display: block;
  padding: 0.9rem 1.1rem;
  color: var(--text);
  text-decoration: none;
}
.station-card-link:hover { background: var(--bg); }
.station-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.station-card-header strong {
  color: var(--primary-dark);
  font-size: 1.05rem;
}
.station-card-schedule {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.station-inline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.station-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  color: var(--text);
}
.station-chip:hover { border-color: var(--primary); }
.station-chip strong { color: var(--primary-dark); }
.station-chip .station-schedule {
  color: var(--muted);
  font-size: 0.82rem;
}

.station-schedule-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.95rem;
  color: var(--primary-dark);
}

.station-area-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.station-area-list li a {
  display: block;
  padding: 0.5rem 0.9rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 500;
}
.station-area-list li a:hover { border-color: var(--primary); }

.area-checklist {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1.1rem;
  margin: 0 0 1rem;
  background: var(--card);
  max-height: 340px;
  overflow-y: auto;
}
.area-checklist legend {
  padding: 0 0.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 0.95rem;
}
.area-checklist label.checkbox {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem 0;
  font-weight: normal;
  margin: 0;
}
.area-checklist label.checkbox input {
  width: auto;
  margin: 0;
}

/* Hierarchical area picker (used on station form) */
.area-tree-picker {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1.1rem;
  margin: 0 0 1rem;
  background: var(--card);
  max-height: 480px;
  overflow-y: auto;
}
.area-tree-picker legend {
  padding: 0 0.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 0.95rem;
}
.area-tree-picker p.meta {
  margin: 0 0 0.6rem;
}
.area-tree-picker ul.area-tree {
  list-style: none;
  padding: 0;
  margin: 0;
}
.area-tree-picker ul.area-tree ul.area-tree {
  padding-left: 1.4rem;
  border-left: 2px solid var(--border);
  margin-left: 0.5rem;
}
.area-tree-picker .area-tree-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem 0;
  font-weight: normal;
  margin: 0;
}
.area-tree-picker .area-tree-row input {
  width: auto;
  margin: 0;
}
.area-tree-picker .area-tree-cb[data-has-children="1"] + .area-tree-name {
  font-weight: 600;
}
.area-tree-picker .area-tree-count {
  color: var(--muted);
}

/* Area featured image (form + detail) */
.featured-image-field {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1.1rem;
  margin: 0 0 1rem;
  background: var(--card);
}
.featured-image-field legend {
  padding: 0 0.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 0.95rem;
}
.featured-image-current {
  margin-bottom: 0.6rem;
}
.featured-image-current img {
  max-width: 240px;
  max-height: 180px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
  margin-bottom: 0.5rem;
}
.featured-image-current label.checkbox {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-weight: normal;
  margin: 0;
}
.featured-image-current label.checkbox input {
  width: auto;
  margin: 0;
}
.area-media-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
/* Generic featured-image block — used by area, planting, plant, station,
   species, variety, supply, year detail pages via the
   _featured_image.html macro. */
.featured-image-block {
  margin: 0 0 1rem;
  flex: 1 1 320px;
  max-width: 720px;
}
.featured-image-current {
  margin: 0;
}
.featured-image-current-label {
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  line-height: 0;
}
.featured-image-current-label img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  display: block;
  transition: filter 0.15s;
}
.featured-image-current-label:hover img,
.featured-image-current-label:focus-within img {
  filter: brightness(0.7);
}
.featured-image-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s;
  line-height: 1.3;
}
.featured-image-current-label:hover .featured-image-overlay,
.featured-image-current-label:focus-within .featured-image-overlay {
  opacity: 1;
}
.featured-image-current input[type=file] {
  display: none;
}

/* Placeholder tile when no featured image is set yet. */
.featured-image-add {
  margin: 0;
}
.featured-image-add-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 140px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: center;
  padding: 0 1rem;
}
.featured-image-add-label:hover,
.featured-image-add-label:focus-visible {
  border-color: var(--primary);
  color: var(--primary-dark, #4a7c2c);
  background: rgba(120, 170, 100, 0.06);
}
.featured-image-add input[type=file] {
  display: none;
}
.featured-image-add-icon {
  font-size: 2rem;
  line-height: 1;
  font-weight: 300;
}
.featured-image-add-text {
  font-size: 0.95rem;
}

/* Card thumbnail — small inline image on cards/tiles in list views. */
.card-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
  flex-shrink: 0;
}
.card-thumb.tile {
  width: 100%;
  height: 80px;
  border-radius: 6px;
  margin-bottom: 0.4rem;
}

/* When a card has a thumb, lay it out as [thumb | body] in a flex row.
   The .entity-card-body wrapper holds the existing card content (header,
   sub, etc.) so it grows to fill remaining space next to the thumb. */
.entity-card-with-thumb .entity-card-link {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.entity-card-with-thumb .entity-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
/* Cards without a thumb keep their original behavior — entity-card-body
   exists in markup but doesn't need flex treatment. */
.entity-card .entity-card-body { display: contents; }
.entity-card-with-thumb .entity-card-body { display: block; }
/* station_list uses .station-card-link which wasn't in entity-card; mirror. */
.station-card.entity-card-with-thumb .station-card-link {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

/* Area sketch thumbnail (next to featured image) */
.area-sketch {
  margin: 0;
  flex: 0 0 auto;
}
.area-sketch-thumb {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 150px;
}
.area-sketch-thumb svg {
  width: 100%;
  height: 110px;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  transition: border-color 0.15s;
}
.area-sketch-thumb:hover svg,
.area-sketch-thumb:focus-visible svg {
  border-color: var(--primary);
}
.area-sketch-rect {
  fill: rgba(120, 170, 100, 0.15);
  stroke: var(--primary-dark, #4a7c2c);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
}
.area-sketch-caption {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

/* Sketch dialog — full-screen modal. Only applies layout styles to OPEN
   dialogs so a closed `<dialog>` correctly stays display:none (browser
   default). Forgetting the [open] selector forces the dialog to be visible
   even when "closed" and breaks the Close button. */
.area-sketch-dialog {
  border: 0;
  padding: 0;
  background: var(--bg, #fff);
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.area-sketch-dialog[open] {
  display: flex;
  flex-direction: column;
  inset: 0;
}
.area-sketch-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.area-sketch-dialog-close-bar {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.area-sketch-large {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;     /* lets the SVG actually grow inside flex */
  padding: 0.7rem 0.9rem 0.6rem;
  overflow: hidden;
}
.area-sketch-large .sketch-svg-wrap {
  flex: 1 1 auto;
  min-height: 0;
}
.area-sketch-large svg {
  width: 100%;
  height: 100%;
  background: var(--card);
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}
.area-sketch-grid .grid-line {
  stroke: var(--border);
  stroke-width: 0.05;
  stroke-dasharray: 0.12 0.18;
  vector-effect: non-scaling-stroke;
}
.area-sketch-grid .grid-line-major {
  stroke: var(--muted);
  stroke-width: 0.1;
  stroke-dasharray: 0.25 0.18;
}
/* 0.5-ft snap grid line — fainter than the 1-ft grid; only there to hint
   at where the snap targets are. The press-and-drag ghost makes the cell
   itself explicit on user interaction. */
.area-sketch-grid .grid-line-snap {
  stroke: var(--border);
  stroke-width: 0.025;
  stroke-dasharray: 0.05 0.18;
  opacity: 0.6;
}
/* Layout-mode-only grid styling — solid 1-ft lines, dotted 6" lines, both
   visible enough to convey scale without overpowering the plants. (The
   non-layout area-detail sketch keeps the existing dashed treatment.)
   Notes:
   - We use `vector-effect: non-scaling-stroke` so stroke widths stay in CSS
     pixels regardless of viewBox scale (the SVG viewBox is in feet).
   - Earlier attempt used var(--border) at 55% opacity → invisible on the
     white card. Switched to var(--muted) (#6b7a5a) for contrast. */
.layout-canvas-svg .area-sketch-grid .grid-line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
  opacity: 0.35;
}
/* 5-ft major: same width as the 1-ft line — just a touch darker so it
   reads as a milestone without looking like a thicker line. Previously
   stroke-width: 1.6 caused the "some lines look thicker" issue. */
.layout-canvas-svg .area-sketch-grid .grid-line-major {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
  opacity: 0.6;
}
.layout-canvas-svg .area-sketch-grid .grid-line-snap {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 1 3;
  vector-effect: non-scaling-stroke;
  opacity: 0.3;
}
/* Press-and-drag ghost. While the user holds a press on the canvas, a
   highlighted cell shows exactly which 0.5-ft cell their finger is
   targeting, and a faded plant icon previews how big the icon will be. */
.layout-canvas-svg .drag-ghost-cell {
  fill: rgba(255, 200, 80, 0.42);
  stroke: #b87a18;
  stroke-width: 0.04;
  pointer-events: none;
}
.layout-canvas-svg .drag-ghost-icon {
  opacity: 0.6;
  pointer-events: none;
}
.layout-canvas-svg .drag-ghost-icon .plant-icon-bg {
  stroke: #b87a18;
  stroke-width: 0.08;
}
/* Disable the OS-level text selection / context menu during a drag.
   pointer-events stay on the SVG; touch-action: none stops the browser
   from interpreting the drag as a scroll/zoom gesture. */
.layout-canvas-svg, .layout-canvas-svg * { touch-action: none; }

/* Nested child areas inside a parent's sketch. Click the rectangle to
   select it (highlight + dropdown), drag the selected rect to reposition.
   Navigate via the "Go there" button next to the dropdown — the rectangle
   itself is no longer a navigation link (avoids click-vs-drag confusion). */
.child-area { cursor: pointer; touch-action: none; }
.child-area.dragging { cursor: grabbing; }
.child-area-rect {
  fill: rgba(120, 170, 100, 0.18);
  stroke: var(--primary-dark, #4a7c2c);
  stroke-width: 0.06;
  stroke-dasharray: 0.3 0.18;
  vector-effect: non-scaling-stroke;
  transition: fill 0.12s, stroke-width 0.12s;
}
.child-area:hover .child-area-rect {
  fill: rgba(120, 170, 100, 0.32);
}
.child-area.selected .child-area-rect {
  fill: rgba(255, 200, 80, 0.32);
  stroke: #b87a18;
  stroke-width: 0.16;
  stroke-dasharray: none;
}
.child-area.dragging .child-area-rect {
  fill: rgba(255, 200, 80, 0.5);
  stroke-width: 0.2;
}
.child-area-label {
  /* font-size is set inline (in SVG feet) per area, sized from the parent's
     dimensions so labels render at a consistent ~13px regardless of zoom. */
  fill: var(--primary-dark, #4a7c2c);
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: none;       /* clicks fall through to the rect */
  user-select: none;
}
.child-area.selected .child-area-label {
  fill: #5a3d08;
}

/* Control bar above the SVG — dropdown selector + "Go there" button. */
.sketch-children-control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.2rem 0.6rem;
  flex-wrap: wrap;
}
.sketch-children-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}
.sketch-children-label select {
  font-size: 0.95rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--card);
}
.sketch-children-hint {
  color: var(--muted);
  margin-left: auto;
}

/* Plant icons in the sketch. Coords are in feet (SVG viewBox units). */
.plant-icon { cursor: grab; touch-action: none; }
.plant-icon.plant-icon-static { cursor: default; }
.plant-icon.dragging { cursor: grabbing; opacity: 0.85; }
/* Plant-icon "background" circle is now an invisible hit-test target. The
   visual is the emoji/SVG glyph alone — no colored disc behind it. On hover
   or while dragging, a faint ring appears so the click area is obvious. */
.plant-icon-bg {
  fill: rgba(0, 0, 0, 0);            /* fully transparent, but still hit-tests */
  stroke: transparent;
  stroke-width: 0.04;
  vector-effect: non-scaling-stroke;
  pointer-events: all;               /* always capture pointer regardless of fill */
  transition: stroke 0.12s, fill 0.12s;
}
.plant-icon:not(.plant-icon-static):hover .plant-icon-bg {
  fill: rgba(255, 255, 255, 0.55);
  stroke: var(--primary, #5a8c3c);
}
.plant-icon.dragging .plant-icon-bg {
  fill: rgba(255, 255, 255, 0.7);
  stroke: var(--primary-dark, #4a7c2c);
  stroke-width: 0.08;
}
.plant-icon-static .plant-icon-bg { display: none; }  /* thumb: no hit area */

/* Thumbnail-only colored dots (the dialog uses emoji/SVG glyphs without
   a colored disc; in the small thumbnail those glyphs would be unreadable, so
   we show colored dots there as a quick visual preview instead). */
.plant-icon-thumb-dot {
  stroke: rgba(20, 30, 10, 0.4);
  stroke-width: 0.04;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.plant-icon-label,
.plant-icon-emoji,
.plant-icon-svg {
  pointer-events: none;        /* clicks pass through glyph to the parent <g> */
  user-select: none;
}
.plant-icon-label {
  font-size: 0.5px;
  fill: #333;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.plant-icon-emoji {
  font-size: 0.7px;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Multi-plant badge in upper-right of an icon — shows the count when one
   icon represents N plants (carrots = 3, radish = 9, white clover = 16…). */
.plant-icon-count { pointer-events: none; }
.plant-icon-count-bg {
  fill: rgba(255, 255, 255, 0.95);
  stroke: rgba(20, 30, 10, 0.6);
  stroke-width: 0.04;
  vector-effect: non-scaling-stroke;
}
.plant-icon-count-label {
  font-size: 0.22px;
  fill: #1a3010;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: none;
}
/* SVG-symbol icons paint themselves (each <symbol> defines its own colors).
   We don't override fill/stroke here. */
/* Larger labels in the dialog where space permits */
.area-sketch-large .plant-icon-emoji,
.area-sketch-large .plant-icon-label {
  font-size: 0.55px;
}
/* Hide labels/emoji in the small thumbnail — too small to read */
.area-sketch-thumb .plant-icon-label,
.area-sketch-thumb .plant-icon-emoji,
.area-sketch-thumb .plant-icon-svg {
  display: none;
}

/* Floating hover tooltip in the area-sketch dialog */
.area-sketch-large {
  position: relative;          /* anchor for the tooltip */
}
.sketch-hover-tooltip {
  position: absolute;
  background: rgba(20, 30, 10, 0.92);
  color: #fff;
  padding: 0.3rem 0.55rem;
  border-radius: 5px;
  font-size: 0.85rem;
  pointer-events: none;
  z-index: 100;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.sketch-hover-tooltip[hidden] {
  display: none;
}
.area-sketch-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.area-sketch-meta strong {
  color: var(--text, inherit);
}

/* Mini compass overlay — fixed pixel size in the corner of the sketch,
   doesn't scale with the SVG zoom. Replaces the older edge-of-canvas N/E/S/W
   labels which got in the way of plant-icon clicks. */
.area-sketch-thumb { position: relative; }
.sketch-svg-wrap { position: relative; }
.sketch-compass-mini {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 5;
}
.sketch-compass-mini-thumb { width: 36px; height: 36px; }
.sketch-compass-mini-large { width: 56px; height: 56px; bottom: 10px; left: 10px; }
.sketch-compass-mini svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sketch-compass-mini text {
  font-size: 12px;
  font-weight: 700;
  fill: #555;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  dominant-baseline: middle;
}
.sketch-compass-mini .cm-n { fill: #c44; }
.sketch-compass-mini-large text { font-size: 11px; }

/* Sun intensity gradient bar (placeholder until user fills in stops) */
.sun-gradient-bar {
  width: 100%;
  margin: 0;
}
.sun-gradient-bar-thumb {
  height: 10px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(180, 180, 180, 0.18) 0,
      rgba(180, 180, 180, 0.18) 4px,
      rgba(255, 255, 255, 0) 4px,
      rgba(255, 255, 255, 0) 8px
    ),
    linear-gradient(to right,
      rgba(255, 200, 80, 0.18),
      rgba(255, 230, 130, 0.18),
      rgba(255, 200, 80, 0.18));
  border: 1px solid var(--border);
}
.sun-gradient-bar-large {
  margin-top: 0.6rem;
}
.sun-gradient-bar-large .sun-gradient-bar-track {
  height: 24px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(180, 180, 180, 0.22) 0,
      rgba(180, 180, 180, 0.22) 6px,
      rgba(255, 255, 255, 0) 6px,
      rgba(255, 255, 255, 0) 12px
    ),
    linear-gradient(to right,
      rgba(255, 200, 80, 0.25),
      rgba(255, 230, 130, 0.25),
      rgba(255, 200, 80, 0.25));
  border: 1px solid var(--border);
  position: relative;
}
.sun-gradient-bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
.sun-gradient-empty {
  font-style: italic;
}

/* Sketch rotation field on the area form */
.sketch-rotation-field {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1.1rem;
  margin: 0 0 1rem;
  background: var(--card);
}
.sketch-rotation-field legend {
  padding: 0 0.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 0.95rem;
}
.sketch-rotation-field p.meta {
  margin: 0 0 0.6rem;
}
.rotation-radio-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.rotation-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: var(--bg, #fff);
  font-weight: normal;
  margin: 0;
}
.rotation-radio input {
  margin: 0;
  width: auto;
}
.rotation-radio:has(input:checked) {
  border-color: var(--primary);
  background: rgba(120, 170, 100, 0.12);
  font-weight: 600;
}

/* Inventory: filter bar */
.filter-bar {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin: 1rem 0 1.3rem;
}
.filter-bar label {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0;
  gap: 0.25rem;
  min-width: 140px;
  flex: 1 1 140px;
}
.filter-bar select {
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.95rem;
  background: white;
  color: var(--text);
  font-family: inherit;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0;
}

/* Inventory: plant table */
.inv-table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.inv-table thead th {
  background: var(--bg);
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.inv-table tbody tr {
  cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background 0.08s;
}
.inv-table tbody tr:first-child { border-top: none; }
.inv-table tbody tr:hover { background: var(--bg); }
.inv-table td {
  padding: 0.7rem 1rem;
  vertical-align: middle;
}
.inv-table td.muted { color: var(--muted); }
.inv-table td a {
  color: var(--primary);
  text-decoration: none;
}
.inv-table td a:hover { text-decoration: underline; }
.unassigned {
  color: var(--muted);
  font-style: italic;
  font-size: 0.9rem;
}
.inv-name-link {
  color: var(--text);
  text-decoration: none;
}
.inv-name-link:hover { text-decoration: underline; }
.inv-name-link strong { color: var(--primary-dark); }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions-col { width: 1%; }

.mini-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  border-radius: 5px;
  cursor: pointer;
}
.mini-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Supplies list */
.supply-category {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin: 1.2rem 0 0.5rem;
  font-weight: 600;
}
.supply-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.supply-item { border-top: 1px solid var(--border); }
.supply-item:first-child { border-top: none; }
.supply-item-link {
  display: block;
  padding: 0.75rem 1.1rem;
  color: var(--text);
  text-decoration: none;
}
.supply-item-link:hover { background: var(--bg); }
.supply-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.supply-main strong { color: var(--primary-dark); }
.supply-amount {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 500;
}
.supply-notes {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.3rem;
  white-space: pre-wrap;
}

/* Comment thread toggles */
.comment-toggles, .timeline-toggles {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 0.8rem;
}
.comment-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--text);
  background: var(--card);
  transition: background 0.1s;
}
.comment-toggle.on {
  background: var(--primary-bg, #e6f4ea);
  border-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 600;
}
.comment-toggle.off { opacity: 0.75; }
.comment-toggle:hover { opacity: 1; background: var(--hover, #f0f0f0); }
.comment-toggle.clear { color: #b33; border-color: #e3b0b0; }

.comment-indirect { opacity: 0.92; border-left-color: var(--border); }

.timeline-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.75rem;
}
.timeline-filter select {
  min-width: 260px;
  max-width: 100%;
}
.timeline-filter .filter-label {
  font-weight: 600;
  margin-right: 0.35rem;
}

/* Commentary */
.commentary { margin-top: 2rem; }
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.comment {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  margin-bottom: 0.5rem;
}
.comment-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}
.comment-date {
  color: var(--primary-dark);
  font-weight: 600;
  font-size: 0.85rem;
  font-family: ui-monospace, Menlo, monospace;
}
.comment-actions {
  display: flex;
  gap: 0.7rem;
  font-size: 0.8rem;
  align-items: center;
}
.comment-body {
  color: var(--text);
  white-space: pre-wrap;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Inline media on a comment row (audio player + photo thumbs) */
.comment-audio {
  display: block;
  margin-top: 0.5rem;
  width: 100%;
  max-width: 360px;
}
.comment-photos {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.comment-photo-thumb {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  line-height: 0;
  transition: border-color 0.15s;
}
.comment-photo-thumb:hover, .comment-photo-thumb:focus-visible {
  border-color: var(--primary);
}
.comment-photo-thumb img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  display: block;
}

/* Kind chip ("observation", "done", etc.) on a comment header */
.chip-kind {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  margin-left: 0.4rem;
  text-transform: lowercase;
}
.chip-kind.kind-done       { background: rgba(120, 170, 100, 0.18); color: var(--primary-dark, #4a7c2c); }
.chip-kind.kind-issue      { background: rgba(220, 120, 120, 0.18); color: #aa3333; }
.chip-kind.kind-question   { background: rgba(120, 160, 220, 0.18); color: #335599; }
.chip-kind.kind-idea       { background: rgba(220, 200, 120, 0.18); color: #88660b; }
.chip-kind.kind-observation{ background: rgba(180, 180, 180, 0.18); color: var(--muted); }

/* "Add a note" capture widget container at the bottom of the comment list */
.comment-add {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-top: 1rem;
}
.comment-add-heading {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-dark);
}
.comment-add .capture-widget .capture-row.capture-extra {
  gap: 0.8rem;
}
.comment-add .capture-date-label,
.comment-add .capture-kind-label {
  display: inline-flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: var(--muted);
}
.comment-add .capture-date,
.comment-add .capture-kind {
  margin-top: 0.2rem;
}

/* Spacing field on species/variety forms */
.spacing-field {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin: 0 0 1rem;
  background: var(--card);
}
.spacing-field legend {
  padding: 0 0.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 0.95rem;
}
.spacing-field p.meta {
  margin: 0 0 0.6rem;
}
.spacing-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.spacing-input {
  width: 5em;
  padding: 0.3rem 0.5rem;
  text-align: right;
}

/* Inline spacing-edit form on species/variety detail pages */
.spacing-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin: 0 0 1rem;
}
.spacing-inline-label {
  font-weight: 600;
  color: var(--primary-dark);
}
.spacing-inline .spacing-input {
  width: 4.5em;
}
.spacing-inline-hint {
  flex: 1 1 100%;
  margin-top: 0.2rem;
  color: var(--muted);
}

/* Comment-edit page: media management section */
.comment-media-edit {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1.1rem;
  margin: 0 0 1rem;
  background: var(--card);
}
.comment-media-edit legend {
  padding: 0 0.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 0.95rem;
}
.comment-media-edit .media-current,
.comment-media-edit .media-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
}
.comment-media-edit .media-label {
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 110px;
}
.comment-media-edit audio { max-width: 280px; }
.comment-media-edit .media-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: normal;
  margin: 0;
}
.comment-media-edit .media-remove input { width: auto; margin: 0; }
.comment-media-edit .comment-media-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1 1 auto;
}
.comment-media-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
  font-weight: normal;
}
.comment-media-thumb-link {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  line-height: 0;
}
.comment-media-thumb-link img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  display: block;
}
.comment-media-thumb-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.comment-media-thumb-remove input { width: auto; margin: 0; }

.comment-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
}
.comment-form textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: white;
  color: var(--text);
  resize: vertical;
  margin-bottom: 0.5rem;
}
.comment-form-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.comment-form input[type="date"] {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.9rem;
  background: white;
  color: var(--text);
}
.btn.small {
  padding: 0.35rem 0.9rem;
  font-size: 0.9rem;
}

/* --- Planting form: card-based plant rows --- */
.plant-cards-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.2rem 0 0.6rem;
}
.plant-cards-header h2 { margin: 0; }

.plant-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.5rem;
  overflow: visible;
  position: relative;
}
.plant-card-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  margin-bottom: 0.4rem;
}
.plant-card-row:last-child { margin-bottom: 0; }
.plant-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0;
  font-weight: normal;
}
.plant-field.plant-qty { flex: 0 0 55px; }
.plant-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.plant-field input[type="text"],
.plant-field select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 1rem;
  font-family: inherit;
  background: white;
  color: var(--text);
  margin: 0;
}
.plant-field input:focus,
.plant-field select:focus {
  outline: none;
  border-color: var(--primary);
}

.field-with-add {
  display: flex;
  gap: 0.3rem;
}
.field-with-add select { flex: 1; min-width: 0; }
.add-inline-btn {
  flex: 0 0 34px;
  height: 38px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.add-inline-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

.remove-row {
  flex: 0 0 30px;
  height: 30px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-bottom: 0.2rem;
}
.remove-row:hover { color: var(--danger); }

/* Area autocomplete in plant cards */
.plant-area { position: relative; }
.area-search {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 1rem;
  font-family: inherit;
  background: white;
  color: var(--text);
}
.area-search:focus { outline: none; border-color: var(--primary); }
.area-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 2px 0 0;
  display: none;
}
.area-dropdown li {
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.area-dropdown li:first-child { border-top: none; }
.area-dropdown li:hover, .area-dropdown li.highlighted { background: var(--bg); }
.area-dd-parent {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.2;
}
.area-dd-name {
  font-size: 0.95rem;
  color: var(--primary-dark);
  font-weight: 500;
}

/* New year field - hidden by default */
.new-year-hidden { display: none !important; }
#new-year-label {
  margin-bottom: 0.5rem;
}
#new-year-label input {
  display: block;
  width: 100%;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: white;
  color: var(--text);
  margin-top: 0.2rem;
}

/* Inline creation modal */
.inline-modal[hidden],
.inline-modal-content label[hidden] { display: none !important; }
.inline-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.inline-modal-content {
  background: var(--card);
  border-radius: 10px;
  padding: 1.2rem;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.inline-modal-content h3 {
  margin: 0 0 0.8rem;
  color: var(--primary-dark);
  font-size: 1.1rem;
}
.inline-modal-content label {
  display: block;
  margin-bottom: 0.7rem;
  font-weight: 500;
}
.inline-modal-content label.modal-hidden { display: none !important; }
.inline-modal-content label span {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 0.2rem;
}
.inline-modal-content input,
.inline-modal-content select {
  width: 100%;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 1rem;
  font-family: inherit;
  background: white;
  color: var(--text);
}
.inline-modal-content input:focus,
.inline-modal-content select:focus {
  outline: none;
  border-color: var(--primary);
}
.inline-modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Status: idea */
.status-idea { background: #e0e8f5; color: #3a5a8a; }

/* Planting detail: plant list */
.plant-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.plant-detail-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
}
.plant-detail-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.plant-detail-qty {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.05rem;
  min-width: 2rem;
}
.plant-detail-name {
  font-weight: 600;
  color: var(--primary-dark);
}
.plant-detail-species {
  font-weight: 400;
  color: var(--muted);
}
.plant-detail-tbd {
  color: var(--muted);
  font-style: italic;
}
.plant-detail-area {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  font-size: 0.88rem;
  margin-top: 0.25rem;
}
.plant-detail-area:hover { color: var(--primary); }
.plant-detail-area .area-dd-parent {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.2;
}

/* Area summary bar */
.area-summary-bar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 1rem;
}

.area-dims-bar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.4rem 0 1rem;
}

.area-attrs .attr-block {
  margin-bottom: 0.9rem;
}
.area-attrs .attr-block h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 0.3rem;
}
.area-attrs .attr-body {
  white-space: pre-wrap;
  line-height: 1.45;
}

/* Compact table (few columns, no min-width needed) */
.inv-table-compact { min-width: 0 !important; }
.inv-table-compact tfoot td {
  border-top: 2px solid var(--border);
  padding-top: 0.5rem;
  font-size: 0.9rem;
}

/* Plant-group table: icon columns + move button */
.plant-group-table td,
.plant-group-table th { vertical-align: middle; }
.plant-group-table .col-icon {
  text-align: center;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
/* Per-planting grouping band inside the area's plant table — makes it
   visually clear that each row belongs to a specific planting, so qty edits
   are unambiguous. */
.planting-divider-row td.planting-divider-cell {
  background: var(--bg, #f6f6f4);
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.planting-divider-label {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  margin-right: 0.35rem;
}
.planting-divider-link {
  color: var(--primary, #5a8c3c);
  font-weight: 600;
  text-decoration: none;
}
.planting-divider-link:hover { text-decoration: underline; }
.plant-inline-input {
  width: 100%;
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  color: inherit;
}
.plant-inline-input:hover,
.plant-inline-input:focus {
  border-color: var(--border);
  background: white;
  outline: none;
}
.plant-inline-qty { max-width: 70px; text-align: right; }
.plant-row-actions {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  justify-content: flex-end;
}
.plant-save-btn {
  background: #fdfaec;
  color: #b3a76f;
  opacity: 0.4;
  pointer-events: none;
  transition: color 0.1s, background 0.1s, opacity 0.1s;
}
.plant-row.is-dirty .plant-save-btn {
  background: #fffbe0;
  color: #2e5a28;
  opacity: 1;
  pointer-events: auto;
  border-color: #b3a76f;
}
.plant-row.is-dirty {
  background: #fffbe0;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d8ce9f;
  background: #fffdf2;
  border-radius: 6px;
  color: #3e5a2e;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
}
.icon-btn:hover { background: #f5efd8; border-color: #b3a76f; }
.icon-btn.disabled {
  color: #c7c0a8;
  cursor: not-allowed;
  background: #faf7ea;
}

/* Plant move dialog */
.plant-move-dialog {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  max-width: 420px;
  width: calc(100% - 2rem);
  box-shadow: 0 12px 40px rgba(40, 35, 15, 0.25);
  overflow: visible;
  max-height: none;
}
.plant-move-dialog::backdrop { background: rgba(30, 25, 10, 0.45); }
.plant-move-dialog h3 { margin: 0 0 0.4rem; color: var(--primary-dark); }
.plant-move-dialog .plant-move-desc {
  margin: 0 0 0.4rem;
  font-weight: 600;
  color: #3e4a2e;
}
.plant-move-dialog label { display: block; margin: 0.7rem 0 0.2rem; }
.plant-move-dialog .form-actions { margin-top: 1rem; display: flex; gap: 0.5rem; }

/* Planting status chips (idea already defined above) */
.status-planned { background: #d9e6f2; color: #2a4d7a; }
.status-skipped { background: #d0cec8; color: #555; text-decoration: line-through; }

/* Comment "also on" linking */
.comment-also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.chip-muted { background: #ece9e3; color: #777; }

/* Removable pill chips (comment secondary targets). The pill colour comes from the
   .type-* rules below; the link sits on the left, the × button on the right. */
.chip-pill {
  display: inline-flex;
  align-items: stretch;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
}
.chip-pill-link {
  padding: 0.15rem 0.45rem 0.15rem 0.55rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.chip-pill-link:hover { text-decoration: underline; }
.chip-pill-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
}
.chip-pill-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  padding: 0 0.4rem 0 0.25rem;
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.chip-pill-remove:hover { opacity: 1; color: #8a2a2a; }

/* Comment kind chips */
.kind-observation { background: #d6e4d4; color: #3b5a38; }
.kind-question    { background: #e9dff0; color: #5a3d6e; }
.kind-done        { background: #c8e4b8; color: #2e5317; }
.kind-issue       { background: #f2d2d2; color: #7a2424; }
.kind-idea        { background: #e0e8f5; color: #3a5a8a; }
.kind-note        { background: #e8e4d8; color: #6a5a30; }

/* Comment target-list (edit page) */
.target-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.target-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.comment-target-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.5rem;
}
.comment-target-add select { max-width: 280px; }

/* Comment quick-form kind dropdown */
.comment-kind { max-width: 160px; }
.form-hint { color: var(--muted); margin-top: 0.25rem; }

/* Artifact content (markdown render) */
.artifact-content { margin-top: 1rem; }
.artifact-content h2 { margin-top: 1.4rem; }
.artifact-content ul { padding-left: 1.4rem; }
.artifact-content input[type="checkbox"] { margin-right: 0.4rem; }

/* Inline-editable plant cards on planting detail page */
.plant-editable-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 0.4rem;
  transition: border-color 0.15s;
}
.plant-editable-card.expanded { border-color: var(--primary); }
.plant-summary {
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.plant-summary:hover { background: rgba(0,0,0,0.02); }
.plant-expand-caret {
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.15s;
  font-weight: 700;
}
.plant-editable-card.expanded .plant-expand-caret { transform: rotate(90deg); }
.plant-editor {
  padding: 0.4rem 0.9rem 0.9rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plant-editor[hidden] { display: none; }
.plant-field.plant-notes { width: 100%; flex: 1 1 100%; }
.plant-field.plant-notes textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
  font-family: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
}
.plant-editor-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 0.35rem;
}
.plant-add-row {
  margin-top: 0.6rem;
  display: flex;
}

/* Overview history page */
.overview-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  white-space: pre-wrap;
  font-size: 0.95rem;
  line-height: 1.45;
}
.overview-block.current { border-color: var(--primary); }
.overview-versions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.overview-version-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.overview-change-note { color: var(--text); font-style: italic; }

/* Inline "history" link next to overview labels */
.overview-history-link {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.5rem;
  text-decoration: none;
}
.overview-history-link:hover { color: var(--primary); text-decoration: underline; }

/* Comment title header (date + primary chip) */
.comment-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.comment-dash { color: var(--muted); }

/* Typed chips — color by entity type */
.chip.type-area      { background: #d9e8d0; color: #33562a; border-color: #b8d6a6; }
.chip.type-planting  { background: #fde0c0; color: #7a4410; border-color: #f3c894; }
.chip.type-species   { background: #d2dff6; color: #2a4677; border-color: #a7bde2; }
.chip.type-variety   { background: #cbe9e2; color: #265b50; border-color: #9fd2c6; }
.chip.type-year      { background: #e6d6f0; color: #4f2a6b; border-color: #c8a9da; }
.chip.type-plant     { background: #faeeb4; color: #6b5215; border-color: #e4d587; }
.chip.type-station   { background: #f5cde0; color: #6e244a; border-color: #dfa3c0; }
.chip.type-supply    { background: #e2dfd5; color: #55503c; border-color: #c5bfa9; }

a.chip { text-decoration: none; }
a.chip:hover { filter: brightness(0.96); }

.chip-pill.type-area      { background: #d9e8d0; color: #33562a; border-color: #b8d6a6; }
.chip-pill.type-planting  { background: #fde0c0; color: #7a4410; border-color: #f3c894; }
.chip-pill.type-species   { background: #d2dff6; color: #2a4677; border-color: #a7bde2; }
.chip-pill.type-variety   { background: #cbe9e2; color: #265b50; border-color: #9fd2c6; }
.chip-pill.type-year      { background: #e6d6f0; color: #4f2a6b; border-color: #c8a9da; }
.chip-pill.type-plant     { background: #faeeb4; color: #6b5215; border-color: #e4d587; }
.chip-pill.type-station   { background: #f5cde0; color: #6e244a; border-color: #dfa3c0; }
.chip-pill.type-supply    { background: #e2dfd5; color: #55503c; border-color: #c5bfa9; }

/* Species pill — icon + count in an outlined pill. Title provides species name
   on hover. Used in area tiles and anywhere else that needs a compact plant chip. */
.species-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.species-more {
  font-size: 0.75rem;
  color: #8a8472;
  padding-left: 0.2rem;
}
.species-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem 0.1rem 0.35rem;
  border: 1px solid #cfc6ae;
  background: #fbf7e8;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.1;
  color: #4a4534;
}
.species-pill:hover { border-color: #9d9175; background: #f6f0d8; }
.species-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.species-icon-emoji { font-size: 0.95rem; line-height: 1; }
.species-icon-svg { width: 18px; height: 18px; }
.species-count { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Tiles overview */
.tiles-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.tiles-toolbar-left h1 { margin: 0 0 0.2rem 0; }
.tiles-toolbar-right {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.tiles-meta-line {
  display: flex;
  gap: 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
}
.tiles-current-species {
  margin: 0.1rem 0 1rem;
}

.status-filter {
  display: inline-flex;
  border: 1px solid #d0c7a6;
  border-radius: 6px;
  overflow: hidden;
  background: #fffdf2;
}
.status-filter-opt {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  color: #66604d;
  text-decoration: none;
  border-right: 1px solid #e2d9b8;
}
.status-filter-opt:last-child { border-right: 0; }
.status-filter-opt:hover { background: #f5efd8; }
.status-filter-opt.active {
  background: #2e5a28;
  color: #fffaec;
  font-weight: 600;
}

.home-footer {
  margin-top: 1.2rem;
  display: flex;
  gap: 1.2rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.tile-grid {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: linear-gradient(180deg, #fdfaec 0%, #f5f0dc 100%);
  border: 1px solid #d8ce9f;
  border-radius: 6px;
  padding: 0.6rem 0.7rem;
  min-height: 110px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.08s, box-shadow 0.12s;
}
.tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(80, 70, 40, 0.1);
  border-color: #b3a76f;
}
.tile-name {
  font-weight: 600;
  color: #2f4a27;
  font-size: 0.92rem;
}
.tile-species {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  flex: 1;
}
.tile-empty {
  flex: 1;
  color: #b8b0a0;
  font-style: italic;
  font-size: 0.8rem;
}
.tile-foot {
  display: flex;
  gap: 0.7rem;
  font-size: 0.7rem;
  color: #8a8472;
  border-top: 1px dashed #dfd6b2;
  padding-top: 0.3rem;
  margin-top: 0.15rem;
}

/* Plant detail link in card summary */
.plant-detail-page-link {
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  margin-left: auto;
  margin-right: 0.5rem;
}
.plant-detail-page-link:hover { color: var(--primary); text-decoration: underline; }

/* --- Capture page --- */
.capture-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.capture-row {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
}
.capture-actions { justify-content: flex-end; }
.capture-textarea {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.capture-textarea textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  min-height: 4.5rem;
}
.rec-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 2px solid var(--primary);
  background: var(--primary);
  color: white;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.rec-btn .rec-dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: white;
  flex-shrink: 0;
}
.rec-btn.recording {
  background: var(--danger);
  border-color: var(--danger);
}
.rec-btn.recording .rec-dot {
  background: white;
  animation: rec-pulse 1.1s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}
.rec-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
  min-width: 3ch;
}
.rec-status { font-size: 0.92rem; }
.rec-status.error { color: var(--danger); }
.muted { color: var(--muted); }
#rec-preview { width: 100%; max-width: 100%; }

.photo-pick { cursor: pointer; }
.photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.photo-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-rm {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: white;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* --- Note list (recent + queue) --- */
.note-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.6rem;
}
.note-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.note-item audio { width: 100%; }
.note-item .photo-thumbs img { width: 96px; height: 96px; }
.note-meta {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.note-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.note-badge {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.note-status-processed .note-badge { background: #e8efd9; color: var(--primary-dark); border-color: #c9d8a8; }
.note-status-archived  .note-badge { background: #eee; color: #888; border-color: #ddd; }
.note-status-archived  { opacity: 0.7; }
.note-actions {
  margin-left: auto;
  display: flex;
  gap: 0.7rem;
}
.note-actions .link {
  background: none;
  border: none;
  color: var(--primary-dark);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.note-actions .link.danger { color: var(--danger); }
.note-text { white-space: pre-wrap; }
.note-transcript { white-space: pre-wrap; font-size: 0.92rem; }
.note-processing { font-size: 0.9rem; }

.queue-tabs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.6rem 0 1rem;
}
.queue-tab {
  text-decoration: none;
  color: var(--muted);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  text-transform: capitalize;
  font-size: 0.92rem;
}
.queue-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.photo-drop {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 0.9rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  background: var(--bg);
  transition: border-color 0.15s, background 0.15s;
}
.photo-drop.dragging {
  border-color: var(--primary);
  background: #eef3df;
  color: var(--primary-dark);
}

.note-edit textarea {
  width: 100%;
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  min-height: 4rem;
}
.note-edit-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.4rem;
}
.note-edit-actions .edit-status { font-size: 0.85rem; }

/* Archive widgets */
.archived-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--muted);
  color: white;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.4rem;
}
.archived-toggle {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--muted);
}
.archived-toggle:hover { color: var(--primary); border-bottom-color: var(--primary); }
.is-archived { opacity: 0.55; }
.is-archived:hover { opacity: 0.85; }
.inline-form { display: inline; }

/* Timeline view toggle (Notes / Detailed log) */
.timeline-view-toggle {
  display: inline-flex;
  gap: 0.4rem;
  margin: 0.5rem 0;
}

/* Activity-log entries */
.activity-log-list { padding-left: 0; list-style: none; }
.activity-log-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.5rem;
  border-left: 3px solid var(--border);
}
.activity-log-row.activity-log-add       { border-left-color: rgba(120, 200, 120, 0.7); }
.activity-log-row.activity-log-edit      { border-left-color: rgba(120, 160, 220, 0.7); }
.activity-log-row.activity-log-delete    { border-left-color: rgba(220, 120, 120, 0.7); }
.activity-log-row.activity-log-archive   { border-left-color: rgba(160, 130, 100, 0.7); }
.activity-log-row.activity-log-unarchive { border-left-color: rgba(120, 200, 160, 0.7); }
.activity-log-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}
.activity-log-cat {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
}
.activity-log-cat.cat-add       { background: rgba(120, 200, 120, 0.22); color: #266b33; }
.activity-log-cat.cat-edit      { background: rgba(120, 160, 220, 0.22); color: #335599; }
.activity-log-cat.cat-delete    { background: rgba(220, 120, 120, 0.22); color: #aa3333; }
.activity-log-cat.cat-archive   { background: rgba(160, 130, 100, 0.22); color: #6a4a26; }
.activity-log-cat.cat-unarchive { background: rgba(120, 200, 160, 0.22); color: #266b55; }
.activity-log-ts {
  color: var(--muted);
  font-size: 0.78rem;
  font-family: ui-monospace, monospace;
}
.activity-log-summary { font-size: 0.95rem; }
.activity-log-diff { margin-top: 0.2rem; }
.activity-log-field { color: var(--muted); }
.activity-log-old { color: #aa3333; text-decoration: line-through; }
.activity-log-arrow { color: var(--muted); margin: 0 0.25rem; }
.activity-log-new { color: #4a7c2c; }

/* Click-to-edit fields */
.editable {
  cursor: text;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.12s, background 0.12s;
  padding: 0 0.1em;
  border-radius: 3px;
}
.editable:hover { border-bottom-color: rgba(120, 170, 100, 0.5); background: rgba(120, 170, 100, 0.08); }
.editable.editable-active { background: rgba(120, 170, 100, 0.12); border-bottom-color: transparent; }
.editable.editable-just-saved { background: rgba(120, 200, 120, 0.30); }
.editable.editable-saving { opacity: 0.6; }
.editable.editable-error { background: rgba(220, 120, 120, 0.22); }
.editable .editable-input {
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.15em 0.35em;
  width: 100%;
  box-sizing: border-box;
  min-width: 6ch;
}
.editable .editable-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.editable textarea.editable-input { resize: vertical; min-height: 4em; }
.editable.editable-block { display: block; }
.editable-empty { color: var(--muted); font-style: italic; }

/* Sketch rotation control inside the area-sketch fullscreen modal. */
.sketch-rotation-control {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  gap: 0.3rem;
  align-items: center;
  background: rgba(255,255,255,0.85);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.85rem;
  z-index: 5;
}
.sketch-rotation-control button {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.sketch-rotation-control button:hover { background: var(--primary); color: white; border-color: var(--primary); }
.sketch-rotation-current { font-weight: 500; min-width: 3ch; text-align: center; }

/* Station areas-served edit toggle. */
.station-areas-edit-toggle {
  margin-bottom: 0.5rem;
}
.station-areas-checklist[hidden] { display: none; }

/* Floating capture: bubble + modal + pill */
.floating-bubble {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 80;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: white;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, box-shadow 0.12s;
}
.floating-bubble:hover, .floating-bubble:focus {
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(0,0,0,0.24);
  outline: none;
}
.floating-modal[hidden] { display: none; }
.floating-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}
.floating-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 15, 0.45);
}
.floating-modal-panel {
  position: relative;
  background: var(--card);
  border-radius: 12px;
  width: min(560px, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.floating-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
}
.floating-modal-head h2 {
  margin: 0;
  font-size: 1.05rem;
}
.floating-modal-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.floating-modal-close:hover { color: var(--text); }
.floating-modal-body { padding: 0.9rem 1rem 1rem; }
body.floating-modal-open { overflow: hidden; }

.floating-target-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}
.floating-target-label {
  font-size: 0.85rem;
  color: var(--muted);
}
.floating-target-pill {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  background: rgba(120, 170, 100, 0.16);
  border: 1px solid rgba(120, 170, 100, 0.4);
  overflow: hidden;
  max-width: 100%;
}
.floating-target-pill-body {
  background: transparent;
  border: none;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  color: var(--primary-dark, #4a7c2c);
  font: inherit;
  font-size: 0.85rem;
  display: inline-flex;
  gap: 0.35rem;
  align-items: baseline;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.floating-target-pill-body:hover { background: rgba(120, 170, 100, 0.22); }
.floating-target-pill-type {
  text-transform: lowercase;
  opacity: 0.7;
  font-size: 0.78rem;
}
.floating-target-pill-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floating-target-pill-x {
  background: transparent;
  border: none;
  border-left: 1px solid rgba(120, 170, 100, 0.4);
  padding: 0 0.55rem;
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
}
.floating-target-pill-x:hover {
  background: rgba(220, 120, 120, 0.18);
  color: #aa3333;
}

.floating-inferred-row[hidden] { display: none; }
.floating-inferred-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}
.floating-inferred-label {
  font-size: 0.78rem;
  color: var(--muted);
  padding-top: 0.15rem;
  flex-shrink: 0;
}
.floating-inferred-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.floating-inferred-chips .chip {
  font-size: 0.72rem;
  padding: 0.08rem 0.5rem;
  opacity: 0.85;
}
.floating-inferred-chips .removable-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-right: 0.15rem;
}
.floating-inferred-chips .removable-chip-x {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--muted);
  padding: 0 0.3rem;
  border-radius: 999px;
}
.floating-inferred-chips .removable-chip-x:hover {
  background: rgba(220, 120, 120, 0.22);
  color: #aa3333;
}
.inferred-add-btn {
  font-size: 0.72rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--primary-dark, #4a7c2c);
  cursor: pointer;
}
.inferred-add-btn:hover {
  background: rgba(120, 170, 100, 0.18);
  border-color: rgba(120, 170, 100, 0.5);
}

.floating-target-picker[hidden] { display: none; }
.floating-target-picker {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.6rem;
}

/* Mode tabs (Note / Chat) at the top of the floating modal. */
.floating-modal-tabs {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--bg);
  border-radius: 999px;
  padding: 0.2rem;
}
.floating-mode-tab {
  background: transparent;
  border: none;
  padding: 0.3rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
}
.floating-mode-tab.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.floating-mode-tab:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.floating-modal-body[hidden] { display: none; }

/* Chat panel layout. */
.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  max-height: 70vh;
}
.chat-stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.4rem 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 200px;
}
.chat-empty {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  margin: 1.2rem 0.5rem;
}
.chat-msg {
  max-width: 88%;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  line-height: 1.4;
  font-size: 0.93rem;
}
.chat-msg-user {
  align-self: flex-end;
  background: rgba(120, 170, 100, 0.20);
  border: 1px solid rgba(120, 170, 100, 0.35);
}
.chat-msg-assistant {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
}
.chat-msg-body { white-space: pre-wrap; }
.chat-msg-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.chat-msg-photo img {
  width: 84px; height: 84px; object-fit: cover; border-radius: 6px;
  display: block;
}
.chat-tool-calls {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
  cursor: pointer;
}
.chat-tool-calls summary { user-select: none; }
.chat-tool-detail {
  margin: 0.3rem 0 0;
  padding: 0.35rem 0.5rem;
  background: var(--card);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-all;
}

/* "Thinking…" three-dot indicator. */
.chat-msg-thinking {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.6rem 0.85rem;
}
.chat-thinking-dot {
  width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: var(--muted);
  opacity: 0.6;
  animation: chat-pulse 1.0s infinite ease-in-out;
}
.chat-thinking-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-thinking-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes chat-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* Photo-attach thumb strip. */
.chat-thumbs {
  display: flex;
  gap: 0.35rem;
  margin: 0.4rem 0 0;
  flex-wrap: wrap;
}
.chat-thumbs[hidden] { display: none; }
.chat-thumb {
  position: relative;
  display: inline-block;
}
.chat-thumb img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--border);
  display: block;
}
.chat-thumb-x {
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
}
.chat-thumb-x:hover { background: rgba(220, 120, 120, 0.22); color: #aa3333; }

/* Chat input row. */
.chat-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
  margin-top: 0.4rem;
}
.chat-input {
  flex: 1 1 auto;
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  max-height: 8rem;
}
.chat-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.chat-input-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.chat-photo-pick {
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem !important;
}
.chat-status {
  margin-top: 0.3rem;
  min-height: 1.1em;
}
.chat-status.error { color: #aa3333; }
.floating-target-picker-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.floating-target-picker-label select {
  font: inherit;
  padding: 0.4rem;
}
.floating-target-picker-actions {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

/* Species type / primary-function chips */
.species-kind-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0.4rem 0 0.8rem;
}
.chip.type-species-type.type-plant   { background: rgba(120, 170, 100, 0.18); color: #4a7c2c; border-color: rgba(120, 170, 100, 0.4); }
.chip.type-species-type.type-animal  { background: rgba(180, 130, 200, 0.18); color: #6c3784; border-color: rgba(180, 130, 200, 0.4); }
.chip.type-species-fn.fn-edible      { background: rgba(220, 180, 110, 0.18); color: #8a5a17; border-color: rgba(220, 180, 110, 0.4); }
.chip.type-species-fn.fn-ornamental  { background: rgba(220, 130, 200, 0.18); color: #8a3473; border-color: rgba(220, 130, 200, 0.4); }
.chip.type-species-fn.fn-support     { background: rgba(120, 160, 220, 0.18); color: #335599; border-color: rgba(120, 160, 220, 0.4); }
.chip.type-species-fn.fn-weed        { background: rgba(160, 130, 100, 0.18); color: #6a4a26; border-color: rgba(160, 130, 100, 0.4); }
.chip.type-species-fn.fn-beneficial  { background: rgba(120, 200, 160, 0.22); color: #266b55; border-color: rgba(120, 200, 160, 0.45); }
.chip.type-species-fn.fn-pest        { background: rgba(220, 120, 120, 0.20); color: #a33333; border-color: rgba(220, 120, 120, 0.45); }

/* =====================================================================
   Layout mode — full-viewport plant-positioning editor.
   ===================================================================== */
.layout-mode {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg, #fff);
  z-index: 1000;
  overflow: hidden;
}

/* Top bar */
.layout-topbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  min-height: 48px;
}
.layout-back {
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--text);
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
}
.layout-back:hover { background: var(--border); }
.layout-title {
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
.layout-selection {
  flex: 1 1 auto;
  font-size: 0.9rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.5rem;
}
.layout-selection-empty { color: var(--muted); font-style: italic; }
.layout-selection-hint { color: var(--muted); font-size: 0.8rem; margin-left: 0.4rem; }
.layout-selection-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 1.4rem;
  line-height: 1;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.layout-selection-glyph svg { display: block; }

/* Canvas wrapper — flexes to fill remaining space */
.layout-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.layout-canvas-rotator {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.25s ease;
  transform-origin: center center;
}
.layout-canvas-svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* The big invisible tap target inside the rect — catches "place here" taps */
.canvas-tap-target {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}

/* Compass mini in layout mode — fixed position, counter-rotates */
.layout-compass {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 56px;
  height: 56px;
  pointer-events: none;
  transition: transform 0.25s ease;
}

/* Plant icons in layout mode — extend base styles with selection/ghost */
.layout-mode .plant-icon { cursor: pointer; }
.layout-mode .plant-icon.selected .plant-icon-bg {
  fill: rgba(255, 200, 80, 0.6);
  stroke: #b87a18;
  stroke-width: 0.12;
}
.layout-mode .plant-icon.ghost { opacity: 0.35; }
/* Physical-state styling on the canvas. Planted = default solid background.
   Unplanted = dashed border + faded fill (it's a plan, not a reality).
   Idea = dotted border + even more faded (more speculative). */
.layout-mode .plant-icon-status-unplanted .plant-icon-bg {
  stroke: var(--muted, #888);
  stroke-width: 0.06;
  stroke-dasharray: 0.18 0.10;
  fill-opacity: 0.55;
}
.layout-mode .plant-icon-status-idea .plant-icon-bg {
  stroke: var(--muted, #888);
  stroke-width: 0.05;
  stroke-dasharray: 0.04 0.08;
  fill-opacity: 0.35;
}
.layout-mode .plant-icon-status-idea .plant-icon-emoji,
.layout-mode .plant-icon-status-idea use {
  opacity: 0.55;
}
/* Mirror the visual treatment in the inventory tray so users can predict
   what a placed icon will look like. */
.inv-tile-status-unplanted { border-style: dashed; }
.inv-tile-status-idea { border-style: dotted; opacity: 0.85; }
.inv-tile-status-unplanted .inv-tile-glyph,
.inv-tile-status-idea .inv-tile-glyph { filter: saturate(0.7); }

/* Layout-mode tray tabs (Inventory / Unplanted / Ideas). Switches which
   pool of tiles is visible. */
.layout-tray-tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem 0;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.tray-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  white-space: nowrap;
}
.tray-tab.active {
  color: var(--text);
  background: var(--card);
  border-color: var(--border);
  font-weight: 600;
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}
.tray-tab-count {
  background: var(--bg, #f6f6f4);
  color: var(--muted);
  font-size: 0.7rem;
  padding: 0 0.35rem;
  border-radius: 8px;
  font-weight: 600;
}
.tray-tab.active .tray-tab-count {
  background: rgba(90, 140, 60, 0.18);
  color: var(--primary, #5a8c3c);
}

/* Pool tiles get a source-area marker so the user knows where the plant is
   currently attached (and that placing here will MOVE it). */
.inv-tile-source {
  display: block;
  font-size: 0.65rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.1rem;
}

/* Wrap an inventory tile + a small detach button. The detach button shows
   only on tiles whose status is unplanted/idea (status='planted' plants
   don't detach — moving them requires the existing /plants/{id}/move flow). */
.inv-tile-wrap {
  position: relative;
  display: inline-flex;
}
.inv-tile-detach {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.inv-tile-detach:hover {
  color: var(--text);
  border-color: var(--primary, #5a8c3c);
}

/* ============================================================
   Unplanted-plants page (/unplanted)
   ============================================================ */
.unplanted-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0.8rem 0 1rem;
  border-bottom: 1px solid var(--border);
}
.unplanted-tab {
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 600;
}
.unplanted-tab.active {
  color: var(--text);
  border-bottom-color: var(--primary, #5a8c3c);
}
.unplanted-tab-count {
  display: inline-block;
  background: var(--bg, #f6f6f4);
  color: var(--muted);
  padding: 0 0.4rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.3rem;
}
.unplanted-quick-add { background: var(--bg, #f9f9f7); padding: 1rem; border-radius: 8px; }
.unplanted-add-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem 0.8rem;
  align-items: end;
}
.unplanted-add-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); }
.unplanted-add-form input,
.unplanted-add-form select {
  font-size: 0.95rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--card);
  color: var(--text);
}
.unplanted-add-form button[type="submit"] { align-self: end; }

.unplanted-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.6rem;
}
.unplanted-card {
  padding: 0.7rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.unplanted-card-status-unplanted { border-style: dashed; }
.unplanted-card-status-idea { border-style: dotted; opacity: 0.92; }
.unplanted-card-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}
.unplanted-card-qty {
  font-weight: 700;
  font-size: 1rem;
  background: rgba(255, 220, 120, 0.6);
  padding: 0.05rem 0.4rem;
  border-radius: 8px;
  color: #4a3a08;
}
.unplanted-card-name { font-size: 0.95rem; }
.unplanted-card-area { font-size: 0.8rem; color: var(--muted); margin-left: auto; }
.unplanted-card-area a { color: var(--primary, #5a8c3c); }
.unplanted-card-notes { font-size: 0.8rem; font-style: italic; }
.unplanted-card-actions { display: flex; gap: 0.4rem; }

/* Mark-as-planted dialog */
.mark-planted-dialog {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  max-width: 460px;
  width: 90vw;
  background: var(--card);
  color: var(--text);
}
.mark-planted-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.mark-planted-form { padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.mark-planted-form h3 { margin: 0; }
.mark-planted-tabs { display: flex; gap: 1rem; flex-wrap: wrap; }
.mark-planted-tabs label { display: flex; gap: 0.4rem; align-items: center; font-size: 0.9rem; cursor: pointer; }
.mark-planted-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); }
.mark-planted-form select,
.mark-planted-form input[type="text"] {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg, #fff);
}
.mark-planted-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; }

/* Inventory tray */
.layout-tray {
  flex: 0 0 auto;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 40vh;
}
.layout-tray-tiles {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
/* The pool tabs toggle visibility via the `hidden` attribute. Force-override
   the display: flex above so hidden pools really go away. */
.layout-tray-tiles[hidden] { display: none !important; }
.inv-tile {
  flex: 0 0 auto;
  min-width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.78rem;
  text-align: center;
  position: relative;
  min-height: 76px;
}
.inv-tile:hover { border-color: var(--primary, #5a8c3c); }
.inv-tile.selected {
  border-color: #b87a18;
  background: rgba(255, 200, 80, 0.18);
  box-shadow: 0 0 0 2px rgba(255, 200, 80, 0.4);
}
.inv-tile-glyph {
  font-size: 1.6rem;
  line-height: 1;
}
.inv-tile-glyph svg { display: inline-block; }
.inv-tile-count {
  position: absolute;
  top: 4px;
  right: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  color: #4a3a08;
  background: rgba(255, 220, 120, 0.9);
  padding: 0.05rem 0.3rem;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
}
.inv-tile-name {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.15;
}
.inv-tile-name em { font-style: italic; color: var(--text); }
.inv-tile-empty {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
  padding: 1rem;
}
/* Empty inventory tile — dim but still tappable as a destination for sending
   placed icons back. Selecting one is a no-op (handled in JS). */
.inv-tile.empty {
  opacity: 0.45;
  background: transparent;
  border-style: dashed;
}
.inv-tile.empty:hover { opacity: 0.75; border-color: var(--primary, #5a8c3c); }
.inv-tile.empty .inv-tile-count {
  background: transparent;
  color: var(--muted);
}
/* Selection-badge in the top bar (e.g. "×4" for the next group of 4 onions). */
.layout-selection-badge {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.05rem 0.35rem;
  margin-left: 0.25rem;
  background: rgba(255, 220, 120, 0.85);
  color: #4a3a08;
  border-radius: 8px;
}

/* Tools row */
.layout-tools {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.area-sketch-edit-layout {
  margin-top: 0.4rem;
  display: inline-block;
}