:root {
  --bg: #0f1410;
  --bg-elevated: #171d18;
  --bg-panel: #1c241e;
  --bg-hover: #243028;
  --border: #2d3a30;
  --border-strong: #3d5242;
  --text: #e8efe6;
  --text-muted: #93a394;
  --text-dim: #6b7a6d;
  --accent: #6fcf7a;
  --accent-dim: #3d8f4a;
  --accent-soft: rgba(111, 207, 122, 0.12);
  /* Section titles: warm cream — high contrast on green UI (not RYG status) */
  --balance-heading: #f4f0e6;
  --balance-heading-rule: rgba(244, 240, 230, 0.32);
  --green: #2cff2c;
  --green-bg: rgba(44, 255, 44, 0.14);
  --yellow: #fff700;
  --yellow-bg: rgba(255, 247, 0, 0.14);
  --red: #fb2622;
  --red-bg: rgba(251, 38, 34, 0.16);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sidebar-w: 280px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  overflow-x: clip;
}

body {
  background-image:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(111, 207, 122, 0.12), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(61, 143, 74, 0.08), transparent);
}

button, input, select {
  font: inherit;
  color: inherit;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 6px 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.2s ease;
}

.app.sidebar-collapsed {
  grid-template-columns: 0 0 1fr;
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.25rem 1rem 1rem;
  border-right: 0;
  background: linear-gradient(180deg, #141a15 0%, #101510 100%);
  --sidebar-stack-gap: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: var(--sidebar-stack-gap);
  transition: opacity 0.18s ease, transform 0.2s ease;
  min-width: 0;
}

/* Drag handle between sidebar and main */
.sidebar-resizer {
  position: sticky;
  top: 0;
  z-index: 6;
  height: 100vh;
  width: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: col-resize;
  background: linear-gradient(180deg, #141a15 0%, #101510 100%);
  box-shadow: inset -1px 0 0 var(--border);
  touch-action: none;
  user-select: none;
}

.sidebar-resizer::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 2px;
  width: 2px;
  border-radius: 1px;
  background: rgba(107, 122, 109, 0.45);
  transition: background 0.15s ease, box-shadow 0.15s ease, top 0.15s, bottom 0.15s;
}

.sidebar-resizer:hover::after,
.sidebar-resizer:focus-visible::after,
.app.sidebar-resizing .sidebar-resizer::after {
  top: 8%;
  bottom: 8%;
  background: var(--accent-dim, #3d8f4a);
  box-shadow: 0 0 0 1px rgba(111, 207, 122, 0.25);
}

.sidebar-resizer:focus-visible {
  outline: none;
}

.app.sidebar-resizing {
  cursor: col-resize;
  user-select: none;
  transition: none;
}

.app.sidebar-resizing,
.app.sidebar-resizing * {
  cursor: col-resize !important;
}

.app.sidebar-collapsed .sidebar {
  overflow: hidden;
  padding: 0;
  border-right: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-0.5rem);
}

.app.sidebar-collapsed .sidebar-resizer {
  pointer-events: none;
  opacity: 0;
}

.sidebar-backdrop {
  display: none;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(6, 10, 7, 0.5);
  cursor: pointer;
}

.sidebar-top {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}

.brand {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.25rem 0.15rem 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}

.btn-sidebar-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.35rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.btn-sidebar-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.btn-sidebar-toggle .sidebar-toggle-glyph {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
}

.topbar-nav-cluster {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 0.35rem;
  margin: 0 0.65rem 0 0;
}

.topbar-nav-cluster:not(:has(button:not([hidden]))) {
  display: none;
}

.btn-sidebar-expand {
  margin: 0;
  align-self: center;
  gap: 0.28rem;
}

.sidebar-expand-label {
  display: none;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.btn-sidebar-expand[hidden],
.btn-dash-home[hidden] {
  display: none !important;
}

.btn-dash-home {
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-logo {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(111, 207, 122, 0.25);
  flex-shrink: 0;
}

.brand-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-sub {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.topbar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.85rem;
  flex: 0 1 auto;
  margin-left: auto;
}

.topbar-end .topbar-meta[hidden] {
  display: none;
}

.user-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  min-width: 0;
}

.user-menu-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.user-menu-btn:hover,
.user-menu-btn:focus-visible {
  color: var(--text);
  border-color: var(--accent-dim);
  outline: none;
}

.account-panel {
  width: min(34rem, 100%);
}

.account-grower-panel {
  width: min(40rem, 100%);
}

.account-section-title {
  margin: 1rem 0 0.25rem;
  font-size: 0.92rem;
  color: var(--balance-heading, var(--text));
}

.account-hint {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
}

.password-req-list {
  margin: 0.1rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.password-req-list li {
  margin: 0.08rem 0;
}

.password-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.password-wrap input {
  width: 100%;
  padding-right: 2.45rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.18rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--text);
  background: var(--bg-hover);
  outline: none;
}

.password-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.password-toggle .icon-eye-off {
  display: none;
}

.password-toggle.is-visible .icon-eye {
  display: none;
}

.password-toggle.is-visible .icon-eye-off {
  display: block;
}

.password-match-hint {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.password-match-hint.is-err {
  color: #ff9a98;
}

.password-wrap input.is-mismatch {
  border-color: rgba(251, 38, 34, 0.55);
}

.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.75rem;
}

#acct-username,
.account-grid input:disabled,
.account-grid input[readonly] {
  opacity: 0.55;
  color: var(--text-muted);
  background: rgba(12, 16, 12, 0.45);
  cursor: not-allowed;
}

.account-span-2 {
  grid-column: 1 / -1;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.account-status {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.account-status.is-ok {
  color: #9dff9d;
}

.account-status.is-err {
  color: #ff9a98;
}

@media (max-width: 640px) {
  .account-grid {
    grid-template-columns: 1fr;
  }
}

.user-name {
  color: var(--text-muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-logout {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}

.btn-logout:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.nav {
  position: relative;
  flex: 0 1 auto;
  min-height: 4.5rem;
  max-height: 46%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar.has-nav-split .nav {
  flex: 0 0 var(--sidebar-nav-h);
  height: var(--sidebar-nav-h);
  max-height: var(--sidebar-nav-h);
}

.nav.is-clipped {
  padding-bottom: 0.9rem;
}

/* Soften the clipped edge so menu rows fade into the split instead of
   shearing off against a hard dark rectangle. */
.nav.is-clipped::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  flex: 0 0 auto;
  height: 1.25rem;
  margin-top: -1.25rem;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(16, 21, 16, 0) 0%,
    #101510 100%
  );
}

.sidebar-split {
  flex: 0 0 12px;
  position: relative;
  z-index: 4;
  width: 100%;
  margin: calc(-1 * var(--sidebar-stack-gap)) 0 0;
  padding: 0;
  border: 0;
  cursor: row-resize;
  background: #101510;
  touch-action: none;
  user-select: none;
}

.nav.is-clipped ~ .sidebar-split {
  margin-top: calc(-1 * var(--sidebar-stack-gap) - 10px);
  box-shadow: 0 -16px 0 0 #101510;
}

.sidebar-split::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  background: #101510;
}

.nav.is-clipped ~ .sidebar-split::before {
  top: -1.85rem;
  background: linear-gradient(
    to bottom,
    rgba(16, 21, 16, 0) 0%,
    rgba(16, 21, 16, 0.82) 45%,
    #101510 72%,
    #101510 100%
  );
}

.sidebar-split::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 5px;
  height: 2px;
  border-radius: 1px;
  background: rgba(107, 122, 109, 0.45);
  transition: background 0.15s ease, box-shadow 0.15s ease, left 0.15s, right 0.15s;
}

.sidebar-split:hover::after,
.sidebar-split:focus-visible::after,
.sidebar.sidebar-nav-resizing .sidebar-split::after {
  left: 6%;
  right: 6%;
  background: var(--accent-dim, #3d8f4a);
  box-shadow: 0 0 0 1px rgba(111, 207, 122, 0.25);
}

.sidebar-split:focus-visible {
  outline: none;
}

.sidebar.sidebar-nav-resizing,
.sidebar.sidebar-nav-resizing * {
  cursor: row-resize !important;
  user-select: none;
}

.nav-primary {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.nav-item {
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font: inherit;
  font-size: 0.92rem;
  width: 100%;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

/* display:flex on sections/items would otherwise override the HTML hidden attribute */
.nav-section[hidden],
.nav-section-admin[hidden],
.nav-item[hidden],
.nav-item-admin[hidden] {
  display: none !important;
}

.nav-section-admin {
  margin-top: 0.15rem;
  padding: 0.55rem 0.4rem 0.45rem;
  border-radius: 12px;
  border: 1px solid rgba(107, 122, 109, 0.28);
  background: linear-gradient(
    165deg,
    rgba(26, 38, 28, 0.55) 0%,
    rgba(18, 24, 18, 0.35) 100%
  );
  box-shadow: inset 0 1px 0 rgba(232, 239, 230, 0.04);
}

.nav-section-label {
  margin: 0;
  padding: 0.15rem 0.55rem 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9aab9c;
  line-height: 1.2;
}

.nav-section-items {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 0.2rem;
  border-left: 2px solid rgba(111, 207, 122, 0.22);
  margin-left: 0.45rem;
}

.nav-item-admin {
  font-size: 0.84rem;
  line-height: 1.35;
  white-space: normal;
  padding: 0.55rem 0.65rem 0.55rem 0.7rem;
  border-radius: 8px;
  color: #a8b8aa;
}

.nav-item-admin:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.nav-item-admin.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  box-shadow: -2px 0 0 var(--accent);
  border-radius: 0 8px 8px 0;
  margin-left: -2px;
  padding-left: calc(0.7rem + 2px);
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 0.15rem;
  min-height: 0;
}

/* Location tree owns remaining sidebar height — never collapse to 0 or the
   grower tree disappears and page scroll cannot bring it back. */
.scope-panel {
  flex: 1 1 auto;
  min-height: min(14rem, 38vh);
  margin-top: 0.1rem;
  padding: 0.55rem 0.45rem 0.55rem;
  border-radius: 12px;
  border: 1px solid rgba(107, 122, 109, 0.28);
  background: linear-gradient(
    165deg,
    rgba(26, 38, 28, 0.4) 0%,
    rgba(18, 24, 18, 0.28) 100%
  );
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* "Change Scope" spotlight — brief pulse so the control is obvious */
.scope-panel.scope-spotlight {
  border-color: var(--accent-dim);
  box-shadow:
    0 0 0 2px var(--accent-soft),
    0 0 0 1px rgba(111, 207, 122, 0.45) inset;
  animation: scope-spotlight-pulse 1.6s ease-out 1;
}

@keyframes scope-spotlight-pulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(111, 207, 122, 0.55),
      0 0 0 1px rgba(111, 207, 122, 0.45) inset;
  }
  40% {
    box-shadow:
      0 0 0 6px rgba(111, 207, 122, 0.18),
      0 0 0 1px rgba(111, 207, 122, 0.55) inset;
  }
  100% {
    box-shadow:
      0 0 0 2px var(--accent-soft),
      0 0 0 1px rgba(111, 207, 122, 0.35) inset;
  }
}

.scope-dimmed {
  opacity: 0.45;
  pointer-events: none;
}

/* Location: Grower › Farm › Field (tree + search) */
.location-scope {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  gap: 0.4rem;
  padding: 0.05rem 0 0;
  display: flex;
  flex-direction: column;
}

.loc-search-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}

.location-scope .loc-search,
.field.location-scope input.loc-search {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.5rem 2rem 0.5rem 0.65rem;
  color: var(--text);
  outline: none;
  font-size: 0.82rem;
}

/* Hide native WebKit clear so our button is the only control */
.location-scope .loc-search::-webkit-search-cancel-button,
.location-scope .loc-search::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.location-scope .loc-search:focus,
.field.location-scope input.loc-search:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.location-scope .loc-search::placeholder {
  color: var(--text-dim);
}

.loc-search-clear {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.loc-search-clear:hover {
  color: var(--text);
  background: rgba(107, 122, 109, 0.22);
}

.loc-search-clear[hidden] {
  display: none !important;
}

.loc-search-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  flex: 0 0 auto;
  margin: -0.1rem 0 0.05rem;
}

.loc-tree-tool-btn {
  margin: 0;
  margin-right: auto;
  padding: 0.12rem 0.4rem;
  border: 1px solid rgba(107, 122, 109, 0.35);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.loc-tree-tool-btn:hover {
  color: var(--text);
  border-color: var(--accent-dim);
  background: rgba(107, 122, 109, 0.15);
}

.loc-compact-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.loc-compact-toggle input {
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.loc-compact-toggle:hover {
  color: var(--text);
}

.loc-tree {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(107, 122, 109, 0.28);
  border-radius: 10px;
  background: rgba(12, 16, 12, 0.45);
  /* Extra right padding keeps + / ⋯ clear of the scrollbar hit target */
  padding: 0.25rem 1.1rem 0.25rem 0.25rem;
  scrollbar-gutter: stable;
}

.loc-tree.is-compact {
  padding: 0.2rem 0.35rem;
  /* Keyboard focus stays on search; list is mouse + ↑/↓ driven */
  outline: none;
}

.loc-compact-hit {
  border-radius: 8px;
  margin: 0.12rem 0;
  border: 1px solid transparent;
  box-sizing: border-box;
  /* Reserve focus ring space so hover and selected are same outer size */
  box-shadow: 0 0 0 1px transparent;
  background: transparent;
  cursor: pointer;
  transition: background 0.08s ease, border-color 0.08s ease, box-shadow 0.08s ease;
}

/* Full-card hover — same footprint as .is-focused (not just the .loc-row button) */
.loc-compact-hit:hover,
.loc-compact-hit.is-focused {
  border-color: var(--accent-dim);
  background: rgba(107, 122, 109, 0.18);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.loc-compact-hit.is-focused {
  background: rgba(107, 122, 109, 0.26);
}

.loc-compact-hit.is-picked {
  border-color: rgba(111, 207, 122, 0.55);
  background: rgba(111, 207, 122, 0.12);
  box-shadow: 0 0 0 1px rgba(111, 207, 122, 0.2);
}

.loc-compact-hit.is-picked:hover,
.loc-compact-hit.is-picked.is-focused {
  border-color: rgba(111, 207, 122, 0.7);
  background: rgba(111, 207, 122, 0.2);
}

/* Suppress smaller inner-row hover chrome inside compact cards */
.loc-tree.is-compact .loc-row-wrap:hover .loc-row,
.loc-tree.is-compact .loc-row:hover,
.loc-tree.is-compact .loc-compact-hit .loc-row,
.loc-tree.is-compact .loc-compact-hit .loc-row.is-picked,
.loc-tree.is-compact .loc-compact-hit .loc-row.is-keyboard-focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.loc-compact-hit .loc-row-wrap {
  align-items: flex-start;
  margin: 0;
  padding-right: 0.2rem;
}

.loc-compact-hit .loc-row {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

.loc-compact-hit .loc-twist {
  visibility: hidden;
  width: 0.7rem;
}

.loc-compact-path {
  display: block;
  padding: 0 0.55rem 0.35rem 1.85rem;
  font-size: 0.68rem;
  color: var(--text-dim);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.loc-compact-empty {
  padding: 0.75rem 0.65rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.loc-compact-count {
  padding: 0.3rem 0.45rem 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.location-scope .loc-hint {
  flex: 0 0 auto;
}

/* Treatment / yield / nutrient — pinned under scope, above footer */
.filter-controls {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.15rem 0.1rem 0;
  border-top: 1px solid rgba(107, 122, 109, 0.22);
  padding-top: 0.7rem;
  margin-top: auto;
  background: linear-gradient(180deg, rgba(16, 21, 16, 0.92) 0%, #101510 28%);
}

.loc-node {
  margin: 0;
}

.loc-children {
  padding-left: 0.65rem;
  margin-left: 0.35rem;
  border-left: 1px solid rgba(107, 122, 109, 0.22);
}

.loc-row-wrap {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0.1rem 0;
  /* Room between action buttons and scrollbar edge */
  padding-right: 0.35rem;
}

.loc-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0.32rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  line-height: 1.25;
}

.loc-row-wrap:hover .loc-row,
.loc-row:hover {
  background: rgba(111, 207, 122, 0.08);
  border-color: rgba(107, 122, 109, 0.35);
}

/* Selected / keyboard focus ring on grower tree rows (mouse click or arrows) */
.loc-row.is-keyboard-focus,
.loc-row-wrap:has(.loc-row.is-keyboard-focus) .loc-row {
  background: rgba(107, 122, 109, 0.22);
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 1px var(--accent-soft);
  outline: none;
}

/* Keep highlight visible even when also hovered */
.loc-row-wrap:hover .loc-row.is-keyboard-focus,
.loc-row.is-keyboard-focus:hover {
  background: rgba(107, 122, 109, 0.28);
  border-color: var(--accent-dim);
}

.loc-row.is-picked {
  border-color: rgba(111, 207, 122, 0.55);
  background: rgba(111, 207, 122, 0.12);
}

.loc-row-wrap:hover .loc-row.is-picked,
.loc-row.is-picked:hover {
  border-color: rgba(111, 207, 122, 0.7);
  background: rgba(111, 207, 122, 0.16);
}

.loc-row.is-picked.is-keyboard-focus {
  border-color: var(--accent-dim);
  background: rgba(111, 207, 122, 0.2);
}

.loc-twist {
  flex: 0 0 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.7rem;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
}

.loc-twist:hover {
  color: var(--text);
  background: rgba(111, 207, 122, 0.12);
}

.loc-row[data-can-expand="0"] .loc-twist {
  cursor: default;
}

.loc-row[data-can-expand="0"] .loc-twist:hover {
  background: transparent;
  color: var(--text-dim);
}

.loc-kind {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a6d;
  border: 1px solid rgba(107, 122, 109, 0.35);
  border-radius: 999px;
  padding: 0.08rem 0.32rem;
}

.loc-grower > .loc-row .loc-kind {
  color: #9aab9c;
}

.loc-farm > .loc-row .loc-kind {
  color: #8fb4a0;
}

.loc-field > .loc-row .loc-kind {
  color: #7a8f7c;
}

.loc-crop > .loc-row .loc-kind {
  color: #b8a86a;
}

.loc-year > .loc-row .loc-kind {
  color: #8aa4c4;
}

.loc-tissue > .loc-row .loc-kind,
.loc-row-wrap + .loc-children .loc-tissue .loc-kind {
  color: #c4a574;
}

.loc-site > .loc-row .loc-kind {
  color: #9a8fb0;
}

/* Tissue kind badge color via node class */
.loc-tissue .loc-kind {
  color: #c4a574 !important;
}

.loc-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loc-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0;
  margin-right: 0.15rem;
  padding: 0.1rem 0.1rem 0.1rem 0.15rem;
  opacity: 0.55;
  pointer-events: auto;
  transition: opacity 0.12s ease;
}

.loc-row-wrap:hover .loc-actions,
.loc-row-wrap:focus-within .loc-actions,
.loc-actions:focus-within {
  opacity: 1;
}

.loc-act {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.loc-act:hover {
  color: var(--text);
  background: rgba(111, 207, 122, 0.14);
  border-color: rgba(107, 122, 109, 0.35);
}

.loc-act-add {
  font-weight: 700;
  font-size: 0.95rem;
}

.loc-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0.2rem 0 0.35rem 1.5rem;
  padding: 0.35rem 0.4rem;
  border: 1px solid rgba(107, 122, 109, 0.4);
  border-radius: 8px;
  background: rgba(18, 24, 18, 0.85);
}

.loc-editor-label {
  flex: 0 0 100%;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.loc-editor-crop,
.loc-editor-operation {
  flex-direction: column;
  align-items: stretch;
}

.loc-crop-choices {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.1rem 0 0.25rem;
}

/* Save / Cancel row under category choices (crop & operation pickers) */
.loc-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

.loc-crop-choice {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--text);
  cursor: pointer;
}

.loc-crop-choice input {
  margin: 0;
  accent-color: #6fcf7a;
}

.loc-crop-choice.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.loc-editor-custom-name[hidden] {
  display: none !important;
}

/* Compact single-line inputs — override .field input padding inside location scope */
.loc-editor-input,
.field.location-scope .loc-editor-input,
.field .loc-editor-input {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 1.85rem;
  min-height: 1.85rem;
  max-height: 1.85rem;
  margin: 0;
  padding: 0.2rem 0.45rem;
  box-sizing: border-box;
  border: 1px solid rgba(107, 122, 109, 0.4);
  border-radius: 6px;
  background: rgba(8, 12, 8, 0.7);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.2;
  box-shadow: none;
  resize: none;
}

.loc-editor:not(.loc-editor-crop):not(.loc-editor-operation) .loc-editor-input {
  width: auto;
  flex: 1 1 6rem;
}

.loc-editor-input:focus,
.field.location-scope .loc-editor-input:focus,
.field .loc-editor-input:focus {
  outline: none;
  border-color: rgba(111, 207, 122, 0.55);
  box-shadow: none;
}

.loc-editor-crop .loc-editor-custom-name {
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
}

.loc-editor-crop .loc-editor-actions,
.loc-editor-operation .loc-editor-actions {
  width: 100%;
}

.btn-tiny {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.22rem 0.45rem;
  border: 1px solid rgba(107, 122, 109, 0.45);
  border-radius: 6px;
  background: rgba(111, 207, 122, 0.16);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-tiny:hover {
  background: rgba(111, 207, 122, 0.28);
}

.btn-tiny.ghost {
  background: transparent;
  color: var(--text-dim);
}

.btn-tiny.ghost:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.loc-menu {
  position: fixed;
  z-index: 4000;
  min-width: 10.5rem;
  max-width: 16rem;
  padding: 0.25rem;
  border: 1px solid rgba(107, 122, 109, 0.45);
  border-radius: 9px;
  background: rgba(16, 22, 16, 0.97);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.loc-menu-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.38rem 0.55rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
}

.loc-menu-item:hover {
  background: rgba(111, 207, 122, 0.12);
}

.loc-menu-item.is-danger {
  color: #f0a0a0;
}

.loc-menu-item.is-danger:hover {
  background: rgba(220, 80, 80, 0.14);
}

.loc-menu-item.is-disabled,
.loc-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--text-dim);
}

.loc-menu-item.is-disabled:hover,
.loc-menu-item:disabled:hover {
  background: transparent;
}

.loc-menu-sep {
  height: 1px;
  margin: 0.25rem 0.35rem;
  background: rgba(107, 122, 109, 0.35);
}

.loc-lock {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a6d;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.08rem 0.32rem;
}

.loc-empty {
  padding: 0.55rem 0.5rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.loc-empty-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.loc-empty-cta .loc-cta {
  pointer-events: auto;
}

.loc-hint {
  margin: 0.05rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-dim);
}

.loc-status,
.loc-editor-status {
  flex: 0 0 100%;
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #ff9a98;
}

.loc-status[hidden],
.loc-editor-status[hidden] {
  display: none !important;
}

.loc-ext-id {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-dim);
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: rgba(12, 16, 12, 0.45);
  border: 1px solid rgba(107, 122, 109, 0.25);
}

.loc-editor-coords,
.loc-editor-planting {
  flex-direction: column;
  align-items: stretch;
}

.loc-editor-coords .loc-editor-input,
.loc-editor-planting .loc-editor-input {
  width: 100%;
  flex: 0 0 auto;
}

.loc-editor-ext-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  margin-top: 0.25rem;
}

.loc-editor-ext-label {
  font-size: 0.68rem;
  color: var(--text-dim);
}

.loc-editor-external .loc-editor-input,
.loc-editor .loc-editor-external-id {
  width: 100%;
}

/* Tissue CSV import modal */
.import-modal[hidden] {
  display: none !important;
}

.import-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.import-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 7, 0.72);
  backdrop-filter: blur(2px);
}

.import-modal-panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(90vh, 880px);
  overflow: auto;
  background: linear-gradient(180deg, #171d18 0%, #121812 100%);
  border: 1px solid rgba(107, 122, 109, 0.35);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem 1.15rem 1.15rem;
}

#import-modal .import-modal-panel.is-busy {
  overflow: hidden;
}

.import-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: rgba(10, 14, 11, 0.84);
  backdrop-filter: blur(2px);
  border-radius: inherit;
  border: 0;
}

.import-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.import-modal-head h2 {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  color: var(--balance-heading, var(--text));
}

.field-loc-panel {
  width: min(860px, 100%);
  max-height: min(94vh, 920px);
}

.field-loc-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.field-loc-search-field {
  flex: 1 1 16rem;
  margin: 0;
}

.field-loc-hint {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
}

.field-loc-map-wrap {
  position: relative;
}

.field-loc-map {
  width: 100%;
  height: min(52vh, 440px);
  border-radius: 10px;
  border: 1px solid rgba(107, 122, 109, 0.35);
  background: #1a1f1a;
  z-index: 0;
}

.field-loc-locating {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(10, 14, 11, 0.72);
  color: var(--text);
  text-align: center;
}

.field-loc-locating[hidden] {
  display: none !important;
}

.field-loc-spinner {
  width: 1.85rem;
  height: 1.85rem;
  border: 3px solid rgba(111, 207, 122, 0.22);
  border-top-color: #6fcf7a;
  border-radius: 50%;
  animation: field-loc-spin 0.7s linear infinite;
}

@keyframes field-loc-spin {
  to {
    transform: rotate(360deg);
  }
}

.field-loc-locating-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
}

.field-loc-locating-msg {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.field-loc-map.leaflet-container {
  font-family: inherit;
}

.field-loc-coords {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.field-loc-coords .field {
  margin: 0;
}

.field-loc-status {
  min-height: 1.2rem;
  margin: 0.45rem 0 0;
  font-size: 0.76rem;
}

@media (max-width: 640px) {
  .field-loc-map {
    height: min(42vh, 320px);
  }

  .field-loc-coords {
    grid-template-columns: 1fr;
  }
}

.plant-date-panel {
  width: min(26rem, 100%);
}

.plant-cal {
  margin: 0.15rem 0 0.65rem;
}

.plant-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.plant-cal-month {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 650;
}

.plant-cal-nav-btn {
  width: 2.1rem;
  padding: 0.3rem 0;
  font-size: 1.15rem;
  line-height: 1;
}

.plant-cal-weekdays,
.plant-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.plant-cal-weekdays {
  margin-bottom: 0.25rem;
}

.plant-cal-weekdays span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.2rem 0;
}

.plant-cal-day {
  min-height: 2.15rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}

.plant-cal-day:hover {
  background: rgba(111, 207, 122, 0.12);
  border-color: rgba(107, 122, 109, 0.35);
}

.plant-cal-day.is-outside {
  color: var(--text-dim);
  opacity: 0.45;
}

.plant-cal-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(111, 207, 122, 0.55);
}

.plant-cal-day.is-selected {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  color: #f2fff3;
  font-weight: 650;
}

.plant-cal-day.is-selected:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0c120d;
}

.plant-cal-selected {
  margin: 0;
  min-height: 1.2rem;
  font-size: 0.82rem;
  color: var(--text);
}

.import-modal-panel {
  position: relative;
}

.work-progress {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.4rem 1.35rem;
  border-radius: inherit;
  background: rgba(12, 16, 13, 0.88);
}

.work-progress[hidden] {
  display: none !important;
}

.work-progress-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
}

.work-progress-msg {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-dim);
}

.yk-progress {
  height: 0.55rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(12, 16, 12, 0.7);
  border: 1px solid rgba(107, 122, 109, 0.35);
}

.yk-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4e9a57 0%, #6fcf7a 55%, #b7ecc0 100%);
  transition: width 0.18s ease-out;
}

.gdu-daily-panel {
  width: min(94rem, 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gdu-daily-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 0.7rem;
}

.gdu-daily-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  min-width: 6.5rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(107, 122, 109, 0.3);
  background: rgba(12, 16, 12, 0.4);
  text-align: center;
}

.gdu-daily-chip-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  width: 100%;
}

.gdu-daily-chip-value {
  font-size: 0.92rem;
  font-weight: 650;
  font-family: var(--mono);
  text-align: center;
  width: 100%;
}

.gdu-daily-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(52vh, 28rem);
  overflow: auto;
  cursor: grab;
  user-select: none;
}

.gdu-daily-wrap.is-dragging {
  cursor: grabbing;
}

.gdu-daily-table.data-table {
  --gdu-head-1: 2.15rem;
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.gdu-daily-table .gdu-col-date {
  width: 6.3rem;
}

.gdu-daily-table .gdu-col-temp {
  width: 4.4rem;
}

.gdu-daily-table .gdu-col-gdu {
  width: 4.5rem;
}

.gdu-daily-table .gdu-col-rain {
  width: 4.6rem;
}

.gdu-daily-table .gdu-col-et {
  width: 4.5rem;
}

.gdu-daily-table .gdu-col-solar {
  width: 4.7rem;
}

.gdu-daily-table .gdu-col-soil {
  width: 4.8rem;
}

.gdu-daily-table .gdu-col-hum {
  width: 4.5rem;
}

.gdu-daily-table .gdu-col-wind,
.gdu-daily-table .gdu-col-sun {
  width: 4.4rem;
}

.gdu-daily-table.data-table th,
.gdu-daily-table.data-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  padding: 0.32rem 0.18rem;
  font-size: 0.78rem;
}

.gdu-daily-table thead th.gdu-daily-temp-sub,
.gdu-daily-table thead th.gdu-daily-gdu-sub,
.gdu-daily-table thead th.gdu-daily-rain-sub,
.gdu-daily-table thead th.gdu-daily-et-sub,
.gdu-daily-table thead th.gdu-daily-solar-sub,
.gdu-daily-table thead th.gdu-daily-soil-sub,
.gdu-daily-table thead th.gdu-daily-hum-sub,
.gdu-daily-table thead th.gdu-daily-wind-sub,
.gdu-daily-table thead th.gdu-daily-sun-sub {
  white-space: normal;
  line-height: 1.15;
}

.gdu-daily-table.data-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #1a221c;
}

.gdu-daily-table.data-table thead th {
  text-align: center;
  vertical-align: middle;
  position: static;
  top: auto;
  z-index: auto;
  border-top: 0;
  border-bottom: 0;
  background-clip: border-box;
}

.gdu-daily-table thead th.gdu-daily-date-h {
  background: #1a221c;
  box-shadow: inset 0 -1px 0 rgba(107, 122, 109, 0.55);
}

.gdu-daily-table thead th.gdu-daily-temp-h {
  box-shadow: none;
}

.gdu-daily-table thead th.gdu-daily-gdu-h {
  box-shadow: none;
}

.gdu-daily-table thead th.gdu-daily-rain-h {
  box-shadow: none;
}

.gdu-daily-table thead th.gdu-daily-temp-sub {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(196, 164, 88, 0.85);
}

.gdu-daily-table thead th.gdu-daily-gdu-sub {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(111, 207, 122, 0.8);
}

.gdu-daily-table thead th.gdu-daily-rain-sub {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(110, 168, 196, 0.8);
}

.gdu-daily-table tbody td {
  position: relative;
  z-index: 0;
}

.gdu-daily-table thead th.gdu-daily-temp-h,
.gdu-daily-table thead th.gdu-daily-temp-sub {
  background: #3a3220;
}

.gdu-daily-table tbody td.gdu-daily-temp-td {
  background: rgba(196, 164, 88, 0.1);
}

.gdu-daily-temp-h {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border-left: 1px solid rgba(196, 164, 88, 0.4);
  border-right: 1px solid rgba(196, 164, 88, 0.4);
}

.gdu-daily-temp-start {
  border-left: 1px solid rgba(196, 164, 88, 0.4);
}

.gdu-daily-temp-end {
  border-right: 1px solid rgba(196, 164, 88, 0.4);
}

.gdu-daily-table thead th.gdu-daily-gdu-h,
.gdu-daily-table thead th.gdu-daily-gdu-sub {
  background: #24392a;
}

.gdu-daily-table tbody td.gdu-daily-gdu-td {
  background: rgba(111, 207, 122, 0.07);
}

.gdu-daily-gdu-h {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border-left: 1px solid rgba(107, 122, 109, 0.42);
  border-right: 1px solid rgba(107, 122, 109, 0.42);
}

.gdu-daily-gdu-start {
  border-left: 1px solid rgba(107, 122, 109, 0.42);
}

.gdu-daily-gdu-end {
  border-right: 1px solid rgba(107, 122, 109, 0.42);
}

.gdu-daily-table thead th.gdu-daily-rain-h,
.gdu-daily-table thead th.gdu-daily-rain-sub {
  background: #24363e;
}

.gdu-daily-table tbody td.gdu-daily-rain-td {
  background: rgba(110, 168, 196, 0.08);
}

.gdu-daily-rain-h {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border-left: 1px solid rgba(110, 168, 196, 0.42);
  border-right: 1px solid rgba(110, 168, 196, 0.42);
}

.gdu-daily-rain-start {
  border-left: 1px solid rgba(110, 168, 196, 0.42);
}

.gdu-daily-rain-end {
  border-right: 1px solid rgba(110, 168, 196, 0.42);
}

.gdu-daily-table tbody tr:hover .gdu-daily-temp-td {
  background: rgba(196, 164, 88, 0.16);
}

.gdu-daily-table tbody tr:hover .gdu-daily-gdu-td {
  background: rgba(111, 207, 122, 0.12);
}

.gdu-daily-table tbody tr:hover .gdu-daily-rain-td {
  background: rgba(110, 168, 196, 0.14);
}

.gdu-daily-table thead th.gdu-daily-et-h,
.gdu-daily-table thead th.gdu-daily-solar-h,
.gdu-daily-table thead th.gdu-daily-soil-h,
.gdu-daily-table thead th.gdu-daily-hum-h,
.gdu-daily-table thead th.gdu-daily-wind-h,
.gdu-daily-table thead th.gdu-daily-sun-h {
  box-shadow: none;
}

.gdu-daily-table thead th.gdu-daily-et-sub {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(80, 180, 170, 0.8);
}

.gdu-daily-table thead th.gdu-daily-solar-sub {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(220, 180, 80, 0.8);
}

.gdu-daily-table thead th.gdu-daily-soil-sub {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(180, 140, 90, 0.8);
}

.gdu-daily-table thead th.gdu-daily-et-h,
.gdu-daily-table thead th.gdu-daily-et-sub {
  background: #2a3a38;
}

.gdu-daily-table tbody td.gdu-daily-et-td {
  background: rgba(80, 180, 170, 0.08);
}

.gdu-daily-et-h {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border-left: 1px solid rgba(80, 180, 170, 0.42);
  border-right: 1px solid rgba(80, 180, 170, 0.42);
}

.gdu-daily-et-start {
  border-left: 1px solid rgba(80, 180, 170, 0.42);
}

.gdu-daily-et-end {
  border-right: 1px solid rgba(80, 180, 170, 0.42);
}

.gdu-daily-table thead th.gdu-daily-solar-h,
.gdu-daily-table thead th.gdu-daily-solar-sub {
  background: #4a3a18;
}

.gdu-daily-table tbody td.gdu-daily-solar-td {
  background: rgba(220, 180, 80, 0.09);
}

.gdu-daily-solar-h {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border-left: 1px solid rgba(220, 180, 80, 0.42);
  border-right: 1px solid rgba(220, 180, 80, 0.42);
}

.gdu-daily-solar-start {
  border-left: 1px solid rgba(220, 180, 80, 0.42);
}

.gdu-daily-solar-end {
  border-right: 1px solid rgba(220, 180, 80, 0.42);
}

.gdu-daily-table thead th.gdu-daily-soil-h,
.gdu-daily-table thead th.gdu-daily-soil-sub {
  background: #3a2c22;
}

.gdu-daily-table tbody td.gdu-daily-soil-td {
  background: rgba(180, 140, 90, 0.09);
}

.gdu-daily-soil-h {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border-left: 1px solid rgba(180, 140, 90, 0.42);
  border-right: 1px solid rgba(180, 140, 90, 0.42);
}

.gdu-daily-soil-start {
  border-left: 1px solid rgba(180, 140, 90, 0.42);
}

.gdu-daily-soil-end {
  border-right: 1px solid rgba(180, 140, 90, 0.42);
}

.gdu-daily-table tbody tr:hover .gdu-daily-et-td {
  background: rgba(80, 180, 170, 0.14);
}

.gdu-daily-table tbody tr:hover .gdu-daily-solar-td {
  background: rgba(220, 180, 80, 0.15);
}

.gdu-daily-table tbody tr:hover .gdu-daily-soil-td {
  background: rgba(180, 140, 90, 0.15);
}

.gdu-daily-table thead th.gdu-daily-hum-h {
  border-bottom: 0;
}

.gdu-daily-table thead th.gdu-daily-hum-sub {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(170, 140, 210, 0.8);
}

.gdu-daily-table thead th.gdu-daily-hum-h,
.gdu-daily-table thead th.gdu-daily-hum-sub {
  background: #322848;
}

.gdu-daily-table tbody td.gdu-daily-hum-td {
  background: rgba(170, 140, 210, 0.08);
}

.gdu-daily-hum-h {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border-left: 1px solid rgba(170, 140, 210, 0.42);
  border-right: 1px solid rgba(170, 140, 210, 0.42);
}

.gdu-daily-hum-start {
  border-left: 1px solid rgba(170, 140, 210, 0.42);
}

.gdu-daily-hum-end {
  border-right: 1px solid rgba(170, 140, 210, 0.42);
}

.gdu-daily-table thead th.gdu-daily-wind-h {
  border-bottom: 0;
}

.gdu-daily-table thead th.gdu-daily-sun-h {
  border-bottom: 0;
}

.gdu-daily-table thead th.gdu-daily-wind-sub {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(150, 170, 180, 0.75);
}

.gdu-daily-table thead th.gdu-daily-sun-sub {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(230, 200, 90, 0.75);
}

.gdu-daily-table thead th.gdu-daily-wind-h,
.gdu-daily-table thead th.gdu-daily-wind-sub {
  background: #2a3238;
}

.gdu-daily-table thead th.gdu-daily-sun-h,
.gdu-daily-table thead th.gdu-daily-sun-sub {
  background: #3a3418;
}

.gdu-daily-wind-h {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border-left: 1px solid rgba(150, 170, 180, 0.4);
  border-right: 1px solid rgba(150, 170, 180, 0.4);
}

.gdu-daily-sun-h {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border-left: 1px solid rgba(230, 200, 90, 0.4);
  border-right: 1px solid rgba(230, 200, 90, 0.4);
}

.gdu-daily-table thead th.gdu-daily-wind-sub,
.gdu-daily-table tbody td.gdu-daily-wind-td {
  border-left: 1px solid rgba(150, 170, 180, 0.4);
  border-right: 1px solid rgba(150, 170, 180, 0.4);
}

.gdu-daily-table tbody td.gdu-daily-wind-td {
  background: rgba(150, 170, 180, 0.08);
}

.gdu-daily-table thead th.gdu-daily-sun-sub,
.gdu-daily-table tbody td.gdu-daily-sun-td {
  border-left: 1px solid rgba(230, 200, 90, 0.4);
  border-right: 1px solid rgba(230, 200, 90, 0.4);
}

.gdu-daily-table tbody td.gdu-daily-sun-td {
  background: rgba(230, 200, 90, 0.08);
}

.gdu-daily-table tbody tr:hover .gdu-daily-hum-td {
  background: rgba(170, 140, 210, 0.14);
}

.gdu-daily-table tbody tr:hover .gdu-daily-wind-td {
  background: rgba(150, 170, 180, 0.14);
}

.gdu-daily-table tbody tr:hover .gdu-daily-sun-td {
  background: rgba(230, 200, 90, 0.15);
}

.gdu-daily-table .is-missing td {
  color: var(--text-dim);
}

.gdu-daily-table tbody tr.is-selected td {
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}

.gdu-daily-table tbody tr.is-selected td.gdu-daily-date-td {
  box-shadow:
    inset 3px 0 0 var(--accent),
    inset 0 1px 0 var(--accent),
    inset 0 -1px 0 var(--accent);
  font-weight: 700;
  color: var(--text);
}

.gdu-daily-status {
  margin: 0.55rem 0 0;
  min-height: 1.1rem;
  font-size: 0.76rem;
}

.import-step .field {
  margin-bottom: 0.75rem;
}

.import-profile-desc {
  margin: -0.35rem 0 0.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.import-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.65rem;
}

.import-stat {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  background: rgba(26, 38, 28, 0.55);
  border: 1px solid rgba(107, 122, 109, 0.22);
}

.import-stat strong {
  color: var(--text);
  font-family: var(--mono);
}

.import-file-summary {
  margin: -0.25rem 0 0.65rem;
}

.import-file-toggle {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent, #6fcf7a);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.import-file-toggle:hover {
  color: var(--text);
}

.import-file-list {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.65rem;
  max-height: 7.5rem;
  overflow: auto;
  list-style: none;
  border: 1px solid rgba(107, 122, 109, 0.22);
  border-radius: 8px;
  background: rgba(26, 38, 28, 0.45);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.import-file-list[hidden] {
  display: none !important;
}

.import-file-list li {
  padding: 0.12rem 0;
  word-break: break-word;
}

.import-col-note {
  margin: 0.4rem 0 0;
  padding: 0.45rem 0.65rem;
  max-height: 7.5rem;
  overflow: auto;
  border: 1px solid rgba(107, 122, 109, 0.22);
  border-radius: 8px;
  background: rgba(26, 38, 28, 0.45);
  font-size: 0.78rem;
  line-height: 1.45;
}

.import-col-note[hidden] {
  display: none !important;
}

.import-col-hint {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.import-mismatch {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.8rem 0.8rem;
  border: 1px solid rgba(212, 168, 75, 0.45);
  border-radius: 10px;
  background: rgba(212, 168, 75, 0.08);
}

.import-mismatch[hidden] {
  display: none !important;
}

.import-mismatch.is-info {
  border-color: rgba(107, 122, 109, 0.35);
  background: rgba(26, 38, 28, 0.35);
}

.import-mismatch-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text);
}

.import-mismatch-lead {
  margin: 0.25rem 0 0.55rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.import-mismatch-group {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(107, 122, 109, 0.22);
}

.import-mismatch-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.import-mismatch-group-title {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  color: var(--text);
}

.import-mismatch-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.55rem;
  margin-top: 0.45rem;
}

.import-mismatch-actions .field {
  margin: 0;
  min-width: 12rem;
  flex: 1 1 12rem;
}

.import-mismatch-note {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.import-map-wrap,
.import-rows-wrap {
  max-height: 14rem;
  overflow: auto;
  margin: 0.4rem 0 0.85rem;
  cursor: grab;
  user-select: none;
}

.import-map-wrap.is-dragging,
.import-rows-wrap.is-dragging {
  cursor: grabbing;
}

.import-map-wrap select,
.import-map-wrap input,
.import-map-wrap button,
.import-rows-wrap select,
.import-rows-wrap input,
.import-rows-wrap button {
  cursor: pointer;
  user-select: auto;
}

.import-map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.55rem;
  margin: 0.55rem 0 0.65rem;
}

.import-map-toolbar .field {
  margin: 0;
}

.import-map-toolbar > .btn-secondary {
  box-sizing: border-box;
  min-height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.import-map-load {
  min-width: 12rem;
  flex: 1 1 12rem;
}

.import-map-name {
  min-width: 10rem;
  flex: 1 1 10rem;
}

.import-map-file {
  min-width: 14rem;
  flex: 2 1 16rem;
}

.import-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 6.4rem;
  margin: 0 0 0.65rem;
  padding: 1rem 0.9rem;
  border: 1.5px dashed rgba(147, 163, 148, 0.5);
  border-radius: 10px;
  background: rgba(12, 16, 12, 0.35);
  cursor: pointer;
  text-align: center;
}

.import-drop:hover,
.import-drop.is-dragover {
  border-color: #6fcf7a;
  background: rgba(111, 207, 122, 0.1);
}

.import-drop-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.import-drop-title {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text);
}

.import-drop-files {
  display: block;
  margin-top: 0.35rem;
  max-width: 100%;
  font-size: 0.78rem;
  word-break: break-word;
}

.import-drop-files[hidden] {
  display: none !important;
}

#import-modal .import-modal-panel.is-busy .import-drop {
  pointer-events: none;
}



.import-col-wrap {
  height: 22rem;
  max-height: 22rem;
  margin: 0.4rem 0 0.55rem;
  overflow: auto;
  cursor: grab;
  user-select: none;
}

.import-col-wrap.is-empty {
  height: 22rem;
}

.import-col-wrap.is-dragging {
  cursor: grabbing;
}

.import-col-wrap select,
.import-col-wrap input,
.import-col-wrap button {
  cursor: pointer;
  user-select: auto;
}

.import-col-table,
.data-table.import-col-table {
  width: max-content;
  min-width: 100%;
}

.data-table.import-col-table th,
.data-table.import-col-table td {
  min-width: 0;
  max-width: none;
  width: auto;
  padding: 0.32rem 0.4rem;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--border);
}

.data-table.import-col-table th:last-child,
.data-table.import-col-table td:last-child {
  border-right: 0;
}

.data-table.import-col-table tbody tr:last-child td {
  border-bottom: 1px solid var(--border);
}

.data-table.import-col-table thead th {
  position: sticky;
  background: #171d18;
  text-align: center;
}

.data-table.import-col-table thead tr:first-child th {
  top: 0;
  z-index: 4;
  box-shadow: 0 2px 0 #171d18;
}

.data-table.import-col-table thead tr:nth-child(2) th {
  top: var(--import-map-row-h, 2.4rem);
  z-index: 3;
  background: #1a221c;
  box-shadow: 0 1px 0 #1a221c;
}

.import-col-empty {
  text-align: center;
  padding: 1.6rem 1rem;
  border: 0 !important;
}

.import-map-more {
  min-width: 2.15rem;
  padding: 0.45rem 0.55rem;
  font-size: 1rem;
  line-height: 1;
}

.import-col-assign {
  width: 100%;
  min-width: 6.8rem;
  max-width: none;
  box-sizing: border-box;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.28rem 0.2rem;
  color: var(--text);
  font-size: 0.72rem;
  text-align: center;
  text-align-last: center;
}

.import-col-assign.is-skip {
  background: var(--red-bg);
  border-color: rgba(251, 38, 34, 0.45);
  color: #ff9a98;
}

.import-col-assign.is-mapped {
  background: var(--green-bg);
  border-color: rgba(44, 255, 44, 0.4);
  color: #9dff9d;
}

#import-modal .import-modal-panel,
.import-modal-panel.is-wide {
  width: min(1180px, 100%);
}

.import-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0.35rem 0 0.15rem;
}

.import-step .import-section-head h3,
.import-section-head h3 {
  margin: 0 0 0.25rem;
}

.import-section-head .muted {
  margin: 0;
}

.import-section-head > .btn-secondary {
  flex: 0 0 auto;
  white-space: nowrap;
}

.import-site-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.import-site-select {
  width: 100%;
  min-width: 12rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  color: var(--text);
  font-size: 0.8rem;
}

.import-site-cell .import-site-select {
  flex: 1 1 auto;
  min-width: 8rem;
}

.import-add-in-tree {
  flex: 0 0 auto;
  white-space: nowrap;
}

#import-loc-modal {
  z-index: 90;
}

.import-loc-panel {
  width: min(460px, 100%);
  max-height: min(92vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#import-loc-modal .import-modal-head {
  flex: 0 0 auto;
}

#import-loc-modal .import-modal-head .muted {
  margin: 0.15rem 0 0;
}

.import-loc-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.location-scope.is-import-hosted {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.location-scope.is-import-hosted .loc-tree {
  min-height: 16rem;
}

.location-scope-placeholder {
  flex: 1 1 auto;
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
  border: 1px dashed rgba(107, 122, 109, 0.35);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}

.import-status-ok {
  color: #9dff9d;
  font-size: 0.78rem;
}

.import-status-imported {
  color: #8ec8ff;
  font-size: 0.78rem;
}

.import-status-warn {
  color: #fff59a;
  font-size: 0.78rem;
}

.import-result {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.85rem;
}

.import-result.is-ok {
  background: var(--green-bg);
  border: 1px solid rgba(44, 255, 44, 0.25);
  color: #9dff9d;
}

.import-result.is-err {
  background: var(--red-bg);
  border: 1px solid rgba(251, 38, 34, 0.3);
  color: #ff9a98;
}

.import-step h3 {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.92rem;
  color: var(--balance-heading, var(--text));
}

.scope-locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.55rem 0.7rem;
  color: var(--text);
  font-size: 0.88rem;
}

.scope-locked-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-locked-badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7a6d;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.4rem;
}

/* Main-content scope strip */
.scope-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(107, 122, 109, 0.35);
  background: linear-gradient(
    100deg,
    rgba(26, 38, 28, 0.75) 0%,
    rgba(18, 24, 18, 0.55) 100%
  );
}

.scope-strip.is-calibration {
  border-color: rgba(158, 199, 255, 0.28);
  background: linear-gradient(
    100deg,
    rgba(20, 28, 36, 0.75) 0%,
    rgba(16, 22, 28, 0.55) 100%
  );
}

.scope-strip-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  min-width: 0;
  flex: 1 1 12rem;
}

.scope-strip-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9aab9c;
}

.scope-strip.is-calibration .scope-strip-kicker {
  color: #9ec7ff;
}

.scope-strip-summary {
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}

.app-status {
  margin: -0.55rem 0 1rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #ff9a98;
}

.app-status[hidden] {
  display: none !important;
}

#import-col-status.is-err {
  color: #ff9a98;
}

.btn-scope-change {
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-scope-change:hover {
  color: var(--text);
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}

.topbar-titles {
  min-width: 0;
  flex: 1 1 auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.field[hidden],
#filter-goal-wrap[hidden] {
  display: none !important;
}

.field select,
.field input:not([type="range"]) {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.55rem 0.7rem;
  color: var(--text);
  outline: none;
}

.field select:focus,
.field input:not([type="range"]):focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field .password-wrap input:not([type="range"]) {
  padding-right: 2.45rem;
}

.field .password-wrap input.is-mismatch {
  border-color: rgba(251, 38, 34, 0.55);
}

.field-yield-slider {
  gap: 0.4rem;
}

.field-yield-slider.is-disabled {
  opacity: 0.42;
  filter: grayscale(0.4);
  pointer-events: none;
}

.field-yield-slider.is-disabled input[type="range"] {
  cursor: not-allowed;
}

.yield-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.yield-slider-value {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

/* Crop chips: which crop’s yield goal the slider edits */
.yield-goal-crop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.05rem 0 0.1rem;
}

.yield-goal-crop-chips:empty {
  display: none;
}

.yield-goal-crop-chip {
  margin: 0;
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(107, 122, 109, 0.35);
  border-radius: 999px;
  background: rgba(15, 20, 16, 0.45);
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
  line-height: 1.2;
  /* Avoid parent hover / focus-within stealing look of inactive chips */
  pointer-events: auto;
}

/* Idle hover: slight lift only — must not match .is-active */
.yield-goal-crop-chip:hover:not(.is-active) {
  color: var(--text-muted);
  border-color: rgba(107, 122, 109, 0.55);
  background: rgba(107, 122, 109, 0.12);
}

.yield-goal-crop-chip:focus {
  outline: none;
}

.yield-goal-crop-chip:focus-visible:not(.is-active) {
  border-color: rgba(107, 122, 109, 0.65);
  box-shadow: 0 0 0 2px rgba(107, 122, 109, 0.2);
}

.yield-goal-crop-chip.is-active {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(122, 184, 122, 0.28);
}

.yield-goal-crop-chip.is-active:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}

.yield-goal-crop-chip.is-solo {
  cursor: default;
}

.field-yield-slider input[type="range"] {
  width: 100%;
  margin: 0.1rem 0 0;
  accent-color: var(--accent, #6fcf7a);
  cursor: pointer;
}

.yield-slider-ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* Calibration Trends: crop + nutrient on the page */
.trends-panel-head {
  align-items: flex-start;
  gap: 0.75rem 1.25rem;
}

.trends-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.85rem;
  flex: 0 1 auto;
}

.trends-select-field {
  margin: 0;
  min-width: 9.5rem;
  gap: 0.25rem;
}

.trends-select-field span {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.trends-select-field select {
  min-width: 10rem;
  font-size: 0.82rem;
}

.trends-toolbar .chart-toggles {
  margin-left: 0.15rem;
  padding-bottom: 0.15rem;
}



.sidebar-footer {
  flex: 0 0 auto;
  padding: 0.35rem 0.35rem 0.25rem;
  border-top: 1px solid rgba(107, 122, 109, 0.18);
  padding-top: 0.65rem;
}

/* Short windows: keep the grower tree and yield slider reachable by
   scrolling the sidebar as a whole, not the main page. */
@media (max-height: 740px) {
  .sidebar {
    --sidebar-stack-gap: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.65rem;
  }
  .brand {
    padding-bottom: 0.35rem;
  }
  .brand-sub {
    display: none;
  }
  .loc-hint,
  .sidebar-footer {
    display: none;
  }
  .scope-panel {
    min-height: min(10rem, 32vh);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  .filter-controls {
    padding-top: 0.45rem;
  }
}

/* Narrow windows: docked 280px column would hide the tree off the left
   or crush the page. Slide the sidebar over the main view instead. */
@media (max-width: 960px) {
  .app,
  .app.sidebar-collapsed {
    grid-template-columns: 1fr;
  }
  .sidebar-resizer {
    display: none;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    width: min(22.5rem, calc(100vw - 2.5rem));
    max-width: calc(100vw - 2.5rem);
    height: 100vh;
    height: 100dvh;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.45);
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    padding: 1.1rem 0.9rem 0.9rem;
  }
  .app.sidebar-collapsed .sidebar {
    overflow: hidden;
    padding: 1.1rem 0.9rem 0.9rem;
    border-right: 0;
    opacity: 1;
    pointer-events: none;
    transform: translateX(-105%);
  }
  .app:not(.sidebar-collapsed) .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
  }
  .btn-sidebar-expand {
    width: auto;
    min-width: 0;
    padding: 0 0.6rem;
  }
  .sidebar-expand-label {
    display: inline;
  }
  .btn-sidebar-expand .sr-only {
    position: absolute;
  }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.pill.green { background: var(--green-bg); color: #9dff9d; border-color: rgba(44,255,44,0.25); }
.pill.yellow { background: var(--yellow-bg); color: #fff59a; border-color: rgba(255,247,0,0.25); }
.pill.red { background: var(--red-bg); color: #ff9a98; border-color: rgba(251,38,34,0.3); }

.hint {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Main */
.main {
  padding: 1.4rem 1.6rem 2.5rem;
  min-width: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.topbar .topbar-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar h1 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
}

.subtitle {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.topbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.topbar .user-name {
  max-width: 12rem;
}

.meta-chip {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.meta-chip strong {
  color: var(--text);
  font-weight: 600;
}

.view { display: none; }
.view.active { display: block; }

/* Panels */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.15rem;
  box-shadow: var(--shadow);
}

.panel h2 {
  margin: 0 0 0.85rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.panel-head h2 { margin: 0; }

.chart-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.chart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.chart-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.chart-toggle:has(input:checked) {
  border-color: rgba(111, 207, 122, 0.45);
  color: var(--text);
  background: rgba(111, 207, 122, 0.08);
}

.chart-toggle input {
  accent-color: var(--accent);
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  cursor: pointer;
}
.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.stat-card {
  background: linear-gradient(160deg, #223027 0%, var(--bg-panel) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.05rem;
}

.stat-card .label {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
}

.stat-card .value {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat-card .value.green { color: #8dff8d; }
.stat-card .value.yellow { color: #fff36a; }
.stat-card .value.red { color: #ff7b78; }

.dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin: 0 0 0.85rem;
}

.dash-summary {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0;
  min-width: 0;
}

.dash-toolbar .btn-primary {
  flex: 0 0 auto;
  padding: 0.42rem 0.85rem;
  font-size: 0.82rem;
}

.dash-weather-refresh {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.dash-weather-refresh.is-stale {
  color: #e8c36a;
}

.dash-empty {
  padding: 2rem 1.25rem;
  text-align: center;
}

.dash-empty .btn-primary {
  margin-top: 0.85rem;
}

.dash-attention-panel,
.dash-limiting-panel {
  margin-bottom: 1rem;
}

.dash-attention-table tbody tr {
  cursor: pointer;
}

.dash-attention-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dash-attention-table tbody tr.dash-attention-row.is-selected,
.dash-attention-table tbody tr.dash-attention-row.is-selected:hover {
  background: rgba(107, 122, 109, 0.22);
}

.dash-attention-sample {
  font-weight: 600;
}

.dash-attention-table th:not(:first-child),
.dash-attention-table td:not(:first-child) {
  text-align: center;
}

.dash-attention-nbi {
  cursor: inherit;
}

.dash-lim {
  line-height: 1.25;
}

.dash-lim-primary {
  display: block;
  font-weight: 700;
}

.dash-lim-secondary {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.dash-attention-table tbody tr.dash-crop-sep,
.dash-attention-table tbody tr.dash-crop-sep:hover,
.dash-season-table tbody tr.dash-crop-sep,
.dash-season-table tbody tr.dash-crop-sep:hover {
  background: transparent;
  cursor: default;
}

.dash-attention-table tbody tr.dash-crop-sep td,
.dash-season-table tbody tr.dash-crop-sep td {
  border-bottom: 0;
  text-align: left;
  padding: 0;
}

.dash-season-table tbody tr.dash-crop-sep .samples-matrix-crop-sep-cell {
  background: linear-gradient(
    180deg,
    rgba(22, 30, 23, 0.98) 0%,
    rgba(18, 24, 18, 0.95) 100%
  ) !important;
}

.dash-nut-row {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.dash-nut-row:hover .name {
  color: var(--text);
}

.dash-season-table tbody tr {
  cursor: pointer;
}

.dash-season-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dash-season-field {
  font-weight: 600;
}

.dash-season-field-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-width: 0;
}

.dash-season-field-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-weather-btn {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.dash-weather-btn:hover,
.dash-weather-btn:focus-visible {
  color: var(--accent);
  background: rgba(111, 207, 122, 0.12);
  outline: none;
}

.dash-weather-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.dash-weather-btn:disabled:hover {
  color: var(--text-muted);
  background: transparent;
}

.dash-weather-icon {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

.dash-season-table th:not(:first-child),
.dash-season-table td:not(:first-child) {
  text-align: center;
}

.dash-season-table thead th {
  vertical-align: middle;
}

.dash-season-table thead th.dash-season-dap-h {
  white-space: normal;
  line-height: 1.15;
  width: 5.2rem;
  min-width: 5.2rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  text-align: center;
  box-sizing: border-box;
}

.dash-season-table thead th.dash-season-rm-h {
  white-space: normal;
  line-height: 1.15;
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  text-align: center;
  letter-spacing: 0.02em;
  font-size: 0.68rem;
  box-sizing: border-box;
}

.dash-season-metrics-h,
.dash-season-table thead th.dash-season-metric {
  text-align: center;
}

.dash-season-metrics-h {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  background: rgba(111, 207, 122, 0.1);
  border-left: 1px solid rgba(107, 122, 109, 0.4);
  border-right: 1px solid rgba(107, 122, 109, 0.4);
}

.dash-season-metric,
.dash-season-td-metric {
  background: rgba(111, 207, 122, 0.05);
}

.dash-season-metric-start,
.dash-season-td-metric.dash-season-metric-start {
  border-left: 1px solid rgba(107, 122, 109, 0.4);
}

.dash-season-metric-end,
.dash-season-td-metric.dash-season-metric-end {
  border-right: 1px solid rgba(107, 122, 109, 0.4);
}

.dash-season-table tbody tr:hover .dash-season-td-metric {
  background: rgba(111, 207, 122, 0.1);
}



.muted { color: var(--text-muted); font-weight: 400; font-size: 0.85rem; }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  margin-left: 0.35rem;
}

/* Bars */
.bar-list, .status-bars {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.bar-row {
  display: grid;
  grid-template-columns: 7rem 1fr 2.5rem;
  gap: 0.55rem;
  align-items: center;
  font-size: 0.85rem;
}

.bar-row .name {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  height: 0.55rem;
  background: #121812;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
}

.bar-fill.red { background: linear-gradient(90deg, #a51816, var(--red)); }
.bar-fill.yellow { background: linear-gradient(90deg, #b8b000, var(--yellow)); }
.bar-fill.green { background: linear-gradient(90deg, #1f9a2a, var(--green)); }

.bar-row .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.status-stack {
  display: flex;
  height: 0.85rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #121812;
}

.status-stack > span {
  display: block;
  height: 100%;
}

.status-stack .g { background: var(--green); }
.status-stack .y { background: var(--yellow); }
.status-stack .r { background: var(--red); }

/* Tables */
.table-wrap {
  overflow: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* Generic tall tables: cap height so long lists scroll in-panel, not the page */
.table-wrap.tall {
  max-height: calc(100vh - 14rem);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.data-table th,
.data-table td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table th {
  position: sticky;
  top: 0;
  background: #1a221c;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  z-index: 1;
}

.data-table tbody tr:last-child td { border-bottom: 0; }

.data-table tbody tr:hover {
  background: rgba(111, 207, 122, 0.05);
}

.data-table.clickable tbody tr {
  cursor: pointer;
}

.data-table tbody tr.selected {
  background: var(--accent-soft);
}

/* Trends grid: pixel-fixed columns, drag edges to resize (like a spreadsheet) */
.trend-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(28rem, 50vh);
}

#trend-table.trend-data-table {
  table-layout: fixed;
  /* separate + spacing 0: sticky header works reliably while scrolling */
  border-collapse: separate;
  border-spacing: 0;
  /* width is set in px by JS as sum of column widths */
  width: 684px;
  max-width: none;
}

#trend-table th,
#trend-table td {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

#trend-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #1a221c;
  box-shadow: 0 1px 0 var(--border);
  user-select: none;
  padding-right: 0.85rem; /* room for resize grip */
}

#trend-table th .th-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* Center metric columns: GDU, Value, Unit, Status */
#trend-table th[data-col="gdu"],
#trend-table th[data-col="value"],
#trend-table th[data-col="unit"],
#trend-table th[data-col="status"],
#trend-table td.col-center {
  text-align: center;
}

#trend-table td.col-center,
#trend-table td.mono.col-center {
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Full-height grip straddling the column edge */
#trend-table .col-resizer {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 6;
}

#trend-table .col-resizer::after {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 4px;
  width: 2px;
  border-radius: 1px;
  background: rgba(107, 122, 109, 0.35);
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease;
}

#trend-table thead tr:hover .col-resizer::after,
#trend-table .col-resizer:hover::after,
#trend-table .col-resizer.is-active::after {
  opacity: 1;
}

#trend-table .col-resizer:hover::after,
#trend-table .col-resizer.is-active::after {
  background: rgba(111, 207, 122, 0.85);
}

/* Live resize guide line */
.col-resize-guide {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(111, 207, 122, 0.85);
  pointer-events: none;
  z-index: 9999;
  display: none;
}

.col-resize-guide.visible {
  display: block;
}

body.col-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

body.col-resizing * {
  cursor: col-resize !important;
}

.mono {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

/* Status mini summary in sample list */
.status-dots {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.status-dots span {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
}

.dot.green { background: var(--green); }
.dot.yellow { background: var(--yellow); }
.dot.red { background: var(--red); }

/* Split samples layout */
.split {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.15fr);
  gap: 1rem;
  align-items: start;
}

/* Do not force near-viewport min-heights — that made the page scroll
   even when only a few sample rows were shown. */
.list-panel,
.detail-panel {
  min-height: 0;
}

/* Multi-sample nutrient sufficiency matrix */
.samples-matrix-panel {
  margin-top: 0;
  padding: 0.85rem 0.95rem 1rem;
  border: 1px solid rgba(107, 122, 109, 0.28);
  border-radius: 14px;
  background: linear-gradient(
    165deg,
    rgba(26, 38, 28, 0.45) 0%,
    rgba(18, 24, 18, 0.32) 100%
  );
}

/* Full-page Nutrient Sufficiency layout */
.samples-matrix-panel--solo {
  margin-top: 0;
  min-height: min(70vh, calc(100vh - 11rem));
  display: flex;
  flex-direction: column;
}

.samples-matrix-panel--solo .samples-matrix-wrap {
  flex: 1 1 auto;
  min-height: 16rem;
  max-height: calc(100vh - 13.5rem);
  overflow: auto;
}

.samples-matrix-empty {
  margin-top: 1.5rem;
}

.samples-matrix-hint {
  margin: 0.65rem 0 0;
  font-size: 0.72rem;
  color: var(--text-dim);
}

.samples-matrix-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1.25rem;
  margin-bottom: 0.75rem;
}

.samples-matrix-head h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.samples-matrix-head .subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
}

.samples-matrix-head-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.85rem;
}

.samples-matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  margin: 0;
  align-items: center;
}

.samples-matrix-key {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.samples-matrix-key .dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.samples-matrix-key .dot.empty,
.dot.empty {
  background: #6a6a6a;
  box-shadow: 0 0 0 1px rgba(160, 160, 160, 0.35);
}

.samples-matrix-wrap {
  max-height: min(26rem, 48vh);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(107, 122, 109, 0.28);
  background: rgba(12, 16, 12, 0.55);
  /* Room for sticky sample col shadow */
  scrollbar-gutter: stable;
}

/* Sample edit slide-over (shared by Nutrient Sufficiency + Samples old) */
/* display:none when [hidden] — author display:flex would otherwise override hidden */
.sample-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  justify-content: flex-end;
}

.sample-drawer:not([hidden]) {
  display: flex;
}

.sample-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 7, 0.55);
  backdrop-filter: blur(2px);
}

.sample-drawer-panel {
  position: relative;
  z-index: 1;
  width: min(32rem, 100vw);
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #161d17 0%, #121812 100%);
  border-left: 1px solid rgba(107, 122, 109, 0.4);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
  animation: sample-drawer-in 0.18s ease-out;
}

@keyframes sample-drawer-in {
  from {
    transform: translateX(1.25rem);
    opacity: 0.6;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.sample-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem 0.75rem;
  border-bottom: 1px solid rgba(107, 122, 109, 0.28);
  flex: 0 0 auto;
}

.sample-drawer-head h2 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.sample-drawer-head .subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
}

.sample-drawer-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.85rem 1.1rem 1.25rem;
}

.sample-drawer-close {
  flex: 0 0 auto;
}

.samples-matrix {
  /* Fixed layout + explicit col widths stops column jump on sample reloads
     (grower-tree navigation re-renders with different name lengths). */
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
}

.samples-matrix th,
.samples-matrix td {
  text-align: center;
  padding: 0.22rem 0.18rem;
  vertical-align: middle;
  border: 0;
  box-sizing: border-box;
}

.samples-matrix tbody td:not(.samples-matrix-sample) {
  padding: 0.18rem 0.12rem;
}

/* Even horizontal padding around NBI chip / header */
.samples-matrix thead th.samples-matrix-nbi-h,
.samples-matrix tbody td.samples-matrix-nbi {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.samples-matrix thead th.samples-matrix-nut:last-child,
.samples-matrix tbody td:last-child {
  padding-right: 0.55rem;
}

/* Room after the NBI | nutrients divider */
.samples-matrix thead th.samples-matrix-nut:first-of-type,
.samples-matrix tbody tr.samples-matrix-row > td.samples-matrix-nut-cell:first-of-type {
  padding-left: 0.5rem;
}

.samples-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #1a221b;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.55rem 0.35rem 0.5rem;
  box-shadow: 0 1px 0 rgba(107, 122, 109, 0.35);
}

.samples-matrix .samples-matrix-corner {
  text-align: left;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 3;
  background: #1a221b;
  padding-left: 2.45rem;
  padding-right: 0.55rem;
  width: 15.25rem;
  min-width: 15.25rem;
  max-width: 15.25rem;
  box-shadow:
    1px 0 0 rgba(107, 122, 109, 0.35),
    0 1px 0 rgba(107, 122, 109, 0.35);
}

.samples-matrix .samples-matrix-nbi-h {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  width: 3.6rem;
  min-width: 3.6rem;
  max-width: 3.6rem;
  color: #c5d4c7;
  text-transform: uppercase;
  text-align: center;
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
  /* Match sticky sample column divider (1px rule on left of NBI) */
  border-right: 1px solid rgba(107, 122, 109, 0.35) !important;
  box-shadow: 0 1px 0 rgba(107, 122, 109, 0.35);
}

.samples-matrix .samples-matrix-nut {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  width: 3.2rem;
  min-width: 3.2rem;
  max-width: 3.2rem;
  color: #c5d4c7;
  text-transform: none;
}

.samples-matrix-nbi {
  text-align: center !important;
  width: 3.6rem;
  min-width: 3.6rem;
  max-width: 3.6rem;
  padding: 0.18rem 0.2rem !important;
  vertical-align: middle;
  white-space: nowrap;
  /* Match sticky sample column divider (1px rule on left of NBI) */
  border-right: 1px solid rgba(107, 122, 109, 0.28) !important;
}

.samples-matrix-nbi-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.85rem;
  min-height: 2.05rem;
  padding: 0.35rem 0.35rem;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.samples-matrix-nbi-chip.nbi-good {
  color: #9dff9d;
  background:
    linear-gradient(
      180deg,
      rgba(44, 255, 44, 0.14) 0%,
      rgba(44, 255, 44, 0.05) 100%
    ),
    #151c17;
  border-color: rgba(111, 207, 122, 0.38);
}

.samples-matrix-nbi-chip.nbi-moderate {
  color: #fff59a;
  background:
    linear-gradient(
      180deg,
      rgba(255, 247, 0, 0.14) 0%,
      rgba(255, 247, 0, 0.05) 100%
    ),
    #151c17;
  border-color: rgba(255, 247, 0, 0.34);
}

.samples-matrix-nbi-chip.nbi-strong {
  color: #ff9d9a;
  background:
    linear-gradient(
      180deg,
      rgba(251, 38, 34, 0.16) 0%,
      rgba(251, 38, 34, 0.05) 100%
    ),
    #151c17;
  border-color: rgba(251, 38, 34, 0.4);
}

.samples-matrix-nbi-chip.nbi-empty {
  color: #a8a8a8;
  background:
    linear-gradient(
      180deg,
      rgba(130, 130, 130, 0.2) 0%,
      rgba(100, 100, 100, 0.1) 100%
    ),
    #151c17;
  border-color: rgba(150, 150, 150, 0.4);
  font-weight: 500;
}

.samples-matrix tbody tr.samples-matrix-row {
  --row-bg: #151c17;
  cursor: pointer;
}

/* Zebra only on data rows (skip crop separator rows) */
.samples-matrix tbody tr.samples-matrix-row:nth-child(odd of .samples-matrix-row) {
  --row-bg: #151c17;
}

.samples-matrix tbody tr.samples-matrix-row:nth-child(even of .samples-matrix-row) {
  --row-bg: #1a211c;
}

.samples-matrix tbody tr.samples-matrix-row:hover {
  --row-bg: #1c261e;
}

/* nth-child zebra is more specific than .is-selected alone — repeat it here
   so the highlight applies to every cell, not only after hover. */
.samples-matrix tbody tr.samples-matrix-row.is-selected,
.samples-matrix tbody tr.samples-matrix-row.is-selected:nth-child(odd of .samples-matrix-row),
.samples-matrix tbody tr.samples-matrix-row.is-selected:nth-child(even of .samples-matrix-row),
.samples-matrix tbody tr.samples-matrix-row.is-selected:hover,
.samples-matrix tbody tr.samples-matrix-row.is-selected:hover:nth-child(odd of .samples-matrix-row),
.samples-matrix tbody tr.samples-matrix-row.is-selected:hover:nth-child(even of .samples-matrix-row) {
  --row-bg: #2c4330;
}

.samples-matrix tbody tr.samples-matrix-row td {
  background: var(--row-bg);
}

.samples-matrix tbody tr.samples-matrix-row.is-selected td {
  background: var(--row-bg);
}

.samples-matrix tbody tr.samples-matrix-group-gap,
.samples-matrix tbody tr.samples-matrix-group-gap:hover {
  cursor: default;
  background: transparent;
}

.samples-matrix tbody tr.samples-matrix-group-gap td {
  height: 0.55rem;
  padding: 0 !important;
  border: 0;
  background: rgba(8, 11, 8, 0.92);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* Crop group separator between mixed-crop sample blocks */
.samples-matrix tbody tr.samples-matrix-crop-sep {
  cursor: default;
}

.samples-matrix tbody tr.samples-matrix-crop-sep td {
  background: transparent;
  padding: 0;
  border: 0;
  text-align: left;
}

.samples-matrix-crop-sep-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 0.55rem 0.85rem 0.35rem 0.85rem !important;
  background: linear-gradient(
    180deg,
    rgba(22, 30, 23, 0.98) 0%,
    rgba(18, 24, 18, 0.95) 100%
  ) !important;
  border-top: 1px solid rgba(107, 122, 109, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(160, 185, 165, 0.08);
}

.samples-matrix tbody tr.samples-matrix-crop-sep:first-child .samples-matrix-crop-sep-cell {
  border-top: 0 !important;
  padding-top: 0.35rem !important;
}

.samples-matrix-crop-sep-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.92;
}

.samples-matrix tbody tr.samples-matrix-scope-sep > td {
  position: sticky;
  top: 0;
  z-index: 1;
}

.samples-matrix tbody tr.samples-matrix-scope-sep .samples-matrix-scope-sep-cell {
  left: 0;
  z-index: 3;
  width: 15.25rem;
  min-width: 15.25rem;
  max-width: 15.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.4rem 0.45rem 0.32rem 1.7rem !important;
  border-top: 1px solid rgba(196, 164, 88, 0.28) !important;
  box-shadow: 1px 0 0 rgba(196, 164, 88, 0.22);
  background: linear-gradient(
    180deg,
    rgba(48, 38, 16, 0.96) 0%,
    rgba(32, 28, 16, 0.94) 100%
  ) !important;
}

.samples-matrix tbody tr.samples-matrix-crop-sep + tr.samples-matrix-scope-sep .samples-matrix-scope-sep-cell {
  border-top: 0 !important;
  padding-top: 0.2rem !important;
  padding-left: 1.7rem !important;
}

.samples-matrix tbody tr.samples-matrix-scope-sep td.samples-matrix-scope-h {
  padding: 0.38rem 0.18rem !important;
  text-align: center;
  vertical-align: middle;
  background: linear-gradient(
    180deg,
    rgba(48, 38, 16, 0.96) 0%,
    rgba(32, 28, 16, 0.94) 100%
  ) !important;
  color: #e0c57a;
  border-top: 1px solid rgba(196, 164, 88, 0.28) !important;
  box-shadow: 0 1px 0 rgba(196, 164, 88, 0.18);
}

.samples-matrix tbody tr.samples-matrix-crop-sep + tr.samples-matrix-scope-sep td.samples-matrix-scope-h {
  border-top: 0 !important;
}

.samples-matrix tbody tr.samples-matrix-scope-sep td.samples-matrix-scope-h.samples-matrix-nbi-h {
  color: #e0c57a;
  border-right: 1px solid rgba(196, 164, 88, 0.28) !important;
}

.samples-matrix tbody tr.samples-matrix-scope-sep td.samples-matrix-nut:first-of-type {
  padding-left: 0.5rem !important;
}

.samples-matrix tbody tr.samples-matrix-scope-sep td.samples-matrix-nut:last-child {
  padding-right: 0.55rem !important;
}

.samples-matrix-scope-sep-label {
  display: block;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.74rem;
  font-weight: 650;
  color: #d4b56a;
  opacity: 0.95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.samples-matrix .samples-matrix-sample {
  text-align: left;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--row-bg);
  padding: 0.45rem 0.55rem 0.45rem 2.45rem;
  width: 15.25rem;
  min-width: 15.25rem;
  max-width: 15.25rem;
  box-shadow: 1px 0 0 rgba(107, 122, 109, 0.28);
}

.samples-matrix-sample-body {
  position: relative;
  min-width: 0;
  padding-right: 1.35rem;
}

.samples-matrix-sample-text {
  min-width: 0;
  overflow: hidden;
}

.samples-matrix-sample-main {
  display: block;
  font-weight: 650;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Single meta line (date · GDU) keeps each row ~2 lines tall */
.samples-matrix-sample-meta {
  display: block;
  margin-top: 0.12rem;
  margin-left: 0.7rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-dim);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}

/* Lower-right ⋯ menu trigger — keep opacity stable so hover does not flicker */
.samples-matrix-sample-more {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.05rem 0.28rem;
  min-width: 1.2rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0.72;
}

.samples-matrix-sample-more:hover,
.samples-matrix-sample-more:focus-visible {
  color: var(--accent);
  outline: none;
}

.samples-matrix tbody tr.samples-matrix-row.is-selected td {
  box-shadow:
    inset 0 1px 0 rgba(155, 230, 165, 0.55),
    inset 0 -1px 0 rgba(155, 230, 165, 0.4);
}

.samples-matrix tbody tr.is-selected .samples-matrix-sample {
  z-index: 2;
  background: #35523a;
  box-shadow:
    inset 5px 0 0 var(--accent),
    inset 0 1px 0 rgba(155, 230, 165, 0.55),
    inset 0 -1px 0 rgba(155, 230, 165, 0.4),
    1px 0 0 rgba(107, 122, 109, 0.28);
}

.samples-matrix tbody tr.is-selected .samples-matrix-sample-main {
  color: #d8f8dc;
  font-weight: 750;
}

.samples-matrix tbody tr.is-selected .samples-matrix-sample-meta {
  color: #b7d4bb;
}

/* Value chips — fill the cell so less empty background shows through */
.samples-matrix-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 2.85rem;
  min-height: 2.05rem;
  padding: 0.35rem 0.3rem;
  border-radius: 8px;
  border: 1px solid transparent;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1;
}

.samples-matrix-chip.status-green {
  background:
    linear-gradient(
      180deg,
      rgba(44, 255, 44, 0.16) 0%,
      rgba(44, 255, 44, 0.06) 100%
    ),
    #151c17;
  border-color: rgba(111, 207, 122, 0.35);
  color: #9dff9d;
  box-shadow: inset 0 1px 0 rgba(44, 255, 44, 0.12);
}

.samples-matrix-chip.status-yellow {
  background:
    linear-gradient(
      180deg,
      rgba(255, 247, 0, 0.16) 0%,
      rgba(255, 247, 0, 0.05) 100%
    ),
    #151c17;
  border-color: rgba(255, 247, 0, 0.32);
  color: #fff59a;
  box-shadow: inset 0 1px 0 rgba(255, 247, 0, 0.1);
}

.samples-matrix-chip.status-red {
  background:
    linear-gradient(
      180deg,
      rgba(251, 38, 34, 0.18) 0%,
      rgba(251, 38, 34, 0.06) 100%
    ),
    #151c17;
  border-color: rgba(251, 38, 34, 0.38);
  color: #ff9d9a;
  box-shadow: inset 0 1px 0 rgba(251, 38, 34, 0.12);
}

.samples-matrix-chip.status-empty,
.samples-matrix-chip.status-unknown,
.samples-matrix-chip.status-unscored {
  background:
    linear-gradient(
      180deg,
      rgba(130, 130, 130, 0.22) 0%,
      rgba(100, 100, 100, 0.12) 100%
    ),
    #151c17;
  border-color: rgba(150, 150, 150, 0.42);
  color: #a8a8a8;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(180, 180, 180, 0.08);
}

.empty-state {
  color: var(--text-muted);
  padding: 2.5rem 1rem;
  text-align: center;
  line-height: 1.5;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.detail-header h2 { margin: 0 0 0.3rem; }

.detail-header-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.detail-goal-note {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.sample-edit-section-title {
  margin: 0.75rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--balance-heading, var(--text));
}

.sample-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.65rem 0.75rem;
}

.sample-edit-nutrients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.sample-edit-nut {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  background: #151c17;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sample-edit-nut-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.78rem;
}

.sample-edit-nut-head strong {
  grid-column: 1;
  justify-self: start;
  font-family: var(--mono);
  color: var(--accent);
}

.sample-edit-nut-head span {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  color: var(--text-muted);
}

.sample-edit-nut-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem;
  align-items: center;
}

.sample-edit-nut input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.35rem 0.45rem;
  color: var(--text);
  font-size: 0.82rem;
}

/* Hide number spinners — values are typed, not stepped */
.sample-edit-nut input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.sample-edit-nut input[type="number"]::-webkit-outer-spin-button,
.sample-edit-nut input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sample-edit-nut input:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.se-unit-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.se-unit-opt {
  margin: 0;
  padding: 0.32rem 0.45rem;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

.se-unit-opt:last-child {
  border-right: 0;
}

.se-unit-opt.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.se-unit-opt:hover:not(.is-active) {
  color: var(--text);
  background: rgba(107, 122, 109, 0.15);
}

.sample-edit-grid .se-span-2 {
  grid-column: 1 / -1;
}

.sample-edit-site-hint {
  margin: -0.15rem 0 0.15rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.sample-edit select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.55rem 0.7rem;
  color: var(--text);
  outline: none;
  font-size: 0.82rem;
}

.sample-edit select:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.sample-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(107, 122, 109, 0.22);
}

.sample-edit-actions .se-delete {
  margin-left: auto;
  color: #f0a0a0;
  border-color: rgba(220, 80, 80, 0.35);
}

.sample-edit-actions .se-delete:hover {
  color: #ffd0d0;
  background: rgba(220, 80, 80, 0.14);
  border-color: rgba(220, 80, 80, 0.5);
}

.sample-edit-status {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.sample-edit-status.is-ok {
  color: #9dff9d;
}

.sample-edit-status.is-err {
  color: #ff9a98;
}

.nutrient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}

.nutrient-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 0.75rem 0.8rem;
  background: #151c17;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  min-height: 6.25rem;
  justify-content: center;
}

.nutrient-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--status-color, var(--border));
}

.nutrient-card .sym {
  position: absolute;
  top: 0.45rem;
  left: 0.55rem;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  line-height: 1;
}

.nutrient-card .name {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.15rem 0 0;
  width: 100%;
  text-align: center;
}

.nutrient-card .val {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  width: 100%;
  text-align: center;
}

.nutrient-card .unit {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-left: 0.2rem;
}

.nutrient-card .status-label {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--status-text, var(--text-dim));
  width: 100%;
  text-align: center;
}

.nutrient-card.status-green {
  --status-color: var(--green);
  --status-text: #9dff9d;
  background: linear-gradient(180deg, rgba(44,255,44,0.08), #151c17 55%);
}
.nutrient-card.status-yellow {
  --status-color: var(--yellow);
  --status-text: #fff59a;
  background: linear-gradient(180deg, rgba(255,247,0,0.08), #151c17 55%);
}
.nutrient-card.status-red {
  --status-color: var(--red);
  --status-text: #ff9a98;
  background: linear-gradient(180deg, rgba(251,38,34,0.1), #151c17 55%);
}
.nutrient-card.status-unscored,
.nutrient-card.status-empty,
.nutrient-card.status-unknown {
  --status-color: #6a6a6a;
  --status-text: #9a9a9a;
  border-color: rgba(140, 140, 140, 0.45);
  background: linear-gradient(180deg, rgba(120, 120, 120, 0.12), #151c17 55%);
  box-shadow:
    0 0 0 1px rgba(150, 150, 150, 0.18),
    0 0 14px rgba(160, 160, 160, 0.22),
    inset 0 0 18px rgba(120, 120, 120, 0.08);
}

.detail-source {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* Chart */
.chart-wrap {
  background: #121812;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  margin-bottom: 1rem;
  overflow: auto;
}

#trend-chart {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  cursor: crosshair;
  touch-action: none; /* keep wheel/pinch for chart zoom, not page scroll */
}

#trend-chart.is-panning {
  cursor: grabbing;
}

.chart-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.trend-uptake-hint {
  margin-top: 0.45rem;
  line-height: 1.4;
  max-width: 52rem;
}

.trend-uptake-guide {
  margin: 1rem 0 1.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(15, 20, 16, 0.55);
}

.trend-uptake-guide .balance-block-head {
  margin-bottom: 0.55rem;
}

.trend-uptake-lead {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(45, 58, 48, 0.85);
  background: #0f1410;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #c5d4c8;
}

.trend-uptake-lead strong {
  font-family: var(--mono);
  color: #f0f7f1;
}

.trend-uptake-dl {
  margin: 0;
  display: grid;
  gap: 0;
}

.trend-uptake-dl > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: start;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(45, 58, 48, 0.55);
}

.trend-uptake-dl > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.trend-uptake-dl dt {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: #9ec7ff;
  line-height: 1.35;
}

.trend-uptake-dl dd {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.trend-uptake-dl dd strong {
  color: #c5d4c8;
  font-weight: 600;
}

@media (max-width: 640px) {
  .trend-uptake-dl > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* ---- DRIS / Balance tab ---- */
.balance-intro {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.balance-intro p { margin: 0 0 0.5rem; }
.balance-intro p:last-child { margin-bottom: 0; }

.balance-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.balance-toolbar .field.inline {
  min-width: 0;
  flex: 1;
  width: 100%;
  margin: 0;
}

.balance-toolbar .field.inline > span {
  font-weight: 600;
  color: var(--text);
}

.balance-toolbar select {
  width: 100%;
  max-width: 100%;
}

/* NBI badge + tissue values side by side */
.balance-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.85rem 1rem;
  margin: 0 0 1.15rem;
}

.balance-nbi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem 0.45rem;
  margin: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: linear-gradient(145deg, #1a261c 0%, #121812 70%);
  box-shadow: 0 0 0 1px rgba(111, 207, 122, 0.08);
  min-height: 0;
  width: auto;
  flex: 0 0 auto;
  min-width: 10.5rem;
  align-self: stretch;
}

.balance-nbi[hidden] {
  display: none !important;
}

.balance-nbi .nbi-kicker {
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #e8efe6;
  order: 0;
  line-height: 1.2;
  margin: 0;
  flex-shrink: 0;
}

.balance-nbi .nbi-value {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--accent);
  letter-spacing: -0.03em;
  order: 1;
  /* Share free space with .nbi-sub so value+hint sit mid-card */
  margin-top: auto;
}

.balance-nbi .nbi-hint {
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  color: #c5d4c8;
  order: 2;
}

.balance-nbi .nbi-sub {
  margin: auto 0 0;
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.7rem;
  color: #6b7a6d;
  order: 3;
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
}

/* NBI severity accents */
.balance-nbi.nbi-good {
  border-color: rgba(111, 207, 122, 0.45);
  box-shadow: 0 0 0 1px rgba(111, 207, 122, 0.12);
}
.balance-nbi.nbi-good .nbi-value { color: #6fcf7a; }
.balance-nbi.nbi-good .nbi-hint { color: #9dff9d; }

.balance-nbi.nbi-moderate {
  border-color: rgba(255, 247, 0, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 247, 0, 0.1);
}
.balance-nbi.nbi-moderate .nbi-value { color: #fff36a; }
.balance-nbi.nbi-moderate .nbi-hint { color: #fff59a; }

.balance-nbi.nbi-strong {
  border-color: rgba(251, 38, 34, 0.45);
  box-shadow: 0 0 0 1px rgba(251, 38, 34, 0.12);
}
.balance-nbi.nbi-strong .nbi-value { color: #ff7b78; }
.balance-nbi.nbi-strong .nbi-hint { color: #ff9a98; }

/* Top row: DRIS bar chart | ratio spider */
.balance-charts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
  align-items: stretch;
}

.balance-tissue-panel {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  padding: 0.55rem 0.7rem 0.6rem;
}

.balance-tissue-panel[hidden] {
  display: none !important;
}

.balance-tissue-panel h3 {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--balance-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

/* Compact multi-column nutrient boxes */
.balance-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr));
  gap: 0.4rem;
  align-content: start;
}

.balance-values-grid .tissue-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.45rem 0.45rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: linear-gradient(
    180deg,
    rgba(107, 122, 109, 0.1) 0%,
    rgba(15, 20, 16, 0.65) 55%
  );
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* Top status bar — same treatment as Samples nutrient cards */
.balance-values-grid .tissue-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--status-color, var(--border));
}

.balance-values-grid .tissue-box-green {
  --status-color: var(--green);
  border-color: rgba(111, 207, 122, 0.35);
  background: linear-gradient(
    180deg,
    rgba(44, 255, 44, 0.14) 0%,
    rgba(44, 255, 44, 0.04) 45%,
    rgba(15, 20, 16, 0.55) 100%
  );
}

.balance-values-grid .tissue-box-yellow {
  --status-color: var(--yellow);
  border-color: rgba(255, 247, 0, 0.3);
  background: linear-gradient(
    180deg,
    rgba(255, 247, 0, 0.14) 0%,
    rgba(255, 247, 0, 0.04) 45%,
    rgba(15, 20, 16, 0.55) 100%
  );
}

.balance-values-grid .tissue-box-red {
  --status-color: var(--red);
  border-color: rgba(251, 38, 34, 0.35);
  background: linear-gradient(
    180deg,
    rgba(251, 38, 34, 0.16) 0%,
    rgba(251, 38, 34, 0.05) 45%,
    rgba(15, 20, 16, 0.55) 100%
  );
}

/* No sufficiency curve (e.g. Mo, Na) — neutral grey, not a sufficiency call */
.balance-values-grid .tissue-box-empty {
  --status-color: #6a6a6a;
  border-color: rgba(148, 163, 152, 0.28);
  background: linear-gradient(
    180deg,
    rgba(148, 163, 152, 0.16) 0%,
    rgba(148, 163, 152, 0.05) 45%,
    rgba(15, 20, 16, 0.55) 100%
  );
}

.balance-values-grid .tissue-box-empty .tissue-sym {
  color: #b8c4ba;
}

.balance-values-grid .tissue-box-empty .tissue-name {
  color: #7a887c;
}

.balance-values-grid .tissue-sym {
  font-family: var(--mono);
  font-weight: 700;
  color: #f0f7f1;
  font-size: 0.78rem;
  line-height: 1.15;
}

.balance-values-grid .tissue-name {
  font-size: 0.62rem;
  font-weight: 500;
  color: #93a394;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.balance-values-grid .tissue-val {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.74rem;
  line-height: 1.2;
  margin-top: 0.12rem;
  white-space: nowrap;
}

.balance-values-grid .tissue-val-green { color: #6fcf7a; }
.balance-values-grid .tissue-val-yellow { color: #fff36a; }
.balance-values-grid .tissue-val-red { color: #ff7b78; }

.balance-values-grid .tissue-box-empty .tissue-val {
  color: #a8b5aa;
  font-weight: 500;
}

@media (max-width: 1100px) {
  .balance-charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .balance-summary-row {
    flex-direction: column;
  }
  .balance-nbi {
    width: 100%;
  }
}

/* Stack of content cards under the indices chart */
.balance-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
}

.balance-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(15, 20, 16, 0.55);
  padding: 0.85rem 0.95rem;
}

.balance-block-chart {
  border: none;
  background: transparent;
  padding: 0;
}

.balance-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--balance-heading-rule);
  text-align: center;
}

.balance-block-head h4 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--balance-heading);
  letter-spacing: 0.03em;
  text-align: center;
  width: 100%;
}

.balance-indices-interp .balance-interp {
  margin: 0;
  min-height: 2.5rem;
}

.balance-obs-bands {
  margin: 0 0 0.75rem;
  padding: 0 0 0.65rem;
  border-bottom: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.balance-obs-bands[hidden] {
  display: none !important;
}

.balance-obs-bands .adj-section {
  margin-bottom: 0;
}

.adj-obs-bands-hint {
  margin: 0.15rem 0 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #6b7a6d;
}

.adj-section-plan {
  background: transparent;
  border: 0;
  padding: 0;
}

.balance-adjustment-body,
.balance-simulation-body {
  font-size: 0.82rem;
  line-height: 1.45;
}

.balance-simulation-body.muted {
  color: var(--text-muted);
}

.adj-section-chips {
  background: rgba(18, 24, 18, 0.4);
}

.balance-adjustment-body.muted {
  color: var(--text-muted);
}

.adj-section {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  background: rgba(18, 24, 18, 0.55);
  border: 1px solid rgba(45, 58, 48, 0.65);
}

.adj-section:last-child {
  margin-bottom: 0;
}

.adj-section-divider {
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  background: rgba(15, 20, 16, 0.35);
}

.adj-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
  text-align: center;
}

.adj-section-title.raise { color: #ff6b68; }
.adj-section-title.hold { color: #8dff8d; }
.adj-section-title.ease { color: #9ad8ff; }
.adj-section-title.action {
  color: var(--balance-heading);
}
.adj-section-title.note {
  color: #e4e0d6;
}

.adj-goal-list {
  margin: 0;
  padding-left: 1.15rem;
  color: #c5d4c8;
  font-size: 0.82rem;
  line-height: 1.45;
}

.adj-goal-list li {
  margin-bottom: 0.35rem;
}

.adj-goal-list li:last-child {
  margin-bottom: 0;
}

/* Simulation section */
.sim-intro {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #93a394;
}

.sim-toggle-panel {
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.75rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(12, 16, 14, 0.65);
}

.sim-toggle-head {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(107, 122, 109, 0.28);
  text-align: center;
}

.sim-toggle-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--balance-heading, #f4f0e6);
}

.sim-toggle-meta {
  font-size: 0.72rem;
  color: #6b7a6d;
  line-height: 1.3;
}

.sim-toggle-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.sim-toggle-empty {
  font-size: 0.8rem;
  color: #6b7a6d;
  width: 100%;
  text-align: center;
}

.sim-toggle-chip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  width: auto;
  /* Symmetric padding; checkbox sits in the top-left corner overlay */
  padding: 0.45rem 0.65rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0f1410;
  color: #c5d4c8;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}

.sim-toggle-chip:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.sim-toggle-check {
  position: absolute;
  top: 0.28rem;
  left: 0.28rem;
  z-index: 1;
  box-sizing: border-box;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1.5px solid #5a6b5c;
  background: transparent;
  pointer-events: none;
}

.sim-toggle-chip.is-on .sim-toggle-check {
  border-color: rgba(111, 207, 122, 0.75);
  background: rgba(111, 207, 122, 0.2);
}

.sim-toggle-chip.is-on .sim-toggle-check::after {
  content: "";
  position: absolute;
  left: 0.18rem;
  top: 0.01rem;
  width: 0.22rem;
  height: 0.42rem;
  border: solid #8dff8d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sim-toggle-chip.is-on {
  border-color: rgba(111, 207, 122, 0.4);
  box-shadow: 0 0 0 1px rgba(111, 207, 122, 0.1);
}

.sim-toggle-chip.is-off {
  opacity: 0.62;
  border-style: dashed;
}

.sim-toggle-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: 100%;
  line-height: 1.15;
}

.sim-toggle-sym {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: #f0f7f1;
  letter-spacing: 0.02em;
}

.sim-toggle-dir {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a6d;
}

.sim-toggle-chip.dir-up .sim-toggle-dir {
  color: #8dff8d;
}

.sim-toggle-chip.dir-down .sim-toggle-dir {
  color: #9ec7ff;
}

.sim-toggle-range,
.sim-toggle-delta {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--mono);
  line-height: 1.2;
}

.sim-toggle-range {
  font-size: 0.68rem;
  color: #93a394;
  white-space: nowrap;
}

.sim-toggle-delta {
  font-size: 0.66rem;
  color: #6b7a6d;
}

.sim-toggle-chip.is-off .sim-toggle-range,
.sim-toggle-chip.is-off .sim-toggle-delta {
  text-decoration: line-through;
  color: #6b7a6d;
}

.sim-nbi-panel {
  margin-bottom: 0.55rem;
  padding: 0.65rem 0.75rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #0f1410;
}

.sim-nbi-title {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--balance-heading, #f4f0e6);
}

.sim-nbi-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

@media (max-width: 640px) {
  .sim-nbi-row {
    grid-template-columns: 1fr 1fr;
  }
  .sim-nbi-arrow {
    display: none;
  }
}

.sim-nbi-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
}

.sim-nbi-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a6d;
  font-weight: 600;
}

.sim-nbi-value {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: #f0f7f1;
}

.sim-nbi-hint {
  font-size: 0.75rem;
  font-weight: 600;
  color: #93a394;
}

.sim-nbi-arrow {
  font-size: 1.25rem;
  color: #6b7a6d;
}

.sim-nbi-panel.sim-improved {
  border-color: rgba(111, 207, 122, 0.4);
}

.sim-nbi-panel.sim-improved .sim-nbi-value {
  color: #8dff8d;
}

.sim-nbi-panel.sim-worse {
  border-color: rgba(251, 38, 34, 0.35);
}

.sim-nbi-panel.sim-worse .sim-nbi-value {
  color: #ff9a98;
}

.sim-verdict {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.4;
  font-weight: 500;
  color: #c5d4c8;
  text-align: center;
}

.sim-verdict.sim-improved {
  color: #9dff9d;
}

.sim-verdict.sim-worse {
  color: #ff9a98;
}

.sim-verdict.sim-flat {
  color: #93a394;
}

.sim-order {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
  color: #c5d4c8;
}

.sim-order-label {
  color: #6b7a6d;
  font-weight: 600;
  margin-right: 0.35rem;
}

.sim-chart-block {
  margin: 0.55rem 0 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(12, 16, 14, 0.55);
  padding: 0.45rem 0.5rem 0.55rem;
  overflow: visible;
}

.sim-chart-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--balance-heading, #f4f0e6);
  text-align: center;
  margin: 0 0 0.35rem;
}

.balance-sim-chart {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  background: #121812;
  border-radius: var(--radius-sm);
}

.sim-nut {
  font-family: var(--mono);
  color: #f0f7f1;
}

.sim-delta-down {
  color: #8dff8d;
}

.sim-delta-up {
  color: #ff9a98;
}

.adj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.adj-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #0f1410;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #c5d4c8;
  cursor: pointer;
}

.adj-chip:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.adj-chip .adj-idx {
  font-size: 0.72rem;
  color: #93a394;
}

.adj-chip.raise {
  border-color: rgba(251, 38, 34, 0.45);
  color: #ff9a98;
}

.adj-chip.raise .adj-idx { color: #ff9a98; }

.adj-chip.hold {
  border-color: rgba(111, 207, 122, 0.35);
  color: #9dff9d;
}

.adj-chip.ease {
  border-color: rgba(126, 200, 255, 0.45);
  color: #9ec7ff;
}

.adj-chip.ease .adj-idx { color: #9ec7ff; }

.adj-chip.is-selected {
  box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.55);
}

/* Expandable suggested-level plan rows */
.adj-plan-intro {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #6b7a6d;
}

.adj-plan-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* Grow with expanded rows — page scroll, not an inner scroll box */
  overflow: visible;
}

.adj-plan-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(12, 16, 14, 0.65);
  font-size: 0.8rem;
  color: #c5d4c8;
}

.adj-plan-item-raise {
  border-color: rgba(251, 38, 34, 0.28);
}

.adj-plan-item-ease {
  border-color: rgba(126, 200, 255, 0.28);
}

.adj-plan-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.adj-plan-summary::-webkit-details-marker {
  display: none;
}

.adj-plan-summary::before {
  content: "▸";
  flex: 0 0 auto;
  color: #6b7a6d;
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 0.12s ease;
}

.adj-plan-item[open] > .adj-plan-summary::before {
  transform: rotate(90deg);
  color: #93a394;
}

.adj-plan-summary-main {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
}

.adj-plan-priority {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: #f4f0e6;
  background: rgba(251, 38, 34, 0.22);
  border: 1px solid rgba(251, 38, 34, 0.45);
}

.adj-plan-priority-none {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  visibility: hidden;
}

.adj-plan-action {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.adj-plan-action-raise {
  color: #ff9a98;
}

.adj-plan-action-ease {
  color: #9ec7ff;
}

.adj-plan-action-hold {
  color: #8dff8d;
}

.adj-plan-metrics {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  color: #93a394;
}

.adj-plan-metric {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem;
}

.adj-plan-metric-label {
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a6d;
}

.adj-plan-metric-suggested {
  color: #8dff8d;
  font-weight: 700;
}

.adj-plan-arrow {
  color: #6b7a6d;
}

.adj-plan-change.up,
.adj-plan-change.down {
  color: #c5d4c8;
}

.adj-plan-expand-hint {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a6d;
}

.adj-plan-item[open] .adj-plan-expand-hint {
  color: #93a394;
}

.adj-plan-item[open] .adj-plan-expand-hint::after {
  content: " · hide";
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.adj-plan-detail {
  padding: 0 0.55rem 0.55rem 1.35rem;
  border-top: 1px solid rgba(107, 122, 109, 0.22);
}

.adj-plan-basis {
  margin: 0.45rem 0 0.35rem;
  font-size: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.adj-plan-basis-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a6d;
}

.adj-detail-hint {
  margin: 0.25rem 0 0;
  font-size: 0.74rem;
  color: #6b7a6d;
  line-height: 1.35;
}

.adj-plan-detail .adj-ratios {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.45rem;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-family: var(--mono);
}

.adj-plan-detail .mulder-note {
  margin-top: 0.45rem;
}

.adj-ratios-label {
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  color: #6b7a6d;
  margin-right: 0.15rem;
}

.adj-ratio-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: rgba(15, 20, 16, 0.65);
  border: 1px solid rgba(45, 58, 48, 0.9);
}

.adj-ratio-expr {
  color: #c5d4c8;
  font-weight: 600;
}

.adj-ratio-val {
  color: #93a394;
}

.adj-target {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.4rem;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-family: var(--mono);
  color: #93a394;
}

.adj-target-label {
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  color: #6b7a6d;
  margin-right: 0.1rem;
}

.adj-target-current {
  color: #c5d4c8;
}

.adj-target-arrow {
  color: #6b7a6d;
}

.adj-target-suggested {
  color: #8dff8d;
  font-weight: 700;
}

.adj-target-change {
  color: #93a394;
}

.adj-target-change.up,
.adj-target-change.down {
  color: #c5d4c8;
}

.adj-target-basis {
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.72rem;
  color: #6b7a6d;
  cursor: help;
  border-bottom: 1px dotted rgba(107, 122, 109, 0.55);
}



.adj-disclaimer {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.74rem;
  line-height: 1.4;
  color: #6b7a6d;
}

.adj-empty {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.adj-basis {
  font-size: 0.72rem;
  color: #93a394;
  max-width: 14rem;
  cursor: help;
  border-bottom: 1px dotted rgba(147, 163, 148, 0.45);
}

.adj-basis-note {
  margin: 0.3rem 0 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: #6b7a6d;
}

.adj-basis-note strong {
  color: #93a394;
  font-weight: 600;
}

.adj-target-note {
  margin: 0.4rem 0 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #6b7a6d;
}

#balance-chart {
  cursor: pointer;
}

.indices-field-guide dl {
  margin: 0;
  display: grid;
  gap: 0;
}

.indices-field-guide dl > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.35rem 0.65rem;
  align-items: start;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(45, 58, 48, 0.55);
}

.indices-field-guide dl > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.indices-field-guide dt {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: #9ec7ff;
  line-height: 1.35;
}

.indices-field-guide dd {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.indices-field-guide dd strong {
  color: #c5d4c8;
  font-weight: 600;
}

@media (max-width: 640px) {
  .indices-field-guide dl > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.balance-chart-panel,
.balance-spider-panel,
.balance-side {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  padding: 0.85rem 1rem 1rem;
  min-width: 0;
}

.balance-chart-panel h3,
.balance-block-chart h3,
.balance-spider-panel h3,
.balance-side h3,
.balance-norms h3 {
  margin: 0 0 0.7rem;
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--balance-heading);
  letter-spacing: 0.03em;
  text-align: center;
}

.balance-chart-panel h3 .muted,
.balance-block-chart h3 .muted,
.balance-spider-panel h3 .muted {
  font-size: 0.78em;
  font-weight: 500;
  color: var(--text-muted);
}

.balance-spider-panel h3 {
  margin: 0;
}

.balance-spider-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--balance-heading-rule);
  text-align: center;
}

#balance-chart,
#balance-spider,
#mulder-chart {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  background: #121812;
  border-radius: var(--radius-sm);
}

#mulder-chart {
  cursor: pointer;
}

.mulder-chart-block {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.mulder-chart-block h3 {
  margin: 0 0 0.5rem;
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--balance-heading);
  letter-spacing: 0.03em;
  text-align: center;
}

.mulder-chart-block .chart-hint {
  margin: 0 0 0.55rem;
}

.mulder-chart-block .mulder-chart-notes {
  margin: 0.4rem 0 0.35rem;
  font-size: 0.75rem;
  color: #6b7a6d;
}

.mulder-chart-block .chart-hint:last-child {
  margin: 0.45rem 0 0;
}

#balance-spider {
  cursor: crosshair;
  touch-action: pan-y;
}

.trend-readout .xh-ratio {
  color: #c5d4c8;
  font-weight: 600;
}

.trend-readout .xh-f-deficient {
  color: #fb2622;
}

.trend-readout .xh-f-excess {
  color: #7ec8ff;
}

.trend-readout .xh-f-balanced {
  color: #6fcf7a;
}

.balance-spider-panel .chart-hint {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.balance-spider-panel .chart-hint#balance-spider-hint {
  margin: 0.55rem 0 0;
}

.balance-spider-panel .trend-readout {
  margin-top: 0.45rem;
}

/* Always-visible spider readout strip with fixed field slots */
.spider-readout {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.6rem;
}

.spider-readout-fields {
  display: grid;
  grid-template-columns:
    minmax(4.5rem, 5.5rem)   /* Ratio */
    minmax(5rem, 5.75rem)    /* Deviation */
    minmax(6.75rem, 7.75rem) /* Status */
    minmax(5.75rem, 6.5rem)  /* Sample Ratio */
    minmax(5.5rem, 6.25rem); /* Ideal Ratio */
  gap: 0.35rem 0.85rem;
  justify-content: center;
  align-items: end;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.spider-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  min-width: 0;
  text-align: center;
}

.spider-field-label {
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a6d;
  line-height: 1;
  width: 100%;
  text-align: center;
}

.spider-field-value {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #c5d4c8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.15em;
  font-variant-numeric: tabular-nums;
  width: 100%;
  text-align: center;
}

.spider-field-value.is-empty {
  color: #6b7a6d;
}

.spider-field-value.xh-f-deficient {
  color: #fb2622;
}

.spider-field-value.xh-f-excess {
  color: #7ec8ff;
}

.spider-field-value.xh-f-balanced {
  color: #6fcf7a;
}

.spider-field-value.xh-status-deficient {
  color: #fb2622;
}

.spider-field-value.xh-status-excess {
  color: #7ec8ff;
}

.spider-field-value.xh-status-balanced {
  color: #6fcf7a;
}

@media (max-width: 700px) {
  .spider-readout-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
}

.balance-interp {
  font-size: 0.88rem;
  line-height: 1.45;
  margin-bottom: 0;
  min-height: 2.5rem;
}

.balance-interp .interp-list {
  margin: 0;
  padding-left: 1.15rem;
  color: #c5d4c8;
}

.balance-interp .interp-list li {
  margin-bottom: 0.4rem;
}

.balance-interp .interp-list li:last-child {
  margin-bottom: 0;
}

.balance-interp .interp-nutrient {
  font-family: var(--mono);
  font-weight: 700;
  color: #f0f7f1;
  letter-spacing: 0.02em;
}

.balance-interp .interp-mulder {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: #c5d4c8;
}

/* Chip stays left; body wraps in its own column (not under the chip) */
.balance-interp .interp-mulder .mulder-level {
  flex: 0 0 auto;
  margin-top: 0.12rem;
}

.balance-interp .interp-mulder-body {
  flex: 1 1 auto;
  min-width: 0;
}

.mulder-note {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.35rem;
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(158, 199, 255, 0.2);
  background: rgba(15, 24, 32, 0.55);
  font-size: 0.75rem;
  line-height: 1.4;
  color: #93a394;
}

.mulder-note-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a6d;
}

.mulder-note-list {
  margin: 0.15rem 0 0;
  padding: 0 0 0 1.1rem;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mulder-note-list > li {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

.mulder-ant strong,
.mulder-syn strong,
.mulder-risk strong {
  color: #c5d4c8;
  font-weight: 600;
}

.mulder-risk {
  color: #c4b84a;
}

.mulder-note-compact {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.75rem;
  color: #93a394;
}

.mulder-link-hint {
  color: #93a394;
  font-size: 0.8rem;
}

#balance-indices-link-hint {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
}

#balance-indices-link-hint .mulder-link-list {
  margin: 0.1rem 0;
  color: #93a394;
  font-size: 0.8rem;
}

#balance-indices-link-hint .mulder-link-list strong {
  color: #c5d4c8;
  font-weight: 600;
}

#balance-indices-link-hint .mulder-link-clear {
  color: #6b7a6d;
  font-size: 0.78rem;
}

.mulder-ease-notes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.mulder-ease-notes .mulder-note {
  margin-top: 0;
}

.mulder-risk-levels {
  font-size: 0.75rem;
  color: #c5d4c8;
}

.mulder-note-list .mulder-risk-levels {
  display: list-item;
}

/* Attention cue for Mulder interactions: Address Now / Monitor / FYI (not L/M/H).
   Framed chip: thicker left/right bars, thin top/bottom lines. */
.mulder-level {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px 3px;
  border-color: transparent;
  line-height: 1.25;
  vertical-align: 0.05em;
  white-space: nowrap;
}

.mulder-level-high {
  color: #f0d0ce;
  border-color: rgba(251, 38, 34, 0.55);
  border-left-color: #fb2622;
  border-right-color: #fb2622;
  background: rgba(251, 38, 34, 0.1);
}

.mulder-level-medium {
  color: #e8e2b8;
  border-color: rgba(201, 184, 74, 0.5);
  border-left-color: #c9b84a;
  border-right-color: #c9b84a;
  background: rgba(201, 184, 74, 0.1);
}

.mulder-level-low {
  color: #93a394;
  border-color: rgba(90, 107, 92, 0.55);
  border-left-color: #5a6b5c;
  border-right-color: #5a6b5c;
  background: rgba(15, 20, 16, 0.45);
}

.mulder-risk-detail {
  margin-top: 0.4rem;
  padding: 0.35rem 0.55rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(12, 16, 14, 0.75);
  font-size: 0.78rem;
  line-height: 1.4;
  color: #c5d4c8;
}

.mulder-risk-detail-high {
  border-color: rgba(251, 38, 34, 0.45);
  box-shadow: 0 0 0 1px rgba(251, 38, 34, 0.1);
}

.mulder-risk-detail-medium {
  border-color: rgba(255, 247, 0, 0.28);
}

.mulder-risk-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.mulder-risk-detail-head::-webkit-details-marker {
  display: none;
}

.mulder-risk-detail-head::before {
  content: "▸";
  flex: 0 0 auto;
  color: #6b7a6d;
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 0.12s ease;
}

.mulder-risk-detail[open] > .mulder-risk-detail-head::before {
  transform: rotate(90deg);
  color: #93a394;
}

.mulder-risk-detail[open] > .mulder-risk-detail-head {
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(107, 122, 109, 0.25);
}

.mulder-risk-expand-hint {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a6d;
}

.mulder-risk-detail[open] .mulder-risk-expand-hint {
  color: #93a394;
}

.mulder-risk-detail[open] .mulder-risk-expand-hint::after {
  content: " · hide";
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.mulder-risk-pair {
  font-family: var(--mono);
  color: #f0f7f1;
}

.mulder-risk-detail-list {
  margin: 0.15rem 0 0;
  padding-left: 1.1rem;
}

.mulder-risk-detail-list li {
  margin-bottom: 0.25rem;
}

.mulder-risk-detail-list li:last-child {
  margin-bottom: 0;
}

.mulder-risk-detail-list strong {
  color: #f0f7f1;
}

.dris-idx.deficient { color: var(--red); }
.dris-idx.excess { color: #7ec8ff; }
.dris-idx.balanced { color: var(--accent); }

.balance-norms {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  padding: 0.85rem 1rem 1rem;
}

.balance-norms-intro {
  margin-bottom: 1rem;
}

.balance-norms-intro p {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.balance-norms-intro p:last-child {
  margin-bottom: 0;
}

.balance-norms .table-wrap,
.balance-norms-table-wrap {
  max-height: min(75vh, 48rem);
  overflow: auto;
}

/* Wide compare table: ratio rows × GDU-band columns */
.balance-norms-compare {
  min-width: 42rem;
  border-collapse: separate;
  border-spacing: 0;
}

.balance-norms-compare th,
.balance-norms-compare td {
  white-space: nowrap;
  vertical-align: middle;
}

/* Sticky header (both header rows stay visible while scrolling) */
.balance-norms-compare thead th {
  position: sticky;
  z-index: 4;
  background: #1a221c;
  box-shadow: 0 1px 0 rgba(28, 38, 31, 0.95);
}

.balance-norms-compare thead tr.norms-band-labels th {
  top: 0;
}

.balance-norms-compare thead tr.norms-metric-labels th {
  top: var(--norms-head-1, 2.75rem);
}

.balance-norms-compare .norms-ratio-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-elevated, #151b16);
  text-align: left;
  min-width: 4.5rem;
}

.balance-norms-compare .norms-spark-col {
  position: sticky;
  left: 4.5rem;
  z-index: 2;
  background: var(--bg-elevated, #151b16);
  text-align: center;
  min-width: 5.6rem;
  width: 5.6rem;
  padding-left: 0.25rem;
  padding-right: 0.35rem;
  box-shadow: 2px 0 0 rgba(28, 38, 31, 0.9);
}

.balance-norms-compare thead .norms-ratio-col,
.balance-norms-compare thead .norms-spark-col {
  z-index: 6;
  background: #1a221c;
}

.balance-norms-compare thead .norms-ratio-col {
  left: 0;
}

.balance-norms-compare thead .norms-spark-col {
  left: 4.5rem;
}

.balance-norms-compare .norms-spark {
  display: block;
  margin: 0 auto;
  vertical-align: middle;
  overflow: visible;
}

.balance-norms-compare .norms-band-group {
  text-align: center;
  border-left: 1px solid rgba(147, 163, 148, 0.28);
  background: #1a221c;
  padding: 0.45rem 0.5rem;
  min-width: 9.5rem;
}

.balance-norms-compare .norms-band-range {
  display: block;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #e8efe6;
  font-weight: 700;
}

.balance-norms-compare .norms-band-nref {
  display: block;
  font-size: 0.65rem;
  color: #6b7a6d;
  margin-top: 0.08rem;
}

.balance-norms-compare .norms-metric-labels th {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: #93a394;
  border-left: 1px solid rgba(147, 163, 148, 0.12);
  padding: 0.3rem 0.45rem;
  background: #1a221c;
}

.balance-norms-compare .norms-metric-labels th:nth-child(3n + 1) {
  border-left: 1px solid rgba(147, 163, 148, 0.28);
}

.balance-norms-compare tbody td {
  text-align: center;
  border-left: 1px solid rgba(147, 163, 148, 0.1);
  padding: 0.35rem 0.45rem;
}

.balance-norms-compare tbody td.norms-mean {
  border-left: 1px solid rgba(147, 163, 148, 0.28);
  font-weight: 600;
  color: #e8efe6;
}

.balance-norms-compare tbody td.norms-ratio-col {
  border-left: none;
  text-align: left;
}

.balance-norms-compare tbody td.norms-spark-col {
  border-left: 1px solid rgba(147, 163, 148, 0.12);
}

/* Hover: light up the whole row and keep sticky ratio/trend columns highlighted */
.balance-norms-compare tbody tr:hover td {
  background: rgba(111, 207, 122, 0.1);
}

.balance-norms-compare tbody tr:hover td.norms-ratio-col {
  background: rgba(111, 207, 122, 0.18);
  color: #f0f7f1;
  box-shadow: inset 3px 0 0 rgba(111, 207, 122, 0.75);
}

.balance-norms-compare tbody tr:hover td.norms-spark-col {
  background: rgba(111, 207, 122, 0.14);
  box-shadow: 2px 0 0 rgba(28, 38, 31, 0.9);
}

.balance-norms-compare tbody tr:hover td.norms-mean {
  color: #f8fafc;
}

.trend-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-top: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #0f1410;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #c5d4c8;
  min-height: 2.35rem;
  box-sizing: border-box;
}

/* Always shown; idle when cursor is off the plot */
.trend-readout.is-idle {
  color: #6b7a6d;
}

.trend-readout[hidden] {
  display: none !important;
}

.trend-readout-label {
  font-family: var(--sans, "DM Sans", system-ui, sans-serif);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7a6d;
}

.trend-readout .xh-gdu {
  color: #9ec7ff;
}

.trend-readout .xh-val {
  color: #6fcf7a;
}

.trend-readout .xh-muted {
  color: #6b7a6d;
}

/* Dist bar in status table */
.dist-bar {
  display: flex;
  width: 100%;
  min-width: 120px;
  height: 0.7rem;
  border-radius: 999px;
  overflow: hidden;
  background: #121812;
  border: 1px solid var(--border);
}

.dist-bar i {
  display: block;
  height: 100%;
  font-style: normal;
}

.dist-bar .g { background: var(--green); }
.dist-bar .y { background: var(--yellow); }
.dist-bar .r { background: var(--red); }

.count-cell {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.count-cell.red { color: #ff9a98; }
.count-cell.yellow { color: #fff59a; }
.count-cell.green { color: #9dff9d; }

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .list-panel,
  .detail-panel {
    min-height: 0;
    max-height: none;
  }
  .table-wrap.tall {
    max-height: 22rem;
  }
}

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .app.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar {
    position: relative;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-resizer {
    display: none;
  }
  .app.sidebar-collapsed .sidebar {
    display: none;
  }
  .scope-panel {
    flex: 0 1 auto;
    min-height: 14rem;
  }
  .loc-tree {
    min-height: 12rem;
    max-height: 18rem;
  }
  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
  }
  .nav-primary {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 auto;
  }
  .nav-section-admin {
    flex: 1 1 100%;
    margin-top: 0.25rem;
  }
  .nav-section-items {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
    gap: 0.3rem;
  }
  .nav-item-admin.active {
    box-shadow: none;
    margin-left: 0;
    padding-left: 0.7rem;
    border-radius: 8px;
  }
}

/* Buttons (shared) */
.btn-primary,
.btn-secondary {
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-strong);
}

.btn-primary {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  color: #f2fff3;
}

.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0c120d;
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

.btn-secondary:hover {
  color: var(--text);
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}

.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary:disabled:hover,
.btn-secondary:disabled:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.btn-primary:disabled:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  color: #f2fff3;
}

.btn-danger {
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(251, 38, 34, 0.65);
  background: rgba(251, 38, 34, 0.18);
  color: #ffd0cf;
}

.btn-danger:hover {
  background: rgba(251, 38, 34, 0.32);
  border-color: rgba(251, 38, 34, 0.9);
  color: #fff;
}

.btn-danger:focus-visible {
  outline: 2px solid rgba(251, 38, 34, 0.7);
  outline-offset: 2px;
}

.yk-confirm-modal {
  z-index: 4500;
}

.yk-confirm-panel {
  width: min(28rem, 100%);
  max-height: min(80vh, 28rem);
}

.yk-confirm-message {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.yk-confirm-actions {
  justify-content: flex-end;
}

/* User Management */
.um-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.um-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.um-search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.15rem 0 0.35rem;
}

.um-search {
  flex: 1 1 14rem;
  min-width: 12rem;
  box-sizing: border-box;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.5rem 0.7rem;
  color: var(--text);
  outline: none;
  font-size: 0.86rem;
}

.um-search:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.um-search::placeholder {
  color: var(--text-dim);
}

.um-search-clear {
  flex-shrink: 0;
}

.um-section-title {
  margin: 1.25rem 0 0.35rem;
  font-size: 0.95rem;
  color: var(--balance-heading, var(--text));
}

.um-section-hint {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
}

.um-col-expand {
  width: 2.25rem;
  padding-left: 0.35rem !important;
  padding-right: 0.15rem !important;
}

.um-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}

.um-expand-btn:hover {
  color: var(--text);
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}

.um-expand-twist {
  font-size: 0.85rem;
  line-height: 1;
}

.um-team-count-btn {
  border: none;
  background: transparent;
  color: var(--accent, #6fcf7a);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.1rem 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.um-team-count-btn:hover {
  color: var(--text);
}

.um-growers-table tbody tr.um-grower-row:nth-child(odd of .um-grower-row) {
  background: transparent;
}

.um-growers-table tbody tr.um-grower-row:nth-child(even of .um-grower-row) {
  background: rgba(244, 240, 230, 0.045);
}

.um-growers-table tbody tr.um-grower-row.is-expanded {
  background: rgba(244, 240, 230, 0.06);
}

/* Hover the grower or its expanded users as one group */
.um-growers-table tbody tr.um-grower-row:nth-child(odd of .um-grower-row):is(
    :hover,
    :has(+ .um-grower-users-row:hover)
  ),
.um-growers-table tbody tr.um-grower-row:nth-child(even of .um-grower-row):is(
    :hover,
    :has(+ .um-grower-users-row:hover)
  ) {
  background: rgba(111, 207, 122, 0.16);
}

.um-growers-table tbody tr.um-grower-row:is(:hover, :has(+ .um-grower-users-row:hover)) td {
  box-shadow: inset 0 2px 0 rgba(111, 207, 122, 0.7),
    inset 0 -2px 0 rgba(111, 207, 122, 0.7);
}

.um-growers-table tbody tr.um-grower-row:is(:hover, :has(+ .um-grower-users-row:hover))
  td:first-child {
  box-shadow: inset 0 2px 0 rgba(111, 207, 122, 0.7),
    inset 2px 0 0 rgba(111, 207, 122, 0.7),
    inset 0 -2px 0 rgba(111, 207, 122, 0.7);
}

.um-growers-table tbody tr.um-grower-row:is(:hover, :has(+ .um-grower-users-row:hover))
  td:last-child {
  box-shadow: inset 0 2px 0 rgba(111, 207, 122, 0.7),
    inset -2px 0 0 rgba(111, 207, 122, 0.7),
    inset 0 -2px 0 rgba(111, 207, 122, 0.7);
}

.um-growers-table tbody tr.um-grower-row.is-expanded:is(
    :hover,
    :has(+ .um-grower-users-row:hover)
  )
  td {
  box-shadow: inset 0 2px 0 rgba(111, 207, 122, 0.7);
}

.um-growers-table tbody tr.um-grower-row.is-expanded:is(
    :hover,
    :has(+ .um-grower-users-row:hover)
  )
  td:first-child {
  box-shadow: inset 0 2px 0 rgba(111, 207, 122, 0.7),
    inset 2px 0 0 rgba(111, 207, 122, 0.7);
}

.um-growers-table tbody tr.um-grower-row.is-expanded:is(
    :hover,
    :has(+ .um-grower-users-row:hover)
  )
  td:last-child {
  box-shadow: inset 0 2px 0 rgba(111, 207, 122, 0.7),
    inset -2px 0 0 rgba(111, 207, 122, 0.7);
}

.um-growers-table tbody tr.um-grower-row:hover + .um-grower-users-row > td,
.um-growers-table tbody tr.um-grower-users-row:hover > td {
  background: rgba(26, 42, 30, 0.72);
  box-shadow: inset 2px 0 0 rgba(111, 207, 122, 0.7),
    inset -2px 0 0 rgba(111, 207, 122, 0.7),
    inset 0 -2px 0 rgba(111, 207, 122, 0.7);
}

/* Continuous row rule — cell borders collapse and break around wrapping actions */
.um-growers-table tbody tr.um-grower-row td {
  border-bottom-color: transparent;
  box-shadow: inset 0 -2px 0 rgba(46, 158, 148, 0.45);
  vertical-align: middle;
  padding-bottom: 0.8rem;
}

.um-growers-table tbody tr.um-grower-row td.um-actions {
  padding-bottom: 0.85rem;
}

.um-growers-table tbody tr.um-grower-row.is-expanded td {
  box-shadow: none;
}

.um-grower-users-row > td {
  padding: 0 0.65rem 0.85rem 2.4rem !important;
  background: rgba(12, 16, 12, 0.35);
  border-bottom-color: transparent;
  box-shadow: inset 0 -2px 0 rgba(46, 158, 148, 0.45);
}

.um-nested-users {
  padding: 0.35rem 0 0.15rem;
}

.um-nested-users-table {
  margin: 0;
  font-size: 0.9em;
}

.um-nested-users-table thead th {
  font-size: 0.72rem;
}

.um-nested-users-table tbody tr.um-user-row:nth-child(odd) {
  background: rgba(8, 12, 8, 0.45);
}

.um-nested-users-table tbody tr.um-user-row:nth-child(even) {
  background: rgba(46, 158, 148, 0.14);
}

.um-nested-users-table tbody tr.um-user-row:hover {
  background: rgba(111, 207, 122, 0.26);
}

#um-users-table tbody tr.um-user-row:nth-child(odd) {
  background: rgba(8, 12, 8, 0.45);
}

#um-users-table tbody tr.um-user-row:nth-child(even) {
  background: rgba(46, 158, 148, 0.14);
}

#um-users-table tbody tr.um-user-row:hover {
  background: rgba(111, 207, 122, 0.26);
}

.um-nested-empty {
  padding: 0.55rem 0.35rem;
  font-size: 0.82rem;
}

/* Collapsed by default — system perms are rare to grant */
.um-advanced-perms {
  border: 1px solid rgba(107, 122, 109, 0.35);
  border-radius: 9px;
  background: rgba(12, 16, 12, 0.35);
  padding: 0.35rem 0.55rem 0.45rem;
}

.um-advanced-perms summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  user-select: none;
  padding: 0.25rem 0;
}

.um-advanced-perms summary:hover {
  color: var(--text);
}

.um-advanced-perms[open] summary {
  color: #c9b070;
  margin-bottom: 0.35rem;
}

.um-advanced-perms-hint {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  line-height: 1.35;
}

.um-advanced-perms .um-perm-list {
  max-height: 8rem;
}

.um-username-change {
  padding: 0.45rem 0.55rem;
  border: 1px dashed rgba(201, 176, 112, 0.45);
  border-radius: 9px;
  background: rgba(40, 36, 20, 0.25);
}

.um-username-change-fields {
  margin-top: 0.45rem;
}

#um-status {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.82rem;
}

#um-status.um-status-error {
  color: #ff8f8c;
}

.um-grower-modal {
  z-index: 1300;
}

.um-grower-panel {
  width: min(40rem, 100%);
  max-height: min(90vh, 880px);
}

.um-grower-modal .um-form-card {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.um-form-status {
  margin: 0 0 0.65rem;
  min-height: 1.2em;
}

.um-form-status.um-status-error {
  color: #ff8f8c;
}

.um-form-card {
  margin: 0.5rem 0 1rem;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid rgba(107, 122, 109, 0.35);
  border-radius: 12px;
  background: rgba(18, 24, 18, 0.55);
}

.um-form-card h3 {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
}

.um-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.85rem;
}

.um-form-grid .um-span-2 {
  grid-column: 1 / -1;
}

.um-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.um-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.25rem;
}

.um-ops-list {
  margin-top: 0.35rem;
}

.um-ops-items {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.um-ops-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(18, 24, 18, 0.4);
}

.um-ops-item strong {
  min-width: 8rem;
}

.um-ops-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.um-ops-add select {
  min-width: 10rem;
}

.um-perm-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-elevated);
  max-height: 10rem;
  overflow: auto;
}

.um-perm-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.4rem 0.55rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
}

.um-perm-code {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
}

.um-check-field {
  justify-content: center;
}

.um-check-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.um-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--border);
}

.um-badge-on {
  color: #9dff9d;
  border-color: rgba(44, 255, 44, 0.35);
  background: rgba(44, 255, 44, 0.1);
}

.um-badge-off {
  color: #c9b8b8;
  border-color: rgba(200, 160, 160, 0.35);
  background: rgba(120, 80, 80, 0.15);
}

.um-badge-primary {
  color: #d4e8ff;
  border-color: rgba(120, 170, 230, 0.45);
  background: rgba(60, 100, 160, 0.25);
}

.um-badge-role {
  color: #b8c9ba;
  border-color: rgba(107, 122, 109, 0.4);
  background: rgba(26, 38, 28, 0.45);
}

.um-badge-warn {
  color: #ffe08a;
  border-color: rgba(255, 214, 80, 0.4);
  background: rgba(180, 140, 20, 0.18);
}

.um-id-muted {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.um-form-hint {
  margin: -0.25rem 0 0.65rem;
  font-size: 0.78rem;
}

.um-contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  line-height: 1.35;
  max-width: 16rem;
}

.um-contact-line {
  word-break: break-word;
}

.um-contact-k {
  display: inline-block;
  min-width: 3.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  margin-right: 0.25rem;
  vertical-align: top;
}

.um-contact-address {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
}

.um-contact-address .um-contact-k {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.um-addr-block {
  min-width: 0;
  flex: 1 1 auto;
}

.um-addr-line {
  word-break: break-word;
}

/* City / region / postal and country stack under street, left-aligned with street */
.um-addr-line-indent {
  padding-left: 0;
  margin-top: 0.05rem;
}

td.um-actions {
  display: table-cell;
  vertical-align: middle;
  white-space: normal;
}

.um-actions-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.um-btn {
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-radius: 7px;
  padding: 0.28rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.um-btn:hover {
  color: var(--text);
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}

.um-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.um-btn-toggle.is-on {
  border-color: rgba(255, 214, 80, 0.7);
  background: rgba(180, 140, 20, 0.32);
  color: #ffe08a;
  box-shadow: 0 0 0 1px rgba(255, 214, 80, 0.22);
}

.um-btn-toggle.is-on:hover {
  border-color: rgba(255, 214, 80, 0.9);
  background: rgba(200, 155, 24, 0.42);
  color: #fff0b0;
}

.um-btn-danger {
  border-color: rgba(251, 38, 34, 0.45);
  color: #ffb0ae;
}

.um-btn-danger:hover:not(:disabled) {
  border-color: rgba(251, 38, 34, 0.7);
  background: rgba(251, 38, 34, 0.12);
  color: #ffd0cf;
}

.um-perm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.um-perm-chip {
  font-size: 0.65rem;
  font-weight: 600;
  color: #b8c9ba;
  border: 1px solid rgba(107, 122, 109, 0.4);
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
  background: rgba(26, 38, 28, 0.55);
}

.um-perm-edit {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.um-perm-edit summary {
  cursor: pointer;
  user-select: none;
}

.um-perm-edit-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.4rem;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
}

.um-inline-perm {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.um-btn-save-perms {
  margin-top: 0.25rem;
  align-self: flex-start;
}

@media (max-width: 720px) {
  .um-form-grid {
    grid-template-columns: 1fr;
  }
  .um-form-grid .um-span-2 {
    grid-column: auto;
  }
}

/* Calendar */
.cal-panel {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 0;
}

.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.cal-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-width: 0;
}

.cal-pick {
  min-width: 9.5rem;
}

.cal-pick select {
  min-width: 10.5rem;
}

.cal-month-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cal-month-label {
  margin: 0;
  min-width: 9.5rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.cal-nav-btn {
  width: 2.1rem;
  padding-left: 0;
  padding-right: 0;
  font-size: 1.15rem;
  line-height: 1;
}

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

.cal-summary {
  margin: 0;
}

.cal-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

.cal-display-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cal-display-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.cal-display-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(107, 122, 109, 0.35);
  border-radius: 999px;
  background: rgba(15, 20, 16, 0.45);
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
  line-height: 1.2;
}

.cal-display-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.cal-display-chip.is-on {
  border-color: rgba(111, 207, 122, 0.45);
  background: rgba(111, 207, 122, 0.1);
  color: var(--text);
}

.cal-display-chip.is-off {
  opacity: 0.55;
}

.cal-display-chip:disabled,
.cal-display-chip.is-disabled {
  opacity: 0.36;
  cursor: not-allowed;
  color: var(--text-dim);
  border-color: rgba(107, 122, 109, 0.22);
  background: rgba(15, 20, 16, 0.28);
  pointer-events: none;
}

.cal-display-chip:disabled:hover,
.cal-display-chip.is-disabled:hover {
  border-color: rgba(107, 122, 109, 0.22);
  color: var(--text-dim);
}

.cal-display-chip .cal-swatch {
  width: 0.55rem;
  height: 0.55rem;
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.cal-footnotes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.15rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

.cal-vpd-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.cal-vpd-note strong {
  color: var(--text);
  font-weight: 650;
}

.cal-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
  flex: 0 0 auto;
}

.cal-swatch-caution { background: rgba(255, 247, 0, 0.45); }
.cal-swatch-high { background: rgba(251, 38, 34, 0.55); }
.cal-swatch-plant { background: rgba(111, 207, 122, 0.55); }
.cal-swatch-sample { background: #3ecfc0; }
.cal-swatch-select { background: #f4f0e6; }
.cal-swatch-frost { background: rgba(140, 190, 255, 0.55); }
.cal-swatch-heat { background: rgba(255, 140, 60, 0.55); }
.cal-swatch-night { background: rgba(255, 110, 80, 0.7); }
.cal-swatch-dry { background: rgba(196, 150, 80, 0.7); }

.cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: 0.85rem;
  align-items: start;
}

.cal-grid-wrap {
  min-width: 0;
}

.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.28rem;
}

.cal-weekdays span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.15rem 0 0.25rem;
}

.cal-cell {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.12rem;
  min-height: 6.6rem;
  padding: 0.32rem 0.38rem 0.38rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(12, 16, 12, 0.35);
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.cal-cell:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.cal-cell:focus-visible {
  outline: 2px solid #f4f0e6;
  outline-offset: 1px;
}

.cal-cell.is-outside {
  visibility: hidden;
  pointer-events: none;
}

.cal-cell.is-future,
.cal-cell.is-missing:not(.is-future) {
  opacity: 0.62;
}

.cal-cell.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1px rgba(244, 240, 230, 0.4);
}

.cal-cell.is-sample {
  background: linear-gradient(180deg, rgba(62, 207, 192, 0.22) 0%, rgba(28, 110, 108, 0.14) 100%);
  border-color: #3ecfc0;
  box-shadow: inset 0 0 0 1px rgba(62, 207, 192, 0.3);
  padding-top: 0.42rem;
}

.cal-cell.is-sample::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #3ecfc0;
}

.cal-cell.is-planting {
  background: linear-gradient(180deg, rgba(111, 207, 122, 0.28) 0%, rgba(61, 143, 74, 0.16) 100%);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(111, 207, 122, 0.35);
  padding-top: 0.42rem;
}

.cal-cell.is-planting::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent);
}

.cal-cell.is-selected {
  border-color: #f4f0e6;
  box-shadow: 0 0 0 2px #f4f0e6;
}

.cal-cell.is-vpd-caution {
  border-left: 3px solid #d4c200;
}

.cal-cell.is-vpd-high {
  border-left: 3px solid var(--red);
  background: rgba(251, 38, 34, 0.08);
}

.cal-cell.is-heat:not(.is-vpd-high):not(.is-frost):not(.is-night-heat) {
  background: rgba(255, 140, 60, 0.08);
}

.cal-cell.is-frost {
  border-left: 3px solid #7eb6ff;
  background: rgba(90, 140, 210, 0.14);
}

.cal-cell.is-night-heat:not(.is-frost) {
  border-left: 3px solid #ff7a4d;
  background: rgba(255, 100, 70, 0.12);
}

.cal-cell.is-sample.is-vpd-high,
.cal-cell.is-sample.is-frost,
.cal-cell.is-sample.is-heat,
.cal-cell.is-sample.is-night-heat {
  background: linear-gradient(180deg, rgba(62, 207, 192, 0.22) 0%, rgba(28, 110, 108, 0.14) 100%);
}

.cal-cell.is-planting.is-vpd-high,
.cal-cell.is-planting.is-frost,
.cal-cell.is-planting.is-heat,
.cal-cell.is-planting.is-night-heat {
  background: linear-gradient(180deg, rgba(111, 207, 122, 0.28) 0%, rgba(61, 143, 74, 0.16) 100%);
}

.cal-cell.is-sample.is-selected,
.cal-cell.is-planting.is-selected,
.cal-cell.is-today.is-selected {
  border-color: #f4f0e6;
  box-shadow: 0 0 0 2px #f4f0e6;
}

.cal-cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
}

.cal-cell-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.cal-cell-marks {
  display: flex;
  align-items: center;
  gap: 0.18rem;
}

.cal-mark {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
}

.cal-mark-plant { background: var(--accent); }
.cal-mark-sample { background: #7eb6ff; }

.cal-planted-tag,
.cal-sample-tag,
.cal-heat-tag,
.cal-night-tag,
.cal-frost-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.02rem 0.28rem;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}

.cal-planted-tag {
  background: var(--accent);
  color: #0c120d;
}

.cal-sample-tag {
  background: #3ecfc0;
  color: #0c1614;
}

.cal-cell.is-sample .cal-cell-num {
  color: #d4fff8;
}

.cal-cell.is-planting .cal-cell-num {
  color: #d8ffdc;
}

.cal-heat-tag {
  background: rgba(255, 140, 60, 0.92);
  color: #1a1008;
}

.cal-night-tag {
  background: #ff7a4d;
  color: #1a1008;
}

.cal-frost-tag {
  background: #7eb6ff;
  color: #0c1620;
}

.cal-cell-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
  padding-left: 0.7rem;
  min-width: 0;
}

.cal-cell-temps {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
}

.cal-cell-temps .cal-lo {
  color: var(--text-muted);
  font-weight: 500;
}

.cal-cell-soil {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  color: #c4a070;
  line-height: 1.25;
}

.cal-cell-line {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  line-height: 1.25;
}

.cal-cell-wx {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.28rem;
}

.cal-cell-wx-sep {
  color: var(--text-dim);
}

.cal-cell-rain {
  color: #9fd0ff;
  font-weight: 650;
}

.cal-cell-wind {
  color: #b7c4c8;
}

.cal-cell-wind.is-windy {
  color: #d5dee2;
  font-weight: 700;
}

.cal-cell-flag {
  margin-top: auto;
  padding: 0.08rem 0.2rem 0.12rem;
  width: 100%;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cal-cell-flag.vpd-caution { color: #fff38a; }
.cal-cell-flag.vpd-high { color: #ff8b88; }
.cal-cell-flag.frost { color: #b7d4ff; }
.cal-cell-flag.heat { color: #ffb07a; }
.cal-cell-flag.wind { color: #d5dee2; }

.cal-cell > * {
  position: relative;
  z-index: 1;
}

.cal-cell-rainfill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(70, 145, 220, 0.38) 0%,
    rgba(70, 145, 220, 0.16) 55%,
    rgba(70, 145, 220, 0.04) 100%
  );
}

.cal-cell.is-rain-light .cal-cell-rainfill {
  background: linear-gradient(
    0deg,
    rgba(70, 145, 220, 0.28) 0%,
    rgba(70, 145, 220, 0.06) 100%
  );
}

.cal-cell.is-rain-mod .cal-cell-rainfill {
  background: linear-gradient(
    0deg,
    rgba(70, 145, 220, 0.46) 0%,
    rgba(70, 145, 220, 0.2) 55%,
    rgba(70, 145, 220, 0.05) 100%
  );
}

.cal-cell.is-rain-heavy .cal-cell-rainfill {
  background: linear-gradient(
    0deg,
    rgba(55, 130, 210, 0.55) 0%,
    rgba(55, 130, 210, 0.24) 55%,
    rgba(55, 130, 210, 0.06) 100%
  );
}

.cal-day-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(12, 16, 12, 0.35);
  padding: 0.75rem 0.8rem 0.85rem;
  min-height: 12rem;
}

.cal-day-panel.is-sample {
  border-color: rgba(62, 207, 192, 0.5);
  box-shadow: inset 3px 0 0 #3ecfc0;
}

.cal-day-panel.is-planting {
  border-color: rgba(111, 207, 122, 0.45);
  box-shadow: inset 3px 0 0 var(--accent);
}

.cal-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
}

.cal-day-head-text {
  min-width: 0;
}

.cal-day-panel h3 {
  margin: 0 0 0.15rem;
  font-size: 0.95rem;
}

.cal-day-kicker {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cal-day-menu-btn {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.cal-day-menu-btn:hover,
.cal-day-menu-btn[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}

.cal-day-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.6rem;
  margin: 0 0 0.7rem;
}

.cal-day-stat {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.cal-day-stat-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cal-day-stat-value {
  font-family: var(--mono);
  font-size: 0.84rem;
  font-weight: 600;
}

.cal-day-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.7rem;
}

.cal-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.cal-pill-caution {
  color: #fff38a;
  border-color: rgba(255, 247, 0, 0.35);
  background: rgba(255, 247, 0, 0.08);
}

.cal-pill-high {
  color: #ffb0ae;
  border-color: rgba(251, 38, 34, 0.4);
  background: rgba(251, 38, 34, 0.1);
}

.cal-pill-info {
  color: #b7d4ff;
}

.cal-pill-plant {
  color: #d8ffdc;
  border-color: rgba(111, 207, 122, 0.55);
  background: rgba(111, 207, 122, 0.16);
  font-weight: 750;
}

.cal-pill-sample {
  color: #d4fff8;
  border-color: rgba(62, 207, 192, 0.55);
  background: rgba(62, 207, 192, 0.16);
  font-weight: 750;
}

.cal-day-samples {
  margin: 0 0 0.7rem;
  padding: 0;
  list-style: none;
}

.cal-day-samples li {
  margin: 0 0 0.25rem;
}

.cal-day-samples button {
  border: 0;
  background: none;
  padding: 0;
  color: #7eb6ff;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
}

.cal-day-samples button:hover {
  text-decoration: underline;
}

.cal-status-block {
  margin: 0;
  min-height: 2.4em;
  font-size: 0.78rem;
  line-height: 1.4;
}

.cal-status-note {
  margin-right: 0.4em;
}

.cal-status-note.is-ok {
  color: #9dff9d;
}

.cal-status-note.is-err {
  color: #ff9a98;
}

.cal-status-note[hidden] {
  display: none;
}

.cal-status-help {
  color: var(--text-muted);
}

.cal-empty p {
  margin: 0.35rem 0;
}

@media (max-width: 1100px) {
  .cal-layout {
    grid-template-columns: 1fr;
  }
  .cal-day-panel {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .cal-cell {
    min-height: 5.2rem;
    padding: 0.25rem 0.28rem 0.3rem;
  }
  .cal-cell-line,
  .cal-cell-flag {
    display: none;
  }
  .cal-pick select {
    min-width: 8rem;
  }
  .cal-month-label {
    min-width: 7.5rem;
    font-size: 0.95rem;
  }
}

/* Field Trends */
.ft-panel {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ft-tabs {
  display: flex;
  gap: 0.3rem;
}

.ft-tab {
  margin: 0;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(107, 122, 109, 0.35);
  border-radius: 999px;
  background: rgba(15, 20, 16, 0.45);
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}

.ft-tab:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.ft-tab.is-on {
  border-color: rgba(111, 207, 122, 0.45);
  background: rgba(111, 207, 122, 0.12);
  color: var(--text);
}

.ft-controls {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ft-row {
  display: grid;
  grid-template-areas: "ft-row";
}

.ft-row > * {
  grid-area: ft-row;
  align-self: start;
  height: max-content;
}

.ft-row-chips .cal-display-chips {
  align-items: center;
  align-content: start;
}

.ft-row > [hidden],
.ft-row-xaxis.is-off {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

.ft-row-xaxis {
  display: flex;
  min-height: 1.7rem;
}

.ft-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}

.ft-control-row[hidden] {
  display: none !important;
}

.ft-chart-wrap {
  background: #121812;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.35rem 0.2rem;
}

#ft-chart {
  display: block;
  width: 100%;
  height: 26rem;
}

.ft-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ft-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  user-select: none;
}

.ft-legend-item.is-off {
  opacity: 0.4;
}

.ft-legend-swatch {
  width: 1.1rem;
  height: 0.18rem;
  border-radius: 2px;
}

.ft-legend-swatch.is-line {
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    rgba(18, 24, 18, 0.8) 3px,
    rgba(18, 24, 18, 0.8) 5px
  );
}

.ft-legend-swatch.is-outlook {
  height: 0.7rem;
  border-radius: 2px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 2px,
    rgba(18, 24, 18, 0.55) 2px,
    rgba(18, 24, 18, 0.55) 3px
  );
}

.ft-legend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.ft-tree-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
}

.ft-nutrient-groups {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ft-nutrient-groups .cal-display-chips,
.ft-nutrient-chips {
  flex: 1 1 auto;
}

.ft-nutrient-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.ft-chip-break {
  display: inline-block;
  width: 0.55rem;
  height: 1.05rem;
  margin: 0 0.15rem;
  border-left: 1px solid rgba(147, 163, 148, 0.3);
  align-self: center;
}

.ft-ratio-empty {
  font-size: 0.72rem;
}

#ft-ratio-row {
  position: relative;
  min-height: 1.7rem;
  align-items: center;
}

.ft-ratio-chips {
  flex: 1 1 auto;
  min-height: 1.45rem;
  align-items: center;
}

.ft-ratio-add {
  opacity: 1;
  border-style: dashed;
}

.ft-ratio-picker {
  position: fixed;
  z-index: 4000;
  width: max-content;
  max-width: calc(100vw - 1.2rem);
  padding: 0.55rem 0.65rem 0.65rem;
  border: 1px solid rgba(107, 122, 109, 0.45);
  border-radius: 10px;
  background: rgba(16, 22, 16, 0.97);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.ft-ratio-picker[hidden] {
  display: none !important;
}

.ft-ratio-picker-hint {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.ft-ratio-picker-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.ft-ratio-picker-kicker {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 0.15rem;
}

.ft-ratio-picker-nuts {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  align-items: center;
}

.ft-msg {
  min-height: 8.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(12, 16, 12, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.ft-msg #ft-status {
  margin: 0;
  max-width: 42rem;
  line-height: 1.45;
}

.ft-msg .yk-loading {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
}

.ft-msg:has(#ft-loading:not([hidden])) #ft-status {
  display: none;
}

@media (max-width: 720px) {
  #ft-chart {
    height: 20rem;
  }
}

.yk-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.4rem 1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(12, 16, 12, 0.45);
  text-align: center;
}

/* Activity */
.act-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem 0.75rem;
  margin: 0.15rem 0 0.45rem;
}

.act-filter {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 8.5rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.act-filter select {
  min-width: 10rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.42rem 0.55rem;
  color: var(--text);
  font-size: 0.86rem;
}

.act-when {
  white-space: nowrap;
}

.act-detail {
  max-width: 28rem;
  word-break: break-word;
}

@media (max-width: 720px) {
  .act-filter,
  .act-filter select {
    min-width: 100%;
  }
}

.yk-loading[hidden] {
  display: none !important;
}

.yk-loading-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
}

.yk-loading-msg {
  margin: 0;
  max-width: 28rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}