:root {
  --bottom-height: 76px;
}
.bottom-nav {
  position: fixed !important;
  inset: auto 0 0 !important;
  z-index: 30;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  margin: 0 !important;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: #f9fbf6;
  border-top: 1px solid #cad7c5;
  box-shadow: 0 -3px 18px #183b2a12;
  width: 100%;
  border-radius: 0;
}
.bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 60px;
  padding: 5px 0 !important;
  font-size: 12px !important;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #354e39;
  line-height: 1.2;
}
.bottom-nav button > span:first-child {
  font-size: 24px;
}
.bottom-nav button.on {
  background: #dfeeda;
  color: #183c25;
  font-weight: 750;
}
.bottom-nav [data-tab='drive'] {
  background: #28623a;
  color: white;
}
.bottom-nav [data-tab='drive'].on {
  background: #17482a;
  outline: 2px solid #8fa57a;
  outline-offset: -3px;
}
.wrap {
  padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px !important;
  min-height: 64px;
}
.top .brand {
  font-size: 24px;
}
.top button {
  min-height: 46px;
  min-width: 46px;
}
#intro:empty,
#notice:empty {
  display: none;
}
#storage-note {
  display: none;
}
h1#title {
  font-size: clamp(25px, 5vw, 36px);
  margin: 12px 0;
}
button,
input,
select {
  min-height: 46px;
}
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #a97d24;
  outline-offset: 3px;
}
.more-sheet {
  margin: auto auto 0;
  width: min(100%, 700px);
  max-width: 100%;
  height: min(88dvh, 780px);
  max-height: 94dvh;
  border: 0;
  border-radius: 22px 22px 0 0;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  overflow: auto;
  background: #f4f7ee;
}
.more-sheet::backdrop,
.staff-dialog::backdrop {
  background: #10241988;
}
.more-sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.more-sheet > header button {
  min-width: 48px;
}
.more-grid {
  display: grid;
  gap: 12px;
}
.more-grid button {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 18px;
  padding: 18px;
  background: #fff;
  border: 1px solid #cbd8c5;
  border-radius: 14px;
  min-height: 76px;
  color: #203d29;
}
.more-grid button > span {
  font-size: 28px;
  width: 36px;
  text-align: center;
}
.more-grid strong {
  display: block;
  font-size: 18px;
}
.more-grid small {
  display: block;
  font-size: 14px;
  color: #52644f;
  margin-top: 4px;
}
.home-start {
  width: 100%;
  min-height: 72px;
  font-size: 23px;
  margin: 8px 0 18px;
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.home-grid .card {
  margin: 0;
  min-width: 0;
}
.home-grid h2 {
  font-size: 19px;
}
.home-grid small {
  display: block;
  color: #52644f;
}
.home-active {
  border: 2px solid #63925a;
}
.staff .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.staff .card {
  margin: 16px 0;
}
.staff-person {
  border-top: 1px solid #cbd8c5;
  padding: 14px 0;
}
.staff-person .actions {
  margin-top: 8px;
}
.staff-dialog {
  width: min(96vw, 700px);
  max-width: 96vw;
  max-height: 90dvh;
  overflow: auto;
  border: 0;
  border-radius: 18px;
  padding: 22px;
  margin: auto;
}
.staff-dialog label,
.staff label {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}
.staff-dialog input,
.staff-dialog select,
.staff-dialog textarea,
.staff input,
.staff select {
  width: 100%;
  font-size: 16px;
  min-width: 0;
}
.staff-dialog input[type='checkbox'] {
  width: 24px;
  min-height: 24px;
}
.staff-dialog label:has([type='checkbox']) {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.staff-dialog [role='alert'] {
  color: #982d24;
}
.staff-dialog .actions {
  position: sticky;
  bottom: -22px;
  background: #fff;
  padding: 12px 0;
  display: flex;
  gap: 10px;
}
.staff-dialog .actions button {
  flex: 1;
}
.staff-dialog [hidden] {
  display: none !important;
}
.staff-dialog .two,
.staff .two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.journal-bottom {
  bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}
body.keyboard-open .bottom-nav {
  display: none !important;
}
body.keyboard-open .wrap {
  padding-bottom: 24px !important;
}
body.keyboard-open dialog {
  max-height: 94dvh;
}
.drive .drive-note {
  margin: 8px 0;
}
.drive-start-main {
  width: 100%;
  min-height: 70px !important;
  font-size: 24px !important;
}
.drive-quick {
  display: grid;
  gap: 8px;
}
.drive-running .drive-controls {
  z-index: 35;
}
@media (max-width: 540px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
  .home-grid .card {
    padding: 16px;
  }
  .home-grid h2 {
    margin: 0 0 10px;
  }
  .wrap {
    padding-left: 14px;
    padding-right: 14px;
  }
  .staff-dialog {
    padding: 16px;
  }
  .staff-dialog .actions {
    bottom: -16px;
  }
  .staff-dialog .two,
  .staff .two {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 850px) {
  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    max-width: 760px;
    border-radius: 18px 18px 0 0;
  }
}
.home-grid button,
.home-active button,
.staff-dialog button:not(.primary),
.more-sheet > header button {
  border: 1px solid #b9cabc;
  border-radius: 10px;
  background: #eef4e9;
  color: #254b31;
  padding: 10px 16px;
}
.staff-dialog [data-preview] .card {
  margin: 12px 0;
}
.staff #staff-entry {
  background: #28623a;
  color: #fff;
}
.staff-person strong {
  overflow-wrap: anywhere;
}

/* Browser safe areas; Android margins are supplied by Capacitor. */
.top {
  padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
  gap: 8px;
  flex-wrap: wrap;
}
.top .brand {
  white-space: nowrap;
}
.top #account {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.top #account button {
  padding: 8px 10px;
  white-space: nowrap;
  font-size: 14px;
}

.field-explorer {
  max-width: 1100px;
  margin: auto;
}
.explorer-map-wrap {
  position: relative;
}
.explorer-map {
  height: clamp(270px, 43dvh, 480px);
  border-radius: 16px;
  z-index: 0;
  background: #dce5d6;
}
.explorer-toggle {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 4;
  background: #fff !important;
  padding: 10px !important;
  box-shadow: 0 2px 8px #0003;
}
.explorer-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.explorer-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font: 600 13px/20px sans-serif;
  background: #fffffff0;
  color: #203d29;
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  box-shadow: 0 1px 4px #0005;
}
.explorer-label.selected {
  background: #186a38;
  color: #fff;
}
.explorer-label[hidden] {
  display: none;
}
.explorer-panel {
  background: #fff;
  border: 1px solid #cedbc9;
  border-radius: 16px;
  padding: 16px;
  margin-top: 8px;
}
.explorer-panel h3 {
  margin: 0 0 12px;
}
.explorer-panel label {
  display: grid;
  gap: 6px;
}
.explorer-panel input,
.explorer-panel select {
  width: 100%;
  min-width: 0;
  font-size: 16px;
}
.explorer-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.explorer-panel summary {
  padding: 12px 0;
  cursor: pointer;
}
.explorer-results {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  max-height: 320px;
  overflow: auto;
}
.explorer-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px !important;
  border: 1px solid #d7e0d2;
  border-radius: 10px;
  background: #f7faf4;
  color: #243b29;
  min-height: 62px;
}
.explorer-row strong,
.explorer-row small {
  display: block;
  overflow-wrap: anywhere;
}
.explorer-row small {
  margin-top: 5px;
}
.explorer-row.selected {
  border: 2px solid #267342;
  background: #e6f3e1;
}
.explorer-selection {
  padding: 12px;
  background: #e6f3e1;
  border-radius: 12px;
  margin-bottom: 12px;
}
.explorer-selection > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.explorer-selection a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 8px;
  text-decoration: none;
}
.explorer-list-mode .explorer-map,
.explorer-list-mode .explorer-labels {
  display: none;
}
.explorer-list-mode .explorer-map-wrap {
  height: 56px;
}
.explorer-list-mode .explorer-results {
  max-height: none;
}
.explorer-status:empty,
.explorer-selected:empty {
  display: none;
}

.journal-explorer .journal-top {
  margin: 0 0 10px;
}
.journal-explorer .journal-year {
  width: 100%;
}
.journal-explorer .journal-overview-actions {
  margin: 8px 0;
}
.journal-explorer .journal-notice:empty {
  display: none;
}
@media (max-width: 540px) {
  .explorer-map {
    height: clamp(230px, 32dvh, 320px);
  }
}
.top #account {
  margin-left: auto;
}
.top #account .secondary {
  background: #ffffff12;
  border: 1px solid #ffffff48;
  color: #fff;
  border-radius: 10px;
  box-shadow: none;
}
.top #account #header-login {
  background: #e4edcf;
  color: #193e2b;
  border-color: #e4edcf;
  font-weight: 650;
}
.top #account .secondary:hover {
  filter: brightness(1.08);
}
.top #account > button {
  min-width: 46px;
  min-height: 46px;
}
.top #account > button:not([aria-label]) {
  min-width: 82px;
}
@media (max-width: 400px) {
  .top .brand {
    font-size: 22px;
  }
  .top #account {
    gap: 5px;
  }
  .top #account > button {
    font-size: 13px;
    padding: 8px !important;
  }
}
/* Shared illustrated navigation for equipment and people. */
.section-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: #dcebd7;
  color: #17623c;
}
.section-icon svg {
  width: 30px;
  height: 30px;
}
.machine-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.machine-group {
  min-width: 0;
  border: 1px solid #b9cfb3;
  border-radius: 12px;
  background: linear-gradient(125deg, #fdfefa, #edf3e8);
  box-shadow: 0 3px 9px #1c412411;
  overflow: hidden;
}
.machine-group > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 96px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
  color: #193e2b;
}
.machine-group > summary::-webkit-details-marker {
  display: none;
}
.machine-group > summary > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.machine-group > summary strong {
  display: block;
  font-size: 16px;
  line-height: 1.3;
}
.machine-group > summary small {
  display: block;
  font-size: 12px;
  color: #60745a;
  margin-top: 5px;
}
.section-chevron {
  font-size: 27px;
}
.machine-group[open] {
  grid-column: 1/-1;
  border-color: #237148;
  background: #f6faf2;
}
.machine-group[open] > summary {
  background: #dcebd5;
}
.machine-group[open] .section-chevron {
  transform: rotate(90deg);
}
.machine-group > .cards {
  padding: 14px;
}
.machine-group .card {
  margin: 0;
  height: 100%;
}
.machine-search-row {
  min-width: 0;
}
.machine-browser [hidden] {
  display: none !important;
}
.machine-browser > label {
  margin-top: 16px;
}
.machine-browser summary:focus-visible,
.staff summary:focus-visible {
  outline: 3px solid #a97d24;
  outline-offset: -4px;
}
.staff-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.staff-quick-actions > button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 18px !important;
  border: 1px solid #b9cfb3 !important;
  border-radius: 14px;
  background: linear-gradient(125deg, #fdfefa, #edf3e8) !important;
  color: #193e2b !important;
  box-shadow: 0 3px 9px #1c412411;
}
.staff-quick-actions > button > span:nth-child(2) {
  flex: 1;
}
.staff-quick-actions strong {
  display: block;
  font-size: 16px;
}
.staff-quick-actions small {
  display: block;
  font-size: 12px;
  color: #60745a;
  margin-top: 4px;
}
.staff-quick-actions #staff-entry {
  background: #dcebd5 !important;
  border-color: #659562 !important;
}
.staff .staff-directory {
  padding: 0;
  border: 1px solid #cad9c3;
  box-shadow: none;
  background: #f7faf4;
  border-radius: 14px;
  overflow: hidden;
}
.staff-directory > summary,
.staff-filter-panel > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px;
  cursor: pointer;
  color: #284f32;
}
.staff-directory > summary:after,
.staff-filter-panel > summary:after {
  content: '＋';
  margin-left: auto;
  font-weight: 400;
  font-size: 22px;
}
.staff-directory[open] > summary:after,
.staff-filter-panel[open] > summary:after {
  content: '−';
}
.staff-directory > #staff-add {
  margin: 0 14px 14px;
}
.staff .staff-person {
  position: relative;
  padding: 16px;
  margin: 0 14px;
  border-top: 1px solid #d5dfcf;
}
.staff-avatar {
  display: inline-grid;
  place-items: center;
  background: #dcebd7;
  color: #285c39;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
  font-weight: 700;
}
.staff-filter-panel {
  margin: 16px 0;
  border-top: 1px solid #d5dfcf;
  border-bottom: 1px solid #d5dfcf;
}
.staff-filter-panel form {
  padding: 0 16px 16px;
}
.staff-filter-panel form > h3 {
  display: none;
}
.staff-filter-panel .section-icon {
  background: #e9efe2;
}
.staff #staff-results > .card {
  border: 0;
  border-bottom: 1px solid #d5dfcf;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 18px 0;
  margin: 0;
}
.staff #staff-results > section.card {
  border-left: 3px solid #54805a;
  border-bottom: 0;
  padding: 8px 16px;
  margin: 20px 0;
}
.staff #staff-results h3 {
  font-size: 18px;
}
.staff #staff-results p {
  font-size: 14px;
  color: #586652;
}
.staff #staff-results button {
  margin: 6px 8px 0 0;
}
.staff #staff-status:empty {
  display: none;
}
@media (max-width: 700px) {
  .machine-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .machine-group > summary {
    padding: 12px;
    gap: 8px;
  }
  .machine-group > summary strong {
    font-size: 14px;
  }
  .machine-group .section-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .machine-group .section-icon svg {
    width: 27px;
    height: 27px;
  }
  .staff-quick-actions {
    grid-template-columns: 1fr;
  }
  .machine-group > .cards {
    grid-template-columns: 1fr;
  }
  .machine-group .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}
@media (max-width: 360px) {
  .machine-category-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 361px) and (max-width: 700px) {
  .machine-group:not([open]) > summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    min-height: 126px;
  }
  .machine-group:not([open]) > summary > span:nth-child(2) {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .machine-group:not([open]) > summary .section-chevron {
    grid-column: 2;
    grid-row: 1;
  }
  .machine-group > summary strong {
    overflow-wrap: anywhere;
  }
}
.staff-month-total {
  display: flex;
  gap: 18px;
  align-items: center;
  background: linear-gradient(125deg, #183b2a, #326448);
  color: #fff;
  border-radius: 18px;
  padding: 22px;
  margin: 0 0 20px;
}
.staff-month-total > div {
  display: grid;
  gap: 3px;
}
.staff-month-total strong {
  font-size: 34px;
  line-height: 1.25;
}
.staff-month-total small {
  color: #d8e6d3;
  font-size: 12px;
}
.staff-month-total .section-icon {
  background: #ffffff1c;
  color: #d1e7b6;
}
.staff-period-presets {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 0 14px 12px;
}
.staff-period-presets button {
  border: 1px solid #b9cfb3;
  background: #eef4e8;
  color: #315b3a;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
}
.staff-period-summary {
  margin: 20px 0;
}
.staff-period-summary > p {
  font-size: 13px;
  color: #61725a;
}
.staff-hour-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #d5dfcf;
  padding: 14px 8px;
  background: transparent;
  color: #284d32;
  text-align: left;
}
.staff-hour-row span {
  overflow-wrap: anywhere;
}
.staff-hour-row strong {
  white-space: nowrap;
}
.staff-hour-row:hover {
  background: #e6efdf;
}
.staff-range-error {
  color: #8a3426;
  background: #fff2dc;
  border-radius: 12px;
  padding: 16px;
}
.staff #staff-filters .two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.staff #staff-filters label:has([name='employeeId']) {
  grid-column: 1/-1;
}
.staff #staff-filters input,
.staff #staff-filters select {
  min-width: 0;
  width: 100%;
  font-size: 16px;
}
/* Field detail: map, season facts and action tiles. */
.field-detail-modern {
  max-width: 940px;
}
.field-detail-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
}
.field-detail-toolbar #journal-back {
  margin-right: auto;
  font-weight: 650;
}
.field-edit-link {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  color: #285b3c;
  font-weight: 650;
}
.field-edit-link svg {
  width: 22px;
  height: 22px;
}
.field-more {
  position: relative;
}
.field-more > summary {
  font-size: 30px;
  list-style: none;
  cursor: pointer;
  min-width: 40px;
  text-align: center;
}
.field-more > .journal-field-delete {
  position: absolute;
  right: 0;
  top: 42px;
  z-index: 25;
  background: white;
  border: 1px solid #dce5de;
  box-shadow: 0 6px 24px #16322220;
  border-radius: 12px;
  min-width: 210px;
  padding: 12px;
  margin: 0;
}
.field-hero {
  margin: 18px 0 20px;
}
.field-hero h2 {
  font-size: clamp(30px, 6vw, 46px);
  letter-spacing: -1px;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.field-hero-reading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
}
.field-hero-reading > .journal-area {
  font-size: 30px;
}
.field-crop-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 24px;
  background: #eee5d1;
  font-size: 15px;
  font-weight: 650;
}
.field-crop-badge svg {
  width: 23px;
  height: 23px;
  color: #6c5d3e;
}
.field-hero > p {
  margin: 12px 0;
  color: #4d6050;
}
.field-facts {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}
.field-fact {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e0e7df;
  border-radius: 15px;
  background: #fff;
  padding: 14px;
  min-width: 0;
}
.field-fact > svg {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: #285d3b;
}
.field-fact small {
  display: block;
  color: #65736a;
  font-size: 12px;
}
.field-fact strong {
  display: block;
  font-size: 16px;
}
.field-season .journal-year {
  min-width: 0;
  gap: 3px;
  align-items: center;
}
.field-season .journal-year button {
  min-width: 24px;
  width: 24px;
  font-size: 18px;
  padding: 0;
  background: transparent;
  border: 0;
}
.field-season .journal-year label {
  min-width: 0;
}
.field-season .journal-year select {
  font-weight: 700;
  width: 85px;
  border: 0;
  background: transparent;
  padding: 2px;
  min-height: 32px;
}
.field-map-shell {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.field-detail-modern .journal-preview {
  height: clamp(190px, 30vw, 330px);
  border-radius: 20px;
}
.field-map-open {
  position: absolute;
  right: 14px;
  bottom: 26px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #fff;
  border-radius: 12px;
  background: #12321fda;
  color: #fff;
  padding: 10px 15px;
  font-weight: 650;
}
.field-map-open svg {
  width: 24px;
  height: 24px;
}
.field-map-expanded {
  position: fixed;
  inset: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
  z-index: 1000;
  box-shadow: 0 0 0 100vmax #122919aa;
  background: #e4eadf;
}
.field-map-expanded .journal-preview {
  height: 100% !important;
}
.field-detail-modern .journal-tabs {
  border: 0;
  gap: 6px;
  margin: 16px 0;
}
.field-detail-modern .journal-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 15px;
  background: #eaf0e9;
  color: #4c6656;
  padding: 12px 4px;
  font-size: 13px;
  min-height: 78px;
}
.field-detail-modern .journal-tabs svg {
  width: 26px;
  height: 26px;
}
.field-detail-modern .journal-tabs button[aria-selected='true'] {
  background: linear-gradient(125deg, #467857, #275b3b);
  color: white;
}
.field-detail-modern .journal-crop {
  background: #fff;
  border: 1px solid #e0e7df;
  border-radius: 18px;
  padding: 18px;
  margin: 0 0 16px;
}
.field-detail-modern .journal-crop > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
}
.field-detail-modern .journal-crop > summary > svg {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: #285d3b;
}
.field-detail-modern .journal-crop > summary strong {
  font-size: 17px;
  display: block;
}
.field-detail-modern .journal-crop > summary small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  margin-top: 8px;
  color: #596c5f;
}
.field-crop-edit {
  margin-left: auto;
  border-radius: 10px;
  padding: 10px 12px;
  background: #eaf2e5;
  color: #315d3b;
  font-size: 13px;
}
.field-work-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.field-work-actions button {
  border-radius: 16px;
  min-height: 92px;
  padding: 16px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.3;
  font-weight: 650;
  font-size: 17px;
}
.field-work-actions #journal-add {
  background: linear-gradient(125deg, #275b3b, #1c482f);
  color: white;
}
.field-work-actions svg {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}
.field-work-actions small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  margin-top: 6px;
}
.field-work-actions #journal-copy-year {
  background: #e9f2e6;
  border: 1px solid #dce5de;
  color: #285b3c;
}
.field-tab-content {
  background: #fff;
  border: 1px solid #e0e7df;
  border-radius: 18px;
  padding: 20px;
  margin: 14px 0;
}
.field-tab-content > .empty {
  border: 1px dashed #cbd8ce;
  border-radius: 14px;
  text-align: center;
  padding: 32px 16px;
  margin-top: 16px;
  background: #fafcf9;
  color: #65756b;
}
.field-detail-modern .journal-bottom {
  display: none;
}
@media (max-width: 540px) {
  .field-facts {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .field-fact {
    padding: 10px 6px;
    gap: 6px;
    flex-direction: column;
    align-items: flex-start;
  }
  .field-fact > svg {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .field-fact strong {
    font-size: 13px;
  }
  .field-season .journal-year {
    gap: 0;
  }
  .field-season .journal-year select {
    width: 63px;
    font-size: 15px;
  }
  .field-season .journal-year button {
    width: 19px;
    min-width: 19px;
  }
  .field-season .journal-year label {
    font-size: 10px;
  }
  .field-fact small {
    font-size: 10px;
  }
  .field-detail-modern .journal-tabs button {
    font-size: 10px;
    padding: 9px 2px;
    min-height: 68px;
    border-radius: 12px;
  }
  .field-detail-modern .journal-tabs svg {
    width: 23px;
    height: 23px;
  }
  .field-detail-modern .journal-crop {
    padding: 14px;
  }
  .field-detail-modern .journal-crop > summary {
    gap: 8px;
  }
  .field-detail-modern .journal-crop > summary strong {
    font-size: 14px;
  }
  .field-crop-edit {
    padding: 8px;
    font-size: 12px;
  }
  .field-work-actions {
    gap: 8px;
  }
  .field-work-actions button {
    font-size: 14px;
    padding: 12px;
    gap: 8px;
  }
  .field-work-actions svg {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
  .field-tab-content {
    padding: 16px;
  }
  .field-hero h2 {
    font-size: 32px;
  }
}
.field-detail-modern .field-hero.journal-top {
  display: block;
}
/* Integrated crop parcel switcher */
.field-parcel-switcher {
  margin: 16px 0 20px;
  padding: 14px;
  border-radius: 18px;
  background: #eaf1e9;
}
.field-parcel-switcher > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 10px;
}
.field-parcel-switcher small {
  display: block;
  color: #5c7165;
  font-size: 12px;
}
.field-parcel-options {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
}
.field-parcel-options button {
  flex: 1 0 140px;
  text-align: left;
  background: #fff;
  border: 1px solid #cddccd;
  border-radius: 12px;
  padding: 12px;
  min-height: 64px;
  white-space: normal;
}
.field-parcel-options button strong {
  display: block;
  margin-bottom: 5px;
}
.field-parcel-options button[aria-pressed='true'] {
  background: #245938;
  color: #fff;
  border-color: #245938;
}
.field-parcel-options button[aria-pressed='true'] small {
  color: #edf5ed;
}
.field-more #journal-base-records {
  white-space: normal;
  text-align: left;
  min-width: 190px;
}
.explorer-map-help {
  margin: 10px 2px;
  color: #49624f;
  font-size: 14px;
  line-height: 1.4;
}
.field-detail-toolbar #journal-back {
  background: #e6efe4;
  border: 1px solid #ccdcca;
  border-radius: 12px;
  min-height: 46px;
  padding: 10px 12px;
  text-align: left;
  line-height: 1.25;
}
.field-detail-toolbar {
  gap: 8px;
}
@media (max-width: 600px) {
  .explorer-map {
    height: clamp(360px, 62vh, 640px);
    height: clamp(360px, 62dvh, 640px);
  }
  .field-detail-toolbar #journal-back {
    font-size: 14px;
  }
  .field-edit-link {
    font-size: 14px;
    padding: 8px 4px;
  }
  .explorer-map-help {
    font-size: 13px;
  }
}
.explorer-list-mode .explorer-map-help {
  display: none;
}
.staff-chart,
.staff-daily {
  background: #fff;
  border: 1px solid #dce5dd;
  border-radius: 18px;
  padding: 18px;
  margin: 16px 0;
}
.staff-chart h3,
.staff-daily h3 {
  margin: 0 0 18px;
}
.staff-chart-scroll {
  overflow-x: auto;
}
.staff-bars {
  display: flex;
  gap: 16px;
  min-width: 100%;
  align-items: flex-end;
  padding: 8px 0;
}
.staff-bar-column {
  flex: 1 0 48px;
  max-width: 100px;
  text-align: center;
  font-size: 12px;
}
.staff-bar-column > span {
  display: block;
  margin-bottom: 5px;
}
.staff-bar-track {
  height: 130px;
  border-bottom: 1px solid #b9cdbf;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: repeating-linear-gradient(to top, transparent 0, transparent 31px, #edf1ec 32px);
}
.staff-bar-track > div {
  width: 70%;
  border-radius: 6px 6px 0 0;
}
.staff-bar-column small {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.staff-hour-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.staff-hour-row > span:nth-child(2) {
  flex: 1;
  text-align: left;
}
.staff-hour-row small {
  display: block;
  margin-top: 5px;
}
.staff-person-more {
  font-size: 12px;
  color: #4b7055;
}
.staff-day {
  border-top: 1px solid #e4ebe3;
}
.staff-day summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  font-size: 13px;
  cursor: pointer;
}
.staff-day summary small {
  margin-left: auto;
  color: #627268;
}
.staff-day article {
  padding: 14px;
  background: #f1f6ef;
  border-radius: 10px;
  margin-bottom: 10px;
}
.staff-day article button {
  margin: 4px;
}
.staff-period-summary h2 {
  margin-top: 0;
}
#staff-hours-back {
  margin-bottom: 14px;
  min-height: 46px;
}
.staff-bars-compact {
  gap: 8px;
}
.staff-bars-compact .staff-bar-column {
  min-width: 0;
  flex: 1 1 0;
}
.staff-bars-compact .staff-bar-column small {
  font-size: 10px;
}
/* Field overview: compact navigation, crop symbols and seasonal statistics. */
.field-explorer [hidden] {
  display: none !important;
}
.explorer-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0 18px;
}
.explorer-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 4px;
  border: 0;
  border-radius: 16px;
  background: #edf2ed;
  color: #44604d;
  font-size: 14px;
  min-height: 72px;
}
.explorer-tabs button > span {
  font-size: 26px;
  line-height: 1;
}
.explorer-tabs button[aria-pressed='true'] {
  background: #285a3a;
  color: white;
  box-shadow: 0 4px 14px #234d3026;
}
.explorer-panel {
  border: 0;
  background: #f8faf7;
  border-radius: 20px;
  padding: 16px;
  margin-top: 14px;
}
.explorer-panel h3 {
  font-size: 18px;
}
.explorer-search {
  border: 1px solid #d5dfd3;
  border-radius: 14px;
  min-height: 50px;
  background: white;
  padding: 12px;
}
.explorer-results {
  max-height: none;
  overflow: visible;
  gap: 8px;
}
.explorer-row {
  background: white;
  border: 1px solid #e0e7de;
  border-radius: 14px;
  min-height: 72px;
  padding: 14px !important;
}
.explorer-pages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 14px 0;
}
.explorer-pages button {
  border: 0;
  border-radius: 12px;
  background: #e9f0e6;
  color: #285638;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 13px;
}
.explorer-pages button:disabled {
  opacity: 0.4;
}
.explorer-pages span {
  font-size: 13px;
  color: #59705c;
  white-space: nowrap;
}
.explorer-crops,
.explorer-analytics {
  padding: 6px 0;
}
.explorer-crops > p {
  color: #617568;
  font-size: 14px;
}
.explorer-crop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.explorer-crop-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: linear-gradient(135deg, #fff, #f0f6ed);
  border: 1px solid #dbe5d7;
  border-radius: 20px;
  padding: 18px;
  color: #244c33;
}
.explorer-crop-card[aria-pressed='true'] {
  border-color: #3d7950;
  background: #e3efdf;
}
.crop-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  background: #e0ecdb;
  border-radius: 50%;
  color: #2d633c;
}
.crop-emblem svg {
  width: 32px;
  height: 32px;
}
.explorer-crop-card > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.explorer-crop-card strong,
.explorer-crop-card b,
.explorer-crop-card small {
  display: block;
  overflow-wrap: anywhere;
}
.explorer-crop-card strong {
  font-size: 16px;
}
.explorer-crop-card b {
  font-size: 23px;
  margin: 5px 0;
}
.explorer-crop-card small {
  font-size: 12px;
  font-weight: 400;
  color: #617568;
}
.crop-fields {
  margin-top: 24px;
}
.crop-fields .explorer-row {
  margin: 8px 0;
}
.explorer-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.explorer-metrics > div {
  padding: 18px;
  border-radius: 18px;
  background: #eaf2e6;
}
.explorer-metrics small,
.explorer-metrics strong {
  display: block;
}
.explorer-metrics small {
  color: #587160;
  font-size: 13px;
}
.explorer-metrics strong {
  font-size: 26px;
  color: #244e33;
  margin-top: 5px;
}
.explorer-chart,
.explorer-work-summary {
  background: white;
  border: 1px solid #e1e7dd;
  border-radius: 20px;
  padding: 18px;
  margin-top: 16px;
}
.crop-chart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
}
.crop-chart-row > div {
  flex: 1;
  min-width: 0;
}
.crop-chart-row > div > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.crop-chart-row .crop-emblem {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}
.crop-chart-row svg {
  width: 26px;
  height: 26px;
}
.crop-meter {
  height: 9px;
  background: #edf2ea;
  border-radius: 8px;
  margin-top: 9px;
  overflow: hidden;
}
.crop-meter > span {
  display: block;
  background: #5c9464;
  height: 100%;
  border-radius: 8px;
}
.explorer-chart > small {
  color: #647369;
  line-height: 1.5;
}
@media (max-width: 540px) {
  .explorer-crop-grid {
    grid-template-columns: 1fr;
  }
  .explorer-crop-card {
    padding: 16px;
  }
  .explorer-tabs button {
    font-size: 12px;
  }
  .explorer-list-mode .explorer-panel {
    margin-top: 0;
  }
  .explorer-list-mode .explorer-panel > h3 {
    display: none;
  }
}
/* Crop symbols and colors use the same visual language across maps, lists and field details. */
.field-crop-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--crop-soft, #e5eee4);
  color: var(--crop-ink, #355a3e);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  max-width: 100%;
  vertical-align: middle;
}
.field-crop-pill svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.field-crop-pill > span {
  overflow-wrap: anywhere;
}
.field-hero-reading > .field-crop-pill {
  padding: 10px 16px;
  font-size: 17px;
}
.field-hero-reading > .field-crop-pill svg {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}
.field-explorer .crop-emblem {
  background: var(--crop-soft, #e5eee4);
  color: var(--crop-ink, #466150);
  border-radius: 17px;
  flex-basis: 52px;
  width: 52px;
  height: 52px;
}
.field-explorer .crop-emblem svg {
  width: 34px;
  height: 34px;
}
.field-explorer .explorer-tabs {
  gap: 8px;
  margin: 14px 0 18px;
}
.explorer-tabs button {
  background: #edf1ee;
  color: #385344;
  border-radius: 18px;
  padding: 12px 5px;
  font-size: 14px;
  font-weight: 650;
  min-height: 82px;
}
.explorer-tabs button > span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.explorer-tabs svg {
  width: 29px;
  height: 29px;
}
.explorer-tabs button[aria-pressed='true'] {
  background: linear-gradient(130deg, #487959, #28573c);
  color: #fff;
  box-shadow: none;
}
.explorer-map {
  border-radius: 22px;
}
.explorer-map-wrap {
  border-radius: 22px;
  overflow: hidden;
}
.explorer-toggle {
  top: auto;
  bottom: 20px;
  right: 12px;
  background: #193c2cec !important;
  color: #fff;
  border: 1px solid #fff9 !important;
  border-radius: 13px !important;
  min-height: 46px;
  font-weight: 650;
  box-shadow: 0 3px 12px #162c2430;
}
.explorer-map-help {
  font-size: 13px;
  color: #63746a;
}
.explorer-map-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 2px 18px;
}
.explorer-map-key small {
  flex-basis: 100%;
  font-size: 12px;
  color: #68776b;
  line-height: 1.5;
}
.explorer-label.crop-map-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--crop-soft, #fff);
  color: var(--crop-ink, #294c33);
  border: 1px solid #fffa;
  border-radius: 10px;
  box-shadow: 0 2px 8px #10261940;
  font-size: 12px;
  line-height: 24px;
}
.crop-map-label > svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.crop-map-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.explorer-panel {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 16px;
}
.explorer-panel > h3 {
  font-size: 19px;
  letter-spacing: -0.3px;
}
.explorer-panel label {
  font-size: 13px;
  color: #506359;
}
.explorer-search {
  border-radius: 16px !important;
  background: #fff !important;
  padding: 13px 16px !important;
  border: 1px solid #dce3df !important;
  box-shadow: 0 2px 6px #24412e03;
}
.explorer-results {
  gap: 10px;
}
.explorer-row.field-symbol-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px !important;
  background: #fff;
  border: 1px solid #e0e6e1;
  border-radius: 19px;
  box-shadow: 0 3px 12px #203c2c03;
}
.field-row-content {
  flex: 1;
  min-width: 0;
}
.field-row-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.field-row-title strong {
  font-size: 17px;
  letter-spacing: -0.2px;
}
.field-row-title b {
  font-size: 15px;
  font-weight: 550;
  white-space: nowrap;
  color: #395943;
}
.field-row-crops {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.field-row-crops .field-crop-pill {
  font-size: 11px;
  padding: 4px 7px;
  gap: 4px;
}
.field-row-crops .field-crop-pill svg {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}
.field-symbol-row small {
  font-size: 12px;
  color: #6c7b70;
}
.field-row-arrow {
  font-size: 26px;
  color: #40634a;
}
.explorer-crop-card {
  background: #fff;
  border: 1px solid #e0e6e1;
  border-radius: 21px;
  padding: 20px;
  gap: 16px;
  color: #182c22;
  box-shadow: 0 3px 12px #203c2c03;
}
.explorer-crop-card .crop-emblem {
  width: 62px;
  height: 62px;
  flex-basis: 62px;
  border-radius: 20px;
}
.explorer-crop-card .crop-emblem svg {
  width: 40px;
  height: 40px;
}
.explorer-crop-card strong {
  font-size: 18px;
}
.explorer-crop-card b {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.5px;
}
.explorer-crop-card[aria-pressed='true'] {
  border-color: var(--crop-line, #618363);
  background: linear-gradient(125deg, #fff, var(--crop-soft, #e5eee4));
}
.explorer-crop-card > span:last-child {
  font-size: 25px;
  color: var(--crop-ink, #426149);
}
.crop-chart-row .crop-meter > span {
  background: var(--crop-fill, #5c9464);
}
.explorer-metrics > div {
  background: #fff;
  border: 1px solid #e0e6e1;
}
.explorer-metrics > div:first-child {
  background: #e8f1e7;
  border-color: #dde8da;
}
.field-parcel-options .field-crop-pill {
  margin: 7px 0 2px;
  font-size: 12px;
}
.field-parcel-options button[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1px #4a7957;
}
.parcel-map-tooltip {
  background: #ffffffed;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 2px 8px #132e2425;
  padding: 5px 8px;
}
.parcel-map-tooltip:before {
  display: none;
}
.parcel-map-label {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.parcel-map-label > span:last-child {
  font-size: 10px;
  color: #395442;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parcel-map-label .field-crop-pill {
  font-size: 11px;
  padding: 3px 6px;
}
.parcel-map-label svg {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
.parcel-map-warning {
  font-size: 13px;
  line-height: 1.5;
  color: #6d725d;
  background: #f3f1e8;
  border-radius: 12px;
  padding: 12px;
}
.journal-explorer .journal-overview-actions button {
  border-radius: 13px;
  min-height: 46px;
}
.journal-explorer #journal-add-field {
  background: linear-gradient(130deg, #366b49, #245238);
  border: 0;
}
.journal-explorer #journal-management {
  background: #ebf1ea;
  border: 0;
  color: #315c3e;
}
.journal-explorer .journal-year select {
  border-radius: 12px;
  background: #fff;
}
.field-detail-modern .field-map-shell {
  border-radius: 22px;
}
.field-detail-modern .field-facts {
  margin: 20px 0;
}
.field-detail-modern .journal-tabs {
  gap: 7px;
}
@media (max-width: 540px) {
  .explorer-tabs button {
    font-size: 12px;
    min-height: 76px;
  }
  .explorer-tabs svg {
    width: 27px;
    height: 27px;
  }
  .explorer-crop-card {
    padding: 18px;
  }
  .explorer-row.field-symbol-row {
    padding: 14px 12px !important;
    gap: 10px;
  }
  .field-symbol-row > .crop-emblem {
    width: 43px;
    height: 48px;
    flex-basis: 43px;
    border-radius: 14px;
  }
  .field-symbol-row > .crop-emblem svg {
    width: 29px;
    height: 29px;
  }
  .field-row-title strong {
    font-size: 16px;
  }
  .field-row-title b {
    font-size: 14px;
  }
  .field-row-arrow {
    font-size: 22px;
  }
  .field-hero-reading > .field-crop-pill {
    font-size: 15px;
    padding: 8px 13px;
  }
  .explorer-map {
    height: clamp(350px, 59dvh, 640px);
  }
}
/* Reference-style field heading and season summary. */
.wrap:has(.fields-overview-header) > #title,
.wrap:has(.fields-overview-header) > #intro {
  display: none;
}
.fields-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0 18px;
}
.fields-overview-header h1 {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0;
  color: #172d24;
}
.journal-explorer .fields-overview-header .journal-year {
  width: auto;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: #edf0ed;
  border-radius: 15px;
  flex-shrink: 0;
}
.fields-overview-header .journal-year label {
  font-size: 0;
  line-height: 0;
  margin: 0;
  gap: 0;
}
.fields-overview-header .journal-year select {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 750;
  appearance: none;
  text-align: center;
  border: 0 !important;
  width: 80px;
  min-height: 46px;
  padding: 8px !important;
  background: #f6f8f4 !important;
  border-radius: 13px;
}
.fields-overview-header .journal-year button {
  border: 0;
  background: transparent;
  color: #28533c;
  min-width: 34px;
  width: 34px;
  min-height: 46px;
  padding: 0;
  font-size: 28px;
  font-weight: 650;
}
.fields-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.fields-summary-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 15px 14px 13px;
  background: #fbfcfa;
  border: 1px solid #e4e9e3;
  border-radius: 17px;
  box-shadow: 0 3px 14px #203a2903;
  color: #21362b;
}
.fields-summary-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
}
.fields-summary-label svg {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  color: #4b805c;
}
.fields-summary-label small {
  font-size: 12px;
  line-height: 1.25;
  color: #6a786f;
}
.fields-summary-card > strong {
  font-size: 27px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}
.fields-summary-card > span:last-child {
  font-size: 14px;
  color: #64766a;
}
.fields-summary-crop > strong {
  font-size: 19px;
  letter-spacing: -0.25px;
  line-height: 1.3;
}
.journal-explorer .journal-overview-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.journal-explorer .journal-overview-actions button {
  font-size: 15px;
  padding: 12px 9px;
  border-radius: 13px;
  min-height: 50px;
}
.explorer-label-toggle,
.field-map-label-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #e0e5da;
  border-radius: 13px;
  background: #fffffff2;
  color: #244333;
  box-shadow: 0 2px 10px #182e2530;
  font-size: 12px;
  font-weight: 650;
}
.explorer-label-toggle svg,
.field-map-label-toggle svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.explorer-label-toggle[aria-pressed='false'],
.field-map-label-toggle[aria-pressed='false'] {
  background: #e9efea;
  color: #68746b;
}
.explorer-label.crop-map-label {
  background: #183429b8;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 7px 9px;
  gap: 8px;
  line-height: 1.1;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px #12251c24;
}
.crop-map-label > svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.crop-map-label > span {
  display: block;
  min-width: 0;
}
.crop-map-label strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}
.crop-map-label small {
  display: block;
  color: #f4f7ee;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}
.field-map-shell.hide-crop-labels .parcel-map-tooltip {
  display: none;
}
.field-map-label-toggle {
  top: 10px;
  right: 10px;
}
.field-map-expanded .field-map-label-toggle {
  top: 16px;
  right: 16px;
}
@media (max-width: 540px) {
  .fields-overview-header {
    margin: 12px 0 16px;
    gap: 10px;
  }
  .fields-overview-header h1 {
    font-size: 31px;
  }
  .fields-summary {
    gap: 8px;
  }
  .fields-summary-card {
    padding: 12px 10px;
    min-height: 107px;
    gap: 5px;
    border-radius: 15px;
  }
  .fields-summary-label {
    gap: 5px;
    min-height: 24px;
    align-items: flex-start;
  }
  .fields-summary-label svg {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
  .fields-summary-label small {
    font-size: 10px;
    padding-top: 2px;
  }
  .fields-summary-card > strong {
    font-size: 23px;
    line-height: 1.25;
  }
  .fields-summary-crop > strong {
    font-size: 15px;
    line-height: 1.25;
    hyphens: auto;
  }
  .fields-summary-card > span:last-child {
    font-size: 12px;
  }
  .journal-explorer .journal-overview-actions button {
    font-size: 13px;
    min-height: 47px;
  }
  .fields-overview-header .journal-year select {
    width: 74px;
  }
  .fields-overview-header .journal-year button {
    width: 31px;
    min-width: 31px;
  }
}
@media (max-width: 350px) {
  .fields-summary {
    gap: 5px;
  }
  .fields-summary-card {
    padding: 10px 7px;
  }
  .fields-summary-label svg {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
  .fields-summary-label {
    gap: 4px;
  }
  .fields-summary-card > strong {
    font-size: 21px;
  }
  .fields-summary-crop > strong {
    font-size: 14px;
  }
  .fields-overview-header h1 {
    font-size: 28px;
  }
  .fields-overview-header .journal-year select {
    width: 66px;
  }
}
.explorer-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.explorer-list-heading h3 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.3px;
}
.explorer-add-field {
  flex: none;
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  padding: 10px 15px;
  font-size: 14px;
  box-shadow: none;
}
@media (max-width: 390px) {
  .explorer-list-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .explorer-add-field {
    width: 100%;
  }
}
@media (max-width: 540px) {
  .fields-summary-label small {
    font-size: 11px;
  }
  .fields-summary-crop > strong {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* Distant map labels retain their crop icon and name; area appears up close. */
.explorer-label.crop-map-label.compact {
  padding: 5px 7px;
  gap: 5px;
  border-radius: 8px;
  min-height: 30px;
}
.crop-map-label.compact > svg {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
.crop-map-label.compact strong {
  font-size: 11px;
  line-height: 18px;
}
.crop-map-label.compact small {
  display: none;
}

/* Season planning: open rows and expandable work details. */
.field-detail-modern .field-plan-content {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 0;
  margin: 12px 0 24px;
  box-shadow: none;
}
.field-plan-content > h3 {
  font-size: 23px;
  letter-spacing: -0.4px;
  margin: 0 0 4px;
}
.season-plan-caption {
  color: #66796b;
  font-size: 13px;
  margin: 0 0 20px;
}
.season-plan-group {
  border-top: 1px solid #dbe4d9;
  padding: 16px 0 10px;
  --stage: #47795c;
  --stage-soft: #e5efe6;
}
.season-plan-group[data-plan-group='tillage'] {
  --stage: #85633a;
  --stage-soft: #f1eadf;
}
.season-plan-group[data-plan-group='fertilizing'] {
  --stage: #477a86;
  --stage-soft: #e5eef1;
}
.season-plan-group[data-plan-group='protection'] {
  --stage: #517857;
  --stage-soft: #e8efe1;
}
.season-plan-group[data-plan-group='harvest'] {
  --stage: #987025;
  --stage-soft: #f5ecd7;
}
.season-plan-group > header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.season-plan-icon {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--stage-soft);
  color: var(--stage);
}
.season-plan-icon svg {
  width: 27px;
  height: 27px;
}
.season-plan-group h4 {
  font-size: 17px;
  margin: 0 0 3px;
  line-height: 1.25;
  letter-spacing: -0.15px;
}
.season-plan-group header small {
  font-size: 12px;
  color: #6c7a6e;
}
.season-plan-add {
  margin-left: auto;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--stage);
  display: grid;
  place-items: center;
}
.season-plan-add:hover,
.season-plan-add:focus-visible {
  background: var(--stage-soft);
}
.season-plan-add:focus-visible,
.season-plan-work > summary:focus-visible {
  outline: 2px solid #377652;
  outline-offset: 3px;
}
.season-plan-add svg {
  width: 23px;
  height: 23px;
}
.season-plan-work {
  margin: 0 0 6px 23px;
  padding-left: 33px;
  border-left: 2px solid var(--stage-soft);
}
.season-plan-work > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  padding: 8px 8px 12px 0;
  min-height: 52px;
}
.season-plan-work > summary::-webkit-details-marker {
  display: none;
}
.season-plan-work > summary strong {
  font-size: 16px;
  font-weight: 600;
  display: block;
  overflow-wrap: anywhere;
}
.season-plan-work > summary small {
  font-size: 12px;
  font-weight: 400;
  color: #67786b;
  display: block;
  margin-top: 3px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.season-plan-chevron {
  margin-left: auto;
  font-size: 24px;
  color: var(--stage);
  transition: transform 0.15s;
}
.season-plan-work[open] .season-plan-chevron {
  transform: rotate(90deg);
}
.journal .season-plan-work[open] > summary {
  margin-bottom: 0;
}
.season-plan-work > .journal-operation {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 6px 0 14px;
  margin: 0;
  font-size: 14px;
  box-shadow: none;
}
.season-plan-work .journal-operation > h3,
.season-plan-work .journal-operation-top {
  display: none;
}
.season-plan-work .journal-operation-actions {
  gap: 8px;
}
.season-plan-work .journal-operation-actions button {
  min-height: 44px;
  border-radius: 9px;
  padding: 8px 12px;
}
.field-detail-modern:has(.field-plan-content) .journal-crop {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #dbe4d9;
  border-radius: 0;
  padding: 12px 0 18px;
  margin-bottom: 8px;
}
.field-detail-modern:has(.field-plan-content) .field-work-actions {
  grid-template-columns: 1fr auto;
  align-items: center;
  margin: 16px 0 20px;
}
.field-detail-modern:has(.field-plan-content) .field-work-actions button {
  min-height: 54px;
  border-radius: 12px;
  font-size: 15px;
  padding: 12px;
}
.field-detail-modern:has(.field-plan-content) #journal-copy-year {
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  max-width: 145px;
  color: #577160;
}
[data-work-error]:empty {
  display: none;
}
[data-work-error] {
  text-align: left;
  background: #fff1e9;
  color: #8b361d;
  border-left: 3px solid #b75230;
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.journal [aria-invalid='true'] {
  border-color: #b75230;
  outline: 2px solid #b7523033;
}
@media (max-width: 420px) {
  .season-plan-group h4 {
    font-size: 16px;
  }
  .season-plan-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
  .season-plan-work {
    margin-left: 20px;
    padding-left: 31px;
  }
  .field-plan-content > h3 {
    font-size: 21px;
  }
  .field-detail-modern:has(.field-plan-content) #journal-copy-year {
    max-width: 114px;
  }
  .field-detail-modern:has(.field-plan-content) .field-work-actions small {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .season-plan-chevron {
    transition: none;
  }
}

/* Spacious field map and compact view switcher. */
.journal-explorer .explorer-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 10px 0 12px;
}
.journal-explorer .explorer-tabs button {
  min-height: 54px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 6px;
}
.journal-explorer .explorer-tabs svg {
  width: 24px;
  height: 24px;
}
.journal-explorer .explorer-map {
  height: clamp(440px, 76vh, 960px);
  height: clamp(440px, 76dvh, 960px);
}
.journal-explorer .explorer-map-help {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
}
.journal-explorer .explorer-panel[hidden] {
  display: none !important;
}

.single-field-layout {
  display: block !important;
  max-width: 860px;
  margin: auto;
}
.single-field-layout > .field-list[hidden] {
  display: none !important;
}
.single-field-header {
  margin: 0 0 16px;
}
.single-field-header p {
  font-size: 24px;
  font-weight: 700;
  margin: 16px 0 0;
  color: #244d36;
}
.single-field-layout .field-editor {
  padding: 20px;
  border-radius: 20px;
}
.single-field-extra {
  border-top: 1px solid #dfe7df;
  margin-top: 20px;
  padding-top: 16px;
}
.single-field-extra > summary {
  cursor: pointer;
  font-weight: 650;
  color: #28563b;
  padding: 8px 0;
}
.single-field-extra .field-year-book {
  margin-top: 12px;
}
.single-field-danger > summary {
  color: #934b40;
}
.single-field-layout .actions {
  margin-top: 20px;
  gap: 10px;
}
.single-field-layout .map-panel {
  height: 300px;
  min-height: 240px;
}
.field-edit-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}
.field-edit-stack .field-edit-link {
  justify-content: center;
}
.field-edit-stack .journal-year {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  background: #edf1ed;
  border-radius: 12px;
}
.field-edit-stack .journal-year label {
  font-size: 0;
  line-height: 0;
  margin: 0;
}
.field-edit-stack .journal-year select {
  appearance: auto;
  width: 82px;
  min-height: 38px;
  padding: 5px 7px !important;
  border: 0 !important;
  border-radius: 9px;
  background: #fff !important;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}
.fields-overview-header .journal-year select {
  appearance: auto !important;
}
.field-detail-modern .field-hero {
  margin-top: 10px;
}
.field-detail-modern .field-facts {
  display: none;
}

/* Map multi-selection and shared seasonal planning. */
.explorer-multiselect {
  position: absolute;
  z-index: 5;
  left: 12px;
  top: 100px;
  min-height: 44px;
  background: #fff !important;
  box-shadow: 0 2px 10px #0003;
  font-size: 13px;
  border-radius: 12px;
}
.explorer-multiselect[aria-pressed='true'] {
  background: #215b3c !important;
  color: white;
}
.explorer-undo {
  position: absolute;
  z-index: 5;
  left: 12px;
  top: 155px;
  min-width: 46px;
  min-height: 46px;
  background: white !important;
  color: #215b3c;
  font-size: 25px;
  border-radius: 12px;
}
.explorer-undo[hidden],
.explorer-selection[hidden] {
  display: none !important;
}
.explorer-map-wrap .explorer-selection {
  position: absolute;
  bottom: 16px;
  left: 10px;
  right: 10px;
  z-index: 6;
  margin: 0;
  border: 1px solid #d1e0d3;
  padding: 12px;
  background: #fffffff5;
  border-radius: 18px;
  box-shadow: 0 5px 25px #102b3240;
  touch-action: pan-y;
}
.explorer-selection header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.explorer-selection strong {
  display: block;
  font-size: 17px;
}
.explorer-selection small {
  display: block;
  font-size: 11px;
  color: #607267;
  line-height: 1.4;
}
.explorer-selection header button {
  font-size: 12px;
  padding: 8px;
  min-height: 44px;
}
.explorer-selection details {
  font-size: 13px;
  margin: 7px 0;
}
.explorer-selection summary {
  padding: 5px 0;
}
.explorer-selection [data-selection-list] {
  max-height: 120px;
  overflow: auto;
}
.explorer-selection [data-deselect] {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid #dce7df;
  background: none;
  text-align: left;
  color: #214631;
  font-size: 13px;
}
.explorer-selection [data-selection-plan] {
  width: 100%;
  min-height: 46px;
  margin: 4px 0 6px;
  border-radius: 12px;
}
.crop-map-label.is-selected {
  outline: 2px solid #6ef49e;
  background: #185337ed;
}
.batch-planner .ey {
  display: block;
  margin: 18px 0 6px;
}
.batch-planner h2 {
  margin: 0;
}
.batch-total {
  font-size: 20px;
  color: #2e6848;
  font-weight: 650;
}
.batch-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 28px;
}
.batch-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  font-size: 14px;
}
.batch-actions button:first-child {
  grid-column: 1/-1;
}
.batch-actions svg {
  width: 24px;
  height: 24px;
}
.batch-field {
  padding: 14px 0;
  border-bottom: 1px solid #dae5dd;
}
.batch-field small {
  display: block;
  margin-top: 5px;
  color: #5c7262;
}
.batch-field p {
  font-size: 13px;
}
.batch-planner .target-chosen {
  max-height: 180px;
  overflow: auto;
}

.explorer-map-wrap {
  scroll-margin-top: 12px;
}
.explorer-map-wrap.has-selection .explorer-toggle {
  display: none;
}
.journal-explorer .explorer-map-wrap.has-selection .explorer-map {
  height: calc(100dvh - 130px);
  min-height: 470px;
  max-height: 850px;
}
.explorer-selection [data-selection-total] {
  font-variant-numeric: tabular-nums;
}

.explorer-panel > .explorer-selection {
  position: sticky;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  margin: 12px 0 0;
  border: 1px solid #cbdccf;
  background: #f6fbf4;
  box-shadow: 0 4px 18px #173a2420;
}
.explorer-list-help {
  font-size: 12px;
  color: #63776a;
  line-height: 1.5;
}
.explorer-row {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.explorer-row[aria-pressed='true'] .field-row-arrow {
  color: #227148;
  font-size: 23px;
}
.explorer-selection [data-selection-undo] {
  width: 100%;
  min-height: 44px;
  margin: 4px 0;
  font-size: 12px;
}
.explorer-selection [data-selection-undo][hidden] {
  display: none;
}

.explorer-base-line {
  display: flex;
  align-items: stretch;
  gap: 5px;
}
.explorer-base-line > .explorer-row {
  flex: 1;
  min-width: 0;
}
.explorer-expand {
  flex: 0 0 44px;
  min-height: 48px;
  border: 1px solid #dce5da;
  border-radius: 12px;
  background: #edf4ea;
  color: #285b3d;
  font-size: 25px;
}
.explorer-expand[aria-expanded='true'] {
  background: #dcecdc;
}
.explorer-child-list {
  border-left: 2px solid #c5dac8;
  margin: 7px 0 12px 20px;
  padding-left: 9px;
  display: grid;
  gap: 6px;
}
.explorer-child-row .crop-emblem {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 10px;
}
.explorer-child-row .crop-emblem svg {
  width: 24px;
  height: 24px;
}
.explorer-child-row {
  padding: 10px !important;
}
.field-selection-mark {
  color: #257043;
  font-size: 20px;
  font-weight: 700;
  flex: 0 0 20px;
}
.field-selection-mark[hidden] {
  display: none;
}

.batch-nutrient-field {
  padding: 16px 0;
  border-bottom: 1px solid #d9e5dc;
}
.batch-nutrient-field h4 {
  margin: 0 0 5px;
}
.batch-nutrient-field > small {
  color: #596d60;
}
.batch-work-settings {
  margin: 16px 0;
}
.batch-work-settings summary {
  font-weight: 650;
  padding: 14px;
  cursor: pointer;
}

.batch-work-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #e2ebe4;
}
.batch-work-row button {
  min-height: 44px;
  flex-shrink: 0;
}

.field-explorer .explorer-sticky-nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 15;
  background: #f4f7f0;
  padding: 6px 0 8px;
  border-bottom: 1px solid #dce5d8;
  box-shadow: 0 5px 10px #183b2a08;
}
.field-explorer .explorer-sticky-nav .explorer-tabs {
  margin: 0 0 6px;
  gap: 6px;
}
.field-explorer .explorer-sticky-nav .explorer-tabs button {
  min-height: 54px;
  padding: 7px 5px;
  border-radius: 12px;
  font-size: 13px;
}
.field-explorer .explorer-sticky-nav .explorer-tabs svg {
  width: 21px;
  height: 21px;
}
.field-explorer .explorer-sticky-nav .explorer-map-help {
  font-size: 12px;
  line-height: 1.4;
  margin: 5px 0 2px;
  color: #526955;
}
.field-explorer .explorer-back-top {
  display: block;
  margin: 2px 0 0 auto;
  min-height: 32px;
  padding: 4px 8px;
  background: transparent;
  border: 0;
  color: #315e3d;
  font-size: 12px;
}