:root {
  --forest-950: #0a2923;
  --forest-900: #123b32;
  --forest-800: #1b5445;
  --forest-700: #286c58;
  --forest-600: #3f846e;
  --leaf-500: #72a867;
  --leaf-100: #edf6e9;
  --cream-50: #f7f8f4;
  --cream-100: #f1f3ed;
  --cream-200: #e2e7df;
  --ink-900: #182722;
  --ink-700: #41564e;
  --ink-500: #6d7f77;
  --white: #fff;
  --amber-600: #a66316;
  --amber-100: #fff1d6;
  --red-700: #a53a3a;
  --red-100: #fde9e7;
  --blue-700: #32658a;
  --blue-100: #e7f2f8;
  --shadow-sm: 0 1px 2px rgb(16 47 41 / 4%), 0 8px 28px rgb(16 47 41 / 7%);
  --shadow-lg: 0 24px 72px rgb(16 47 41 / 22%);
  --radius: 20px;
  --radius-sm: 12px;
  font-family: Inter, Aptos, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink-900);
  background: var(--cream-50);
}

/* Sunny Harvest high-fidelity manager system — ported from the reviewed team UI. */
:root {
  --paper: #FAF7F1;
  --surface: #FFFFFF;
  --surface-2: #F4F0E8;
  --surface-3: #EBE5D9;
  --line: #E7E0D3;
  --line-strong: #D6CCB8;
  --ink: #241F17;
  --ink-2: #5B5346;
  --ink-3: #726957;
  --brand: #1E4D2B;
  --brand-strong: #16351E;
  --brand-tint: #E7F0E7;
  --brand-tint-2: #D6E6D6;
  --accent: #9A5B00;
  --status-go: #277338;
  --status-go-bg: #E6F2E9;
  --status-soon: #1C6B9C;
  --status-soon-bg: #E4EFF6;
  --status-done: #6B6156;
  --status-done-bg: #EEE9E0;
  --status-stop: #BC322B;
  --status-stop-bg: #F9E8E7;
  --ui-canvas: var(--paper);
  --ui-surface: var(--surface);
  --ui-surface-muted: var(--surface-2);
  --ui-text: var(--ink);
  --ui-text-muted: var(--ink-2);
  --ui-primary: var(--brand);
  --ui-accent: var(--accent);
  --ui-border: var(--line-strong);
  --ui-danger: var(--status-stop);
  --ui-warning: var(--accent);
  --ui-focus: #2D75A7;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-shadow: 0 8px 24px rgb(36 31 23 / 8%);
  --ui-target: 2.75rem;
  --forest-950: var(--brand-strong);
  --forest-900: var(--brand-strong);
  --forest-800: var(--brand);
  --forest-700: var(--brand);
  --forest-600: #356444;
  --leaf-500: #9DCE72;
  --leaf-100: var(--brand-tint);
  --cream-50: var(--paper);
  --cream-100: var(--surface-2);
  --cream-200: var(--line);
  --ink-900: var(--ink);
  --ink-700: var(--ink-2);
  --ink-500: var(--ink-3);
  --amber-600: var(--accent);
  --amber-100: #FFF0D4;
  --red-700: var(--status-stop);
  --red-100: var(--status-stop-bg);
  --blue-700: var(--status-soon);
  --blue-100: var(--status-soon-bg);
  --shadow-sm: 0 1px 2px rgb(36 31 23 / 4%), 0 7px 20px rgb(36 31 23 / 7%);
  --shadow-lg: 0 24px 70px rgb(22 53 30 / 20%);
  --radius: 16px;
  --radius-sm: 10px;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, Aptos, "Segoe UI", Roboto, Arial, sans-serif;
}

html { background: var(--paper); }
body { color: var(--ink); background: var(--paper); }
.app-shell { display: block; min-height: 100vh; }
.workspace { min-width: 0; }
.sidebar, .topbar, .prealpha-note { display: none; }

.manager-hero {
  position: relative;
  z-index: 30;
  width: 100%;
  padding: 16px 24px 18px;
  color: #fff;
  background: var(--brand-strong);
  box-shadow: none;
}
.manager-hero-row {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.manager-hero .brand {
  flex: 0 0 auto;
  min-width: 220px;
  padding: 0;
  border: 0;
}
.manager-hero .brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: var(--brand-strong);
  background: #BBDD9D;
  box-shadow: none;
}
.manager-hero .brand strong { color: #fff; font-size: 16px; }
.manager-hero .brand span { color: rgb(255 255 255 / 68%); font-size: 11px; }
.manager-hero .page-heading,
.operations-context { min-width: 170px; margin-right: auto; }
.manager-hero .page-heading p,
.operations-context p {
  margin: 0 0 3px;
  color: rgb(255 255 255 / 62%);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.manager-hero .page-heading h1,
.operations-context h1 { margin: 0; color: #fff; font-size: 24px; letter-spacing: -.03em; }
.manager-hero .top-actions { margin-left: auto; gap: 8px; }
.manager-hero .button,
.manager-hero .language-toggle,
.manager-hero .sync-status {
  min-height: 40px;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 8%);
  box-shadow: none;
}
.manager-hero .button:hover,
.manager-hero .language-toggle:hover,
.manager-hero .sync-status:hover { background: rgb(255 255 255 / 15%); }
.manager-hero .button-primary { color: var(--brand-strong); border-color: #fff; background: #fff; }
.manager-hero .global-search {
  width: min(25vw, 290px);
  height: 40px;
  color: var(--ink);
  border-color: rgb(255 255 255 / 28%);
  border-radius: 10px;
  background: #fff;
}
.manager-hero .global-search input { color: var(--ink); }

.manager-shell-nav {
  width: min(1120px, 100%);
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.manager-shell-nav::-webkit-scrollbar { display: none; }
.manager-shell-nav .nav-item {
  flex: 1 0 max-content;
  width: auto;
  min-height: 44px;
  padding: 0 22px;
  display: inline-flex;
  justify-content: center;
  gap: 7px;
  color: rgb(255 255 255 / 65%);
  border: 1px solid rgb(255 255 255 / 17%);
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.manager-shell-nav .nav-item:hover { color: #fff; background: rgb(255 255 255 / 14%); }
.manager-shell-nav .nav-item.is-active {
  color: var(--brand-strong);
  border-color: var(--paper);
  background: var(--paper);
  box-shadow: none;
}
.manager-shell-nav .nav-badge {
  min-width: 20px;
  padding: 2px 6px;
  color: var(--brand-strong);
  background: #fff;
}
.manager-shell-nav .nav-item.is-active .nav-badge { color: #fff; background: var(--brand-strong); }

#main-content,
.operations-shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 56px;
}
.view-stack { gap: 22px; }
.section-heading { align-items: end; gap: 18px; }
.section-heading h2 { color: var(--ink); font-size: clamp(24px, 3vw, 36px); letter-spacing: -.035em; }
.section-heading p { color: var(--ink-3); }
.eyebrow { color: var(--ink-3); font-size: 10px; letter-spacing: .09em; }

.panel,
.kpi,
.review-item,
.filter-strip,
.map-board,
.official-map-panel,
.location-card,
.empty-state {
  border-color: var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(36 31 23 / 4%), 0 8px 26px rgb(36 31 23 / 5%);
}
.panel-header {
  min-height: 72px;
  padding: 18px 20px;
  border-color: var(--line);
  background: var(--surface);
}
.panel-header h2, .panel-header h3 { color: var(--ink); }
.panel-header p { color: var(--ink-3); }
.panel-body { padding: 20px; }
.kpi-grid { gap: 14px; }
.kpi { min-height: 145px; padding: 20px; }
.kpi span, .kpi small { color: var(--ink-3); }
.kpi strong { color: var(--ink); font-size: clamp(28px, 3vw, 40px); }

.button, .icon-button {
  min-height: 44px;
  border-radius: 10px;
  font-weight: 700;
}
.button { padding: 9px 15px; font-size: 12px; }
.button-primary { color: #fff; background: var(--brand); box-shadow: none; }
.button-primary:hover { background: var(--brand-strong); }
.button-secondary { color: var(--ink); border: 1px solid var(--line-strong); background: var(--surface); }
.button-ghost { color: var(--brand); background: transparent; }
.button-danger { color: #fff; background: var(--status-stop); }
.button-small { min-height: 36px; padding: 7px 11px; }

input, select, textarea,
.portal-login input, .portal-login select,
.portal-form-grid input, .portal-form-grid select, .portal-form-grid textarea,
.admin-stack input {
  color: var(--ink);
  border-color: var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
}
label { color: var(--ink-2); }

.data-table th,
.role-permission-matrix th { color: var(--ink-3); background: var(--surface-2); }
.data-table th, .data-table td { padding: 13px 15px; border-color: var(--line); }
.data-table tbody tr:hover { background: #FCFAF5; }
.badge { border-radius: 999px; }
.badge-green, .worker-status { color: var(--status-go); background: var(--status-go-bg); }
.badge-blue { color: var(--status-soon); background: var(--status-soon-bg); }
.badge-red { color: var(--status-stop); background: var(--status-stop-bg); }
.badge-gray { color: var(--status-done); background: var(--status-done-bg); }

/* Operations use the same shell and content frame as the dashboard. */
.farm-os-portal { color: var(--ink); background: var(--paper); }
.operations-hero { position: relative; }
.operations-shell { max-width: none; }
.operations-shell > header { display: none; }
.operations-subnav,
.operations-shell > nav.operations-subnav {
  width: 100%;
  margin: 0 0 22px;
  padding: 5px;
  display: flex;
  gap: 3px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.operations-subnav button,
.operations-shell > nav.operations-subnav button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px;
  color: var(--ink-3);
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 11px;
  font-weight: 750;
}
.operations-subnav button.is-active,
.operations-shell > nav.operations-subnav button.is-active {
  color: var(--brand-strong);
  border: 0;
  background: var(--surface);
  box-shadow: 0 1px 4px rgb(36 31 23 / 8%);
}

/* Team-style task queue. */
.task-board-stack { gap: 18px; }
.task-breadcrumb { display: flex; gap: 10px; align-items: center; color: var(--brand); font-size: 12px; }
.task-breadcrumb b { color: var(--line-strong); }
.task-breadcrumb strong { color: var(--ink-2); }
.manager-attention {
  grid-template-columns: minmax(150px, 1.2fr) repeat(4, minmax(120px, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(36 31 23 / 4%);
}
.manager-attention > header {
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-3);
  background: var(--surface-2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.manager-attention > header span {
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 999px;
  background: var(--accent);
  font-size: 11px;
}
.manager-attention button {
  min-height: 62px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}
.manager-attention button:hover { background: #FCFAF5; }
.manager-attention button strong {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--brand);
  border-radius: 999px;
  background: var(--brand-tint);
  font-size: 12px;
}
.manager-attention button span { color: var(--ink-2); font-size: 11px; font-weight: 700; }
.task-projection-controls {
  padding: 0;
  align-items: center;
  border: 0;
  background: transparent;
}
.task-projection-controls > div { order: 3; margin-left: auto; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
.task-projection-controls button {
  min-height: 34px;
  padding: 0 14px;
  color: var(--ink-2);
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.task-projection-controls button.is-active { color: var(--brand-strong); background: var(--surface); box-shadow: 0 1px 3px rgb(36 31 23 / 8%); }
.task-projection-controls label { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 10px; font-weight: 750; }
.task-projection-controls select,
.task-projection-controls input { min-height: 38px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); }
.task-search-field { min-width: 250px; }
.task-search-field input { width: 100%; }
.assignment-drawer {
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.assignment-drawer > summary { min-height: 54px; padding: 12px 16px; background: var(--surface); }
.assignment-drawer > summary strong { color: var(--brand); }
.task-board-heading { padding-top: 3px; }
.task-board-heading h2 { color: var(--ink); font-size: 24px; }
.task-board-heading p { color: var(--ink-3); }
.task-board-columns { gap: 10px; }
.task-board-column { padding: 9px; border-color: var(--line); border-radius: 12px; background: var(--surface-2); }
.task-board-card { border-color: var(--line); border-left-color: var(--brand); border-radius: 10px; box-shadow: none; }
.task-list-projection {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.task-projection-row {
  min-height: 66px;
  padding: 12px 16px;
  grid-template-columns: 155px minmax(0, 1fr) auto;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}
.task-projection-row:last-child { border-bottom: 0; }
.task-projection-row time { color: var(--ink-3); font-size: 11px; }
.task-projection-row strong { color: var(--ink); font-size: 13px; }
.task-projection-row span { color: var(--ink-3); font-size: 10px; }
.task-projection-row > .badge { padding: 7px 11px; color: var(--status-soon); background: var(--status-soon-bg); }
.task-day-projection > section { padding: 0; overflow: hidden; border-color: var(--line); border-radius: 14px; }
.task-day-projection > section > header { padding: 12px 16px; color: var(--ink-2); background: var(--surface-2); }

/* Login, worker, and administrative surfaces share the Sunny system. */
.portal-login { background: var(--paper); }
.portal-login-card {
  border-color: var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 65px rgb(36 31 23 / 10%);
}
.portal-brand > span,
.portal-choice-grid span { color: #fff; background: var(--brand); }
.portal-brand small,
.portal-login-card > p,
.portal-choice-grid small,
.portal-auth-panel form p { color: var(--ink-3); }
.portal-choice-grid > button {
  border-color: var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--surface);
}
.portal-choice-grid > button:hover { border-color: var(--brand); box-shadow: var(--ui-shadow); }
.portal-auth-panel form { border-color: var(--line); background: var(--surface-2); }
.worker-app { color: var(--ink); background: var(--paper); }
.worker-app-header { color: #fff; background: var(--brand-strong); }
.worker-report-form input,
.worker-report-form select,
.worker-report-form textarea { min-height: 52px; border-color: var(--line-strong); }
.worker-checklist label,
.worker-choice-row label { min-height: 56px; border-color: var(--line); }
.dialog { color: var(--ink); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); }
.dialog::backdrop { background: rgb(22 53 30 / 62%); }
.dialog-header, .dialog-footer { border-color: var(--line); background: var(--surface); }
.dialog-confirm { width: min(400px, calc(100vw - 32px)); padding: 0; border: 0; }
.dialog-confirm .dialog-body { padding: 19px; }
#confirm-message { margin: 0 0 16px; color: var(--ink); font-size: 13px; line-height: 1.5; }
.confirm-actions { display: grid; gap: 8px; }
.confirm-actions .button { width: 100%; }
@media (max-width: 600px) { .dialog-confirm { width: 100%; max-width: none; margin: auto 0 0; border-radius: 20px 20px 0 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 980px) {
  .manager-attention { grid-template-columns: repeat(4, 1fr); }
  .manager-attention > header { grid-column: 1 / -1; }
  .manager-attention button:first-of-type { border-left: 0; }
}

@media (max-width: 720px) {
  .manager-hero { padding: 12px 12px 14px; }
  .manager-hero-row { gap: 10px; }
  .manager-shell-nav { margin-top: 11px; gap: 6px; }
  .manager-shell-nav .nav-item { flex: 0 0 auto; min-height: 44px; padding: 0 18px; }
  #main-content, .operations-shell { width: calc(100% - 24px); padding: 22px 0 42px; }
  .section-heading, .task-board-heading { align-items: stretch; flex-direction: column; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { min-height: 120px; padding: 16px; }
  .manager-attention { grid-template-columns: repeat(2, 1fr); }
  .manager-attention > header { grid-column: 1 / -1; }
  .manager-attention button { border-top: 1px solid var(--line); }
  .manager-attention button:nth-of-type(odd) { border-left: 0; }
  .task-projection-controls { align-items: stretch; }
  .task-projection-controls > div { order: 0; width: 100%; margin: 0; }
  .task-projection-controls > div button { flex: 1; }
  .task-projection-controls label, .task-search-field { width: 100%; min-width: 0; }
  .task-projection-controls select, .task-projection-controls input { flex: 1; width: 100%; }
  .task-projection-row { grid-template-columns: 1fr auto; padding: 13px; }
  .task-projection-row time { grid-column: 1 / -1; }
  .operations-subnav { margin-bottom: 16px; }
  .dialog { width: calc(100% - 12px); max-height: calc(100dvh - 12px); }
}

@media (max-width: 430px) {
  .manager-hero .brand strong { font-size: 14px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .manager-attention { grid-template-columns: 1fr; }
  .manager-attention > header { grid-column: 1; }
  .manager-attention button { border-left: 0; }
}

/* Farm OS field design standard v2: semantic aliases and shared operational primitives. */
:root {
  --ui-canvas: var(--cream-50, #f5f6f2);
  --ui-surface: #ffffff;
  --ui-surface-muted: #eef1eb;
  --ui-text: var(--forest-900, #20332c);
  --ui-text-muted: #52635c;
  --ui-primary: var(--forest-900, #20332c);
  --ui-accent: var(--leaf-700, #2f6f59);
  --ui-border: #c9d1cb;
  --ui-danger: #9f2f2f;
  --ui-warning: #8a5a00;
  --ui-focus: #176eab;
  --ui-radius-sm: 0.5rem;
  --ui-radius-md: 0.75rem;
  --ui-shadow: 0 8px 24px rgb(32 51 44 / 10%);
  --ui-target: 2.75rem;
}

.portal-icon {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.manager-attention {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.manager-attention button {
  min-height: 4.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  color: var(--ui-text);
  text-align: left;
}

.manager-attention strong,
.manager-attention span { display: block; }
.manager-attention strong { font-size: 1.5rem; }
.manager-attention span { color: var(--ui-text-muted); }

.task-projection-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

.task-projection-controls > div { display: flex; gap: 0.25rem; }
.task-projection-controls button,
.task-projection-controls select,
.task-projection-controls input { min-height: var(--ui-target); }
.task-projection-controls button { padding: 0 0.9rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-text); }
.task-projection-controls button.is-active { background: var(--ui-primary); color: #fff; }

.task-list-projection,
.task-day-projection,
.calendar-agenda { display: grid; gap: 0.75rem; }
.task-day-projection > section,
.calendar-agenda > section { display: grid; gap: 0.4rem; padding: 0.8rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); }
.task-day-projection > section > header,
.calendar-agenda > section > header { display: flex; justify-content: space-between; }
.task-projection-row,
.calendar-agenda article { display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; min-height: 4rem; padding: 0.75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); }
.task-projection-row div,
.calendar-agenda article div { display: grid; gap: 0.2rem; }
.task-projection-row span,
.calendar-agenda article span { color: var(--ui-text-muted); }

.calendar-projection,
.seed-lot-stack { display: grid; gap: 1rem; }
.calendar-authority-note { display: flex; gap: 0.65rem 1.5rem; flex-wrap: wrap; padding: 0.9rem 1rem; border-left: 4px solid var(--ui-accent); background: var(--ui-surface-muted); }
.seed-lot-layout { display: grid; grid-template-columns: minmax(18rem, 0.8fr) minmax(22rem, 1.2fr); gap: 1rem; align-items: start; }
.seed-lot-list { display: grid; gap: 0.75rem; }
.seed-lot-list > article { display: grid; gap: 0.55rem; padding: 1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); }
.seed-lot-list article > header,
.seed-lot-list article > footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.seed-lot-list h3 { margin: 0.15rem 0 0; }

.worker-location-picker { grid-column: 1 / -1; display: grid; gap: 0.4rem; padding: 0.75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface-muted); }
.worker-location-picker > span { font-weight: 700; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .manager-attention { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seed-lot-layout { grid-template-columns: 1fr; }
  .task-projection-row,
  .calendar-agenda article { grid-template-columns: 1fr auto; }
  .task-projection-row time,
  .calendar-agenda article time { grid-column: 1 / -1; }
  .task-projection-controls > label { width: 100%; }
  .task-projection-controls input,
  .task-projection-controls select { width: 100%; }
}

/* Two-control operational workspace ------------------------------------------------ */
body.is-operational-view { overflow: hidden; }
body.is-operational-view .manager-hero-row > .top-actions > [data-action="add-cycle"] { display: none; }
body.is-operational-view #main-content {
  height: calc(100dvh - var(--manager-hero-height, 150px) - var(--demo-banner-offset, 0px));
  min-height: 360px;
  padding: 12px clamp(10px, 2vw, 24px);
  overflow: hidden;
}
body.is-operational-view #view-root { height: 100%; min-height: 0; }

.operational-page {
  height: 100%;
  min-height: 0;
  display: block;
}
.operational-commandbar {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 52;
  padding: 3px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  border: 1px solid rgb(204 216 204 / 78%);
  border-radius: 15px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 6px 18px rgb(24 63 43 / 9%);
  backdrop-filter: blur(8px);
}
.operational-command {
  position: relative;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid #ccd8cc;
  border-radius: 11px;
  color: #244a36;
  background: #fff;
  box-shadow: none;
}
.operational-command svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.operational-command.is-primary { color: #fff; border-color: #245b3a; background: #245b3a; }
.operational-command:disabled { opacity: .38; box-shadow: none; }
.operational-command b {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 999px;
  color: #fff;
  background: #b63d31;
  font-size: 10px;
}
.operational-workspace {
  position: relative;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #d8dfd5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(26 62 42 / 8%);
}
.workspace-minimal-heading {
  min-height: 54px;
  padding: 8px 10px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #e1e6df;
}
.workspace-heading-copy { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.workspace-heading-copy strong { color: #173e2b; font-size: 24px; }
.workspace-heading-copy > span { color: #66766a; font-size: 12px; }
.workspace-minimal-heading .operational-commandbar {
  position: static;
  flex: 0 0 auto;
  padding: 0;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.workspace-minimal-heading .operational-command { width: 38px; min-width: 38px; height: 38px; min-height: 38px; border-color: transparent; background: #eef3ec; }
.workspace-minimal-heading .operational-command.is-primary { color: #fff; background: #245b3a; }

.exception-workspace, .harvest-workspace { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.exception-stream, .harvest-stream { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.exception-stream-row {
  width: 100%;
  min-height: 68px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid #e7ebe5;
  color: #1e2e24;
  background: #fff;
  text-align: left;
}
.exception-stream-row:hover { background: #f6f9f4; }
.exception-stream-row > span:nth-child(2) { min-width: 0; }
.exception-stream-row strong, .exception-stream-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exception-stream-row strong { font-size: 14px; }
.exception-stream-row small { margin-top: 3px; color: #69786d; font-size: 11px; }
.exception-stream-row em { padding: 4px 7px; border-radius: 999px; color: #25583a; background: #dcebd7; font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.exception-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #9c5b1f; background: #f5e7d6; font-weight: 900; }
.exception-stream-row.is-danger .exception-symbol { color: #a52e28; background: #f5dcda; }
.operational-clear-state { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; color: #52705b; }
.operational-clear-state span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2d7147; font-size: 24px; }

/* Header row plus the swipe carousel, matching .exception-workspace and
   .harvest-workspace. Before the command bar was docked, the workspace was a
   plain block and the bar floated over its corner. */
.map-workspace { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); }
/* The area list and the map are two panes of one carousel at every width. These
   used to be display:none above 720px, so a laptop saw the map and had no way
   to reach the list at all: no touch drag, and the scrollbar is hidden. */
.farm-swipe-viewport, .farm-swipe-pane { height: 100%; min-width: 0; min-height: 0; }
.farm-swipe-viewport {
  width: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.farm-swipe-viewport::-webkit-scrollbar { display: none; }
.farm-swipe-pane { flex: 0 0 100%; width: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.farm-list-pane { display: block; padding: 56px 16px 16px; overflow-y: auto; overscroll-behavior-y: contain; background: #f5f7f2; }
/* A full-bleed list of blocks reads badly on a wide monitor, so the column is
   capped and centred while the pane itself still fills the pane. */
.farm-mobile-area-list { max-width: 780px; margin: 0 auto; display: grid; gap: 6px; }
.farm-area-group { overflow: hidden; border: 1px solid #dce4d9; border-radius: 12px; background: #fff; }
.farm-area-group > summary { min-height: 46px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; color: #234431; cursor: pointer; list-style: none; font-size: 13px; font-weight: 850; }
.farm-area-group > summary::-webkit-details-marker { display: none; }
.farm-area-group > summary::after { content: "⌄"; margin-left: 8px; color: #688072; transition: transform 140ms ease; }
.farm-area-group[open] > summary::after { transform: rotate(180deg); }
.farm-area-group > summary b { margin-left: auto; padding: 3px 7px; border-radius: 999px; color: #315d42; background: #e7efe4; font-size: 10px; }
.farm-area-group > div { padding: 0 5px 5px; display: grid; gap: 5px; }
.farm-mobile-area-row {
  width: 100%; min-height: 54px; padding: 8px 10px; display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  border: 1px solid #e3e9e1; border-radius: 9px; color: #203127; background: #fbfcfa; text-align: left;
}
.farm-mobile-area-row:hover { border-color: #c4d3c0; background: #fff; }
.farm-area-cue { width: 5px; height: 32px; border-radius: 999px; background: #8aaa87; }
.farm-mobile-area-row.is-active .farm-area-cue { background: #2d7147; }
.farm-mobile-area-row.is-danger .farm-area-cue { background: #b43b32; }
.farm-mobile-area-row > span:nth-child(2) { min-width: 0; }
.farm-mobile-area-row strong, .farm-mobile-area-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.farm-mobile-area-row strong { font-size: 14px; }
.farm-mobile-area-row small { margin-top: 2px; color: #6a786e; font-size: 11px; }
.farm-mobile-area-row b { min-width: 25px; color: #315d42; font-size: 12px; text-align: center; }
/* Top-left on a desktop, because bottom-centre is where the floating shell nav
   sits. Phones move it back down within thumb reach below. */
.farm-swipe-hint {
  position: absolute; z-index: 55; top: 12px; left: 12px; padding: 3px 4px;
  display: flex; align-items: center; gap: 2px; border: 1px solid rgb(208 219 208 / 78%);
  border-radius: 999px; color: #365d44; background: rgb(255 255 255 / 88%); box-shadow: 0 4px 14px rgb(21 55 37 / 10%);
  font-size: 12px; pointer-events: none;
}
/* The pill itself stays transparent to pointers so it never eats a map drag;
   only the two targets inside it take clicks. */
.farm-swipe-hint button {
  min-width: 40px; min-height: 32px; padding: 0 10px; display: flex; align-items: center; justify-content: center;
  color: inherit; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  font-size: 12px; cursor: pointer; pointer-events: auto; touch-action: manipulation;
}
.farm-swipe-hint button.is-active { color: #fff; background: #2d7147; }
.map-workspace .illustrated-map-panel { height: 100%; min-height: 0; border: 0; border-radius: inherit; box-shadow: none; }
.map-workspace .illustrated-map-panel > .panel-header,
.map-workspace .official-map-footer { display: none; }
.map-workspace .illustrated-map-scroll { height: 100%; min-height: 0; padding: 0; overflow: auto; overscroll-behavior: contain; background: #f8f6ed; }
.map-workspace .illustrated-farm-map { width: auto; max-width: 100%; height: 100%; min-height: 620px; display: block; margin: 0 auto; }
.map-workspace .illustrated-hotspot > rect { transition: fill 80ms linear, stroke 80ms linear; }
.map-workspace .illustrated-farm-map.has-active-filters .illustrated-hotspot:not(.is-filtered) > rect { fill: rgb(36 113 69 / 22%); stroke: #1f6d43; stroke-width: 3; }
.map-workspace .illustrated-farm-map.has-active-filters .illustrated-hotspot.is-filtered { opacity: .12; pointer-events: none; }
.map-workspace .illustrated-hotspot:hover > rect { fill: rgb(36 91 58 / 9%); stroke: #245b3a; }
.map-workspace .illustrated-hotspot.is-selected > rect { fill: rgb(36 91 58 / 14%); stroke: #123e28; stroke-width: 3; }
.farm-filter-empty { min-height: 240px; padding: 28px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; color: #536157; text-align: center; }
.farm-filter-empty strong { color: #193c2a; font-size: 17px; }
.farm-filter-empty span { max-width: 260px; font-size: 12px; line-height: 1.5; }
.farm-filter-empty .button { margin-top: 8px; }
.map-filter-actions { position: sticky; bottom: 0; padding-top: 12px; background: linear-gradient(to bottom, rgb(255 255 255 / 0%), #fff 22%); }
.map-hover-card { display: none !important; }

.plan-workspace-compact { display: grid; grid-template-rows: auto minmax(0, 1fr); background: #fff; }
.plan-workspace-compact .daily-timeline-scroll { height: auto; min-height: 0; max-height: none; border: 0; border-radius: 0 0 inherit inherit; overscroll-behavior: contain; }
.plan-view-options { min-width: 0; padding: 3px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; border: 1px solid #d6dfd4; border-radius: 11px; background: #f0f4ee; }
/* Inactive scale pills were #66766a on the #f0f4ee track: 4.31:1, under the
   4.5:1 floor for 10-11px text. Darkened within the same green-grey family. */
.plan-view-options button { min-width: 0; min-height: 32px; padding: 4px 9px; border: 0; border-radius: 8px; color: #4a5a4e; background: transparent; font-size: 11px; font-weight: 800; white-space: nowrap; touch-action: manipulation; }
.plan-view-options button.is-active { color: #fff; background: #245b3a; box-shadow: 0 1px 3px rgb(20 55 35 / 18%); }
/* Widens the month window without leaving the month scale, so the header keeps
   naming months while more of the plan fits on screen. */
.plan-span-zoom { flex: 0 0 auto; padding: 3px; display: flex; align-items: center; gap: 2px; border: 1px solid #d6dfd4; border-radius: 11px; background: #f0f4ee; }
.plan-span-zoom button { min-width: 30px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; color: #2c5c3e; background: transparent; font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; touch-action: manipulation; }
.plan-span-zoom button:hover:not(:disabled) { background: #dfe9dc; }
.plan-span-zoom button:disabled { opacity: .35; cursor: default; }
.plan-span-zoom span { min-width: 52px; color: #40513f; font-size: 11px; font-weight: 800; text-align: center; white-space: nowrap; }
.plan-workspace-compact .daily-timeline-header { top: 0; }
.plan-workspace-compact .daily-day-cells { background-image: none !important; }
.plan-workspace-compact .daily-drop-cell { border-inline-color: transparent; }
.plan-workspace-compact [data-timeline-zoom="day"] .daily-drop-cell { border-right: 1px solid #eef1ec; }
.plan-workspace-compact [data-timeline-zoom="day"] .daily-drop-cell.is-week-start,
.plan-workspace-compact [data-timeline-zoom="month"] .daily-drop-cell.is-week-start { border-left: 1px solid #cbd4ca; }
.plan-workspace-compact [data-timeline-zoom="year"] .daily-drop-cell.is-month-start { border-left: 1px solid #b8c5b7; }
.plan-workspace-compact [data-timeline-zoom="three_year"] .daily-drop-cell.is-year-start { border-left: 2px solid #9baa99; }
.timeline-year-gridline { position:absolute; inset-block:0; left:calc(var(--start-day) * var(--day-width)); border-left:2px solid #9baa99; pointer-events:none; }
.plan-workspace-compact .daily-row-track { overflow: clip; contain: paint; isolation: isolate; }
.plan-workspace-compact .daily-slot-label { z-index: 36; }
.plan-workspace-compact .daily-timeline-header .daily-slot-label { z-index: 54; }
.plan-workspace-compact .daily-cycle-bar:hover,
.plan-workspace-compact .daily-cycle-bar:focus-visible { z-index: 6; }
.plan-workspace-compact .daily-cycle-actions { display: none; }

.harvest-stream-row {
  min-height: 66px;
  padding: 9px 16px;
  display: grid;
  grid-template-columns: 28px 5px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #e7ebe5;
  background: #fff;
  cursor: pointer;
}
.harvest-stream-row:hover { background: #f6f9f4; }
.harvest-stream-row.is-excluded { opacity: .42; }
.harvest-stream-row .harvest-cue { width: 5px; height: 34px; border-radius: 999px; background: #2d7147; }
.harvest-stream-row.is-warning .harvest-cue { background: #bf6d27; }
.harvest-stream-row div { min-width: 0; }
.harvest-stream-row strong, .harvest-stream-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.harvest-stream-row strong { font-size: 14px; }
.harvest-stream-row small { margin-top: 3px; color: #69786d; font-size: 11px; }
.harvest-stream-row > b { color: #173e2b; font-size: 15px; white-space: nowrap; }

/* One shared contextual drawer. */
.context-drawer-root { position: fixed; inset: 0; z-index: 1400; }
.context-drawer-root[hidden] { display: none; }
.context-drawer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; background: rgb(9 24 15 / 42%); opacity: 0; transition: opacity 180ms ease; }
.context-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: min(430px, 92vw);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: #19281f;
  background: #fbfcf8;
  box-shadow: -20px 0 55px rgb(9 28 17 / 22%);
  transform: translateX(102%);
  transition: transform 180ms ease;
  outline: none;
}
.context-drawer-root.is-open .context-drawer-backdrop { opacity: 1; }
.context-drawer-root.is-open .context-drawer { transform: translateX(0); }
.context-drawer-header { min-height: 86px; padding: 17px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid #dce3da; background: #fff; }
.context-drawer-header p { margin: 0 0 3px; color: #6c7c70; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.context-drawer-header h2 { margin: 0; color: #173e2b; font-size: 22px; line-height: 1.15; }
.context-drawer-header small { display: block; margin-top: 5px; color: #6d7a70; font-size: 11px; }
.context-drawer-close { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; border: 1px solid #d6ded4; border-radius: 12px; color: #294737; background: #f8faf6; font-size: 24px; }
.context-drawer-back-icon { display: none; }
.context-drawer-close-icon { display: inline; }
.context-drawer-body { min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.drawer-form-grid, .drawer-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.drawer-form-grid .field { min-width: 0; }
.drawer-metric-grid article { min-height: 86px; padding: 13px; display: grid; align-content: center; gap: 3px; border: 1px solid #dce4d9; border-radius: 13px; background: #fff; }
.drawer-metric-grid article.is-warning { border-color: #e4c2b9; background: #fff7f3; }
.drawer-metric-grid strong { color: #173e2b; font-size: 24px; }
.drawer-metric-grid span { color: #6b786f; font-size: 10px; }
.drawer-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid #dfe5dc; }
.drawer-section > h3, .drawer-section-heading h3 { margin: 0 0 10px; color: #203b2c; font-size: 14px; }
.drawer-section-heading { display: flex; align-items: center; justify-content: space-between; }
.drawer-status-list { display: grid; gap: 9px; }
.drawer-status-list > span { padding: 10px 11px; display: flex; align-items: center; gap: 9px; border-radius: 10px; background: #fff; font-size: 12px; }
.drawer-status-list .status-dot { width: 9px; height: 9px; border-radius: 50%; }
.drawer-status-list .is-go { background: #2d7147; }.drawer-status-list .is-warning { background: #bf6d27; }.drawer-status-list .is-stop { background: #b33d32; }
.drawer-wide-action { width: 100%; margin-top: 12px; }
.drawer-segmented { margin-top: 12px; padding: 4px; display: flex; gap: 3px; border: 1px solid #d9e1d7; border-radius: 12px; background: #eef2ec; }
.drawer-segmented button { flex: 1; min-height: 38px; padding: 6px; border: 0; border-radius: 9px; color: #5a6b60; background: transparent; font-size: 11px; font-weight: 800; }
.drawer-segmented button.is-active { color: #fff; background: #285f3e; }
.harvest-export-options { display: grid; gap: 10px; }
.harvest-export-options .button { min-height: 56px; padding: 10px 14px; display: grid; justify-items: start; align-content: center; gap: 2px; text-align: left; touch-action: manipulation; }
.harvest-export-options .button strong { font-size: 13px; }
.harvest-export-options .button span { font-size: 10px; font-weight: 600; opacity: .74; }
.drawer-action-pair { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer-area-state { min-height: 58px; padding: 12px; display: flex; align-items: center; gap: 10px; border-radius: 12px; color: #255638; background: #e6f0e1; }
.drawer-area-state > span { width: 12px; height: 12px; border-radius: 50%; background: #2d7147; }
.drawer-area-state.is-used { color: #274d63; background: #e3edf2; }.drawer-area-state.is-used > span { background: #356c8a; }
.drawer-record-list { margin-top: 12px; display: grid; gap: 7px; }
.drawer-record-list > button { width: 100%; min-height: 58px; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #dce4d9; border-radius: 11px; color: #203127; background: #fff; text-align: left; }
.drawer-record-list > button span { min-width: 0; }.drawer-record-list > button strong, .drawer-record-list > button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.drawer-record-list > button small { margin-top: 3px; color: #6d7a71; font-size: 10px; }
.drawer-empty { padding: 24px 14px; border: 1px dashed #ccd7cc; border-radius: 12px; color: #67766c; background: #fff; font-size: 12px; text-align: center; }
.drawer-crop-list { max-height: 42vh; margin-top: 10px; display: grid; gap: 8px; overflow-y: auto; }
.drawer-crop-list .crop-module-card { box-shadow: none; }
.context-drawer-body .mobile-weather-strip { display: grid; margin-top: 14px; }

@media (max-width: 720px) {
  body.is-operational-view #main-content { min-height: 300px; padding: 8px; }
  .operational-command { width: 40px; min-width: 40px; height: 40px; min-height: 40px; border-radius: 10px; }
  .workspace-minimal-heading .operational-command { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  .operational-workspace { border-radius: 13px; }
  /* The carousel itself is defined once above; a phone only differs in leaving
     room for the shell nav and in owning the horizontal drag. */
  .farm-swipe-viewport { height: 100%; touch-action: pan-x; }
  .farm-map-pane, .farm-map-pane .illustrated-map-panel, .farm-map-pane .illustrated-map-scroll { overflow: hidden; touch-action: pan-x; }
  .map-workspace .illustrated-farm-map { width: 100%; min-width: 0; height: 100%; min-height: 0; display: block; object-fit: contain; user-select: none; touch-action: pan-x; }
  /* The 54px top gap existed only to clear the floating command bar; the bar
     now sits in the header above this pane. */
  .farm-list-pane { padding: 9px 9px 8px; }
  .farm-mobile-area-list { max-width: none; }
  .farm-mobile-area-row strong { font-size: 13px; }
  .farm-mobile-area-row small { font-size: 10px; }
  /* Back to bottom-centre within thumb reach. This was absolute inside
     .map-workspace, so "78px up" measured from the workspace's own bottom
     edge -- and the workspace is shorter than the screen, which parked the
     pager mid-list instead of above the nav. Fixed to the viewport instead,
     so it sits a constant distance above the shell nav at any content height.
     No ancestor establishes a containing block, so fixed resolves to the
     viewport as intended. */
  .farm-swipe-hint { position: fixed; top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
  /* Let the last rows scroll clear of the floating pager rather than ending
     underneath it. */
  .farm-swipe-pane.farm-list-pane { padding-bottom: 58px; }
  .exception-stream-row, .harvest-stream-row { min-height: 60px; padding-inline: 11px; }
  .exception-stream-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; }
  .exception-stream-row strong, .harvest-stream-row strong { font-size: 13px; }
  .context-drawer { width: 100%; }
  .context-drawer-header { min-height: 74px; padding: max(13px, env(safe-area-inset-top)) 14px 13px; flex-direction: row; justify-content: space-between; align-items: center; }
  .context-drawer-header > div { min-width: 0; }
  .context-drawer-header h2 { font-size: 20px; }
  .context-drawer-close { flex: 0 0 42px; border-color: transparent; background: transparent; font-size: 31px; }
  /* On a phone every dialog is a sheet that covers the screen, so it reads as
     a pushed page rather than a floating box. Its close control becomes a
     leading back chevron, matching .context-drawer-close, instead of a
     trailing x. Same button, no extra tap target — the glyph and the order
     change. The confirm dialog is excluded: it has no header and its two
     explicit choices are the way out. */
  .dialog:not(.dialog-confirm) .dialog-header { justify-content: flex-start; gap: 6px; }
  .dialog:not(.dialog-confirm) .dialog-header > div { min-width: 0; flex: 1; }
  .dialog:not(.dialog-confirm) .dialog-header .icon-button {
    order: -1; flex: 0 0 auto; border-color: transparent; background: transparent; font-size: 0;
  }
  .dialog:not(.dialog-confirm) .dialog-header .icon-button::before { content: "‹"; font-size: 31px; line-height: 1; }
  .context-drawer-back-icon { display: inline; }
  .context-drawer-close-icon { display: none; }
  .context-drawer-body { padding: 13px; }
  .drawer-form-grid { grid-template-columns: 1fr; }
  .context-drawer-root[data-page="map"][data-mode="area"] { display: flex; align-items: flex-end; }
  .context-drawer-root[data-page="map"][data-mode="area"] .context-drawer { top: auto; bottom: 0; width: 100%; height: auto; max-height: 72dvh; border-radius: 18px 18px 0 0; transform: translateY(102%); }
  .context-drawer-root[data-page="map"][data-mode="area"].is-open .context-drawer { transform: translateY(0); }
  .context-drawer-root[data-page="map"][data-mode="area"] .context-drawer-header { border-radius: 18px 18px 0 0; }
  .harvest-workspace .operational-command,
  .harvest-workspace .export-check { position: relative; z-index: 2; pointer-events: auto; touch-action: manipulation; }
  .harvest-workspace .export-check { width: 40px; min-width: 40px; height: 40px; margin: -8px -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .context-drawer, .context-drawer-backdrop, .map-workspace .illustrated-hotspot > rect { transition: none; }
}

/* Farm OS TaskV1.1 board and protected mobile reporting */
.task-board-stack { display: grid; gap: 1.25rem; min-width: 0; }
.assignment-drawer { border: 1px solid #cfd9cd; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(31, 65, 52, .08); overflow: clip; }
.assignment-drawer > summary { min-height: 68px; padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; background: #f5f8f2; }
.assignment-drawer > summary span:first-child { display: grid; gap: .2rem; }
.assignment-drawer > summary strong { font-size: 1.15rem; color: #173e32; }
.assignment-drawer > summary small { color: #68776f; }
.assignment-drawer > form { border-top: 1px solid #dce4da; }
.task-board-heading { display: flex; align-items: end; justify-content: space-between; }
.task-board-heading h2 { margin: .1rem 0; font-size: clamp(1.45rem, 3vw, 2.1rem); color: #173e32; }
.task-board-heading p { margin: 0; color: #68776f; }
.task-board-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: .85rem; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 0 .65rem; }
.task-board-column { background: #f1f4ef; border: 1px solid #d9e1d6; border-radius: 18px; padding: .75rem; min-height: 290px; }
.task-board-column > header { display: flex; align-items: center; justify-content: space-between; padding: .35rem .2rem .8rem; color: #294b40; }
.task-board-column > header span { min-width: 28px; min-height: 28px; border-radius: 99px; display: grid; place-items: center; background: #fff; font-weight: 800; }
.task-board-column > div { display: grid; gap: .7rem; }
.task-board-card { display: grid; gap: .65rem; padding: .9rem; border: 1px solid #d7ded4; border-left: 4px solid #75997d; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(33, 61, 49, .06); }
.task-board-card.is-urgent { border-left-color: var(--status-stop); }
.task-board-card > header { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #66766e; }
.task-board-card h3, .task-board-card p { margin: 0; }
.task-board-card dl { display: grid; gap: .35rem; margin: 0; }
.task-board-card dl div { display: flex; justify-content: space-between; gap: .75rem; font-size: .78rem; }
.task-board-card dt { color: #718079; }
.task-board-card dd { margin: 0; text-align: right; font-weight: 700; color: #294b40; }
.task-card-actions, .task-evidence-links { display: flex; flex-wrap: wrap; gap: .45rem; }
.task-evidence-links a { color: #136a52; font-weight: 750; }
.task-return-note { padding: .65rem; border-radius: 10px; background: #fff1df; color: #724619; font-size: .82rem; }
.task-reviewer-form { display: grid; gap: .4rem; padding-top: .6rem; border-top: 1px solid #e3e8e1; }
.task-reviewer-form select { width: 100%; min-height: 42px; }
.task-column-empty { padding: 1.2rem .4rem; text-align: center; color: #7b8982; }
.member-skills { display: flex; flex-wrap: wrap; gap: .55rem 1rem; border: 1px solid #d7dfd5; border-radius: 12px; padding: .85rem; }
.member-skills legend { padding: 0 .35rem; font-weight: 800; color: #294b40; }
.member-skills label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; }
.worker-locked-field { grid-column: 1 / -1; display: grid; gap: .2rem; padding: .85rem; border: 1px solid #cbd8cd; border-radius: 12px; background: #f4f7f2; }
.worker-locked-field span, .worker-locked-field small { color: #68776f; }
.worker-draft-state { display: inline-flex; margin-top: .4rem; color: #547267; font-size: .78rem; font-weight: 700; }
.worker-photo-status { min-height: 1.2rem; color: #356759; font-weight: 700; }
.worker-start-state { display: grid; gap: .75rem; padding: 1rem; border-radius: 14px; background: #eff7ec; }
.worker-start-state p { margin: 0; color: #526a60; }
.portal-language { float: right; margin: -.2rem 0 .5rem .5rem; }
.worker-app button { min-height: 44px; }

@media (max-width: 720px) {
  .task-board-columns { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .task-board-column { min-height: 0; }
  .worker-report-form, .worker-report-form * { min-width: 0; }
  .worker-report-form input, .worker-report-form select, .worker-report-form textarea { max-width: 100%; }
  .worker-report-form button { min-height: 44px; }
  .worker-account { gap: .35rem; }

  .worker-dialog { width: 100%; max-width: 100%; max-height: 100dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
}

/* Unified Farm OS authentication, worker, operations, and admin surfaces. */
.farm-os-portal { position: fixed; inset: 0; z-index: 1000; overflow: auto; background: #f3f5ef; color: #173f35; }
.vercel-demo-banner { position: relative; z-index: 60; min-height: 38px; padding: 8px 18px; display: flex; justify-content: center; align-items: center; gap: 10px; color: #f7fbf7; background: #78531c; font-size: 12px; }.vercel-demo-banner span { color: #f2dfbc; }
.demo-sandbox-note { margin-bottom: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid #dfc18c; border-radius: 12px; color: #5f4317; background: #fff6e5; }.demo-sandbox-note span { flex: 1; color: #785f36; font-size: 12px; }
.portal-login { min-height: 100%; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left, #dceadb, transparent 45%), #f5f4ec; }
.portal-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.portal-brand > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: white; background: #173f35; font-weight: 800; }
.portal-brand div { display: grid; }.portal-brand strong { font-size: 1.25rem; }.portal-brand small { color: #60726b; }
.portal-login-card { width: min(760px, 100%); padding: clamp(22px, 5vw, 44px); border: 1px solid #d8ded4; border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 24px 70px rgba(23,63,53,.12); }
.portal-landing-card { width: min(920px, 100%); }.portal-choice-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.portal-choice-grid > button { min-height: 190px; padding: 22px; display: grid; align-content: start; gap: 10px; border: 1px solid #ced9cf; border-radius: 18px; color: #173f35; background: linear-gradient(145deg,#fff,#f3f7f0); text-align: left; cursor: pointer; }.portal-choice-grid > button:hover, .portal-choice-grid > button:focus-visible { border-color: #4f8067; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(23,63,53,.11); }.portal-choice-grid span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: white; background: #2f7357; font-weight: 800; }.portal-choice-grid strong { margin-top: 8px; font-size: 18px; }.portal-choice-grid small { color: #60726b; line-height: 1.45; }.portal-auth-panel { width: min(510px,100%); margin: 22px auto 0; }.portal-auth-panel form { margin-top: 14px; padding: 22px; border: 1px solid #d8ded4; border-radius: 16px; background: #f8faf6; }.portal-auth-panel form h2 { margin: 0; }.portal-auth-panel form p { color: #60726b; }.demo-access { padding: 9px 11px; border-radius: 8px; color: #72511d; background: #fff1d5; font-weight: 750; }
.portal-login-card > h1 { margin: 0 0 6px; }.portal-login-card > p { color: #60726b; }
.portal-login-grid, .operations-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.portal-login form, .portal-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.portal-login form > h2, .portal-login form > button, .portal-login form > label { grid-column: 1 / -1; }
.portal-login label, .portal-form-grid label, .admin-stack form > label { display: grid; gap: 6px; font-weight: 700; }
.portal-login input, .portal-login select, .portal-form-grid input, .portal-form-grid select, .portal-form-grid textarea, .admin-stack input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #bdc9c0; border-radius: 9px; background: white; color: #173f35; }
.portal-message { min-height: 24px; color: var(--status-go); }.portal-message.is-error { color: var(--status-stop); }
.operations-shell > header { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 18px; }.operations-shell h1 { margin: 3px 0 0; }
.portal-table { display: grid; }.portal-table > div { display: grid; gap: 3px; padding: 13px 16px; border-bottom: 1px solid #e0e5de; }.portal-table span, .portal-table small { color: #60726b; }
.task-brief { padding: 14px; border-radius: 12px; background: #edf2e9; margin-bottom: 18px; }.task-brief p { margin-top: 4px; }
.operations-shell { width: min(1300px,100%); margin: 0 auto; padding: 24px; }.operations-shell > nav { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 16px; border-bottom: 1px solid #ced8cf; }.operations-shell > nav button { padding: 12px 16px; border: 0; background: transparent; color: #4d655b; font-weight: 750; white-space: nowrap; }.operations-shell > nav button.is-active { color: #173f35; border-bottom: 3px solid #2f7357; }
.portal-form-grid .span-2 { grid-column: 1 / -1; }.operations-grid > .panel { min-width: 0; }.portal-location-grid .location-card { text-align: left; cursor: default; }
.admin-stack { display: grid; gap: 18px; }.permission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 520px; overflow: auto; border: 1px solid #d6ded6; border-radius: 12px; padding: 12px; }.permission-grid legend { padding: 0 5px; font-weight: 800; }.permission-choice { min-height: 62px; padding: 9px; display: flex !important; grid-template-columns: none !important; gap: 9px !important; align-items: flex-start; border: 1px solid #e1e7df; border-radius: 9px; background: #fbfcfa; font-weight: 400 !important; }.permission-choice input { flex: 0 0 auto; width: 20px !important; min-height: 20px !important; margin-top: 2px; }.permission-choice span { display: grid; gap: 3px; }.permission-choice strong { color: #173f35; font-size: 12px; }.permission-choice small, .form-intro { color: #60726b; font-size: 10px; line-height: 1.4; }.role-form { display: grid; gap: 14px; align-content: start; }.member-row { position: relative; padding-right: 180px !important; }.member-row button { position: absolute; top: 12px; right: 12px; }
.account-exception-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.credential-issued { padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border: 1px solid #79b28d; border-radius: 14px; color: #184d3a; background: #e5f5e8; }.credential-issued div { display: grid; gap: 3px; }.credential-issued span { color: #527264; font-size: 10px; }.credential-issued code { min-width: 92px; padding: 10px 14px; border-radius: 10px; color: white; background: #1f6149; font-size: 18px; font-weight: 850; letter-spacing: .14em; text-align: center; }
.member-register { overflow-x: auto; }.member-register-head, .member-register-row { min-width: 900px; display: grid; grid-template-columns: minmax(190px,1.35fr) minmax(115px,.8fr) minmax(135px,.9fr) minmax(130px,.85fr) 75px minmax(160px,1fr); gap: 12px; align-items: center; }.member-register-head { padding: 9px 16px; color: #60726b; background: #eef3eb; font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }.member-register-row { min-height: 72px; padding: 11px 16px; border-top: 1px solid #e1e7df; }.member-register-row > div { min-width: 0; display: grid; gap: 3px; }.member-register-row > div > strong { overflow: hidden; color: #294f42; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.member-register-row small { color: #6c7d75; font-size: 8px; }.member-identity { grid-template-columns: 38px minmax(0,1fr); align-items: center; }.member-identity > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: white; background: #32755c; font-weight: 850; }.member-column-label { display: none; }.member-status { justify-self: start; padding: 5px 8px; border-radius: 999px; font-size: 8px; font-weight: 850; }.member-status.is-active { color: #216443; background: #dff2e2; }.member-status.is-disabled { color: #8a4139; background: #f8e3e0; }
.permission-category { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.permission-category h4 { grid-column: 1 / -1; margin: 8px 0 0; color: #315a4c; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }.role-matrix-panel { overflow: hidden; }.role-matrix-panel > .panel-header { align-items: center; }.role-matrix-panel .eyebrow { margin: 0 0 3px; color: #2f7357; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.role-summary-grid { padding: 0 16px 14px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }.role-summary { padding: 11px 12px; display: grid; gap: 3px; border: 1px solid #dce4da; border-radius: 10px; background: #f8faf7; }.role-summary span { color: #65766e; font-size: 10px; }.role-summary.is-administrator { border-top: 4px solid #ed922e; }.role-summary.is-manager { border-top: 4px solid #7651bb; }.role-summary.is-engineer { border-top: 4px solid #3383d5; }.role-summary.is-worker { border-top: 4px solid #2fa865; }.role-matrix-wrap { overflow: auto; border-top: 1px solid #dfe6dd; }.role-permission-matrix { width: 100%; min-width: 860px; border-collapse: collapse; }.role-permission-matrix th, .role-permission-matrix td { padding: 10px 12px; border-right: 1px solid #e0e6df; border-bottom: 1px solid #e0e6df; }.role-permission-matrix thead th { position: sticky; z-index: 2; top: 0; color: white; background: #234b3e; font-size: 11px; }.role-permission-matrix thead th:first-child { width: 42%; text-align: left; }.role-permission-matrix tbody th { text-align: left; }.role-permission-matrix tbody th strong, .role-permission-matrix tbody th small { display: block; }.role-permission-matrix tbody th small { margin-top: 2px; color: #6b7b74; font-size: 9px; font-weight: 400; }.role-permission-matrix td { width: 14.5%; text-align: center; }.role-permission-matrix .permission-category-row th { padding: 8px 12px; color: #315a4c; background: #edf3ea; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }.matrix-check { position: relative; width: 25px; height: 25px; display: inline-grid !important; place-items: center; cursor: pointer; }.matrix-check input { position: absolute; width: 25px !important; min-height: 25px !important; margin: 0; opacity: 0; cursor: pointer; }.matrix-check span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #bdc9c0; border-radius: 7px; color: transparent; background: white; font-weight: 900; }.matrix-check input:checked + span { color: #176b3c; border-color: #6eb889; background: #d5f1dc; }.matrix-check input:focus-visible + span { outline: 3px solid rgba(47,115,87,.25); outline-offset: 2px; }

/* Zones and blocks: current operational registry and governed archive controls. */
.zone-management-stack { display: grid; gap: 18px; }
.zone-management-hero { padding: clamp(20px,4vw,34px); display: flex; justify-content: space-between; align-items: center; gap: 24px; border-radius: 20px; color: white; background: linear-gradient(135deg,#173f35,#2f7357 70%,#77a96c); box-shadow: 0 14px 34px rgba(20,67,54,.15); }
.zone-management-hero .eyebrow, .zone-create-form .eyebrow { margin: 0 0 5px; font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.zone-management-hero .eyebrow { color: #cce4d7; }.zone-management-hero h2 { margin: 0 0 6px; font-size: clamp(25px,4vw,38px); }.zone-management-hero p { max-width: 620px; margin: 0; color: #dcece4; }
.zone-kpis { flex: 0 1 460px; display: grid; grid-template-columns: repeat(3,minmax(95px,1fr)); gap: 8px; }.zone-kpis article { min-height: 88px; padding: 13px; display: grid; align-content: center; gap: 2px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; background: rgba(255,255,255,.1); }.zone-kpis strong { font-size: 24px; }.zone-kpis span { color: #d8e9e0; font-size: 10px; }
.zone-management-layout { display: grid; grid-template-columns: minmax(310px,.7fr) minmax(480px,1.3fr); gap: 18px; align-items: start; }.zone-create-form { position: sticky; top: 20px; }.zone-create-form h2 { margin: 0 0 4px; }.zone-create-form .eyebrow { color: #2f7357; }.zone-create-form label small { color: #6c7c74; font-size: 9px; font-weight: 500; }
.zone-registry-panel { min-width: 0; overflow: hidden; }.zone-registry-list { padding: 0 16px 16px; display: grid; gap: 12px; }.zone-registry-card { overflow: hidden; border: 1px solid #d9e2d7; border-radius: 15px; background: #fbfcfa; }.zone-registry-card > header { padding: 15px 16px 11px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }.zone-registry-card h3 { margin: 5px 0 2px; font-size: 16px; }.zone-registry-card header p { margin: 0; color: #6c7c74; font-size: 11px; }.location-type-tag { display: inline-flex; padding: 3px 7px; border-radius: 999px; color: #286c58; background: #e4f1e2; font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }.zone-registry-meta { padding: 0 16px 11px; display: flex; flex-wrap: wrap; gap: 7px; }.zone-registry-meta span { padding: 5px 8px; border-radius: 7px; color: #526b61; background: #edf2eb; font-size: 9px; font-weight: 750; }.zone-note { margin: 0 16px 12px; color: #60726b; font-size: 10px; }
.block-registry-list { border-top: 1px solid #e1e7df; }.block-registry-row { min-height: 58px; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid #e6ebe4; background: white; }.block-registry-row:last-child { border: 0; }.block-registry-row > div { min-width: 0; display: grid; gap: 3px; }.block-registry-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.block-registry-row small { color: #6b7b74; font-size: 9px; }.registry-empty-row, .registry-empty { padding: 18px 16px; color: #6b7b74; background: #f7f9f5; font-size: 10px; }.registry-empty { min-height: 180px; display: grid; place-content: center; gap: 4px; text-align: center; }.registry-empty strong { color: #315a4c; font-size: 15px; }
.zone-registry-card.is-ungrouped { border-color: #e0bd7c; }.zone-registry-card.is-ungrouped > header { background: #fff8e9; }.zone-registry-card.is-ungrouped .location-type-tag { color: #875910; background: #ffedc7; }
.archived-location-list { border-top: 1px solid #dfe6dd; background: #f5f7f3; }.archived-location-list summary { padding: 13px 16px; color: #60726b; font-size: 10px; font-weight: 800; cursor: pointer; }.archived-location-list > div { padding: 9px 16px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #e2e7df; font-size: 10px; }.archived-location-list span { color: #718078; text-transform: capitalize; }

/* Staff Portal: mobile-first execution surface restored from the earlier worker dashboard. */
.is-worker { background: #f2f5ef; }.worker-app { width: min(1180px,100%); min-height: 100%; margin: 0 auto; padding: 0 24px 40px; }.worker-app-header { min-height: 78px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid #dce4da; }.worker-account { display: flex; align-items: center; gap: 11px; }
.task-brief > div { display: flex; justify-content: space-between; gap: 8px; align-items: center; }.worker-priority, .worker-status, .worker-review-state { padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 850; text-transform: capitalize; }.worker-priority { color: var(--ink-2); background: var(--surface-2); }.worker-priority.is-urgent { color: var(--status-stop); background: var(--status-stop-bg); }.worker-status { color: #416477; background: #e8f0f4; }
.worker-report-list { display: grid; margin-top: 12px; border: 1px solid #dce4da; border-radius: 14px; overflow: hidden; background: white; }.worker-report-list article { padding: 12px 14px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid #e4e9e1; }.worker-report-list article:last-child { border: 0; }.worker-report-list article > div { display: grid; gap: 3px; }.worker-report-list small { overflow: hidden; color: #6d7f77; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.worker-report-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #286c58; background: #edf5e9; font-size: 10px; font-weight: 850; }.worker-review-state { color: #875910; background: #fff1d6; }.panel-empty { min-height: 130px; padding: 24px; display: grid; place-content: center; gap: 5px; border: 1px dashed #bdcbbd; border-radius: 14px; color: #64766d; background: rgba(255,255,255,.6); text-align: center; }.panel-empty strong { color: #294f42; }
.worker-dialog { width: min(780px,calc(100vw - 24px)); }.task-brief { display: grid; gap: 7px; }.task-brief strong { margin-top: 4px; }.task-brief p { margin: 0; color: #60726b; line-height: 1.5; }.worker-report-form { display: grid; gap: 16px; }.worker-report-form > header h3 { margin: 3px 0; font-size: 21px; }.worker-report-form > header p, .worker-form-section > p { margin: 0; color: #64766d; font-size: 11px; line-height: 1.45; }.worker-form-section { padding: 16px; display: grid; gap: 12px; border: 1px solid #dce4da; border-radius: 14px; background: #fbfcfa; }.worker-form-section h4 { margin: 0; color: #214d3e; }.worker-report-form input, .worker-report-form select, .worker-report-form textarea { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #bdc9c0; border-radius: 9px; color: #173f35; background: white; }.worker-report-form label { display: grid; gap: 6px; color: #294f42; font-size: 11px; font-weight: 750; }.worker-checklist { display: grid; gap: 7px; }.worker-checklist label { min-height: 48px; padding: 9px 11px; display: flex; grid-template-columns: none; gap: 10px; align-items: center; border: 1px solid #dbe4d9; border-radius: 10px; background: white; }.worker-checklist input, .worker-choice-row input, .worker-escalation input { flex: 0 0 auto; width: 21px; min-height: 21px; }.worker-checklist span { display: flex; gap: 8px; align-items: center; }.worker-checklist span strong { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; color: #286c58; background: #e8f2e6; font-size: 10px; }.worker-choice-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.worker-choice-row label { min-height: 52px; padding: 10px; display: flex; grid-template-columns: none; gap: 9px; align-items: center; border: 1px solid #d9e2d7; border-radius: 10px; background: white; }.worker-evidence-field input { border-style: dashed; }.worker-escalation { padding: 11px; display: flex !important; grid-template-columns: none !important; gap: 10px !important; align-items: flex-start; border: 1px solid #ebc6bd; border-radius: 10px; background: #fff4f1; }.worker-escalation span { display: grid; gap: 3px; }.worker-escalation small { color: #8b655e; }.worker-report-form footer { padding: 12px 0 0; display: flex; justify-content: space-between; gap: 14px; align-items: center; }.worker-report-form footer span { color: #64766d; font-size: 11px; }.worker-submitted-state { padding: 20px; border: 1px solid #cddfca; border-radius: 14px; background: #f2f8ef; }.worker-submitted-state > p { color: #60726b; }

/* Work Lists are reusable, governed checklists. Assignments receive an immutable snapshot. */
.work-list-stack { display: grid; gap: 20px; min-width: 0; }
.work-list-layout { display: grid; grid-template-columns: minmax(320px,420px) minmax(0,1fr); gap: 18px; align-items: start; }
.work-list-form { position: sticky; top: 20px; }
.work-list-form h3 { margin: 3px 0; color: #173f35; font-size: 20px; }
.work-list-form label small { color: #718078; font-weight: 500; }
.work-list-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 12px; }
.work-list-card { min-width: 0; padding: 17px; display: grid; gap: 10px; border: 1px solid #d7e0d5; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(28,70,56,.06); }
.work-list-card > header, .work-list-card > footer, .work-list-meta { display: flex; justify-content: space-between; align-items: center; gap: 9px; }
.work-list-card > header span { padding: 4px 8px; border-radius: 999px; color: #286c58; background: #e8f2e6; font-size: 9px; font-weight: 850; text-transform: capitalize; }
.work-list-card > header small, .work-list-meta { color: #718078; font-size: 9px; }
.work-list-card h3, .work-list-card p { margin: 0; }.work-list-card p { min-height: 36px; color: #60726b; font-size: 11px; line-height: 1.5; }
.work-list-checklist, .assignment-work-list-preview ul { margin: 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.work-list-checklist li, .assignment-work-list-preview li { display: flex; gap: 8px; align-items: flex-start; color: #35594d; font-size: 11px; line-height: 1.4; }
.work-list-checklist li > span { flex: 0 0 18px; color: #39765f; font-size: 16px; line-height: 1; }
.assignment-work-list-preview { padding: 15px; display: grid; gap: 10px; border: 1px solid #cbdccc; border-radius: 14px; background: #f5faf3; }
.assignment-work-list-preview header, .assignment-work-list-preview footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.assignment-work-list-preview header span { color: #4f7567; font-size: 9px; font-weight: 850; text-transform: uppercase; }.assignment-work-list-preview p { margin: 0; color: #49655b; font-size: 11px; }
.assignment-work-list-preview li > span { flex: 0 0 18px; color: #39765f; font-size: 16px; line-height: 1; }
.assignment-work-list-preview li.is-other, .worker-checklist label.is-other { color: #76581f; }.assignment-work-list-preview li small { margin-left: auto; color: #8a7551; }
.assignment-work-list-preview footer { padding-top: 9px; border-top: 1px solid #dbe8d9; color: #64766d; font-size: 9px; }

.worker-checklist-other { margin-top: 8px; }.worker-checklist-other input { min-height: 46px; }

/* Task Items: a small action library instead of a form-builder-style Work List. */
.task-item-library { width: min(860px,100%); display: grid; gap: 16px; }
.task-item-add { display: grid; grid-template-columns: 150px repeat(2,minmax(210px,1fr)) auto; gap: 12px; align-items: end; border-radius: 16px; }
.task-item-add label { display: grid; gap: 6px; color: #294f42; font-size: 11px; font-weight: 750; }
.task-item-add input, .task-item-add select { width: 100%; min-height: 46px; padding: 9px 11px; border: 1px solid #bdc9c0; border-radius: 10px; color: #173f35; background: white; }
.task-item-add .button { min-height: 46px; }
.task-item-domain-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.task-item-domain-tabs button { min-height: 44px; padding: 8px 12px; display: flex; gap: 8px; align-items: center; border: 1px solid #d7e0d5; border-radius: 10px; color: #587067; background: white; font-size: 10px; font-weight: 800; white-space: nowrap; }
.task-item-domain-tabs button span { min-width: 21px; padding: 2px 6px; border-radius: 999px; color: #587067; background: #edf2eb; text-align: center; }
.task-item-domain-tabs button.is-active { color: white; border-color: #286c58; background: #286c58; }.task-item-domain-tabs button.is-active span { color: #286c58; background: white; }
.task-item-list { display: grid; gap: 8px; }
.task-item-row { min-height: 60px; padding: 10px 12px; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 11px; align-items: center; border: 1px solid #dbe3d9; border-radius: 12px; background: white; }
.task-item-row > div { min-width: 0; display: grid; gap: 3px; }.task-item-row strong { overflow: hidden; color: #274e41; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.task-item-row small { overflow: hidden; color: #75827c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.task-item-box { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: white; background: #2f7357; font-size: 13px; font-weight: 900; }
.simple-task-form > label > small { margin-left: 5px; color: #7b8882; font-weight: 500; }
.task-item-picker { grid-column: 1 / -1; min-width: 0; padding: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; border: 1px solid #d7e1d5; border-radius: 14px; background: #f6f9f4; }
.task-item-picker legend { padding: 0 6px; color: #294f42; font-size: 11px; font-weight: 850; }.task-item-picker > p { grid-column: 1 / -1; margin: 0; padding: 14px; color: #687970; text-align: center; }
.task-item-choice { min-height: 52px; padding: 10px 11px; display: flex !important; grid-template-columns: none !important; gap: 10px !important; align-items: center; border: 1px solid #dce4da; border-radius: 11px; color: #294f42; background: white; cursor: pointer; }
.task-item-choice > span { min-width: 0; display: grid; gap: 2px; }.task-item-choice strong { font-size: 11px; line-height: 1.35; }.task-item-choice small { color: #7a8175; font-size: 9px; font-weight: 500; }.task-item-choice.is-other { border-style: dashed; color: #70591e; }
.task-item-choice:has(input:checked) { border-color: #77ae8d; background: #edf7ee; box-shadow: inset 0 0 0 1px #b9d9c2; }.task-item-choice.is-other:has(input:checked) { border-color: #d3b166; background: #fff8e8; box-shadow: inset 0 0 0 1px #ead6a4; }
.assignment-options { padding: 0; border: 1px solid #dce3da; border-radius: 12px; background: #f8faf7; }.assignment-options > summary { min-height: 44px; padding: 10px 13px; display: flex; align-items: center; color: #536b61; font-size: 11px; font-weight: 800; cursor: pointer; }.assignment-options > .portal-form-grid { padding: 12px; border-top: 1px solid #e0e6df; }

@media (max-width: 720px) { .portal-login-grid, .operations-grid, .account-exception-grid, .portal-choice-grid { grid-template-columns: 1fr; }.portal-choice-grid > button { min-height: 138px; }.vercel-demo-banner, .demo-sandbox-note { align-items: flex-start; flex-direction: column; gap: 4px; }.operations-shell > header, .role-matrix-panel > .panel-header { align-items: flex-start; flex-direction: column; }.role-matrix-panel > .panel-header .button { width: 100%; }.portal-form-grid { grid-template-columns: 1fr; }.portal-form-grid .span-2 { grid-column: 1; }.permission-grid, .permission-category { grid-template-columns: 1fr; }.role-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.member-row { padding-right: 16px !important; }.member-row button { position: static; margin-top: 7px; }.worker-app { padding: 0 12px 92px; }.worker-app-header { min-height: 68px; }.worker-account > div { display: none; }.worker-report-list article { grid-template-columns: 34px minmax(0,1fr); }.worker-review-state { grid-column: 2; justify-self: start; }.worker-choice-row { grid-template-columns: 1fr; }.worker-report-form footer { align-items: stretch; flex-direction: column; }.worker-report-form footer .button { width: 100%; }.worker-dialog { max-height: calc(100vh - 12px); } }

@media (max-width: 900px) { .work-list-layout { grid-template-columns: 1fr; }.work-list-form { position: static; } }
@media (max-width: 720px) { .work-list-grid { grid-template-columns: 1fr; }.task-board-heading { align-items: stretch; flex-direction: column; }.task-board-heading .button { width: 100%; }.assignment-work-list-preview header, .assignment-work-list-preview footer { align-items: flex-start; flex-direction: column; }.task-item-add { grid-template-columns: 1fr; }.task-item-add .button { width: 100%; }.task-item-picker { grid-template-columns: 1fr; } }

@media (max-width: 720px) { .zone-management-layout { grid-template-columns: 1fr; }.zone-management-hero { align-items: flex-start; flex-direction: column; gap: 14px; }.zone-kpis { width: 100%; flex-basis: auto; }.zone-create-form { position: static; }.zone-registry-card > header { flex-direction: column; }.zone-registry-card > header .button { width: 100%; } }
@media (max-width: 720px) { .credential-issued { align-items: stretch; flex-direction: column; }.member-register { padding: 10px; display: grid; gap: 10px; overflow: visible; background: #f4f7f2; }.member-register-head { display: none; }.member-register-row { min-width: 0; padding: 14px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; border: 1px solid #dce4da; border-radius: 13px; background: white; }.member-identity { grid-column: 1 / -1; }.member-column-label { display: block; }.member-register-row > .button { grid-column: 1 / -1; width: 100%; } }

/* The author stylesheet sets layout display values on several components.
   Keep the native hidden attribute authoritative after JavaScript finishes. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--cream-50); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #eef3e6 0, transparent 28rem), var(--cream-50); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgb(104 161 94 / 35%); outline-offset: 2px; }

.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 14px; color: white; background: var(--forest-900); border-radius: 8px; }
.skip-link:focus { transform: none; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 258px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 16px; color: #eef6f1; background: linear-gradient(165deg, var(--forest-950), var(--forest-800)); display: flex; flex-direction: column; z-index: 30; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 25px; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.brand-mark { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; letter-spacing: -.05em; color: var(--forest-950); background: linear-gradient(145deg, #d5e8bf, #8fc578); }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 15px; }
.brand span { margin-top: 3px; font-size: 11px; color: #b8cfc5; }
.nav-list { display: grid; gap: 5px; margin-top: 22px; }
.nav-item { position: relative; width: 100%; border: 0; border-radius: 11px; padding: 10px 11px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; text-align: left; color: #cde0d8; background: transparent; }
.nav-item:hover { background: rgb(255 255 255 / 7%); }
.nav-item.is-active { color: white; background: rgb(255 255 255 / 12%); box-shadow: inset 3px 0 var(--leaf-500); }
.nav-item > span:first-child { font-size: 18px; text-align: center; }
.nav-item > span:nth-child(2) { font-size: 13px; font-weight: 680; }
.nav-item small { display: block; margin-top: 2px; color: #9fbbb0; font-size: 10px; font-weight: 500; }
.nav-badge { min-width: 22px; padding: 3px 6px; border-radius: 99px; color: var(--forest-950); background: #bddd89; font-size: 11px; text-align: center; }
.sidebar-note { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid rgb(255 255 255 / 11%); border-radius: 12px; background: rgb(255 255 255 / 5%); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--status-go); box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-go) 25%, transparent); }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note strong { font-size: 11px; }.sidebar-note small { margin-top: 2px; color: #9fbbb0; font-size: 9px; }
.repository-status { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.repository-status:hover { background: rgb(255 255 255 / 9%); }
.repository-status.is-offline .status-dot, .sync-status.is-offline .status-dot { background: var(--status-stop); box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-stop) 25%, transparent); }
.repository-status.is-connecting .status-dot, .sync-status.is-connecting .status-dot { background: color-mix(in srgb, var(--status-go) 65%, white); animation: status-pulse 1.4s ease-in-out infinite; }
.sync-status { min-height: 40px; padding: 8px 11px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d9e2d8; border-radius: 999px; color: var(--forest-800); background: rgb(255 255 255 / 78%); font-size: 11px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.sync-status:hover { background: white; }
@keyframes status-pulse { 50% { opacity: .48; transform: scale(.82); } }
.prealpha-note { color: #9fbbb0; font-size: 10px; line-height: 1.45; margin: 13px 7px 0; }
.workspace { min-width: 0; }
.topbar { min-height: 82px; padding: 15px 28px; display: flex; align-items: center; gap: 18px; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--cream-200); background: rgb(251 250 245 / 90%); backdrop-filter: blur(12px); }
.page-heading { min-width: 220px; margin-right: auto; }
.page-heading p { margin: 0 0 3px; color: var(--ink-500); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.page-heading h1 { margin: 0; font-size: clamp(20px, 2vw, 27px); letter-spacing: -.035em; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.global-search { width: min(30vw, 340px); height: 40px; padding: 0 11px; display: flex; gap: 7px; align-items: center; border: 1px solid var(--cream-200); border-radius: 10px; background: white; }
.global-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 12px; }
#main-content { padding: 28px; }
.button, .icon-button { border: 0; border-radius: 9px; font-weight: 700; }
.button { min-height: 39px; padding: 9px 14px; font-size: 12px; }
.button-primary { color: white; background: var(--forest-700); box-shadow: var(--shadow-sm); }
.button-primary:hover { background: var(--forest-800); }
.button-secondary { color: var(--forest-800); background: white; border: 1px solid var(--cream-200); }
.button-danger { color: var(--red-700); background: var(--red-100); }
.button-ghost { color: var(--forest-700); background: transparent; }
.button-small { min-height: 31px; padding: 6px 9px; font-size: 11px; }
.icon-button { width: 38px; height: 38px; color: var(--ink-700); background: transparent; font-size: 21px; }
.icon-button:hover { background: var(--cream-100); }
.mobile-only { display: none; }
.loading-state { min-height: 55vh; display: flex; justify-content: center; align-items: center; gap: 12px; color: var(--ink-500); }
.spinner { width: 22px; height: 22px; border: 3px solid var(--cream-200); border-top-color: var(--forest-600); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.view-stack { display: grid; gap: 22px; animation: reveal .24s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.section-heading h2, .section-heading h3 { margin: 0; letter-spacing: -.025em; }
.section-heading h2 { font-size: 20px; }.section-heading h3 { font-size: 16px; }
.section-heading p { margin: 5px 0 0; color: var(--ink-500); font-size: 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(145px, 1fr)); gap: 13px; }
.kpi-card, .panel { border: 1px solid var(--cream-200); background: rgb(255 255 255 / 92%); box-shadow: var(--shadow-sm); }
.kpi-card { min-height: 126px; padding: 18px; border-radius: 14px; }
.kpi-top { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-500); font-size: 11px; }
.kpi-card strong { display: block; margin-top: 15px; font-size: 26px; letter-spacing: -.04em; }
.kpi-card small { display: block; margin-top: 4px; color: var(--ink-500); font-size: 10px; }
.kpi-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--forest-800); background: var(--leaf-100); }
.panel { border-radius: var(--radius); overflow: hidden; }
.panel-header { min-height: 62px; padding: 15px 18px; display: flex; justify-content: space-between; gap: 16px; align-items: center; border-bottom: 1px solid var(--cream-200); }
.panel-header h3 { margin: 0; font-size: 15px; }.panel-header p { margin: 3px 0 0; color: var(--ink-500); font-size: 10px; }
.panel-body { padding: 18px; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr); gap: 18px; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { padding: 10px 12px; color: var(--ink-500); background: #faf9f4; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.data-table td { padding: 12px; border-top: 1px solid var(--cream-200); vertical-align: middle; }
.data-table tr:hover td { background: #fdfcf8; }
.overview-fix-row, .availability-fix-row { cursor: pointer; outline: none; }.overview-fix-row td, .availability-fix-row td { transition: background .14s ease, box-shadow .14s ease; }.overview-fix-row:hover td, .overview-fix-row:focus-visible td, .availability-fix-row:hover td, .availability-fix-row:focus-visible td { background: #f1f6ed; }.overview-fix-row:focus-visible td:first-child, .availability-fix-row:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--forest-600); }
.data-table .actions { white-space: nowrap; text-align: right; }
.primary-cell strong, .primary-cell small { display: block; }.primary-cell small { margin-top: 3px; color: var(--ink-500); font-size: 10px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 99px; font-size: 9px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-green { color: #276347; background: #e4f1e6; }.badge-blue { color: var(--blue-700); background: var(--blue-100); }.badge-amber { color: var(--amber-600); background: var(--amber-100); }.badge-red { color: var(--red-700); background: var(--red-100); }.badge-gray { color: #66716d; background: #edf0ed; }
.empty-state { padding: 35px 18px; text-align: center; color: var(--ink-500); }.empty-state strong { display: block; color: var(--ink-700); margin-bottom: 4px; }
.review-list { display: grid; gap: 9px; }
.review-item { padding: 12px; display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--cream-200); border-radius: 11px; background: #fdfcf8; }
.review-bar { width: 7px; height: 100%; min-height: 38px; border-radius: 9px; background: var(--amber-600); }.review-item.is-high .review-bar { background: var(--red-700); }
.review-item strong { display: block; font-size: 11px; }.review-item p { margin: 4px 0 0; color: var(--ink-500); font-size: 10px; line-height: 1.4; }
.confidence-stack { display: grid; gap: 13px; }
.confidence-row { display: grid; grid-template-columns: 72px 1fr 28px; gap: 10px; align-items: center; font-size: 10px; }
.bar-track { height: 8px; overflow: hidden; border-radius: 99px; background: var(--cream-100); }.bar-fill { height: 100%; border-radius: inherit; background: var(--leaf-500); }.bar-fill.medium { background: #61a0ae; }.bar-fill.low { background: #c69a4f; }.bar-fill.unstable { background: #c95c5c; }
.filter-strip { padding: 13px; display: flex; flex-wrap: wrap; gap: 9px; align-items: end; border: 1px solid var(--cream-200); border-radius: 13px; background: white; box-shadow: var(--shadow-sm); }
.map-date-field input { color-scheme: light; font-weight: 750; }
.field { display: grid; gap: 6px; min-width: 150px; flex: 1; }
.field.field-small { min-width: 115px; flex: 0 1 165px; }
.field label, .field > span { color: var(--ink-700); font-size: 10px; font-weight: 750; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #dcd8cc; border-radius: 9px; padding: 9px 10px; color: var(--ink-900); background: white; font-size: 12px; }
.field textarea { min-height: 86px; resize: vertical; }
.field input:disabled { color: var(--ink-500); background: var(--cream-100); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.form-grid .span-2 { grid-column: 1 / -1; }
.checkbox-field { display: flex; align-items: center; gap: 8px; font-size: 11px; }.checkbox-field input { width: auto; }
.farm-os-portal input[type="checkbox"] { position: relative; flex: 0 0 22px; width: 22px !important; min-width: 22px; height: 22px; min-height: 22px !important; margin: 0; padding: 0; appearance: none; border: 1.5px solid #aebdb3; border-radius: 7px; background: #fff; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.farm-os-portal input[type="checkbox"]:hover { border-color: #5d9275; }.farm-os-portal input[type="checkbox"]:checked { border-color: #2f7357; background: #2f7357; box-shadow: 0 0 0 3px rgba(47,115,87,.11); }
.farm-os-portal input[type="checkbox"]:checked::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 13px; font-weight: 900; line-height: 1; }
.farm-os-portal input[type="radio"] { position: relative; flex: 0 0 22px; width: 22px !important; min-width: 22px; height: 22px; min-height: 22px !important; margin: 0; padding: 0; appearance: none; border: 1.5px solid #aebdb3; border-radius: 50%; background: #fff; cursor: pointer; }
.farm-os-portal input[type="radio"]:checked { border: 6px solid #2f7357; box-shadow: 0 0 0 3px rgba(47,115,87,.11); }
.farm-os-portal .permission-choice:has(input:checked), .farm-os-portal .worker-checklist label:has(input:checked), .farm-os-portal .checkbox-field:has(input:checked), .farm-os-portal .member-skills label:has(input:checked) { border-color: #82b596; background: #edf7ee; }
.farm-os-portal .worker-checklist label:has(input:checked) span { color: #236047; }.farm-os-portal .worker-checklist label:has(input:checked) span strong { color: white; background: #2f7357; }
.farm-os-portal .worker-choice-row label:has(input:checked) { border-color: #72a989; background: #edf7ee; box-shadow: inset 0 0 0 1px #b9d9c2; }
.farm-os-portal .checkbox-field { min-height: 46px; padding: 9px 11px; border: 1px solid #dce4da; border-radius: 10px; background: #fbfcfa; cursor: pointer; }
.farm-os-portal .matrix-check input { position: absolute; width: 25px !important; min-width: 25px; height: 25px; min-height: 25px !important; border: 0; opacity: 0; }
.help-text { margin: 0; color: var(--ink-500); font-size: 10px; line-height: 1.45; }
.map-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 10px; color: var(--ink-500); }.legend-item { display: inline-flex; align-items: center; gap: 5px; }.legend-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--status-done); }.legend-swatch.occupied { background: var(--status-go); }.legend-swatch.harvest { background: var(--status-go); }.legend-swatch.review { background: var(--status-soon); }.legend-swatch.conflict { background: var(--status-stop); }

/* Farm-map controls have six stable slots: crop, availability, problems,
   confidence, date, and reset. A grid prevents localized labels and Safari's
   date input from forcing controls over one another. */
.map-filter-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr)) minmax(180px, 1.25fr) minmax(110px, max-content);
  gap: 11px;
  align-items: end;
}
.map-filter-strip > .field,
.map-filter-strip > .field.field-small {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: none;
}
.map-filter-strip input,
.map-filter-strip select { width: 100%; min-width: 0; max-width: 100%; }
.map-filter-strip > .button { width: 100%; min-width: 110px; white-space: nowrap; }
.map-date-field { min-width: 0; }

/* Problems are an overlay, never a replacement for availability or crop
   phase. These selectors support both the schematic and illustrated SVGs. */
.visual-map-area .problem-marker,
.visual-map-area .map-problem-marker,
.illustrated-hotspot .problem-marker,
.illustrated-hotspot .map-problem-marker {
  pointer-events: none;
  fill: none;
  stroke: #c73131;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 1px rgb(255 255 255 / 90%));
}
.problem-marker-disc { pointer-events: none; fill: #fff; stroke: #c73131; stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-problem-marker circle { fill: #fff; stroke: #c73131; stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-problem-marker path { fill: none; stroke: #c73131; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.problem-x,
.location-card > .problem-marker,
.succession-cell > .problem-marker,
.daily-cycle-bar > .problem-marker {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  background: #c73131;
  box-shadow: 0 2px 7px rgb(88 20 20 / 28%);
  font-size: 15px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}
.legend-problem-x { width: 15px; min-width: 15px; height: 15px; min-height: 15px; display: inline-grid; place-items: center; color: white; border: 1px solid white; border-radius: 50%; background: #c73131; box-shadow: 0 1px 3px rgb(88 20 20 / 20%); font-size: 11px; font-style: normal; font-weight: 950; line-height: 1; }

/* A problem mark sits above the existing availability/phase color. */
.location-card,
.succession-cell,
.daily-cycle-bar { position: relative; }
.location-card > .problem-x,
.location-card > .problem-marker { position: absolute; z-index: 3; top: 7px; right: 7px; }
.succession-cell > .problem-x,
.succession-cell > .problem-marker { position: absolute; z-index: 9; right: 6px; bottom: 6px; }
.daily-cycle-bar > .problem-x,
.daily-cycle-bar > .problem-marker { position: absolute; z-index: 11; left: 5px; top: 5px; }
.location-card.has-problem { padding-right: 36px; }
.daily-cycle-bar.has-problem { padding-left: 33px; }

.location-card.has-problem,
.succession-cell.has-problem,
.daily-cycle-bar.has-problem { outline: 2px solid rgb(190 48 48 / 78%); outline-offset: -2px; }
.map-board { padding: 18px; border: 1px solid var(--cream-200); border-radius: var(--radius); background: linear-gradient(180deg, #f9faf4, #f3f1e6); box-shadow: var(--shadow-sm); }
.official-map-panel { border: 1px solid var(--cream-200); background: #fbfaf5; box-shadow: var(--shadow-sm); }
.official-map-scroll { padding: 18px; overflow: auto; background: radial-gradient(circle at 50% 18%, #fbfcf7, #e7ebe2 68%, #dce3d8); }
.official-farm-map { display: block; width: min(100%, 900px); min-width: 680px; height: auto; margin: 0 auto; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.map-ground { fill: url(#ground-gradient); stroke: #8b9b8b; stroke-width: 2; filter: url(#soft-map-shadow); }
.map-neighbor { fill: #a7aaa7; }.map-road { fill: #777d7a; }.map-water { fill: url(#water-gradient); stroke: #4ba8ce; stroke-width: 1.5; }.map-buffer { fill: #537b42; }.map-path { fill: #c8cac6; }.map-reservoir { fill: #7187bd; stroke: #344065; stroke-width: 3; filter: url(#soft-map-shadow); }.reservoir-shine { fill: none; stroke: rgb(255 255 255 / 55%); stroke-width: 4; stroke-linecap: round; }
.map-context-label { fill: #17231f; font-size: 16px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }.map-small-label { fill: #26352f; font-size: 9px; font-weight: 700; text-anchor: middle; }.map-area-heading { fill: #405049; font-size: 10px; font-weight: 800; text-anchor: middle; text-transform: uppercase; letter-spacing: .08em; }
.visual-map-area { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; transition: opacity .16s ease, filter .16s ease, transform .16s ease; }
.visual-map-area rect { fill: url(#block-gradient); stroke: #315848; stroke-width: 2; filter: url(#soft-map-shadow); transition: fill .16s ease, stroke .16s ease; }.visual-map-area text { pointer-events: none; fill: #14241e; font-size: 12px; font-weight: 900; }.visual-map-area .area-crop { font-size: 7.5px; font-weight: 750; opacity: .78; }
.visual-map-area.type-canal rect { fill: url(#canal-gradient); stroke: #277b9a; }.visual-map-area.type-canal text { font-size: 8px; }
.visual-map-area.type-net_house rect { fill: #e9c350; stroke: #826716; }.visual-map-area.type-net_house text { font-size: 7px; }
.visual-map-area.type-zone.status-available rect { fill: var(--status-done-bg); stroke: var(--status-done); }.visual-map-area.type-facility.status-available rect { fill: var(--status-done-bg); stroke: var(--status-done); }
.visual-map-area.status-occupied rect { fill: var(--status-go); stroke: color-mix(in srgb, var(--status-go) 70%, black); }.visual-map-area.status-occupied text { fill: #fff; }
.visual-map-area.status-review rect { fill: var(--status-soon); stroke: color-mix(in srgb, var(--status-soon) 70%, black); }.visual-map-area.status-conflict rect { fill: var(--status-stop); stroke: color-mix(in srgb, var(--status-stop) 70%, black); }.visual-map-area.status-conflict text { fill: #fff; }
.visual-map-area.type-canal.status-available rect, .visual-map-area.type-canal.status-occupied rect, .visual-map-area.type-canal.status-review rect, .visual-map-area.type-canal.status-conflict rect { fill: url(#canal-gradient); stroke: #277b9a; }.visual-map-area.type-canal.status-occupied text, .visual-map-area.type-canal.status-conflict text { fill: #123443; }
.visual-map-area .status-marker { stroke: white; stroke-width: 1.5; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 28%)); }.visual-map-area.status-available .status-marker { fill: var(--status-done); }.visual-map-area.status-occupied .status-marker { fill: var(--status-go); }.visual-map-area.status-review .status-marker { fill: var(--status-soon); }.visual-map-area.status-conflict .status-marker { fill: var(--status-stop); }
.visual-map-area.is-filtered { opacity: .13; }.visual-map-area:hover, .visual-map-area:focus-visible { opacity: 1; filter: drop-shadow(0 5px 5px rgb(24 52 42 / 32%)); transform: scale(1.045); }.visual-map-area:focus-visible rect { stroke: #071d16; stroke-width: 5; }
.north-arrow path { fill: #17231f; stroke: #17231f; stroke-width: 5; }.north-arrow text { fill: #17231f; font-size: 18px; font-weight: 900; }
.official-map-footer { padding: 10px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; color: var(--ink-500); border-top: 1px solid var(--cream-200); font-size: 9px; }.official-map-footer strong { color: var(--ink-700); }
.illustrated-map-panel { background: #f7f2e5; }
.illustrated-map-scroll { overflow: auto; background: #eee8d7; }
.illustrated-farm-map { display: block; width: min(100%, 980px); min-width: 680px; height: auto; margin: 0 auto; font-family: "Segoe Print", "Comic Sans MS", cursive; }
.illustrated-hotspot { cursor: pointer; outline: none; }.illustrated-hotspot > rect { fill: transparent; stroke: transparent; stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .14s ease, stroke .14s ease; }
.illustrated-hotspot:hover > rect { fill: rgb(255 255 255 / 7%); stroke: rgb(58 91 61 / 48%); }.illustrated-hotspot:focus-visible > rect { fill: rgb(255 255 255 / 12%); stroke: rgb(47 78 51 / 75%); stroke-width: 1.8; }
.illustrated-occupied-tick { pointer-events: none; fill: none; stroke: #456b48; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .64; vector-effect: non-scaling-stroke; }.illustrated-hotspot:hover .illustrated-occupied-tick { opacity: .9; }
.map-hover-card { position: fixed; z-index: 80; width: min(380px, calc(100vw - 24px)); padding: 17px; color: #f7faf5; border: 1px solid rgb(255 255 255 / 16%); border-radius: 15px; background: linear-gradient(150deg, rgb(22 49 39 / 97%), rgb(36 72 54 / 97%)); box-shadow: 0 14px 34px rgb(12 28 22 / 32%); pointer-events: none; backdrop-filter: blur(8px); animation: map-hover-in .12s ease-out; }
.map-hover-card[hidden] { display: none; }.map-hover-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid rgb(255 255 255 / 13%); }.map-hover-card header span, .map-hover-card header small { display: block; }.map-hover-card header strong { font-size: 21px; letter-spacing: .03em; }.map-hover-card header small { margin-top: 3px; color: rgb(239 247 240 / 75%); font-size: 13px; line-height: 1.3; }.map-hover-card header em { flex: 0 0 auto; color: #d7e8d7; font-size: 13px; font-style: normal; }
.map-hover-summary { padding: 12px 0 8px; color: #c8dfc8; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .045em; }.map-hover-card ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }.map-hover-card li { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 9px 10px; border-radius: 9px; background: rgb(255 255 255 / 8%); }.map-hover-crop { min-width: 0; }.map-hover-crop strong, .map-hover-crop small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.map-hover-crop strong { font-size: 15px; line-height: 1.25; }.map-hover-crop small { margin-top: 3px; color: rgb(239 247 240 / 72%); font-size: 11px; line-height: 1.3; }.map-hover-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: var(--status-go); background: var(--status-go-bg); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .035em; }.map-hover-status.status-needs_review { color: var(--status-stop); background: var(--status-stop-bg); }.map-hover-status.status-harvest_ready, .map-hover-status.status-harvesting { color: var(--status-go); background: var(--status-go-bg); }
.map-hover-empty { display: grid; gap: 4px; margin-top: 12px; padding: 15px; border-radius: 10px; text-align: center; background: rgb(255 255 255 / 8%); }.map-hover-empty strong { font-size: 16px; }.map-hover-empty span, .map-hover-more { color: rgb(239 247 240 / 72%); font-size: 12px; }.map-hover-more { margin: 8px 3px 0; }.map-hover-card footer { margin-top: 11px; color: rgb(239 247 240 / 62%); font-size: 11px; line-height: 1.35; text-align: center; }
.map-hover-status.phase-flagged { color: var(--status-stop); background: var(--status-stop-bg); }.map-hover-status.phase-review { color: var(--status-soon); background: var(--status-soon-bg); }.map-hover-status.phase-harvest { color: var(--status-go); background: var(--status-go-bg); }.map-hover-status.phase-resting { color: var(--status-done); background: var(--status-done-bg); }.map-hover-status.phase-scheduled, .map-hover-status.phase-elapsed { color: var(--status-soon); background: var(--status-soon-bg); }
@keyframes map-hover-in { from { opacity: 0; transform: translateY(3px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.map-note { margin: 0 0 16px; color: var(--ink-500); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.map-section + .map-section { margin-top: 20px; padding-top: 18px; border-top: 1px dashed #d9d4c7; }
.map-section h3 { margin: 0 0 10px; font-size: 11px; color: var(--ink-700); text-transform: uppercase; letter-spacing: .08em; }
.location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
.location-card { min-height: 82px; padding: 11px; border: 1px solid #d8dfd3; border-radius: 10px; text-align: left; color: var(--ink-900); background: #eef3e9; }
.location-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }.location-card.is-occupied { color: white; border-color: color-mix(in srgb, var(--status-go) 70%, black); background: linear-gradient(145deg, var(--status-go), color-mix(in srgb, var(--status-go) 65%, white)); }.location-card.is-review { color: var(--status-soon); border-color: var(--status-soon); background: var(--status-soon-bg); }.location-card.is-conflict { color: white; border-color: color-mix(in srgb, var(--status-stop) 70%, black); background: linear-gradient(145deg, var(--status-stop), color-mix(in srgb, var(--status-stop) 65%, white)); }.location-card[hidden] { display: none; }
.location-card strong, .location-card span, .location-card small { display: block; }.location-card strong { font-size: 13px; }.location-card span { margin-top: 7px; font-size: 9px; line-height: 1.3; }.location-card small { margin-top: 3px; opacity: .76; font-size: 8px; }

/* Lifecycle fill stays authoritative; has-problem only contributes the red
   marker and outline defined above. Keep this after legacy status colors. */
.visual-map-area.availability-used rect,
.visual-map-area.status-used rect,
.visual-map-area.phase-growing rect { fill: var(--status-go); stroke: color-mix(in srgb, var(--status-go) 70%, black); }
.visual-map-area.availability-used text,
.visual-map-area.status-used text,
.visual-map-area.phase-growing text { fill: #fff; }
.visual-map-area.phase-harvest rect { fill: var(--status-go); stroke: color-mix(in srgb, var(--status-go) 70%, black); }
.visual-map-area.phase-harvest text { fill: #fff; }
.visual-map-area.phase-resting rect,
.visual-map-area.phase-reserved rect { fill: var(--status-done-bg); stroke: var(--status-done); }
.visual-map-area.phase-scheduled rect { fill: var(--status-soon-bg); stroke: var(--status-soon); }
.visual-map-area.phase-resting text,
.visual-map-area.phase-reserved text,
.visual-map-area.phase-scheduled text { fill: #34443d; }
.visual-map-area.type-canal.availability-used rect,
.visual-map-area.type-canal.status-used rect,
.visual-map-area.type-canal.phase-growing rect,
.visual-map-area.type-canal.phase-harvest rect,
.visual-map-area.type-canal.phase-resting rect,
.visual-map-area.type-canal.phase-reserved rect,
.visual-map-area.type-canal.phase-scheduled rect { fill: url(#canal-gradient); stroke: #277b9a; }
.visual-map-area.type-canal.phase-growing text,
.visual-map-area.type-canal.phase-harvest text,
.visual-map-area.type-canal.phase-resting text,
.visual-map-area.type-canal.phase-reserved text,
.visual-map-area.type-canal.phase-scheduled text { fill: #123443; }
.visual-map-area.has-problem rect,
.visual-map-area.type-canal.has-problem rect { stroke: var(--status-stop); stroke-width: 2.6; }
.location-card.availability-used,
.location-card.is-used,
.location-card.phase-growing { color: white; border-color: color-mix(in srgb, var(--status-go) 70%, black); background: linear-gradient(145deg, var(--status-go), color-mix(in srgb, var(--status-go) 65%, white)); }
.location-card.phase-harvest { color: white; border-color: color-mix(in srgb, var(--status-go) 70%, black); background: linear-gradient(145deg, var(--status-go), color-mix(in srgb, var(--status-go) 65%, white)); }
.location-card.phase-resting,
.location-card.phase-reserved { color: var(--status-done); border-color: var(--status-done); background: var(--status-done-bg); }
.location-card.phase-scheduled { color: var(--status-soon); border-color: var(--status-soon); background: var(--status-soon-bg); }
.succession-kpis { grid-template-columns: repeat(4, minmax(150px, 1fr)); }.succession-warning { display: flex; align-items: center; gap: 12px; padding: 13px 15px; color: var(--status-soon); border: 1px solid var(--status-soon); border-radius: 11px; background: var(--status-soon-bg); }.succession-warning strong { flex: 0 0 auto; font-size: 11px; }.succession-warning span { font-size: 10px; line-height: 1.4; }.succession-table-wrap { width: 100%; overflow: auto; }.succession-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }.succession-table th, .succession-table td { min-width: 132px; padding: 5px; border-right: 1px solid var(--cream-200); border-bottom: 1px solid var(--cream-200); vertical-align: top; }.succession-table thead th { position: sticky; top: 0; z-index: 1; padding: 10px 8px; color: var(--ink-700); background: #f4f1e7; font-size: 10px; text-align: left; }.succession-table thead th:first-child, .succession-table tbody th { position: sticky; left: 0; z-index: 2; min-width: 174px; background: #fbfaf5; }.succession-table thead th:first-child { z-index: 3; }.succession-table th small { display: block; margin-top: 3px; color: var(--ink-500); font-size: 8px; font-weight: 500; }.succession-cell { min-height: 49px; padding: 7px 8px; border-radius: 8px; }.succession-cell strong, .succession-cell small { display: block; }.succession-cell strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.succession-cell small { margin-top: 4px; opacity: .72; font-size: 7px; }.succession-cell.is-growing, .succession-cell.is-harvest_ready, .succession-cell.is-harvesting { color: white; background: var(--status-go); }.succession-cell.is-planned { color: var(--status-soon); background: var(--status-soon-bg); }.succession-cell.is-needs_review { color: var(--status-stop); background: var(--status-stop-bg); }.succession-cell.is-rest { color: var(--status-done); background: var(--status-done-bg); }.succession-cell.is-free { color: #567064; border: 1px dashed #c7d4ca; background: #f8fbf7; }.succession-slot-select { min-height: 220px; padding: 6px; }.succession-slot-select option { padding: 6px 8px; }.succession-preview-actions { display: flex; align-items: center; gap: 11px; }.succession-preview-actions span { color: var(--ink-500); font-size: 9px; line-height: 1.4; }.succession-preview { border: 1px solid var(--cream-200); border-radius: 11px; overflow: hidden; }.succession-preview-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 10px; }.succession-preview-head.is-valid { color: var(--status-go); background: var(--status-go-bg); }.succession-preview-head.is-blocked { color: var(--status-stop); background: var(--status-stop-bg); }
.plan-workspace { min-width: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.crop-palette { padding: 14px; overflow: visible; }
.crop-palette > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.crop-palette h3, .crop-palette p { margin: 0; }.crop-palette h3 { font-size: 15px; }.crop-palette p { margin-top: 4px; color: var(--ink-500); font-size: 10px; line-height: 1.4; }
.selected-module { margin: 12px 0; padding: 10px 11px; display: grid; gap: 3px; color: #214c38; border: 1px solid #bcd5be; border-radius: 10px; background: #eaf4e8; font-size: 10px; }.selected-module span { color: var(--ink-500); font-size: 9px; }.selected-module.is-empty { color: var(--ink-500); border-style: dashed; background: #fafbf8; }
.crop-module-scroll { max-height: 610px; padding-right: 4px; display: grid; gap: 8px; overflow-y: auto; }
.crop-module-card { padding: 9px; border: 1px solid var(--cream-200); border-radius: 11px; background: #fcfbf7; }
.crop-module-card header strong, .crop-module-card header small { display: block; }.crop-module-card header strong { font-size: 11px; }.crop-module-card header small { margin-top: 2px; color: var(--ink-500); font-size: 8px; }
.crop-method-list { margin-top: 8px; display: grid; gap: 5px; }
.crop-method-module { min-height: 42px; padding: 7px 8px; display: grid; gap: 2px; border: 1px solid #d8dfd5; border-radius: 8px; color: var(--forest-800); background: white; text-align: left; touch-action: manipulation; }.crop-method-module span { font-size: 10px; font-weight: 800; }.crop-method-module small { color: var(--ink-500); font-size: 8px; }.crop-method-module:hover { border-color: #9db99f; background: #f4f8f1; }.crop-method-module.is-selected { border-color: var(--forest-700); background: var(--leaf-100); box-shadow: inset 3px 0 var(--forest-700); }.crop-method-module.is-dragging { opacity: .45; }
.plan-board-panel { min-width: 0; }.plan-board-panel .succession-table td { padding: 4px; }
.plan-drop-cell { width: 100%; min-height: 57px; padding: 0; border: 0; border-radius: 9px; color: inherit; background: transparent; text-align: left; }.plan-drop-cell .succession-cell { min-height: 57px; }.plan-drop-cell:hover .succession-cell, .plan-drop-cell:focus-visible .succession-cell { box-shadow: inset 0 0 0 2px rgb(45 106 88 / 35%); }.plan-drop-cell.is-drag-over .succession-cell { box-shadow: inset 0 0 0 3px var(--forest-700); background: #e2f0de; transform: scale(.98); }
.plan-mode-tabs { width: fit-content; padding: 4px; display: inline-flex; gap: 4px; border: 1px solid #d9dfd5; border-radius: 13px; background: #f1f4ed; box-shadow: inset 0 1px 2px rgb(21 53 43 / 4%); }
.plan-mode-tabs button, .timeline-zoom button { min-height: 37px; padding: 8px 14px; border: 0; border-radius: 9px; color: var(--ink-500); background: transparent; font-size: 11px; font-weight: 850; letter-spacing: .01em; }.plan-mode-tabs button.is-active, .timeline-zoom button.is-active { color: white; background: var(--forest-700); box-shadow: 0 4px 12px rgb(22 70 53 / 18%); }.plan-mode-tabs em { margin-left: 4px; padding: 2px 5px; border-radius: 999px; color: #69430d; background: #f6d58f; font-size: 8px; font-style: normal; text-transform: uppercase; letter-spacing: .05em; }
.timeline-zoom { margin-left: auto; padding: 3px; display: inline-flex; gap: 3px; border: 1px solid #d9dfd5; border-radius: 11px; background: white; }.timeline-zoom button { min-height: 34px; padding: 7px 12px; }
.daily-guidance { padding: 14px 17px; display: flex; justify-content: space-between; gap: 18px; align-items: center; border: 1px solid #bfd7c5; border-radius: 14px; color: #1e4d3a; background: linear-gradient(135deg, #eef7eb, #f9fbf6); }.daily-guidance > div:first-child { display: grid; gap: 3px; }.daily-guidance strong { font-size: 12px; }.daily-guidance span { color: var(--ink-500); font-size: 10px; line-height: 1.4; }
.daily-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px 13px; }.daily-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }.daily-legend i { width: 15px; height: 7px; border-radius: 999px; background: #5f8d68; }.daily-legend i.nursery { background: #c69b55; }.daily-legend i.harvest { height: 3px; background: #173d8c; }.daily-legend i.rest { background: #aeb6b1; }
.daily-workspace { grid-template-columns: 285px minmax(0, 1fr); }.daily-timeline-panel { min-width: 0; overflow: hidden; }.daily-timeline-scroll { width: 100%; overflow: auto; cursor: grab; user-select: none; overscroll-behavior: contain; scrollbar-color: #9fb5a7 #eef1eb; }.daily-timeline-scroll.is-panning { cursor: grabbing; }.daily-timeline-scroll.is-panning * { cursor: grabbing !important; }
/* This column width and the .daily-slot-label width must be changed together at
   every breakpoint. They had drifted to 190px vs 116px, leaving ~74px of dead
   space beside the block id on a laptop. */
.daily-timeline-header, .daily-timeline-row { width: max-content; min-width: 100%; display: grid; grid-template-columns: 64px max-content; }.daily-timeline-header { position: sticky; top: 0; z-index: 12; min-height: 49px; border-bottom: 1px solid #d8ded5; background: #f5f6f1; }.daily-timeline-row { min-height: 76px; border-bottom: 1px solid #e1e5de; }
.daily-slot-label { position: sticky; left: 0; z-index: 8; width: 64px; min-height: 100%; padding: 11px 12px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #d5dcd3; color: var(--ink-900); background: #fbfaf6; box-shadow: 5px 0 10px rgb(20 48 39 / 4%); }.daily-timeline-header .daily-slot-label { z-index: 14; background: #f1f3ed; }.daily-slot-label strong, .daily-slot-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.daily-slot-label strong { font-size: 11px; }.daily-slot-label small { margin-top: 4px; color: var(--ink-500); font-size: 8px; }
.daily-date-strip, .daily-day-cells { width: var(--track-width); display: grid; grid-template-columns: repeat(var(--range-days), var(--day-width)); }.daily-date-head { min-width: 0; padding: 8px 2px; display: grid; align-content: center; gap: 2px; border-right: 1px solid #e0e4dc; color: var(--ink-700); background: #f5f6f1; text-align: center; }.daily-date-head strong { overflow: hidden; font-size: 8px; text-overflow: clip; white-space: nowrap; }.daily-date-head span { color: var(--ink-500); font-size: 7px; white-space: nowrap; }.daily-date-head.is-week-start { border-left: 2px solid #9fac9f; }.daily-date-head.is-weekend { background: #eeefe9; }.daily-date-head.is-today { color: #fff; background: var(--forest-700); }
.daily-date-strip.is-periods { align-items: stretch; }.timeline-period-head { min-width: 0; padding: 7px 8px; display: grid; place-content: center; gap: 2px; border-left: 1px solid #9fac9f; border-right: 1px solid #d7ddd5; color: var(--ink-700); background: linear-gradient(180deg, #f7f8f4, #ecefe9); text-align: center; }.timeline-period-head strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.timeline-period-head span { overflow: hidden; color: var(--ink-500); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.timeline-period-head.is-month strong { font-size: 10px; }.timeline-zoom-step { color: var(--forest-700) !important; font-size: 17px !important; }
.daily-row-track { position: relative; width: var(--track-width); min-height: 76px; overflow: hidden; }.daily-day-cells { position: absolute; inset: 0; height: 100%; }.daily-drop-cell { min-width: 0; height: 100%; padding: 0; border: 0; border-right: 1px solid #edf0ea; color: transparent; background: #fff; }.daily-drop-cell.is-week-start { border-left: 2px solid #d3dbd2; }.daily-drop-cell.is-weekend { background: #f8f8f5; }.daily-drop-cell.is-today { background: #edf6ed; }.daily-drop-cell:hover, .daily-drop-cell:focus-visible, .daily-drop-cell.is-drag-over { position: relative; z-index: 2; outline: 2px solid #5f9470; outline-offset: -2px; background: #e7f3e5; }
.daily-cycle-bar, .daily-stage-bar, .daily-harvest-band { position: absolute; left: calc(var(--start-day) * var(--day-width) + 2px); width: max(3px, calc(var(--span-days) * var(--day-width) - 4px)); overflow: hidden; }.daily-cycle-bar { z-index: 5; top: 16px; height: 48px; padding: 7px 9px; display: grid; align-content: center; gap: 3px; border: 1px solid hsl(var(--crop-hue) 25% 37% / 58%); border-radius: 9px; color: white; background: linear-gradient(135deg, hsl(var(--crop-hue) 27% 43%), hsl(var(--crop-hue) 25% 53%)); box-shadow: 0 3px 8px rgb(23 57 44 / 15%); text-align: left; }.daily-cycle-bar strong, .daily-cycle-bar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.daily-cycle-bar strong { font-size: 10px; }.daily-cycle-bar small { color: rgb(255 255 255 / 78%); font-size: 7px; }.daily-cycle-bar:hover, .daily-cycle-bar:focus-visible { z-index: 9; filter: brightness(1.08); box-shadow: 0 5px 14px rgb(23 57 44 / 23%); }.daily-cycle-bar.is-open-ended { background-image: repeating-linear-gradient(135deg, hsl(var(--crop-hue) 27% 44%), hsl(var(--crop-hue) 27% 44%) 9px, hsl(var(--crop-hue) 25% 51%) 9px, hsl(var(--crop-hue) 25% 51%) 17px); }
.daily-stage-bar { z-index: 4; top: 3px; height: 15px; padding: 1px 6px; border-radius: 5px; font-size: 7px; font-weight: 800; line-height: 13px; white-space: nowrap; }.daily-stage-bar.is-nursery { color: #5c3e16; background: #efd69f; }.daily-stage-bar.is-rest { top: 23px; height: 32px; color: #44504a; border: 1px dashed #87948c; background: rgb(209 216 211 / 90%); line-height: 28px; }.daily-harvest-band { z-index: 7; bottom: 5px; height: 5px; border-radius: 999px; background: #2455a4; box-shadow: 0 0 0 1px rgb(255 255 255 / 70%); pointer-events: none; }.daily-harvest-band.is-unstable { background: repeating-linear-gradient(90deg, #a34737 0 5px, #f1b261 5px 10px); }
.crop-module-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }.crop-module-card > header > div { min-width: 0; }.crop-logic-edit { flex: 0 0 auto; padding: 4px 6px; border: 0; border-radius: 6px; color: var(--forest-700); background: #e8f1e5; font-size: 7px; font-weight: 850; }.crop-logic-edit:hover, .crop-logic-edit:focus-visible { background: #d7e8d3; }
.method-template-fields { display: none; padding: 13px; border: 1px solid #d8e1d5; border-radius: 11px; background: #f6f9f3; }.method-template-fields.is-active { display: block; }.method-template-fields .form-grid { margin: 0; }
.planting-records-panel > .filter-strip { margin: 14px; }.planting-records-panel > .panel { border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
.method-route-help { padding: 12px 14px; display: grid; gap: 4px; color: #244b3b; border: 1px solid #bfd4c2; border-radius: 11px; background: #eef6ea; }.method-route-help strong { font-size: 11px; }.method-route-help span { color: var(--ink-700); font-size: 10px; line-height: 1.45; }
.direct-duration-field { display: none; }.direct-duration-field.is-relevant { display: grid; }.advanced-fields { padding: 11px 13px; border: 1px solid var(--cream-200); border-radius: 11px; background: #faf9f4; }.advanced-fields summary { cursor: pointer; color: var(--forest-700); font-size: 11px; font-weight: 800; }.advanced-fields[open] summary { margin-bottom: 13px; }

/* Date-derived planning phases and direct planner actions */
.plan-drop-cell { position: relative; display: block; }
.plan-cell-main { width: 100%; min-height: 57px; padding: 0; border: 0; border-radius: 9px; color: inherit; background: transparent; text-align: left; }
.plan-item-actions { position: absolute; top: 6px; right: 6px; z-index: 8; display: flex; gap: 4px; }
.plan-item-actions button, .daily-cycle-actions button { width: 27px; min-width: 27px; height: 27px; min-height: 27px; padding: 0; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 55%); border-radius: 8px; color: #274336; background: rgb(255 255 255 / 88%); box-shadow: 0 2px 7px rgb(20 44 35 / 16%); font-size: 13px; font-weight: 900; line-height: 1; }
.plan-item-actions button:hover, .plan-item-actions button:focus-visible, .daily-cycle-actions button:hover, .daily-cycle-actions button:focus-visible { color: #183428; background: white; outline: 2px solid rgb(45 106 88 / 35%); }
.plan-item-actions button.remove, .daily-cycle-actions button.remove { color: #923e38; }
.plan-drop-cell .succession-cell { padding-right: 70px; }
.cycle-phase-label { width: fit-content; margin-bottom: 5px; padding: 2px 5px; display: block; border-radius: 999px; color: inherit; background: rgb(255 255 255 / 20%); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.succession-cell.phase-growing { color: white; background: var(--status-go); }
.succession-cell.phase-harvest { color: white; background: var(--status-go); }
.succession-cell.phase-flagged { color: var(--status-stop); background: var(--status-stop-bg); box-shadow: inset 4px 0 var(--status-stop); }
.succession-cell.phase-scheduled, .succession-cell.phase-elapsed, .succession-cell.phase-review { color: var(--status-soon); background: var(--status-soon-bg); }
.succession-cell.phase-scheduled { color: var(--status-soon); background: var(--status-soon-bg); }
.succession-cell.phase-resting { color: var(--status-done); background: var(--status-done-bg); }
.succession-cell.phase-scheduled .timeline-uncertainty, .succession-cell.phase-elapsed .timeline-uncertainty, .succession-cell.phase-review .timeline-uncertainty, .succession-cell.phase-flagged .timeline-uncertainty { border-top-color: rgb(22 55 44 / 14%); }
.timeline-uncertainty.is-current-harvest { color: #dff5ff; }

.daily-cycle-bar { padding-right: 67px; }
.daily-cycle-bar.phase-growing { border-color: color-mix(in srgb, var(--status-go) 70%, black); background: linear-gradient(135deg, var(--status-go), color-mix(in srgb, var(--status-go) 65%, white)); }
.daily-cycle-bar.phase-harvest { border-color: color-mix(in srgb, var(--status-go) 70%, black); background: linear-gradient(135deg, var(--status-go), color-mix(in srgb, var(--status-go) 65%, white)); }
.daily-cycle-bar.phase-flagged { color: var(--status-stop); border-color: var(--status-stop); background: linear-gradient(135deg, var(--status-stop-bg), color-mix(in srgb, var(--status-stop-bg) 60%, white)); }
.daily-cycle-bar.phase-flagged small, .daily-cycle-bar.phase-scheduled small, .daily-cycle-bar.phase-elapsed small, .daily-cycle-bar.phase-review small { color: inherit; opacity: .72; }
.daily-cycle-bar.phase-scheduled, .daily-cycle-bar.phase-elapsed, .daily-cycle-bar.phase-review { color: var(--status-soon); border-color: var(--status-soon); background: linear-gradient(135deg, var(--status-soon-bg), color-mix(in srgb, var(--status-soon-bg) 60%, white)); box-shadow: 0 2px 6px rgb(23 57 44 / 10%); }
.daily-cycle-bar.phase-resting { color: var(--status-done); border-color: var(--status-done); background: linear-gradient(135deg, var(--status-done-bg), color-mix(in srgb, var(--status-done-bg) 60%, white)); box-shadow: 0 2px 6px rgb(23 57 44 / 10%); }
.daily-cycle-bar.phase-scheduled { color: var(--status-soon); border-color: var(--status-soon); background: linear-gradient(135deg, var(--status-soon-bg), color-mix(in srgb, var(--status-soon-bg) 60%, white)); }
.daily-cycle-actions { position: absolute; left: max(2px, calc((var(--start-day) + var(--span-days)) * var(--day-width) - 65px)); top: 25px; z-index: 10; width: 61px; display: flex; justify-content: flex-end; gap: 4px; pointer-events: none; }
.daily-cycle-actions button { pointer-events: auto; }
.daily-harvest-band.is-current { height: 7px; background: #235aa0; }
.daily-harvest-band.is-muted { background: #98a39d; opacity: .58; }

/* Planting-batch editor: grouped operational components */
.cycle-form-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cycle-form-layout > .span-2 { grid-column: 1 / -1; }
.cycle-form-card { min-width: 0; padding: 16px; border: 1px solid #dce3da; border-radius: 15px; background: #fbfcf9; }
.cycle-form-card > header { margin-bottom: 14px; display: flex; align-items: flex-start; gap: 10px; }
.cycle-form-card > header > span { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--forest-700); font-size: 9px; font-weight: 900; }
.cycle-form-card h3, .cycle-form-card p { margin: 0; }.cycle-form-card h3 { font-size: 14px; }.cycle-form-card p { margin-top: 3px; color: var(--ink-500); font-size: 10px; line-height: 1.4; }
.cycle-form-card .form-grid { gap: 12px; }.cycle-form-card .single-column { grid-template-columns: 1fr; }
.cycle-form-card .form-grid > *,
.cycle-form-card .field,
.cycle-form-card input,
.cycle-form-card select,
.cycle-form-card textarea { min-width: 0; max-width: 100%; }
.cycle-harvest-card { border-color: #bfd4dc; background: linear-gradient(145deg, #f5fbfc, #eef6f7); }
.cycle-harvest-card > header > span { background: #2c6680; }
.harvest-window-component { padding: 13px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; border: 1px solid #c8dce2; border-radius: 12px; background: white; }
.harvest-window-arrow { height: 44px; display: grid; place-items: center; color: #4d7b8c; font-size: 21px; }
.harvest-volume-preview,
.cycle-volume-preview {
  grid-column: 1 / -1;
  margin-top: 11px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid #c8dce2;
  border-radius: 12px;
  background: rgb(255 255 255 / 82%);
}
.harvest-volume-preview > div,
.cycle-volume-preview > div {
  min-width: 0;
  padding: 10px 11px;
  display: grid;
  align-content: center;
  gap: 3px;
  border-radius: 9px;
  background: #edf5f6;
}
.harvest-volume-preview span,
.cycle-volume-preview span { color: #5e747b; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; }
.harvest-volume-preview strong,
.cycle-volume-preview strong { overflow-wrap: anywhere; color: #214e60; font-size: 16px; line-height: 1.15; }
.harvest-volume-preview small,
.cycle-volume-preview small { color: var(--ink-500); font-size: 9px; line-height: 1.35; }
.harvest-volume-preview .volume-primary,
.cycle-volume-preview .volume-primary { color: white; background: linear-gradient(145deg, #2d687f, #4b879a); }
.harvest-volume-preview .volume-primary span,
.harvest-volume-preview .volume-primary strong,
.harvest-volume-preview .volume-primary small,
.cycle-volume-preview .volume-primary span,
.cycle-volume-preview .volume-primary strong,
.cycle-volume-preview .volume-primary small { color: inherit; }
.cycle-management-card { padding: 14px 16px; display: grid; grid-template-columns: minmax(210px, 1fr) auto; gap: 12px 18px; align-items: center; border: 1px solid #d9dfd6; border-radius: 15px; background: #f5f6f2; }
.cycle-management-card > p { grid-column: 1 / -1; margin: 0; color: var(--ink-500); font-size: 10px; line-height: 1.4; }
.cycle-phase-preview { min-width: 0; padding: 11px 13px; display: grid; gap: 3px; border-radius: 11px; color: #445149; background: #e1e5e1; box-shadow: inset 4px 0 #8c9991; }
.cycle-phase-preview span { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }.cycle-phase-preview strong { font-size: 13px; }.cycle-phase-preview small { color: inherit; opacity: .72; font-size: 9px; line-height: 1.35; }
.cycle-phase-preview.phase-growing { color: white; background: var(--status-go); box-shadow: inset 4px 0 color-mix(in srgb, var(--status-go) 70%, black); }.cycle-phase-preview.phase-harvest { color: white; background: var(--status-go); box-shadow: inset 4px 0 color-mix(in srgb, var(--status-go) 70%, black); }.cycle-phase-preview.phase-flagged { color: var(--status-stop); background: var(--status-stop-bg); box-shadow: inset 4px 0 var(--status-stop); }
.cycle-management-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.cycle-management-actions .negative { color: #98423c; border-color: #e6c3bf; background: #fff8f7; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.more-card { position: relative; min-height: 180px; padding: 22px; display: grid; align-content: start; gap: 9px; border: 1px solid var(--cream-200); border-radius: 16px; color: var(--ink-900); background: white; box-shadow: var(--shadow-sm); text-align: left; }.more-card:hover { transform: translateY(-2px); border-color: #bfcdbf; box-shadow: 0 9px 24px rgb(16 47 41 / 10%); }.more-card strong { font-size: 16px; }.more-card small { color: var(--ink-500); font-size: 11px; line-height: 1.5; }.more-card em { position: absolute; top: 15px; right: 15px; padding: 5px 8px; border-radius: 999px; color: #6a410c; background: var(--amber-100); font-size: 9px; font-style: normal; font-weight: 800; }.more-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--forest-800); background: var(--leaf-100); font-size: 18px; font-weight: 800; }
.horizon-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--cream-200); border-radius: 10px; background: white; }.horizon-tabs button { min-width: 45px; border: 0; border-radius: 7px; padding: 7px 9px; color: var(--ink-500); background: transparent; font-size: 10px; font-weight: 700; }.horizon-tabs button.is-active { color: white; background: var(--forest-700); }
.availability-date-field { min-width: 210px; margin: 0; }
.date-availability-panel .panel-header { align-items: flex-end; }
.data-table tr.exception-row td { background: var(--red-100); }
.data-table tr.export-excluded td { opacity: .48; background: var(--cream-100); }
.export-check { display: inline-flex; align-items: center; justify-content: center; }
.export-check input { width: 17px; height: 17px; accent-color: var(--forest-700); }
.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; }
.exception-panel { border-color: #efc8c3; }.exception-panel .panel-header { background: #fff8f7; }
.metric-inline { display: flex; flex-wrap: wrap; gap: 18px; }.metric-inline div { min-width: 110px; }.metric-inline strong, .metric-inline span { display: block; }.metric-inline strong { font-size: 20px; }.metric-inline span { margin-top: 3px; color: var(--ink-500); font-size: 9px; }
.import-drop { padding: 26px; border: 1.5px dashed #cfc9bb; border-radius: 13px; text-align: center; background: #fdfcf8; }.import-drop input { max-width: 100%; }.warning-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.warning-list li { padding: 9px 11px; border-radius: 8px; color: var(--amber-600); background: var(--amber-100); font-size: 10px; }

/* Worker Tracker V1 is intentionally self-contained so the crop workspace stays lean. */
.section-kicker { color: var(--forest-700) !important; font-size: 10px !important; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.workforce-week-control { min-width: 220px; padding: 13px 15px; border: 1px solid var(--cream-200); border-radius: 15px; background: white; box-shadow: var(--shadow-sm); }.workforce-week-control .field { min-width: 0; }.workforce-week-control small { display: block; margin-top: 6px; color: var(--ink-500); font-size: 10px; }
.workforce-upload-panel { padding: 16px; background: linear-gradient(135deg, #f8fbf5, #eef5e9); }
.workforce-drop { min-height: 132px; padding: 22px; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 18px; align-items: center; border: 2px dashed #a9bd9e; border-radius: 16px; color: var(--ink-700); background: rgb(255 255 255 / 74%); transition: border-color .16s ease, background .16s ease, transform .16s ease; }.workforce-drop:hover, .workforce-drop.is-drag-over { border-color: var(--forest-600); background: white; transform: translateY(-1px); }.workforce-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.workforce-drop-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; color: white; background: var(--forest-700); font-size: 26px; }.workforce-drop strong { display: block; color: var(--ink-900); font-size: 16px; }.workforce-drop p { margin: 5px 0 0; color: var(--ink-500); font-size: 11px; }
.workforce-import-preview { margin-top: 14px; padding: 17px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; border: 1px solid #cadcc2; border-radius: 14px; background: white; }.workforce-import-preview h3 { margin: 9px 0 0; font-size: 15px; }.workforce-import-preview p { margin: 4px 0 0; color: var(--ink-500); font-size: 11px; }.workforce-import-preview details, .workforce-import-preview .toolbar { grid-column: 1 / -1; }.workforce-import-preview summary { color: var(--amber-600); font-size: 11px; font-weight: 750; cursor: pointer; }.workforce-import-preview .warning-list { margin-top: 10px; }
.workforce-expense-fill { background: var(--amber-500); }
.workforce-privacy-note { padding: 12px 16px; display: flex; gap: 12px; align-items: center; border: 1px solid #d7e3ec; border-radius: 13px; color: #38586d; background: #f0f7fb; font-size: 11px; line-height: 1.45; }.workforce-privacy-note strong { flex: 0 0 auto; }
.workforce-activity-list { display: grid; gap: 17px; }.workforce-activity-list > div > header { margin-bottom: 7px; display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }.workforce-activity-list header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.workforce-activity-list header span { flex: 0 0 auto; color: var(--ink-500); }.workforce-table td:nth-child(2), .workforce-table td:nth-child(3), .workforce-table td:nth-child(4), .workforce-table td:nth-child(5) { white-space: nowrap; }
.workforce-work-compare { margin-bottom: 7px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }.workforce-work-compare small { color: var(--ink-500); font-size: 9px; }.period-compare-delta { display: block; overflow: hidden; color: var(--ink-500); font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.period-compare-delta.is-up { color: var(--red-700); }.period-compare-delta.is-down { color: #2d7251; }.period-compare-delta.is-flat { color: var(--ink-400); }
.workforce-trend-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.workforce-trend-kpis article { min-width: 0; padding: 13px; display: grid; gap: 5px; border: 1px solid var(--cream-200); border-radius: 12px; background: #fbfcf8; }.workforce-trend-kpis article > span:first-child { color: var(--ink-500); font-size: 9px; font-weight: 750; text-transform: uppercase; }.workforce-trend-kpis strong { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }.trend-delta { display: inline-flex; align-items: center; color: var(--ink-500); font-size: 9px; font-weight: 750; white-space: nowrap; }.trend-delta.is-up { color: var(--red-700); }.trend-delta.is-down { color: #2d7251; }.trend-delta.is-flat { color: var(--ink-400); }

.workforce-trend-controls { display: grid; gap: 8px; justify-items: end; }.workforce-period-toggle { display: flex; gap: 7px; }
.workforce-history-chart { min-height: 180px; padding: 12px 4px 0; display: grid; grid-template-columns: repeat(8, minmax(42px, 1fr)); gap: 8px; align-items: end; overflow-x: auto; }.workforce-history-period { min-width: 42px; display: grid; gap: 5px; text-align: center; }.workforce-history-period > strong { color: var(--ink-600); font-size: 8px; }.workforce-history-period > div { height: 120px; display: flex; gap: 3px; align-items: end; justify-content: center; border-bottom: 1px solid var(--cream-200); }.workforce-history-period > div span { width: min(17px, 42%); min-height: 2px; border-radius: 4px 4px 1px 1px; }.workforce-history-labor { background: var(--forest-600); }.workforce-history-expense { background: var(--amber-500); }.workforce-history-period small { color: var(--ink-500); font-size: 8px; white-space: nowrap; }.workforce-trend-tables { align-items: start; }.workforce-subhead { margin-bottom: 9px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }.workforce-subhead strong { font-size: 12px; }.workforce-subhead span { color: var(--ink-500); font-size: 9px; }
.workforce-management-comparison-grid { grid-template-columns: minmax(0, 1.45fr) minmax(340px, .85fr); align-items: stretch; }.workforce-management-comparison-grid > .panel { min-width: 0; }.workforce-side-history { min-height: 270px; }.workforce-side-history .workforce-history-period > div { height: 190px; }.workforce-chart-legend { padding: 0 20px 18px; display: flex; flex-wrap: wrap; gap: 16px; color: var(--ink-500); font-size: 10px; }.workforce-chart-legend span { display: inline-flex; gap: 6px; align-items: center; }.workforce-chart-legend i { width: 9px; height: 9px; border-radius: 3px; }.workforce-chart-legend .is-labor { background: var(--forest-600); }.workforce-chart-legend .is-expense { background: #dc9b3f; }.workforce-side-work-mix { gap: 14px; }.workforce-side-work-mix > div { min-width: 0; }
.workforce-primary-comparison { display: grid; gap: 14px; }.workforce-primary-heading { padding: 20px 22px; display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; border: 1px solid #cbd8c8; border-radius: 18px; background: linear-gradient(135deg, #f7faf4, #eef5eb); }.workforce-primary-heading h2 { margin: 2px 0 5px; font-size: 24px; }.workforce-primary-heading p { margin: 0; color: var(--ink-500); }.workforce-work-mix-controls { display: grid; gap: 8px; justify-items: end; }.workforce-span-toggle { display: flex; gap: 6px; align-items: center; }.workforce-span-toggle small { min-width: 48px; color: var(--ink-500); font-weight: 700; }.workforce-work-mix-main { border-color: #b9cdb5; box-shadow: 0 10px 26px rgba(40, 79, 57, .08); }
.workforce-category-comparison { padding-bottom: 14px; border-bottom: 1px solid var(--cream-200); }.workforce-category-comparison:last-child { padding-bottom: 0; border-bottom: 0; }.workforce-category-comparison > header > div { min-width: 0; display: grid; gap: 3px; }.workforce-category-comparison > header strong { font-size: 12px; }.workforce-category-comparison > header small { overflow: hidden; color: var(--ink-500); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.workforce-period-bars { display: grid; gap: 5px; }.workforce-period-bar-row { display: grid; grid-template-columns: 58px minmax(80px, 1fr) 126px; gap: 8px; align-items: center; }.workforce-period-bar-row > small { color: var(--ink-500); font-size: 8px; font-weight: 700; }.workforce-period-bar-row > span { color: var(--ink-600); font-size: 8px; text-align: right; white-space: nowrap; }.workforce-period-bar-row .bar-track { height: 7px; }.workforce-period-bar-row .bar-fill { min-width: 2px; background: #b8c7b1; }.workforce-period-bar-row .bar-fill.period-2 { background: #9db792; }.workforce-period-bar-row .bar-fill.period-3 { background: #7fa66f; }.workforce-period-bar-row .bar-fill.period-4 { background: var(--forest-600); }
.workforce-manual-panel .panel-header { align-items: center; }.workforce-manual-table input { min-width: 90px; width: 100%; padding: 9px 10px; border: 1px solid var(--cream-300); border-radius: 8px; background: white; color: var(--ink-800); font: inherit; }.workforce-manual-table td:nth-child(2), .workforce-manual-table td:nth-child(3) { min-width: 190px; }.workforce-manual-table [data-manual-amount] { white-space: nowrap; }.workforce-manual-footer { display: flex; justify-content: space-between; gap: 14px; align-items: center; }.workforce-manual-footer > span { margin-left: auto; color: var(--ink-500); font-size: 11px; font-weight: 700; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.alias-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.alias-chip { padding: 9px; border: 0; border-radius: 9px; color: var(--ink-900); background: var(--cream-100); font-size: 10px; text-align: left; }.alias-chip.review { color: var(--amber-600); background: var(--amber-100); }
.dialog { width: min(670px, calc(100vw - 28px)); max-height: min(86vh, 820px); padding: 0; border: 0; border-radius: 17px; color: var(--ink-900); box-shadow: var(--shadow-lg); overflow: auto; }.dialog-wide { width: min(920px, calc(100vw - 28px)); }.dialog::backdrop { background: rgb(16 47 41 / 52%); backdrop-filter: blur(3px); }.dialog-header { position: sticky; top: 0; z-index: 2; min-height: 68px; padding: 15px 19px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--cream-200); background: white; }.dialog-header p { margin: 0 0 3px; color: var(--ink-500); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.dialog-header h2 { margin: 0; font-size: 18px; }.dialog-body { padding: 19px; }.dialog-footer { position: sticky; bottom: 0; padding: 13px 19px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--cream-200); background: white; }
.timeline { display: grid; gap: 0; }.timeline-item { position: relative; padding: 0 0 18px 24px; border-left: 1px solid #d7d2c6; }.timeline-item:last-child { border-left-color: transparent; }.timeline-item::before { content: ""; position: absolute; left: -5px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--forest-600); }.timeline-item h4 { margin: 0; font-size: 11px; }.timeline-item p { margin: 5px 0 0; color: var(--ink-500); font-size: 10px; line-height: 1.45; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; }.toast { position: relative; width: min(360px, calc(100vw - 36px)); padding: 12px 14px; overflow: hidden; border-radius: 10px; color: white; background: var(--forest-900); box-shadow: var(--shadow-lg); font-size: 11px; animation: toast-in .2s ease; }.toast.is-error { background: var(--red-700); }@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }.toast-drain { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgb(255 255 255 / 55%); animation-name: toast-drain; animation-timing-function: linear; animation-fill-mode: forwards; }.toast.is-paused .toast-drain { animation-play-state: paused; }@keyframes toast-drain { from { width: 100%; } to { width: 0; } }
.print-report { display: none; }
.muted { color: var(--ink-500); }.negative { color: var(--red-700); }.positive { color: #2d7251; }.nowrap { white-space: nowrap; }.text-right { text-align: right; }

/* Modern responsive presentation layer. Domain behavior remains in app.mjs. */
html { color-scheme: light; scroll-behavior: smooth; }
body { background: radial-gradient(circle at 77% -5%, rgb(212 231 202 / 66%) 0, transparent 30rem), linear-gradient(180deg, #fafbf7 0, var(--cream-50) 38%, #f3f5ef 100%); }
button, input, select, textarea { min-height: 44px; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { padding: 22px 14px; background: radial-gradient(circle at 15% 0%, rgb(105 157 126 / 20%), transparent 18rem), linear-gradient(170deg, #0a2a24, #16483c 76%, #1c5545); box-shadow: 14px 0 50px rgb(9 39 32 / 8%); }
.brand { padding: 0 8px 22px; gap: 11px; }.brand-mark { width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(145deg, #dbedc4, #95c97e); box-shadow: 0 8px 22px rgb(3 22 17 / 24%); }.brand strong { font-size: 16px; letter-spacing: -.02em; }.brand span { font-size: 10px; }
.nav-list { margin-top: 18px; gap: 6px; }.nav-item { min-height: 52px; padding: 10px 12px; border-radius: 14px; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }.nav-item:hover { transform: translateX(2px); }.nav-item.is-active { background: linear-gradient(90deg, rgb(255 255 255 / 15%), rgb(255 255 255 / 9%)); box-shadow: inset 3px 0 #9dca72, 0 8px 24px rgb(4 27 21 / 13%); }.nav-item > span:first-child { font-size: 20px; }.nav-item > span:nth-child(2) { font-size: 14px; }.nav-item small { margin-top: 3px; font-size: 10px; }
.sidebar-note { padding: 13px; border-radius: 15px; }.sidebar-note strong { font-size: 12px; }.sidebar-note small, .prealpha-note { font-size: 10px; }
.topbar { min-height: 88px; padding: 16px clamp(20px, 2.5vw, 36px); gap: 20px; border-bottom-color: rgb(218 224 214 / 75%); background: rgb(250 251 247 / 82%); box-shadow: 0 8px 32px rgb(21 55 44 / 4%); }
.page-heading p { margin-bottom: 5px; font-size: 10px; font-weight: 750; letter-spacing: .1em; }.page-heading h1 { font-size: clamp(25px, 2.3vw, 34px); line-height: 1; }
.top-actions { min-width: 0; gap: 10px; }.top-actions .button { flex-shrink: 0; white-space: nowrap; }.global-search { width: min(32vw, 380px); min-width: 160px; height: 46px; padding: 0 14px; flex: 0 1 380px; border-color: #dce3da; border-radius: 14px; box-shadow: 0 6px 20px rgb(16 47 41 / 4%); }.global-search input { min-height: auto; font-size: 13px; }
#main-content { width: 100%; max-width: 1680px; margin: 0 auto; padding: clamp(22px, 2.8vw, 38px); }
.view-stack { gap: 24px; }.section-heading { align-items: center; }.section-heading h2 { font-size: clamp(22px, 2vw, 29px); }.section-heading h3 { font-size: 18px; }.section-heading p { max-width: 760px; margin-top: 7px; font-size: 13px; line-height: 1.5; }
.button { min-height: 44px; padding: 10px 16px; border-radius: 12px; font-size: 13px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }.button:hover { transform: translateY(-1px); }.button-primary { background: linear-gradient(145deg, var(--forest-700), var(--forest-800)); box-shadow: 0 8px 20px rgb(35 101 82 / 18%); }.button-secondary { border-color: #dce3da; box-shadow: 0 4px 14px rgb(16 47 41 / 4%); }.button-small { min-height: 36px; padding: 8px 11px; font-size: 11px; }.icon-button { min-width: 44px; min-height: 44px; border-radius: 12px; }
.kpi-grid { gap: 16px; }.kpi-card { min-height: 138px; padding: 20px; border-color: rgb(219 226 216 / 90%); border-radius: 18px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgb(16 47 41 / 10%); }.kpi-top { align-items: flex-start; font-size: 12px; line-height: 1.35; }.kpi-card > strong { margin-top: 18px; font-size: clamp(25px, 2.1vw, 30px); white-space: nowrap; }.kpi-card small { margin-top: 6px; font-size: 11px; line-height: 1.35; }.kpi-icon { width: 36px; height: 36px; border-radius: 12px; }
.kpi-card, .panel { border-color: rgb(219 226 216 / 90%); background: rgb(255 255 255 / 94%); }.panel { border-radius: 20px; box-shadow: var(--shadow-sm); }.panel-header { min-height: 72px; padding: 17px 20px; }.panel-header h3 { font-size: 17px; }.panel-header p { margin-top: 5px; font-size: 11px; line-height: 1.45; }.panel-body { padding: 20px; }
.filter-strip { padding: 15px; gap: 11px; border-color: rgb(219 226 216 / 90%); border-radius: 16px; box-shadow: var(--shadow-sm); }.field { gap: 7px; }.field label, .field > span { font-size: 11px; letter-spacing: .01em; }.field input, .field select, .field textarea { min-height: 44px; padding: 10px 12px; border-color: #d8dfd6; border-radius: 11px; font-size: 13px; transition: border-color .16s ease, box-shadow .16s ease; }.field input:focus, .field select:focus, .field textarea:focus { border-color: #80a98c; box-shadow: 0 0 0 4px rgb(104 161 94 / 12%); outline: none; }.field small { color: var(--ink-500); font-size: 10px; line-height: 1.4; }
.table-wrap { overscroll-behavior-inline: contain; scrollbar-gutter: stable; }.data-table { font-size: 13px; }.data-table th { padding: 12px 14px; color: #607269; background: #f6f8f3; font-size: 10px; }.data-table td { min-height: 48px; padding: 14px; }.data-table tbody tr { transition: background .14s ease; }.primary-cell small { margin-top: 4px; font-size: 11px; }.badge { min-height: 25px; padding: 6px 9px; font-size: 10px; }
.empty-state { padding: 46px 20px; font-size: 13px; }.empty-state strong { font-size: 15px; }.review-item { padding: 14px; border-radius: 13px; }.review-item strong { font-size: 12px; }.review-item p { font-size: 11px; }.confidence-row { min-height: 28px; font-size: 11px; }
.location-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 11px; }.location-card { min-height: 100px; padding: 14px; border-radius: 14px; }.location-card strong { font-size: 15px; }.location-card span { margin-top: 9px; font-size: 11px; }.location-card small { margin-top: 5px; font-size: 10px; }
.succession-warning { padding: 15px 17px; border-radius: 14px; }.succession-warning strong { font-size: 12px; }.succession-warning span { font-size: 11px; }.succession-table th, .succession-table td { min-width: 148px; }.succession-table thead th { padding: 12px 10px; font-size: 11px; }.succession-table thead th:first-child, .succession-table tbody th { min-width: 196px; }.succession-table th small { font-size: 9px; }.succession-cell, .plan-drop-cell .succession-cell { min-height: 64px; padding: 10px; }.succession-cell strong { font-size: 11px; }.succession-cell small { margin-top: 5px; font-size: 9px; }
.crop-palette { padding: 16px; }.crop-palette h3 { font-size: 17px; }.crop-palette p { font-size: 11px; }.crop-module-card { padding: 11px; border-radius: 13px; }.crop-module-card header strong { font-size: 12px; }.crop-module-card header small { font-size: 9px; }.crop-method-module { min-height: 48px; padding: 9px 10px; border-radius: 10px; }.crop-method-module span { font-size: 11px; }.crop-method-module small { font-size: 9px; }
.more-card { min-height: 196px; padding: 24px; border-radius: 20px; }.more-card strong { font-size: 18px; }.more-card small { font-size: 12px; }.more-icon { width: 48px; height: 48px; border-radius: 14px; }
.dialog { width: min(720px, calc(100vw - 32px)); border-radius: 22px; }.dialog-wide { width: min(980px, calc(100vw - 32px)); }.dialog-header { min-height: 78px; padding: 17px 22px; }.dialog-header h2 { font-size: 21px; }.dialog-body { padding: 22px; }.dialog-footer { padding: 15px 22px; }.form-grid { gap: 16px; }.method-route-help { padding: 14px 16px; }.method-route-help strong { font-size: 12px; }.method-route-help span, .help-text { font-size: 11px; }
.dialog-confirm { width: min(400px, calc(100vw - 32px)); border-radius: 17px; }
.toast { width: min(420px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 14px; font-size: 12px; }
* { scrollbar-width: thin; scrollbar-color: #b8c8bc transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #aebfb3; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; }

.language-toggle { min-width: 46px; min-height: 40px; padding: 0 11px; border: 1px solid #d5ded4; border-radius: 11px; color: var(--forest-800); background: white; font-size: 12px; font-weight: 900; letter-spacing: .08em; box-shadow: 0 4px 14px rgb(16 47 41 / 5%); }
.language-toggle:hover { border-color: #91aa95; background: #f3f7f1; }
.timeline-uncertainty { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgb(255 255 255 / 24%); color: inherit; opacity: .9; font-size: 8px; font-style: normal; font-weight: 700; line-height: 1.25; }
.succession-cell.is-planned .timeline-uncertainty, .succession-cell.is-needs_review .timeline-uncertainty { border-top-color: rgb(22 55 44 / 14%); }
.timeline-uncertainty.is-warning { color: var(--status-soon); }.succession-cell.is-needs_review .timeline-uncertainty.is-warning, .succession-cell.is-planned .timeline-uncertainty.is-warning { color: var(--ink-2); }
.timeline-uncertainty.is-in-week { color: var(--status-go); }.succession-cell.is-planned .timeline-uncertainty.is-in-week { color: var(--status-go); }
.plan-suggestions .panel-header { align-items: flex-start; }
.suggestion-grid { padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plan-suggestion { min-height: 132px; padding: 15px; display: grid; gap: 10px; align-content: start; border: 1px solid #d8e1d7; border-radius: 15px; color: var(--ink-900); background: linear-gradient(145deg, #fbfdf9, #f0f6ed); text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.plan-suggestion:hover { transform: translateY(-2px); border-color: #8eae91; box-shadow: 0 10px 24px rgb(26 65 49 / 10%); }
.plan-suggestion span, .plan-suggestion strong, .plan-suggestion small { display: block; }.plan-suggestion strong { font-size: 12px; }.plan-suggestion small { margin-top: 3px; color: var(--ink-500); font-size: 10px; line-height: 1.35; }
.plan-suggestion em { align-self: end; padding-top: 8px; border-top: 1px solid #dfe6dc; color: #36704f; font-size: 10px; font-style: normal; }.plan-suggestion em.is-warning { color: var(--status-soon); }

.quality-kpis { grid-template-columns: repeat(4, minmax(145px, 1fr)); }
.quality-filter { display: flex; flex-wrap: wrap; gap: 7px; }
.quality-filter button { min-height: 38px; padding: 8px 13px; border: 1px solid #dae1d8; border-radius: 999px; color: var(--ink-500); background: white; font-size: 11px; font-weight: 750; }
.quality-filter button.is-active { color: white; border-color: var(--forest-700); background: var(--forest-700); }
.quality-list { display: grid; }
.quality-item { min-height: 88px; padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; border-top: 1px solid var(--cream-200); }
.quality-item:first-child { border-top: 0; }.quality-item:hover { background: #fbfcf9; }
.quality-severity { padding: 5px 8px; border-radius: 999px; color: var(--ink-2); background: var(--surface-2); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.quality-item.severity-high .quality-severity { color: var(--status-stop); background: var(--status-stop-bg); }
.quality-item strong { display: block; font-size: 13px; }.quality-item p { margin: 4px 0; color: var(--ink-500); font-size: 11px; line-height: 1.45; }.quality-item small { color: #7b8b83; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }

/* Keep planner action space after the large-screen density overrides above. */
.plan-drop-cell .succession-cell { padding-right: 70px; }

.quick-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.quick-action-card { min-height: 210px; padding: 22px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; border: 1px solid #d9e2d8; border-radius: 20px; color: var(--ink-900); background: linear-gradient(150deg, white, #f1f7ee); text-align: left; box-shadow: var(--shadow-sm); transition: transform .17s ease, box-shadow .17s ease; }
.quick-action-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgb(17 57 42 / 12%); }.quick-action-card > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--forest-700); font-size: 11px; font-weight: 900; }.quick-action-card strong { font-size: 18px; line-height: 1.2; }.quick-action-card small { color: var(--ink-500); font-size: 12px; line-height: 1.5; }.quick-action-card em { color: var(--forest-700); font-size: 11px; font-style: normal; font-weight: 850; }
.mobile-cycle-list { display: grid; }.mobile-cycle-list article { min-height: 66px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--cream-200); }.mobile-cycle-list article:first-child { border-top: 0; }.mobile-cycle-list strong, .mobile-cycle-list small { display: block; }.mobile-cycle-list strong { font-size: 13px; }.mobile-cycle-list small { margin-top: 4px; color: var(--ink-500); font-size: 10px; }

.trial-progress { padding: 20px; display: grid; grid-template-columns: minmax(190px, .5fr) 1fr; gap: 16px 24px; align-items: center; }.trial-progress div strong, .trial-progress div span { display: block; }.trial-progress div strong { font-size: 20px; }.trial-progress div span, .trial-progress small { margin-top: 4px; color: var(--ink-500); font-size: 10px; }.trial-progress progress { width: 100%; height: 14px; accent-color: var(--forest-600); }.trial-progress > small { grid-column: 1 / -1; }
.trial-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }.trial-day { min-height: 220px; padding: 18px; display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 10px; border: 1px solid #dfe4dc; border-radius: 18px; background: white; box-shadow: var(--shadow-sm); }.trial-day.is-complete { border-color: #a8c8a7; background: linear-gradient(145deg, #fbfef9, #edf7e9); }.trial-day header { display: flex; justify-content: space-between; gap: 8px; color: var(--forest-700); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }.trial-day header em { color: var(--ink-500); font-style: normal; }.trial-day strong { font-size: 15px; line-height: 1.25; }.trial-day p { margin: 0; color: var(--ink-500); font-size: 11px; line-height: 1.5; }.trial-day > small { color: #6d7f76; font-size: 9px; line-height: 1.4; }

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .map-page-heading { align-items: flex-start; flex-direction: column; }
  .map-filter-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-filter-strip > .button { min-width: 0; }
  .plan-workspace { grid-template-columns: 230px minmax(0, 1fr); }
  .suggestion-grid, .quick-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
}

@media (max-width: 900px) {
  .app-shell { display: block; }
  .workspace { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .sidebar { position: fixed; inset: auto 0 0; transform: none; width: 100%; height: calc(72px + env(safe-area-inset-bottom)); padding: 7px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left)); display: block; border-top: 1px solid rgb(255 255 255 / 14%); background: rgb(10 42 36 / 96%); box-shadow: 0 -12px 38px rgb(8 36 29 / 22%); backdrop-filter: blur(18px); transition: none; }
  .sidebar .brand, .sidebar-note, .prealpha-note { display: none; }
  .nav-list { height: 100%; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .nav-item { min-height: 58px; padding: 6px 3px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-radius: 13px; text-align: center; }
  .nav-item:hover { transform: none; }.nav-item.is-active { box-shadow: none; background: rgb(255 255 255 / 13%); }
  .nav-item > span:first-child { font-size: 21px; line-height: 1; }.nav-item > span:nth-child(2) { font-size: 11px; line-height: 1; }.nav-item small { display: none; }.nav-badge { position: absolute; top: 4px; right: max(8px, 18%); min-width: 19px; padding: 2px 5px; font-size: 9px; }
  .mobile-only { display: none !important; }
  .topbar { min-height: 76px; padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
  #main-content { padding: 22px 18px; }
  .split-grid, .settings-grid { grid-template-columns: 1fr; }
  .plan-workspace, .daily-workspace { grid-template-columns: 1fr; }.crop-module-scroll { max-height: 300px; grid-template-columns: repeat(3, minmax(150px, 1fr)); }.more-grid { grid-template-columns: 1fr; }
  .daily-guidance { align-items: flex-start; flex-direction: column; }.daily-legend { justify-content: flex-start; }
  .succession-table thead th:first-child, .succession-table tbody th { width: 150px; min-width: 150px; max-width: 150px; }
  .daily-timeline-header, .daily-timeline-row { grid-template-columns: 64px max-content; }.daily-slot-label { width: 64px; padding: 9px 5px; }
  .quality-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .map-filter-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #record-form[data-form-type="cycle"] .dialog-body { overflow-x: hidden; }
  .cycle-form-layout { grid-template-columns: 1fr; gap: 11px; }
  .cycle-form-layout > .span-2 { grid-column: auto; }
  .cycle-form-card { padding: 14px; }
  .harvest-window-component { grid-template-columns: 1fr; gap: 7px; align-items: stretch; }
  .harvest-window-arrow { height: 18px; transform: rotate(90deg); }
  .harvest-volume-preview,
  .cycle-volume-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cycle-management-card { grid-template-columns: 1fr; }
  .cycle-management-card > p { grid-column: auto; }
}

@media (max-width: 620px) {
  .topbar { min-height: 70px; align-items: center; }.page-heading { min-width: 0; }.page-heading p { display: none; }.page-heading h1 { font-size: 22px; }
  .top-actions { margin-left: auto; }
  .top-actions [data-open-operations] { width: 44px; min-width: 44px; padding: 0; display: inline-flex; justify-content: center; overflow: hidden; font-size: 0; }
  .top-actions [data-open-operations]::after { content: "\2611"; font-size: 19px; line-height: 1; }
  .top-actions [data-portal-logout] { width: 44px; min-width: 44px; padding: 0; justify-content: center; overflow: hidden; font-size: 0; }
  .top-actions [data-portal-logout]::after { content: "\21AA"; font-size: 20px; line-height: 1; }
  .language-toggle { min-width: 40px; width: 40px; min-height: 40px; padding: 0; }
  #main-content { padding: 16px 12px 22px; }
  .view-stack { gap: 16px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.kpi-grid > .kpi-card:last-child:nth-child(odd) { grid-column: 1 / -1; }.kpi-card { min-height: 124px; padding: 15px; }.kpi-card > strong { margin-top: 13px; font-size: clamp(21px, 6.2vw, 24px); }.kpi-card small { font-size: 10px; }.kpi-top { font-size: 11px; }.kpi-icon { width: 32px; height: 32px; }
  .section-heading { align-items: flex-start; flex-direction: column; }.section-heading .toolbar { width: 100%; }
  .workforce-week-control { width: 100%; }.workforce-drop { grid-template-columns: 46px minmax(0, 1fr); padding: 16px; }.workforce-drop-icon { width: 46px; height: 46px; }.workforce-drop .button { grid-column: 1 / -1; width: 100%; }.workforce-import-preview { grid-template-columns: 1fr; }.workforce-import-preview .metric-inline { gap: 12px; }.workforce-import-preview details, .workforce-import-preview .toolbar { grid-column: auto; }.workforce-privacy-note { align-items: flex-start; flex-direction: column; }.workforce-trend-controls { width: 100%; justify-items: start; }.workforce-period-toggle { width: 100%; }.workforce-period-toggle .button { flex: 1; }.workforce-trend-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.workforce-history-chart { grid-template-columns: repeat(6, 54px); }.workforce-subhead { align-items: flex-start; flex-direction: column; }.workforce-management-comparison-grid { grid-template-columns: 1fr; }.workforce-side-history .workforce-history-period > div { height: 145px; }.workforce-work-compare { align-items: flex-start; flex-direction: column; }.workforce-primary-heading { align-items: flex-start; flex-direction: column; }.workforce-work-mix-controls { width: 100%; justify-items: stretch; }.workforce-span-toggle { flex-wrap: wrap; }.workforce-manual-footer { align-items: stretch; flex-direction: column; }.workforce-manual-footer > span { margin-left: 0; }.workforce-period-bar-row { grid-template-columns: 52px minmax(70px, 1fr); }.workforce-period-bar-row > span { grid-column: 2; text-align: left; }
  .section-heading h2 { font-size: 23px; }.section-heading p { font-size: 12px; }
  .form-grid { grid-template-columns: 1fr; }.form-grid .span-2 { grid-column: auto; }
  .cycle-form-layout { grid-template-columns: 1fr; gap: 10px; }.cycle-form-layout > .span-2 { grid-column: auto; }.cycle-form-card { padding: 13px; border-radius: 13px; }.cycle-form-card > header { margin-bottom: 11px; }.harvest-window-component { grid-template-columns: 1fr; gap: 6px; }.harvest-window-arrow { height: 18px; transform: rotate(90deg); }.cycle-management-card { grid-template-columns: 1fr; padding: 12px; }.cycle-management-card > p { grid-column: auto; }.cycle-management-actions { justify-content: stretch; }.cycle-management-actions .button { flex: 1; }
  .filter-strip { align-items: stretch; }.field, .field.field-small { min-width: 100%; flex-basis: 100%; }
  .map-filter-strip { grid-template-columns: 1fr; }
  .map-filter-strip > .field,
  .map-filter-strip > .field.field-small { min-width: 0; width: 100%; }
  .map-filter-strip > .button { width: 100%; }
  .plan-mode-tabs { width: 100%; }.plan-mode-tabs button { flex: 1; }.timeline-zoom { width: 100%; margin-left: 0; }.timeline-zoom button { flex: 1; }
  .timeline-filter-strip .button-secondary { width: 100%; }.timeline-period-head { padding-inline: 4px; }.timeline-period-head strong { font-size: 8px; }.timeline-period-head span { font-size: 6px; }
  .panel-header { align-items: flex-start; flex-direction: column; }.panel-header .toolbar { width: 100%; }
  .location-grid { grid-template-columns: repeat(2, 1fr); }
  .official-map-scroll { padding: 8px; }.official-farm-map, .illustrated-farm-map { min-width: 560px; }.official-map-footer { display: grid; }
  .crop-module-scroll { max-height: 360px; grid-template-columns: 1fr 1fr; }.crop-palette { padding: 13px; }.succession-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .succession-table thead th:first-child, .succession-table tbody th { width: 118px; min-width: 118px; max-width: 118px; padding-inline: 7px; }
  .daily-timeline-header, .daily-timeline-row { grid-template-columns: 52px max-content; }.daily-slot-label { width: 52px; padding: 7px 3px; }.daily-slot-label strong { font-size: 9px; }.daily-slot-label small { margin-top: 3px; font-size: 7px; }.daily-timeline-header .daily-slot-label strong { white-space: normal; line-height: 1.15; }.daily-guidance { padding: 13px; }.daily-legend { gap: 7px 10px; }
  .plan-item-actions button, .daily-cycle-actions button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; }.plan-item-actions { top: 5px; right: 5px; }.daily-cycle-actions { left: max(2px, calc((var(--start-day) + var(--span-days)) * var(--day-width) - 71px)); top: 24px; width: 67px; }
  .table-wrap { margin-inline: -1px; }.table-wrap .data-table { min-width: 680px; }.data-table th { padding: 11px 12px; }.data-table td { padding: 12px; }
  .panel, .kpi-card { border-radius: 16px; }.panel-header { padding: 15px; }.panel-body { padding: 15px; }
  .dialog, .dialog-wide { width: 100%; max-width: none; max-height: min(94dvh, 900px); margin: auto 0 0; border-radius: 24px 24px 0 0; }.dialog-header { min-height: 70px; padding: 14px 16px; }.dialog-header h2 { font-size: 19px; }.dialog-body { padding: 16px; }.dialog-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }.dialog-footer .button { flex: 1; }
  .toast-region { right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); }.toast { width: calc(100vw - 24px); }
  .more-card { min-height: 150px; padding: 20px; }
  .suggestion-grid, .quick-action-grid, .trial-grid { grid-template-columns: 1fr; }
  .quick-action-card { min-height: 165px; padding: 18px; }
  .quality-item { grid-template-columns: 1fr; gap: 9px; align-items: start; }.quality-item .button { width: 100%; }
  .trial-progress { grid-template-columns: 1fr; }.trial-progress > small { grid-column: auto; }
}

@media (max-width: 430px) {
  .harvest-volume-preview,
  .cycle-volume-preview { grid-template-columns: 1fr; }
  .cycle-management-actions { flex-direction: column; }
  .cycle-management-actions .button { width: 100%; }
}

@media (max-width: 390px) {
  .crop-module-scroll { grid-template-columns: 1fr; }
  .nav-item > span:nth-child(2) { font-size: 10px; }
  .location-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.location-card { min-height: 92px; padding: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (hover: none) {
  .button:hover, .kpi-card:hover, .more-card:hover, .location-card:hover, .nav-item:hover { transform: none; }
}

@page { size: A4 landscape; margin: 12mm; }
@media print {
  body { background: white; color: #111; }
  .app-shell, .dialog, .toast-region { display: none !important; }
  .print-report { display: block; font-family: Arial, sans-serif; font-size: 9pt; }
  .print-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 8mm; border-bottom: 2px solid #173f35; }.print-head h1 { margin: 0 0 2mm; color: #173f35; font-size: 20pt; }.print-head p { margin: 1mm 0; color: #555; }.print-label { padding: 2mm 3mm; border: 1px solid #b98636; color: #784c12; background: #fff4dc; font-weight: bold; }
  .print-summary { margin: 5mm 0; display: flex; gap: 5mm; }.print-summary div { padding: 3mm 5mm; border: 1px solid #ddd; }.print-summary strong { display: block; font-size: 15pt; }.print-summary span { color: #666; font-size: 8pt; }
  .print-report table { width: 100%; border-collapse: collapse; margin-top: 3mm; }.print-report th { color: white; background: #205245; }.print-report th, .print-report td { padding: 2.2mm; border: 1px solid #ccc; text-align: left; }.print-report h2 { margin: 6mm 0 2mm; color: #173f35; font-size: 13pt; }.print-exceptions th { background: #8d3636; }
  .print-footer { margin-top: 6mm; padding-top: 3mm; border-top: 1px solid #ccc; color: #666; font-size: 8pt; }
}

/* Farm OS visual system v1.1
   Calm, readable operational UI: warm neutral surfaces, one green action colour,
   restrained elevation, and a minimum 12px size for supporting interface text. */
:root {
  --ui-canvas: #f5f6f2;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f0f2ed;
  --ui-surface-tint: #f7f9f5;
  --ui-border: #dfe4dc;
  --ui-border-strong: #cbd4ca;
  --ui-text: #1d2c27;
  --ui-text-soft: #5f7068;
  --ui-text-faint: #77847e;
  --ui-accent: #2f6f59;
  --ui-accent-dark: #245746;
  --ui-focus: 0 0 0 3px rgb(47 111 89 / 18%);
  --ui-shadow-1: 0 1px 2px rgb(23 50 41 / 4%), 0 8px 24px rgb(23 50 41 / 5%);
  --ui-shadow-2: 0 16px 44px rgb(23 50 41 / 10%);
}

.farm-os-portal {
  background: var(--ui-canvas);
  color: var(--ui-text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.farm-os-portal h1,
.farm-os-portal h2,
.farm-os-portal h3,
.farm-os-portal strong { letter-spacing: -.015em; }

.panel,
.portal-login-card,
.assignment-drawer,
.task-item-add,
.zone-registry-card {
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-1);
}

.button,
.farm-os-portal button {
  font-weight: 720;
  letter-spacing: -.005em;
}

.button-primary {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  box-shadow: 0 5px 14px rgb(47 111 89 / 16%);
}

.button-primary:hover { background: var(--ui-accent-dark); }
.button-secondary { border-color: var(--ui-border-strong); background: var(--ui-surface); box-shadow: none; }
.button-ghost { color: var(--ui-accent-dark); }

.portal-login-card { position: relative; border-radius: 20px; box-shadow: var(--ui-shadow-2); }
.portal-login-card > h1 { max-width: calc(100% - 110px); font-size: clamp(28px, 3vw, 38px); line-height: 1.12; }
.portal-login-card > p { margin-top: 10px; color: var(--ui-text-soft); font-size: 14px; line-height: 1.55; }
.portal-language { position: absolute; top: 28px; right: 28px; float: none; margin: 0; border: 1px solid var(--ui-border); background: var(--ui-surface-tint); }
.portal-choice-grid { gap: 12px; }
.portal-choice-grid > button { position: relative; min-height: 178px; padding: 22px 50px 22px 22px; border-color: var(--ui-border); border-radius: 16px; background: var(--ui-surface); box-shadow: none; }
.portal-choice-grid > button::after { content: "→"; position: absolute; right: 20px; bottom: 20px; color: #809087; font-size: 20px; transition: transform .16s ease, color .16s ease; }
.portal-choice-grid > button:hover::after,
.portal-choice-grid > button:focus-visible::after { color: var(--ui-accent); transform: translateX(3px); }
.portal-choice-grid strong { font-size: 17px; }
.portal-choice-grid small { color: var(--ui-text-soft); font-size: 13px; line-height: 1.5; }
.portal-auth-panel form { border-color: var(--ui-border); border-radius: 14px; background: var(--ui-surface-tint); }
.portal-auth-panel form p { font-size: 13px; line-height: 1.5; }

/* Landing portal: one coherent entrance, with language separate from navigation. */
.is-landing .portal-login {
  display: block;
  min-height: 100%;
  padding: clamp(24px, 5vh, 56px) clamp(20px, 4vw, 56px);
  background:
    radial-gradient(circle at 8% 5%, rgb(211 229 212 / 78%), transparent 35%),
    radial-gradient(circle at 92% 92%, rgb(231 224 201 / 48%), transparent 32%),
    #f6f6f0;
}
.portal-entry-shell {
  width: min(1120px, 100%);
  min-height: calc(100vh - clamp(48px, 10vh, 112px));
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: 22px;
}
.portal-entry-header {
  padding: 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.portal-entry-header .portal-brand { margin: 0; gap: 16px; }
.portal-entry-header .portal-brand > span {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: linear-gradient(145deg, #285d4c, #173f35);
  box-shadow: 0 12px 28px rgb(22 62 51 / 18%);
  font-size: 20px;
}
.portal-entry-header .portal-brand strong { font-size: 24px; line-height: 1.05; }
.portal-entry-header .portal-brand small { margin-top: 6px; font-size: 13px; }
.portal-language {
  position: static;
  min-height: 48px;
  margin: 0;
  padding: 7px 15px 7px 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 14px;
  color: var(--ui-text);
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 3px 12px rgb(20 45 36 / 6%);
}
.portal-language > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: white;
  background: var(--ui-accent);
  font-size: 11px;
  letter-spacing: .05em;
}
.portal-language > strong { font-size: 13px; }
.portal-language:hover { border-color: var(--ui-accent); background: white; }
.portal-landing-card {
  width: 100%;
  padding: clamp(32px, 4vw, 48px);
  border-radius: 28px;
  background: rgb(255 255 255 / 94%);
}
.portal-entry-copy { max-width: 720px; }
.portal-entry-copy .eyebrow { margin-bottom: 14px; color: var(--ui-accent); font-size: 11px; letter-spacing: .1em; }
.portal-entry-copy h1 { margin: 0; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.04; }
.portal-entry-copy > p:last-child { max-width: 620px; margin: 14px 0 0; color: var(--ui-text-soft); font-size: 16px; line-height: 1.55; }
.portal-landing-card > .portal-message:empty { display: none; }
.portal-choice-grid { margin-top: 36px; gap: 14px; }
.portal-choice-grid > button {
  min-height: 184px;
  padding: 24px 52px 24px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #fbfcfa);
}
.portal-choice-grid > button > span { width: 42px; height: 42px; border-radius: 13px; }
.portal-choice-grid strong { margin-top: 14px; font-size: 19px; }
.portal-choice-grid small { max-width: 235px; font-size: 13px; }
.portal-landing-card.is-authenticating { width: min(650px, 100%); margin-inline: auto; }
.portal-landing-card.is-authenticating .portal-entry-copy { display: none; }
.portal-landing-card.is-authenticating .portal-auth-panel { margin-top: 0; }
.portal-back { min-height: 44px; padding-inline: 0; border: 0; background: transparent; }
.portal-auth-panel form { margin-top: 18px; padding: 26px; }
.portal-auth-panel form h2 { font-size: 28px; }
.portal-entry-footer {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--ui-text-soft);
  font-size: 12px;
}
.portal-entry-footer span { color: var(--ui-text); font-weight: 650; }

.operations-shell { padding: 28px clamp(20px, 3vw, 38px) 48px; }
.operations-shell > header { margin-bottom: 20px; }
.operations-shell > header small { color: var(--ui-text-soft); font-size: 13px; }
.operations-shell > header h1 { margin-top: 6px; font-size: clamp(28px, 3vw, 38px); line-height: 1.08; }
.operations-shell > nav { width: max-content; max-width: 100%; padding: 4px; gap: 2px; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 13px; background: #e9ede7; }
.operations-shell > nav button { min-height: 44px; padding: 9px 15px; border: 0; border-radius: 9px; color: var(--ui-text-soft); font-size: 13px; }
.operations-shell > nav button.is-active { color: var(--ui-text); border: 0; background: var(--ui-surface); box-shadow: 0 1px 2px rgb(20 45 36 / 8%), 0 4px 12px rgb(20 45 36 / 6%); }
.portal-message { min-height: 20px; margin: 4px 0 12px; font-size: 13px; }

.assignment-drawer { border-radius: 16px; box-shadow: var(--ui-shadow-1); }
.assignment-drawer > summary { min-height: 72px; padding: 16px 20px; background: var(--ui-surface-tint); }
.assignment-drawer > summary strong { font-size: 17px; }
.assignment-drawer > summary small { color: var(--ui-text-soft); font-size: 13px; line-height: 1.45; }
.assignment-drawer > summary > span:last-child { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ui-border); border-radius: 9px; color: var(--ui-accent); background: white; font-size: 0; }
.assignment-drawer > summary > span:last-child::before { content: "⌄"; font-size: 18px; line-height: 1; transform: translateY(-2px); }
.assignment-drawer[open] > summary > span:last-child::before { content: "⌃"; transform: translateY(2px); }
.assignment-drawer > form { border-color: var(--ui-border); }
.simple-task-form { padding: 20px; gap: 16px; }
.portal-form-grid label,
.task-item-add label,
.admin-stack form > label { color: #304b41; font-size: 13px; font-weight: 700; }
.operations-grid.is-register-only { grid-template-columns: minmax(0, 1fr); }
.operations-grid.is-editor-only { grid-template-columns: minmax(0, 860px); justify-content: center; }
.member-identity > div { min-width: 0; display: grid; gap: 3px; }
.member-identity > div > strong,
.member-identity > div > small { display: block; overflow-wrap: anywhere; }
.portal-form-grid label > small,
.form-intro { color: var(--ui-text-soft); font-size: 12px; line-height: 1.5; }
.portal-login input,
.portal-login select,
.portal-form-grid input,
.portal-form-grid select,
.portal-form-grid textarea,
.admin-stack input,
.task-item-add input,
.task-item-add select {
  min-height: 46px;
  border-color: var(--ui-border-strong);
  border-radius: 10px;
  color: var(--ui-text);
  font-size: 14px;
  box-shadow: inset 0 1px 1px rgb(25 55 45 / 2%);
}
.farm-os-portal input:focus,
.farm-os-portal select:focus,
.farm-os-portal textarea:focus { outline: none; border-color: #6f9f8b; box-shadow: var(--ui-focus); }

.task-item-picker { padding: 14px; gap: 10px; border-color: var(--ui-border); background: var(--ui-surface-soft); }
.task-item-picker legend { font-size: 13px; }
.task-item-choice { min-height: 60px; padding: 11px 13px; border-color: var(--ui-border); border-radius: 11px; }
.task-item-choice strong { font-size: 13px; line-height: 1.35; }
.task-item-choice small { color: var(--ui-text-soft); font-size: 11px; line-height: 1.35; }
.task-item-choice:has(input:checked) { border-color: #7eaa93; background: #f0f7f2; box-shadow: inset 0 0 0 1px #b9d5c5; }
.assignment-options > summary { font-size: 13px; }

.task-board-heading { align-items: center; }
.task-board-heading .eyebrow { margin-bottom: 6px; color: var(--ui-text-faint); font-size: 11px; letter-spacing: .075em; }
.task-board-heading h2 { font-size: clamp(26px, 3vw, 34px); }
.task-board-heading p { color: var(--ui-text-soft); font-size: 13px; line-height: 1.5; }
.task-board-columns { grid-auto-columns: minmax(284px, 1fr); gap: 12px; }
.task-board-column { padding: 10px; border: 0; border-radius: 14px; background: #ecefea; }
.task-board-column > header { min-height: 42px; padding: 4px 4px 10px; font-size: 13px; }
.task-board-column > header span { min-width: 26px; min-height: 26px; font-size: 12px; }
.task-board-card { gap: 10px; padding: 14px; border-width: 1px 1px 1px 3px; border-radius: 12px; box-shadow: 0 1px 2px rgb(22 49 40 / 5%); }
.task-board-card > header { font-size: 11px; }
.task-board-card h3 { font-size: 15px; line-height: 1.35; }
.task-board-card p { color: var(--ui-text-soft); font-size: 13px; line-height: 1.5; }
.task-board-card dl div { font-size: 12px; line-height: 1.4; }
.task-column-empty { font-size: 12px; }

.task-item-library { width: min(940px, 100%); gap: 18px; }
.task-item-add { border-radius: 14px; }
.task-item-domain-tabs { padding: 2px 0 6px; scrollbar-width: thin; }
.task-item-domain-tabs button { min-height: 42px; padding: 8px 12px; border-color: var(--ui-border); color: var(--ui-text-soft); font-size: 12px; }
.task-item-row { min-height: 70px; padding: 12px 14px; border-color: var(--ui-border); border-radius: 12px; box-shadow: 0 1px 2px rgb(20 45 36 / 3%); }
.task-item-row strong { font-size: 14px; }
.task-item-row small { color: var(--ui-text-soft); font-size: 12px; }
.task-item-row .button { min-height: 38px; }

.zone-management-hero,
.zone-management-hero .eyebrow,
.zone-create-form .eyebrow { font-size: 11px; }
.zone-management-hero p { font-size: 14px; line-height: 1.55; }
.zone-kpis span { font-size: 11px; }
.zone-create-form .form-intro,
.zone-create-form label small { font-size: 12px; }
.zone-registry-card h3 { font-size: 16px; }
.zone-registry-card header p,
.block-registry-row small { font-size: 12px; }
.zone-registry-meta span,
.location-type-tag { font-size: 11px; }
.block-registry-row { min-height: 66px; }
.block-registry-row strong { font-size: 14px; }
.registry-empty-row,
.registry-empty { font-size: 12px; }

.role-matrix-panel .eyebrow { font-size: 11px; }
.role-matrix-panel > .panel-header p { font-size: 13px; }
.role-summary { min-height: 66px; padding: 12px 14px; }
.role-summary strong { font-size: 14px; }
.role-summary span { font-size: 12px; }
.role-permission-matrix thead th { font-size: 12px; }
.role-permission-matrix tbody th strong { font-size: 14px; }
.role-permission-matrix tbody th small { margin-top: 4px; font-size: 11px; line-height: 1.45; }
.role-permission-matrix .permission-category-row th { font-size: 11px; }
.member-register-head { font-size: 11px; }
.member-register-row { min-height: 78px; }
.member-register-row > div > strong { font-size: 13px; }
.member-register-row small { font-size: 11px; }
.member-status { font-size: 11px; }

.worker-app { padding-inline: clamp(14px, 3vw, 28px); }
.worker-app-header { border-color: var(--ui-border); }
.worker-priority,
.worker-status,
.worker-review-state { font-size: 11px; }
.panel-empty { color: var(--ui-text-soft); font-size: 13px; line-height: 1.5; }
.panel-empty strong { color: var(--ui-text); font-size: 15px; }
.worker-checklist label { font-size: 13px; }

@media (max-width: 720px) {
  .portal-login { padding: 14px; }
  .is-landing .portal-login { padding: 18px 14px 24px; }
  .portal-entry-shell { min-height: calc(100vh - 42px); align-content: start; gap: 16px; }
  .portal-entry-header { padding: 0 4px; gap: 12px; }
  .portal-entry-header .portal-brand { gap: 11px; }
  .portal-entry-header .portal-brand > span { width: 52px; height: 52px; border-radius: 16px; font-size: 16px; }
  .portal-entry-header .portal-brand strong { font-size: 19px; }
  .portal-entry-header .portal-brand small { max-width: 150px; margin-top: 3px; font-size: 10px; line-height: 1.25; }
  .portal-login-card { padding: 24px 20px; border-radius: 18px; }
  .portal-login-card > h1 { max-width: calc(100% - 72px); font-size: 28px; }
  .portal-language { min-height: 44px; padding: 5px 8px; border-radius: 12px; }
  .portal-language > span { width: 32px; height: 32px; }
  .portal-language > strong { display: none; }
  .portal-landing-card { padding: 26px 20px; border-radius: 20px; }
  .portal-entry-copy .eyebrow { margin-bottom: 10px; }
  .portal-entry-copy h1 { font-size: 32px; }
  .portal-entry-copy > p:last-child { margin-top: 10px; font-size: 14px; }
  .portal-choice-grid { margin-top: 24px; grid-template-columns: 1fr; }
  .portal-choice-grid > button { min-height: 122px; padding: 18px 48px 18px 18px; }
  .portal-choice-grid > button > span { width: 38px; height: 38px; }
  .portal-choice-grid strong { margin-top: 6px; font-size: 17px; }
  .portal-entry-footer { padding: 0 4px; align-items: flex-start; flex-direction: column; gap: 3px; }
  .portal-auth-panel form { padding: 20px; }
  .operations-shell { padding: 18px 12px 36px; }
  .operations-shell > header { align-items: center; flex-direction: row; }
  .operations-shell > header h1 { font-size: 27px; }
  .operations-shell > header .button { width: auto; }
  .operations-shell > nav { width: 100%; }
  .operations-shell > nav button { flex: 0 0 auto; }
  .simple-task-form { padding: 16px; }
  .task-item-choice { min-height: 62px; }
  .task-board-columns { gap: 10px; }
  .task-board-column { padding: 9px; }
  .task-item-row { min-height: 74px; grid-template-columns: 28px minmax(0,1fr) auto; }
  .zone-management-hero { border-radius: 16px; }
  .worker-app { padding-inline: 12px; }
  .farm-os-portal .button-small { min-height: 44px; }
}

@media (max-width: 430px) {
  .operations-shell > header small { font-size: 11px; }
  .operations-shell > header h1 { font-size: 24px; }
  .operations-shell > header .button { min-height: 40px; padding: 8px 10px; font-size: 12px; }
  .task-item-row { grid-template-columns: 26px minmax(0,1fr); }
  .task-item-row > .button { grid-column: 2; justify-self: start; }
  .worker-app-header { min-height: 72px; }
}
.zalo-admin-stack,
.atlas-inbox-stack {
  display: grid;
  gap: 1.25rem;
}

.zalo-admin-hero,
.atlas-inbox-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--cream-200);
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(234, 242, 232, 0.9), rgba(255, 255, 255, 0.94));
}

.zalo-admin-hero h2,
.atlas-inbox-hero h2 {
  margin: 0.2rem 0 0.45rem;
}

.zalo-admin-hero p,
.atlas-inbox-hero p {
  max-width: 48rem;
  margin-bottom: 0;
}

.zalo-health {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 17rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--cream-200);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.82);
}

.zalo-health > span {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.3rem;
  border-radius: 999px;
  background: #a06b32;
  box-shadow: 0 0 0 0.25rem rgba(160, 107, 50, 0.12);
}

.zalo-health.is-ready > span {
  background: #277050;
  box-shadow: 0 0 0 0.25rem rgba(39, 112, 80, 0.12);
}

.zalo-health div {
  display: grid;
  gap: 0.22rem;
}

.zalo-health small {
  color: var(--ink-500);
  line-height: 1.45;
}

.zalo-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.zalo-kpis article {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--cream-200);
  border-radius: 1rem;
  background: var(--white);
}

.zalo-kpis strong {
  font-size: 1.55rem;
  line-height: 1;
}

.zalo-kpis span {
  color: var(--ink-500);
  font-size: 0.9rem;
}

.zalo-member-list,
.atlas-inbox-list {
  display: grid;
}

.zalo-member-row,
.atlas-inbox-item {
  display: grid;
  grid-template-columns: minmax(13rem, 1.35fr) minmax(10rem, 0.8fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 5.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--cream-200);
}

.zalo-member-row:first-child,
.atlas-inbox-item:first-child {
  border-top: 0;
}

.zalo-member-row > div,
.atlas-inbox-item > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.zalo-member-row small,
.atlas-inbox-item small,
.atlas-inbox-item p {
  color: var(--ink-500);
}

.zalo-link-state {
  display: inline-flex;
  width: fit-content;
  padding: 0.35rem 0.62rem;
  border-radius: 999px;
  background: #eff1ec;
  color: var(--ink-500);
  font-size: 0.82rem;
  font-weight: 700;
}

.zalo-link-state.is-active {
  background: #e4f2e9;
  color: #226447;
}

.zalo-link-state.is-pending {
  background: #f7ecd9;
  color: #845821;
}

.zalo-member-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.atlas-inbox-item {
  grid-template-columns: minmax(0, 1fr) auto;
}

.atlas-inbox-item.is-urgent {
  border-left: 0.3rem solid var(--status-stop);
  background: var(--status-stop-bg);
}

.atlas-inbox-item p {
  margin: 0.15rem 0;
}

@media (max-width: 760px) {
  .zalo-admin-hero,
  .atlas-inbox-hero {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
  }

  .zalo-health {
    min-width: 0;
  }

  .zalo-kpis {
    grid-template-columns: 1fr;
  }

  .zalo-member-row,
  .atlas-inbox-item {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.75rem;
  }

  .zalo-member-actions {
    justify-content: flex-start;
  }

  .zalo-member-actions .button,
  .atlas-inbox-item .button {
    width: 100%;
    min-height: 2.75rem;
  }
}

/* Work uses the same two-command pattern inside the embedded operations portal. */
.farm-os-portal.is-two-control-work.is-embedded-operations { height: calc(100dvh - var(--manager-hero-height, 150px) - var(--demo-banner-offset, 0px)); overflow: hidden; }
.farm-os-portal.is-two-control-work.is-embedded-operations > .manager-hero { display: none; }
.farm-os-portal.is-two-control-work .operations-shell {
  width: min(1680px, 100%);
  height: 100%;
  min-height: 0;
  padding: 12px clamp(10px, 2vw, 24px);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.farm-os-portal.is-two-control-work .operations-subnav,
.farm-os-portal.is-two-control-work .demo-sandbox-note,
.farm-os-portal.is-two-control-work #portal-message:empty { display: none; }
.farm-os-portal.is-two-control-work #operations-content,
.operations-two-control-content { height: 100%; min-height: 0; }
.operations-two-control-content {
  display: block;
  overflow: hidden;
}
.operations-two-control-content > .task-board-stack {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid #d8dfd5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(26 62 42 / 8%);
}
.farm-os-portal.is-two-control-work .assignment-drawer,
.farm-os-portal.is-two-control-work .task-breadcrumb,
.farm-os-portal.is-two-control-work .manager-attention,
.farm-os-portal.is-two-control-work .task-projection-controls,
.farm-os-portal.is-two-control-work .task-filter-summary,
.farm-os-portal.is-two-control-work .task-board-heading { display: none !important; }
.farm-os-portal.is-two-control-work .task-list-projection,
.farm-os-portal.is-two-control-work .task-day-projection,
.farm-os-portal.is-two-control-work .task-board-columns {
  height: auto;
  min-height: 0;
  margin: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.farm-os-portal.is-two-control-work .task-list-projection { padding: 4px 12px; align-content: start; grid-auto-rows: max-content; }
.work-filter-fields { margin-top: 12px; }
.work-drawer-form > form { padding: 0; }
.work-drawer-form .portal-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Management is one contained workspace. The active page scrolls vertically;
   the pager and phone navigation stay fixed while Staff, Zones, and Crews
   replace one another instead of stacking into a document-length screen. */
.farm-os-portal.is-management-workspace.is-embedded-operations {
  height: calc(100dvh - var(--manager-hero-height, 150px) - var(--demo-banner-offset, 0px));
  min-height: 0;
  overflow: hidden;
}
.farm-os-portal.is-management-workspace .operations-shell {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.farm-os-portal.is-management-workspace .demo-sandbox-note { display: none; }
.farm-os-portal.is-management-workspace .management-page-tabs {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 4px;
  display: flex;
  gap: 3px;
  overflow: visible;
  border: 1px solid #d8dfd5;
  border-radius: 14px;
  background: #edf2eb;
}
.farm-os-portal.is-management-workspace .management-page-tabs button {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.farm-os-portal.is-management-workspace .management-page-tabs button.is-active {
  color: #fff;
  background: #214f31;
  box-shadow: none;
}
.farm-os-portal.is-management-workspace #portal-message { flex: 0 0 auto; margin: 0; }
.farm-os-portal.is-management-workspace #portal-message:empty { display: none; }
.farm-os-portal.is-management-workspace #operations-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0 0 calc(76px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.farm-os-portal.is-management-workspace #operations-content.is-slide-next { animation: management-slide-next 180ms ease-out; }
.farm-os-portal.is-management-workspace #operations-content.is-slide-previous { animation: management-slide-previous 180ms ease-out; }
@keyframes management-slide-next { from { opacity: .35; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes management-slide-previous { from { opacity: .35; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .farm-os-portal.is-management-workspace #operations-content { animation: none !important; }
}

@media (max-width: 720px) {
  .farm-os-portal.is-two-control-work .operations-shell { padding: 8px; }
  .operations-two-control-content > .task-board-stack { border-radius: 13px; }
  .farm-os-portal.is-two-control-work .task-projection-row {
    min-height: 68px;
    padding: 9px 10px;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas: "ring copy status" "ring time status";
    gap: 2px 9px;
  }
  .farm-os-portal.is-two-control-work .task-projection-row .task-ring-cell { grid-area: ring; align-self: center; }
  .farm-os-portal.is-two-control-work .task-projection-row time { grid-area: time; }
  .farm-os-portal.is-two-control-work .task-projection-row > div { grid-area: copy; min-width: 0; }
  .farm-os-portal.is-two-control-work .task-projection-row > .status-lozenge { grid-area: status; align-self: center; padding-inline: 8px; }
  .farm-os-portal.is-two-control-work .task-projection-row strong,
  .farm-os-portal.is-two-control-work .task-projection-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .work-drawer-form .portal-form-grid { grid-template-columns: 1fr; }
  .work-drawer-form .span-2 { grid-column: auto; }
}

body.is-operational-view .workspace {
  height: calc(100dvh - var(--manager-hero-height, 64px) - var(--demo-banner-offset, 0px));
  min-height: 0;
  padding-bottom: 0 !important;
  overflow: hidden;
}
@media (max-width: 720px) {
  .exception-stream, .harvest-stream,
  .plan-workspace-compact .daily-timeline-scroll,
  .farm-os-portal.is-two-control-work [data-task-projection] { padding-bottom: 78px; }
}