/*
 * harvest.css — Harvest tab
 * Live Smartsheet feed table + WIP placeholder fallback (teal/green accent).
 */

/* ── WIP placeholder (shown when PROXY_URL is unset or harvest.js fails) ── */
#tab-harvest .wip-icon-ring {
  background: rgba(45,212,191,0.10);
  border: 1px solid rgba(45,212,191,0.28);
}
#tab-harvest .wip-badge {
  background: rgba(45,212,191,0.10);
  border: 1px solid rgba(45,212,191,0.30);
  color: rgba(45,212,191,0.95);
}
#tab-harvest .wip-dot { background: rgba(45,212,191,0.95); }

/* ── Header ─────────────────────────────────────────────────────────────── */
/* ── Development-paused notice ────────────────────────────────────────────── */
.harvest-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-left: 3px solid rgba(251, 191, 36, 0.9);
  background: linear-gradient(90deg, rgba(251,191,36,0.12) 0%, rgba(251,191,36,0.04) 60%, rgba(251,191,36,0.02) 100%);
  box-shadow: inset 0 0 24px rgba(251, 191, 36, 0.05);
}
.harvest-notice-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.4);
}
.harvest-notice-body { min-width: 0; }
.harvest-notice-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 14.5px;
  font-weight: 700;
  color: #fde68a;
  margin-bottom: 4px;
}
.harvest-notice-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fef3c7;
  background: rgba(251, 191, 36, 0.26);
  border: 1px solid rgba(251, 191, 36, 0.6);
  border-radius: 999px;
  padding: 3px 9px;
}
.harvest-notice-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(254, 215, 170, 0.9);
  max-width: 900px;
}
html[data-theme="light"] .harvest-notice {
  border-color: rgba(180, 83, 9, 0.32);
  border-left-color: rgba(180, 83, 9, 0.9);
  background: linear-gradient(90deg, rgba(180,83,9,0.12) 0%, rgba(180,83,9,0.04) 60%, rgba(180,83,9,0.02) 100%);
}
html[data-theme="light"] .harvest-notice-icon { color: #92400e; background: rgba(180,83,9,0.12); border-color: rgba(180,83,9,0.4); }
html[data-theme="light"] .harvest-notice-title { color: #78350f; }
html[data-theme="light"] .harvest-notice-tag { color: #78350f; background: rgba(180,83,9,0.18); border-color: rgba(180,83,9,0.55); }
html[data-theme="light"] .harvest-notice-text { color: rgba(120, 53, 15, 0.85); }

.harvest-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.harvest-source {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Tools row (search + icon buttons) ──────────────────────────────────── */
.harvest-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.harvest-search {
  background: var(--glass-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 22px;
  width: 240px;
  outline: none;
  transition: border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.harvest-search::placeholder {
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.harvest-search:focus {
  border-color: rgba(45,212,191,0.55);
  background: rgba(45,212,191,0.06);
  box-shadow: 0 0 12px rgba(45,212,191,0.15);
}

.harvest-iconbtn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  transition: all var(--t-base) var(--ease-out);
}
.harvest-iconbtn:hover {
  border-color: rgba(45,212,191,0.40);
  color: rgba(45,212,191,0.95);
  transform: translateY(-1px);
}
.harvest-iconbtn:active { transform: translateY(0); }

/* ── Submit button — the primary action on the harvest tab ─────────────── */
/* Filled cyan pill with a + icon and text label. Sits next to the
   icon-only tools but reads as the obvious primary CTA. */
.harvest-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 12px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.92), rgba(56, 189, 248, 0.78));
  border: 1px solid rgba(56, 189, 248, 0.65);
  border-radius: 18px;
  color: #04050f;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.20),
    0 4px 14px rgba(56, 189, 248, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.harvest-submit-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(99, 209, 252, 0.98), rgba(56, 189, 248, 0.88));
  box-shadow:
    0 0 0 1px rgba(99, 209, 252, 0.40),
    0 6px 22px rgba(56, 189, 248, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.harvest-submit-btn:active { transform: translateY(0); }
.harvest-submit-btn:focus-visible {
  outline: 2px solid rgba(99, 209, 252, 0.85);
  outline-offset: 2px;
}
.harvest-submit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(4, 5, 15, 0.18);
  color: #04050f;
}
@media (prefers-reduced-motion: reduce) {
  .harvest-submit-btn,
  .harvest-submit-btn:hover { transform: none; transition: background 0.18s ease; }
}
@media (max-width: 768px) {
  .harvest-submit-btn { padding: 0 12px; }
  .harvest-submit-label { display: none; }
  .harvest-submit-icon { width: 20px; height: 20px; }
}

/* Cyan variant — used for the calculator toggle to distinguish from the
   teal-accent harvest tools (refresh, density, etc). */
.harvest-iconbtn-accent {
  color: rgba(56,189,248,0.85);
  border-color: rgba(56,189,248,0.30);
}
.harvest-iconbtn-accent:hover {
  border-color: rgba(56,189,248,0.55);
  color: rgba(56,189,248,1);
  box-shadow: 0 0 18px rgba(56,189,248,0.18);
}
.harvest-iconbtn-accent.is-active {
  background: rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.60);
  color: rgba(56,189,248,1);
  box-shadow: inset 0 0 12px rgba(56,189,248,0.18), 0 0 18px rgba(56,189,248,0.16);
}

/* ── Calculator side panel ──────────────────────────────────────────────── */
.harvest-calc {
  position: fixed;
  top: 132px;
  right: 24px;
  width: 380px;
  max-height: calc(100vh - 168px);
  display: flex;
  flex-direction: column;
  background: rgba(8, 16, 24, 0.94);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(56, 189, 248, 0.08) inset,
    0 0 60px rgba(56, 189, 248, 0.10);
  padding: 18px 18px 16px;
  z-index: 90;
  opacity: 0;
  transform: translateX(calc(100% + 32px));
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
  pointer-events: none;
}
.harvest-calc.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.harvest-calc-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.harvest-calc-eyebrow {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(56, 189, 248, 0.80);
  margin-bottom: 4px;
}
.harvest-calc-title {
  font-family: var(--font-display, 'Bebas Neue', 'Space Grotesk', sans-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.05;
}
.harvest-calc-close {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.harvest-calc-close:hover {
  background: rgba(251, 113, 133, 0.10);
  border-color: rgba(251, 113, 133, 0.40);
  color: var(--accent-rose, #fb7185);
  transform: rotate(90deg);
}
.harvest-calc-search {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 10px;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  flex-shrink: 0;
  margin-bottom: 14px;
}
.harvest-calc-search:focus {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.04);
}
.harvest-calc-search::placeholder { color: var(--text-dim); }

/* ── Suggestion dropdown (autocomplete) ──────────────────────────────── */
.harvest-calc-suggestions {
  flex-shrink: 0;
  margin-bottom: 12px;
}
.harvest-calc-suggestions:empty { display: none; }
.harvest-calc-sugg-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.harvest-calc-sugg-list {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.20) transparent;
}
.harvest-calc-sugg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.harvest-calc-sugg-row:last-child { border-bottom: none; }
.harvest-calc-sugg-row:hover {
  background: rgba(56, 189, 248, 0.08);
  color: var(--text-primary);
}
.harvest-calc-sugg-row.is-first {
  background: rgba(56, 189, 248, 0.04);
}
.harvest-calc-sugg-icon {
  flex-shrink: 0;
  color: var(--text-dim);
  opacity: 0.6;
}
.harvest-calc-sugg-row:hover .harvest-calc-sugg-icon {
  color: rgba(56, 189, 248, 0.90);
  opacity: 1;
}
.harvest-calc-sugg-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.harvest-calc-sugg-typed { color: var(--text-dim); }
.harvest-calc-sugg-rest strong { color: var(--text-primary); font-weight: 600; }
.harvest-calc-sugg-row:hover .harvest-calc-sugg-rest strong {
  color: rgba(56, 189, 248, 0.98);
}
/* Style native ::selection inside the search input so the auto-filled
   completion shows up clearly as "selected, ready to be overwritten." */
.harvest-calc-search::selection {
  background: rgba(56, 189, 248, 0.32);
  color: var(--text-primary);
}

.harvest-calc-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,0.20) transparent;
}
.harvest-calc-body::-webkit-scrollbar       { width: 4px; }
.harvest-calc-body::-webkit-scrollbar-track { background: transparent; }
.harvest-calc-body::-webkit-scrollbar-thumb { background: rgba(56,189,248,0.20); border-radius: 4px; }

.harvest-calc-hint,
.harvest-calc-empty {
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  background: rgba(56, 189, 248, 0.04);
  border: 1px dashed rgba(56, 189, 248, 0.18);
  border-radius: 10px;
}
.harvest-calc-q {
  color: rgba(56, 189, 248, 0.95);
  font-weight: 600;
}
.harvest-calc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

/* "Show N empty" pill — appears in the meta row when zero-only cards are
   present. Cyan glass to match the calculator accent; pressed = filled. */
.harvest-calc-showall {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}
.harvest-calc-showall:hover {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.40);
  color: rgba(56, 189, 248, 0.95);
  transform: translateY(-1px);
}
.harvest-calc-showall[aria-pressed="true"] {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.50);
  color: rgba(56, 189, 248, 0.98);
}
.harvest-calc-showall-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .harvest-calc-showall,
  .harvest-calc-showall:hover { transition: none; transform: none; }
}
.harvest-calc-meta-num {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: rgba(56, 189, 248, 0.95);
  letter-spacing: 0;
}
.harvest-calc-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(56, 189, 248, 0.10);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: hv-calc-card-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--stagger, 0) * 40ms);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.harvest-calc-card:hover {
  border-color: rgba(56, 189, 248, 0.28);
  background: rgba(56, 189, 248, 0.04);
}
@keyframes hv-calc-card-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.harvest-calc-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.harvest-calc-card-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.harvest-calc-card-n {
  font-size: 10px;
  font-family: var(--font-body);
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.harvest-calc-card-avg {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(56, 189, 248, 0.98);
}

/* ── Metric strip: Total · Avg · Lifetime ──────────────────────────────── */
.harvest-calc-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  padding-top: 2px;
}
.harvest-calc-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.harvest-calc-metric-lbl {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.harvest-calc-metric-val {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(56, 189, 248, 0.98);
}
/* Total is the headline number — bumped up + slightly punchier glow. */
.harvest-calc-metric-total .harvest-calc-metric-val {
  font-size: 30px;
  color: rgba(125, 211, 252, 1);
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.30);
}
/* Lifetime is a comparison stat — quieter, with violet tint so the eye
   can tell it apart from the per-harvest numbers at a glance. */
.harvest-calc-metric-lifetime .harvest-calc-metric-val {
  font-size: 18px;
  color: rgba(167, 139, 250, 0.95);
}
.harvest-calc-metric-lifetime .harvest-calc-metric-lbl {
  color: rgba(167, 139, 250, 0.85);
}

/* Priority cards (Smalls / A+ Flower / Flower / T-B / Trim / Total) get a
   subtle cyan stripe on the left so they stand out in the result list. */
.harvest-calc-card.is-priority {
  border-color: rgba(56, 189, 248, 0.30);
  background: linear-gradient(90deg,
    rgba(56, 189, 248, 0.10) 0%,
    rgba(56, 189, 248, 0.04) 22%,
    rgba(255, 255, 255, 0.025) 100%);
  border-left: 3px solid rgba(56, 189, 248, 0.85);
  padding-left: 12px;
}
.harvest-calc-card.is-priority .harvest-calc-card-title {
  color: rgba(125, 211, 252, 1);
}

/* ── Harvest filter dropdown ────────────────────────────────────────────
   Primary control above the cards when a search spans multiple harvests.
   Click the button → menu drops with one row per harvest. Picking re-
   computes the totals + averages for that scope only. */
.harvest-calc-dd-wrap {
  position: relative;
  margin: 4px 0 10px;
}
.harvest-calc-dd {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.10) 0%, rgba(56, 189, 248, 0.04) 100%);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.harvest-calc-dd:hover {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.16) 0%, rgba(56, 189, 248, 0.08) 100%);
  border-color: rgba(56, 189, 248, 0.70);
}
.harvest-calc-dd[aria-expanded="true"] {
  border-color: rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.10);
}
.harvest-calc-dd.is-narrow {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0.07) 100%);
}
.harvest-calc-dd-lead {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.harvest-calc-dd-val {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(125, 211, 252, 1);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.harvest-calc-dd-n {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0;
  flex-shrink: 0;
}
.harvest-calc-dd-caret {
  color: rgba(125, 211, 252, 1);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.harvest-calc-dd[aria-expanded="true"] .harvest-calc-dd-caret { transform: rotate(180deg); }

.harvest-calc-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  padding: 6px;
  background: linear-gradient(180deg, rgba(20, 24, 48, 0.96) 0%, rgba(8, 10, 28, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.40);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.60),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: harvest-dd-in 0.18s ease both;
  max-height: 60vh;
  overflow-y: auto;
}
@keyframes harvest-dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.harvest-calc-hopt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-body);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.harvest-calc-hopt:hover {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.35);
}
.harvest-calc-hopt.is-on {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.60);
}
.harvest-calc-hopt-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.harvest-calc-hopt.is-on .harvest-calc-hopt-dot {
  background: rgba(56, 189, 248, 1);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.85);
}
.harvest-calc-hopt-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.harvest-calc-hopt-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.harvest-calc-hopt.is-on .harvest-calc-hopt-lbl { color: rgba(125, 211, 252, 1); }
.harvest-calc-hopt-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.harvest-calc-hopt-n {
  margin-left: auto;
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0;
  flex-shrink: 0;
}
.harvest-calc-hopt.is-on .harvest-calc-hopt-n { color: rgba(125, 211, 252, 1); }

@media (prefers-reduced-motion: reduce) {
  .harvest-calc-dd, .harvest-calc-hopt,
  .harvest-calc-dd-menu, .harvest-calc-dd-caret { transition: none; animation: none; }
}

/* "Strain · lifetime N" pill in the meta row — signals lifetime stats are
   active and shows the strain we expanded into. Violet to match the
   lifetime metric tint. */
.harvest-calc-scope-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 3px 9px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(167, 139, 250, 0.95);
  background: rgba(167, 139, 250, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.40);
  border-radius: 999px;
  cursor: help;
}
.harvest-calc-scope-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 1);
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.75);
}
.harvest-calc-show-formula {
  align-self: flex-start;
  background: transparent;
  border: none;
  padding: 4px 0 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--t-fast) var(--ease-out);
}
.harvest-calc-show-formula svg { transition: transform var(--t-fast) var(--ease-out); }
.harvest-calc-show-formula:hover { color: rgba(56, 189, 248, 0.95); }
.harvest-calc-show-formula.is-open { color: rgba(56, 189, 248, 0.95); }
.harvest-calc-show-formula.is-open svg { transform: rotate(180deg); }
.harvest-calc-formula {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 2px solid rgba(56, 189, 248, 0.45);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
  word-break: break-word;
  animation: hv-calc-card-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* `display: flex` above overrides the HTML `hidden` attribute (which is
   just UA `display: none`). Re-assert hidden with class+attr specificity. */
.harvest-calc-formula[hidden] { display: none; }
.harvest-calc-formula-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.harvest-calc-formula-step-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(56, 189, 248, 0.75);
  font-weight: 600;
}
.harvest-calc-formula-step-math {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.harvest-calc-formula-step-math strong {
  color: var(--text-primary);
  font-weight: 700;
}
.harvest-calc-formula-final {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(56, 189, 248, 0.95);
  font-weight: 500;
}
.harvest-calc-formula-final strong {
  color: rgba(56, 189, 248, 1);
  font-weight: 700;
  font-size: 14px;
}
.harvest-calc-skipped {
  font-size: 10px;
  color: var(--text-dim);
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  line-height: 1.55;
}
@media (max-width: 768px) {
  .harvest-calc {
    width: calc(100vw - 32px);
    right: 16px;
    top: 96px;
    max-height: calc(100vh - 120px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .harvest-calc { transition: opacity 0.18s ease; }
  .harvest-calc-card,
  .harvest-calc-formula { animation: none; }
  .harvest-calc-close:hover { transform: none; }
}

/* ── Error bar ──────────────────────────────────────────────────────────── */
.harvest-err {
  background: rgba(251,113,133,0.10);
  border: 1px solid rgba(251,113,133,0.35);
  color: rgba(251,113,133,0.95);
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* "N empty columns hidden" note above the table — appears only when the
   per-page empty-column prune actually drops something. Cyan-tinted glass
   pill so it reads as a status, not an error. */
.harvest-col-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px 0;
  padding: 4px 10px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(56, 189, 248, 0.92);
  background: rgba(56, 189, 248, 0.07);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 999px;
  cursor: help;
}
.harvest-col-note::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* ── Loading + empty states ─────────────────────────────────────────────── */
.harvest-loading {
  background: var(--glass-1);
  border: 1px dashed var(--glass-border);
  border-radius: 14px;
  padding: 42px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.harvest-empty {
  margin-top: 18px;
  padding: 28px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  text-align: center;
}
.harvest-empty-title {
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.harvest-empty-body {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.harvest-empty-body code {
  background: rgba(45,212,191,0.10);
  border: 1px solid rgba(45,212,191,0.25);
  color: rgba(45,212,191,0.95);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Menlo','Consolas',monospace;
  font-size: 11px;
}

/* ── Sticky horizontal scrollbar overlay ──────────────────────────────────
   A fixed-position thin strip pinned to the viewport bottom that mirrors
   the harvest table's scrollLeft both ways. Lets the user grab the bar
   from anywhere without scrolling down to the table's actual bottom. */
/* Full-viewport-width strip pinned to the bottom — mirrors the rooms tab.
   left: var(--side-nav-w) so the bar doesn't slide under the open sidebar;
   flips to left: 0 when body.sidebar-collapsed is set. */
.harvest-sticky-scrollbar {
  position: fixed;
  bottom: 0;
  left: var(--side-nav-w, 0px);
  right: 0;
  height: 18px;
  z-index: 9000;
  overflow-x: scroll;
  overflow-y: hidden;
  background: rgba(8, 16, 24, 0.95);
  border-top: 1px solid rgba(45, 212, 191, 0.45);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45);
  transition: left 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
body.sidebar-collapsed .harvest-sticky-scrollbar { left: 0; }
.harvest-sticky-scrollbar::-webkit-scrollbar       { height: 14px; -webkit-appearance: none; }
.harvest-sticky-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.35); }
.harvest-sticky-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(45, 212, 191, 0.85);
  border-radius: 4px;
  border: 2px solid rgba(8, 16, 24, 0.95);
  background-clip: padding-box;
  min-width: 60px;
}
.harvest-sticky-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 212, 191, 1);
  background-clip: padding-box;
}
.harvest-sticky-scrollbar-inner {
  height: 1px;            /* zero-height row that just provides scrollWidth */
  pointer-events: none;
}
html[data-theme="light"] .harvest-sticky-scrollbar {
  background: rgba(248, 250, 254, 0.95);
  border-top-color: rgba(13, 148, 136, 0.55);
}
html[data-theme="light"] .harvest-sticky-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .harvest-sticky-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(13, 148, 136, 0.85);
  border-color: rgba(248, 250, 254, 0.95);
}

/* ── Table wrap (horizontal scroll for wide Smartsheets) ────────────────── */
.harvest-table-wrap {
  /* Full-page table — no max-height, no internal vertical scroll. Page
     scroll handles the rows naturally. Horizontal scroll lives in the
     fixed .harvest-sticky-scrollbar overlay so users never have to scroll
     to the foot of a 5000-row table to find the side-to-side handle. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border: 1px solid rgba(45, 212, 191, 0.06);
  border-radius: 8px;
}

/* Harvest-specific overrides on top of .data-table */
.harvest-table {
  /* Auto-layout would collapse columns that have lots of empty cells; fixed
     min-widths keep headers readable even when most rows are blank. */
  table-layout: auto;
}
.harvest-table th {
  /* Sticky inside the bounded wrap so column headers stay visible while
     scrolling rows. Solid bg + z-index so they paint over the rows below. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(8, 16, 24, 0.96);
  background-image: linear-gradient(rgba(45,212,191,0.04), rgba(45,212,191,0.04));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(45,212,191,0.20);
  min-width: 120px;
  white-space: nowrap;
}
.harvest-table th:hover {
  background: rgba(45,212,191,0.10);
  color: rgba(45,212,191,0.95);
}
.harvest-table td {
  min-width: 120px;
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.harvest-table .hv-empty {
  color: var(--text-dim);
  opacity: 0.55;
}

/* ── Hierarchy: parent rows, child rows, chevrons ──────────────────────── */
.harvest-table .hv-parent {
  background: rgba(45,212,191,0.05);
}
.harvest-table .hv-parent:hover {
  background: rgba(45,212,191,0.09);
}
.harvest-table .hv-parent .hv-first-val {
  color: rgba(45,212,191,0.95);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.harvest-table .hv-child {
  background: transparent;
}
.harvest-table .hv-child .hv-first-val {
  color: var(--text-secondary);
  font-family: 'Menlo','Consolas',monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.harvest-table .hv-first {
  position: relative;
  white-space: nowrap;
}
.harvest-table .hv-first .hv-first-val {
  display: inline-block;
  vertical-align: middle;
}

.hv-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: rgba(45,212,191,0.85);
  cursor: pointer;
  vertical-align: middle;
  transition: transform var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
  outline: none;
  padding: 0;
}
.hv-chevron:hover {
  background: rgba(45,212,191,0.12);
  border-color: rgba(45,212,191,0.30);
}
.hv-chevron.open {
  transform: rotate(90deg);
}
.hv-chevron-spacer {
  display: inline-block;
  width: 18px;
  margin-right: 6px;
  vertical-align: middle;
}

.hv-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  background: rgba(45,212,191,0.12);
  border: 1px solid rgba(45,212,191,0.30);
  border-radius: 10px;
  color: rgba(45,212,191,0.95);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
  font-family: var(--font-body);
}
.harvest-table.is-tight th,
.harvest-table.is-tight td {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 11px;
}

/* ── Recent-date filter pill group ──────────────────────────────────────── */
.harvest-recent {
  display: inline-flex;
  gap: 0;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 3px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.harvest-pill {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 6px 13px;
  border-radius: 18px;
  cursor: pointer;
  transition: all var(--t-base) var(--ease-out);
  outline: none;
  white-space: nowrap;
}
.harvest-pill:hover {
  color: var(--text-secondary);
}
.harvest-pill.active {
  background: rgba(45,212,191,0.12);
  border: 1px solid rgba(45,212,191,0.35);
  color: rgba(45,212,191,0.95);
  box-shadow: 0 0 10px rgba(45,212,191,0.15);
}

/* ── "Hide empty" toggle ────────────────────────────────────────────────── */
.harvest-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--glass-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 7px 14px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
  transition: all var(--t-base) var(--ease-out);
}
.harvest-toggle:hover {
  border-color: rgba(45,212,191,0.40);
  color: rgba(45,212,191,0.95);
}
.harvest-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(45,212,191,0.45);
  border-radius: 4px;
  background: transparent;
  margin: 0;
  cursor: pointer;
  position: relative;
  transition: all var(--t-base) var(--ease-out);
}
.harvest-toggle input[type="checkbox"]:checked {
  background: rgba(45,212,191,0.95);
  border-color: rgba(45,212,191,0.95);
}
.harvest-toggle input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3.5px; top: 0.5px;
  width: 4px; height: 8px;
  border: solid #04050f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Pager ─────────────────────────────────────────────────────────────── */
.harvest-pager {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.harvest-pager-info {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.harvest-pager-info strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.harvest-pager-ctrls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 4px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.harvest-pg-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  border-radius: 18px;
  cursor: pointer;
  outline: none;
  transition: all var(--t-base) var(--ease-out);
}
.harvest-pg-btn:hover:not([disabled]) {
  background: rgba(45,212,191,0.10);
  color: rgba(45,212,191,0.95);
}
.harvest-pg-btn[disabled] {
  opacity: 0.30;
  cursor: not-allowed;
}

.harvest-pg-pageno {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 0 8px;
}
.harvest-pg-pageno strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════════
   Harvest submission form — additions on top of the .ftest-* base shell
   reused from css/form.css. Only declares the harvest-specific bits + a few
   field helpers (textarea, select, grid, required marker) that aren't
   covered by the Rooms-form CSS.
   ════════════════════════════════════════════════════════════════════════════ */

.hvform-modal {
  /* The Rooms form scales to fit room/system selectors; the harvest form
     has none of that overhead so a narrower modal reads cleaner. */
  max-width: 760px;
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}

.hvform-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 18px 0;
  padding: 10px 14px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(251, 191, 36, 0.92);
}
.hvform-banner svg { flex-shrink: 0; margin-top: 1px; }
.hvform-banner strong { color: rgba(254, 215, 100, 1); font-weight: 600; }

.hvform-config { padding: 12px 18px 4px; }

.hvform-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 18px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.20) transparent;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hvform-body::-webkit-scrollbar       { width: 6px; }
.hvform-body::-webkit-scrollbar-track { background: transparent; }
.hvform-body::-webkit-scrollbar-thumb { background: rgba(56,189,248,0.20); border-radius: 4px; }

/* A grid of fields inside each section — 2 columns on desktop, 1 on phones */
.ftest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.ftest-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ftest-field-full { grid-column: 1 / -1; }
.ftest-field-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ftest-field-unit {
  font-weight: 500;
  color: rgba(56, 189, 248, 0.80);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 10px;
}
.ftest-required {
  color: rgba(251, 113, 133, 0.90);
  font-weight: 700;
  letter-spacing: 0;
}

/* Textarea + select variants — fall back to .ftest-input base in form.css */
.ftest-textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
  font-family: var(--font-body);
  padding: 10px 12px;
}
.ftest-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(56,189,248,0.7) 50%),
                    linear-gradient(135deg, rgba(56,189,248,0.7) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
  cursor: pointer;
}

/* Section header (title + description) — extending the existing .ftest-section
   docking from form.css with our title/description type. */
.ftest-section-title {
  font-family: var(--font-display, 'Bebas Neue', 'Space Grotesk', sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.1;
}
.ftest-section-desc {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
  margin: 4px 0 10px;
  line-height: 1.45;
}

/* Validation message box (red-tinted, shown when required fields are empty) */
.ftest-validation {
  flex: 1;
  padding: 8px 12px;
  background: rgba(251, 113, 133, 0.06);
  border: 1px solid rgba(251, 113, 133, 0.30);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(252, 165, 165, 0.95);
  line-height: 1.5;
}
.ftest-validation[hidden] { display: none; }

/* Footer (submit bar) */
.hvform-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hvform-submit {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(56, 189, 248, 0.98);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.hvform-submit:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.75);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.hvform-submit:active { transform: translateY(0); }
.hvform-submit.is-success {
  background: rgba(45, 212, 191, 0.20);
  border-color: rgba(45, 212, 191, 0.65);
  color: rgba(45, 212, 191, 1);
  pointer-events: none;
}

@media (max-width: 640px) {
  .ftest-grid { grid-template-columns: 1fr; }
  .hvform-modal { max-height: calc(100vh - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .hvform-submit:hover { transform: none; }
}

/* ── Light-theme overrides ──────────────────────────────────────────────
   Harvest tab is large (toolbar, table, calc side-panel, dropdown +
   popover). These overrides target the high-contrast surfaces that
   don't read on a light bg: the calc panel chrome, popover, sticky
   horizontal scrollbar overlay, and the cyan-tinted card backgrounds. */
html[data-theme="light"] .harvest-search {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}
html[data-theme="light"] .harvest-search:focus {
  border-color: rgba(2, 132, 199, 0.55);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.18);
}
html[data-theme="light"] .harvest-iconbtn {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 0, 0, 0.10);
  color: rgba(30, 41, 59, 0.85);
}
html[data-theme="light"] .harvest-iconbtn:hover {
  border-color: rgba(2, 132, 199, 0.45);
  color: rgba(2, 132, 199, 1);
}
html[data-theme="light"] .harvest-iconbtn-accent {
  color: rgba(2, 132, 199, 0.95);
  border-color: rgba(2, 132, 199, 0.35);
}

html[data-theme="light"] .harvest-calc {
  background: rgba(248, 250, 254, 0.96);
  border-color: rgba(2, 132, 199, 0.28);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(2, 132, 199, 0.08) inset,
    0 0 60px rgba(2, 132, 199, 0.10);
}
html[data-theme="light"] .harvest-calc-close {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .harvest-calc-search {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(2, 132, 199, 0.30);
  color: #0f172a;
}
html[data-theme="light"] .harvest-calc-search:focus {
  border-color: rgba(2, 132, 199, 0.65);
  background: rgba(255, 255, 255, 1);
}
html[data-theme="light"] .harvest-calc-body::-webkit-scrollbar-thumb {
  background: rgba(2, 132, 199, 0.30);
}

html[data-theme="light"] .harvest-calc-sugg-list,
html[data-theme="light"] .harvest-calc-suggestions {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .harvest-calc-sugg-row:hover {
  background: rgba(2, 132, 199, 0.10);
}
html[data-theme="light"] .harvest-calc-sugg-typed { color: rgba(30, 41, 59, 0.45); }
html[data-theme="light"] .harvest-calc-sugg-rest strong { color: #0f172a; }

html[data-theme="light"] .harvest-calc-card {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .harvest-calc-card.is-priority {
  background: linear-gradient(90deg,
    rgba(2, 132, 199, 0.10) 0%,
    rgba(2, 132, 199, 0.04) 22%,
    rgba(255, 255, 255, 0.85) 100%);
  border-color: rgba(2, 132, 199, 0.35);
}
html[data-theme="light"] .harvest-calc-card.is-priority .harvest-calc-card-title {
  color: rgba(2, 132, 199, 1);
}
html[data-theme="light"] .harvest-calc-metric-val {
  color: rgba(2, 132, 199, 1);
}
html[data-theme="light"] .harvest-calc-metric-total .harvest-calc-metric-val {
  color: rgba(2, 132, 199, 1);
  text-shadow: none;
}
html[data-theme="light"] .harvest-calc-metric-lifetime .harvest-calc-metric-val {
  color: rgba(79, 70, 229, 0.95);
}

html[data-theme="light"] .harvest-calc-dd {
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.10) 0%, rgba(2, 132, 199, 0.04) 100%);
  border-color: rgba(2, 132, 199, 0.45);
  color: #0f172a;
}
html[data-theme="light"] .harvest-calc-dd:hover {
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.16) 0%, rgba(2, 132, 199, 0.08) 100%);
  border-color: rgba(2, 132, 199, 0.70);
}
html[data-theme="light"] .harvest-calc-dd-val { color: rgba(2, 132, 199, 1); }
html[data-theme="light"] .harvest-calc-dd-n   { color: rgba(30, 41, 59, 0.55); }

html[data-theme="light"] .harvest-calc-dd-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(2, 132, 199, 0.40);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22),
              inset 0 1px 0 rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .harvest-calc-hopt {
  color: #0f172a;
}
html[data-theme="light"] .harvest-calc-hopt:hover {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.30);
}
html[data-theme="light"] .harvest-calc-hopt.is-on {
  background: rgba(2, 132, 199, 0.16);
  border-color: rgba(2, 132, 199, 0.55);
}
html[data-theme="light"] .harvest-calc-hopt.is-on .harvest-calc-hopt-lbl,
html[data-theme="light"] .harvest-calc-hopt.is-on .harvest-calc-hopt-n { color: rgba(2, 132, 199, 1); }

html[data-theme="light"] .harvest-calc-showall {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
  color: rgba(30, 41, 59, 0.78);
}
html[data-theme="light"] .harvest-calc-showall:hover {
  background: rgba(2, 132, 199, 0.10);
  border-color: rgba(2, 132, 199, 0.40);
  color: rgba(2, 132, 199, 1);
}

html[data-theme="light"] .harvest-col-note {
  color: rgba(2, 132, 199, 0.95);
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.30);
}

html[data-theme="light"] .rooms-sticky-scrollbar,
html[data-theme="light"] .harvest-sticky-scrollbar {
  background: rgba(255, 255, 255, 0.92);
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Light-mode: the sticky table header was hardcoded to a near-opaque dark
   navy (rgba(8,16,24,0.96)) — stayed black in light mode and read as a
   solid bar against the light page. Mirror with a near-white surface. */
html[data-theme="light"] .harvest-table th {
  background: rgba(248, 250, 254, 0.96);
  background-image: linear-gradient(rgba(2, 132, 199, 0.05), rgba(2, 132, 199, 0.05));
  border-bottom-color: rgba(2, 132, 199, 0.30);
  color: rgba(2, 132, 199, 0.95);
}
html[data-theme="light"] .harvest-table th:hover {
  background: rgba(2, 132, 199, 0.10);
  color: rgba(2, 132, 199, 1);
}
html[data-theme="light"] .harvest-table .hv-parent {
  background: rgba(2, 132, 199, 0.06);
}
html[data-theme="light"] .harvest-table .hv-parent:hover {
  background: rgba(2, 132, 199, 0.10);
}
html[data-theme="light"] .harvest-table-wrap {
  border-color: rgba(2, 132, 199, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════════
   HARVEST LOADING / UNDER-DEVELOPMENT GATE
   Locks the tab to the viewport (no scroll), blurs the table behind a glass
   overlay, shows an animated SVG loader + the dev-paused notice as a footnote.
   ═══════════════════════════════════════════════════════════════════════ */
#tab-harvest.hv-gated { height: 100vh; min-height: unset; overflow: hidden; }

.harvest-loadgate {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(56,189,248,0.10), transparent 60%),
    radial-gradient(120% 90% at 50% 100%, rgba(129,140,248,0.10), transparent 60%),
    rgba(6,10,18,0.52);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  animation: hlg-fade 0.4s ease both;
}
@keyframes hlg-fade { from { opacity: 0; } to { opacity: 1; } }

.hlg-card {
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 11px;
  padding: 34px 30px 26px;
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(56,189,248,0.07), transparent 55%),
    rgba(10,16,26,0.80);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.04);
}

.hlg-loader { position: relative; width: 110px; height: 110px; }
.hlg-svg { width: 100%; height: 100%; display: block; }
.hlg-ring  { transform-origin: 60px 60px; animation: hlg-spin 1.35s cubic-bezier(0.5,0.1,0.5,0.9) infinite; }
.hlg-ring2 { transform-origin: 60px 60px; animation: hlg-spin 2.1s linear infinite reverse; }
.hlg-dot   { animation: hlg-pulse 1.6s ease-in-out infinite; transform-origin: 60px 60px; }
@keyframes hlg-spin  { to { transform: rotate(360deg); } }
@keyframes hlg-pulse { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }

.hlg-orbit { position: absolute; inset: 0; animation: hlg-spin 3.4s linear infinite; }
.hlg-orbit span {
  position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px;
  border-radius: 50%; background: #7dd3fc; box-shadow: 0 0 8px rgba(125,211,252,0.7);
}
.hlg-orbit span:nth-child(1) { transform: rotate(0deg)   translateX(58px); }
.hlg-orbit span:nth-child(2) { transform: rotate(120deg) translateX(58px); background:#818cf8; }
.hlg-orbit span:nth-child(3) { transform: rotate(240deg) translateX(58px); background:#2dd4bf; }

.hlg-eyebrow {
  margin-top: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(125,211,252,0.85);
}
.hlg-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 22px; font-weight: 700; letter-spacing: 0.01em; color: #fff;
}
.hlg-sub { font-size: 13px; color: rgba(186,211,232,0.70); }

.hlg-bar { width: 210px; height: 4px; border-radius: 3px; margin: 6px 0 2px; background: rgba(148,163,184,0.18); overflow: hidden; position: relative; }
.hlg-bar i { position: absolute; top: 0; left: -42%; height: 100%; width: 42%; border-radius: 3px; background: linear-gradient(90deg, #7dd3fc, #818cf8); animation: hlg-bar 1.4s ease-in-out infinite; }
@keyframes hlg-bar { 0% { left: -42%; } 100% { left: 100%; } }

.hlg-note { margin-top: 16px; text-align: left; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .hlg-ring, .hlg-ring2, .hlg-dot, .hlg-orbit, .hlg-bar i, .harvest-loadgate { animation: none !important; }
}
html[data-theme="light"] .harvest-loadgate {
  background: radial-gradient(120% 90% at 50% 6%, rgba(2,132,199,0.08), transparent 60%), rgba(240,244,255,0.55);
}
html[data-theme="light"] .hlg-card { background: rgba(255,255,255,0.93); border-color: rgba(15,23,42,0.10); }
html[data-theme="light"] .hlg-title { color: #0f172a; }
html[data-theme="light"] .hlg-sub { color: rgba(71,85,105,0.80); }