:root {
  --forest: var(--farm-ui-sidebar, #183d33);
  --ink: var(--farm-ui-ink, #263f34);
  --muted: #667461;
  --paper: var(--farm-ui-canvas, #f5f6f0);
  --line: var(--farm-ui-border, #dfe5d7);
  --moss: var(--farm-ui-accent, #d9e8a7);
  --primary: var(--farm-ui-primary, #234f3b);
  --primary-hover: var(--farm-ui-primary-hover, #163a2a);
  --primary-text: var(--farm-ui-primary-text, #fff);
  --amber: #805719;
  --radius: var(--farm-ui-radius, 12px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button, summary { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #a97017; outline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
h1 { font-size: clamp(27px, 2.7vw, 36px); font-weight: 600; line-height: 1.2; letter-spacing: -1.1px; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.35px; }
h3 { font-size: 14px; font-weight: 600; }
.icon { height: 20px; width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-definitions { position: absolute; height: 0; width: 0; overflow: hidden; }
.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; }
.skip-link { position: fixed; top: -70px; left: 260px; z-index: 50; background: var(--moss); border-radius: 6px; padding: 12px 18px; }
.skip-link:focus { top: 12px; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; width: 244px; padding: 30px 18px 18px; overflow-y: auto; background: var(--forest); color: #eff4e9; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px; font-size: 25px; font-weight: 600; letter-spacing: -.8px; }
.brand-mark { width: 31px; font-family: Georgia, serif; font-style: italic; font-size: 31px; letter-spacing: -7px; color: var(--moss); }
.brand-title { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.brand-dot { color: var(--moss); }
.farm-card { display: flex; align-items: center; gap: 10px; border: 1px solid #426151; border-radius: 9px; padding: 14px 11px; margin: 34px 0 28px; }
.farm-card > div { min-width: 0; }
.farm-card strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.farm-card small { display: block; font-size: 11px; color: #c0d0c3; margin-top: 3px; }
.farm-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 36px; border-radius: 7px; background: #315447; font: 23px Georgia, serif; }
.nav-caption { padding: 0 13px; margin-bottom: 13px; font-size: 10px; letter-spacing: 1.5px; color: #b4c8b7; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 12px 14px; border-radius: 7px; margin-bottom: 5px; color: #d0ddd0; font-size: 13px; transition: background .15s; }
.nav-link:hover { background: #294d3f; color: white; }
.nav-link.active { background: var(--moss); color: var(--forest); font-weight: 600; }
.nav-link .icon { width: 18px; height: 18px; }
.sidebar-bottom { margin-top: auto; padding-top: 36px; }
.season-note { position: relative; background: #254a3d; border-radius: 10px; padding: 18px; margin: 0 5px 24px; }
.season-note > .icon { position: absolute; right: 14px; top: 18px; width: 29px; height: 29px; color: #c9dc95; transform: rotate(-18deg); }
.season-note strong { font-size: 16px; font-weight: 500; }
.season-note p { font-size: 12px; color: #bed0bd; margin-top: 10px; max-width: 155px; }
.profile { display: flex; align-items: center; gap: 10px; border-top: 1px solid #385847; padding: 20px 6px 0; }
.profile > div { min-width: 0; }
.avatar { display: grid; place-items: center; height: 34px; width: 34px; border-radius: 50%; flex: none; background: #dfd5c1; color: #554a37; font-weight: 600; }
.profile strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.profile small { display: block; font-size: 11px; color: #bed0bd; margin-top: 2px; }
.logout-form { margin: 8px 6px 0; }
.logout-form button { background: none; color: #d0ddc8; border: 0; padding: 8px 0; min-height: 40px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.workspace { margin-left: 244px; }
.topbar { height: 76px; padding: 0 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fafbf7; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; align-items: center; gap: 15px; font-size: 12px; color: var(--muted); }
.breadcrumb > span:nth-child(2) { color: #a1ad99; }
.breadcrumb strong { font-weight: 500; color: var(--ink); }
.topbar-farm { font-size: 12px; color: var(--muted); }
.mobile-navigation { display: none; }
main { max-width: 1530px; min-height: calc(100vh - 137px); margin: auto; padding: 35px 38px 28px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.eyebrow { font-size: 10px; letter-spacing: 1.5px; font-weight: 600; color: #697d53; text-transform: uppercase; margin-bottom: 9px; }
.page-heading > div > p:last-child { font-size: 13px; color: var(--muted); margin-top: 9px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: 44px; padding: 11px 17px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.button .icon { width: 17px; height: 17px; }
.primary { background: var(--primary); color: var(--primary-text); }
.primary:hover { background: var(--primary-hover); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 17px; }
.stat h2 { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; letter-spacing: 0; font-weight: 400; }
.stat h2 .icon { width: 16px; height: 16px; color: #7a8f62; }
.stat-value { font-size: 34px; line-height: 1.2; letter-spacing: -1px; font-weight: 500; margin: 14px 0 10px; }
.stat-value span { color: #76826c; font-size: 18px; font-weight: 400; letter-spacing: 0; }
.stat-note { color: var(--muted); font-size: 11px; }
.record-panel { background: #edf2e4; border: 1px solid #d9e2cc; border-radius: var(--radius); margin-bottom: 23px; scroll-margin-top: 20px; }
.entry-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); gap: 12px; margin-bottom: 23px; align-items: start; }
.entry-actions .record-panel { min-width: 0; margin-bottom: 0; }
.entry-link { display: flex; min-height: 76px; align-items: center; gap: 10px; padding: 12px 14px; text-decoration: none; }
.entry-link > span:nth-child(2) { min-width: 0; }
.entry-link strong { display: block; font-size: 13px; }
.entry-link small { display: block; color: #607252; font-size: 11px; line-height: 1.45; margin-top: 2px; }
.entry-link:hover { border-color: #aebf92; background: #e5edd9; }
.entry-link:focus-visible { outline: 3px solid #a97017; outline-offset: 3px; }
.entry-link .expand-label { font-size: 0; gap: 0; }
.entry-link .expand-label .icon { width: 17px; height: 17px; }
.workspace-calendar { padding-bottom: 25px; }
.workspace-calendar .mc-grid-months { grid-template-columns: repeat(auto-fill, minmax(min(100%, 392px), 1fr)); gap: 14px; }
.workspace-calendar .mc-month { border: 1px solid var(--farm-ui-border); border-radius: var(--farm-ui-radius); background: #fff; }
.workspace-calendar .mc-month h3 { background: var(--farm-ui-primary); color: var(--farm-ui-primary-text); }
.workspace-calendar .mc-month.current h3 { box-shadow: inset 0 -3px 0 var(--farm-ui-accent); }
.workspace-calendar .mc-cell { border-color: var(--farm-ui-border); }
.workspace-calendar .mc-cell input { color: var(--farm-ui-primary); }
.workspace-calendar .mc-cell input:focus { outline-color: var(--farm-ui-accent); }
.workspace-calendar .mc-mtot { border-color: var(--farm-ui-border); background: var(--farm-ui-canvas); }
.workspace-calendar .mc-mtot b, .workspace-calendar .mc-tab { color: var(--farm-ui-primary); }
.workspace-calendar .mc-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.workspace-calendar .mc-tab { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 13px; border: 1px solid var(--farm-ui-border); border-radius: 999px; background: #fff; }
.workspace-calendar .mc-tab.active { background: var(--farm-ui-primary); color: var(--farm-ui-primary-text); }
.workspace-calendar .mc-save { bottom: 0; padding: 12px; border: 1px solid var(--farm-ui-border); border-radius: var(--farm-ui-radius); }
.workspace-calendar .mc-save .button { min-height: 44px; padding: 9px 16px; border-radius: 7px; background: var(--farm-ui-primary); color: var(--farm-ui-primary-text); border: 0; }
.workspace-calendar .mc-save .yeartot b { color: var(--farm-ui-primary); }
.entry-actions .record-panel > summary { min-height: 76px; padding: 12px 14px; gap: 10px; }
.entry-actions .record-panel summary small { font-size: 11px; line-height: 1.45; }
.entry-actions .record-icon { width: 36px; height: 36px; }
.entry-actions .expand-label { font-size: 0; gap: 0; }
.entry-actions .expand-label .icon { width: 17px; height: 17px; }
.entry-actions .entry-form, .entry-actions .record-form { padding: 17px 14px; border-top: 1px solid #d9e2cc; background: #fbfcf9; border-radius: 0 0 var(--radius) var(--radius); }
.entry-actions .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 11px; }
.entry-actions .form-footer { display: grid; gap: 12px; margin-top: 15px; }
.entry-actions .form-footer .button { width: 100%; }
.entry-actions .form-footer p { font-size: 10px; line-height: 1.6; }
.entry-actions .field label { font-size: 11px; }
.entry-actions .field input, .entry-actions .field select, .entry-actions .field textarea { font-size: 14px; padding: 8px; min-height: 42px; }
.record-panel > summary { display: flex; list-style: none; align-items: center; gap: 14px; padding: 17px 20px; border-radius: var(--radius); }
.record-panel > summary::-webkit-details-marker { display: none; }
.record-icon { display: grid; place-items: center; background: #dfe9cd; border-radius: 9px; height: 40px; width: 40px; flex: none; color: #53723c; }
.record-panel summary strong { display: block; font-size: 13px; }
.record-panel summary small { display: block; color: #607252; margin-top: 2px; font-size: 12px; }
.expand-label { display: flex; align-items: center; gap: 7px; margin-left: auto; color: #426534; font-size: 12px; white-space: nowrap; font-weight: 500; }
.expand-label .icon { width: 16px; height: 16px; }
.record-panel[open] .expand-label .icon { transform: rotate(45deg); }
.milk-form, .record-form { padding: 20px; border-top: 1px solid #d9e2cc; background: #fbfcf9; border-radius: 0 0 var(--radius) var(--radius); }
/* ROWS LAYOUT: one line per cow or per feed, so a whole milking round or a
   day's feeding is one screen and one save. Label and number on one line at
   phone width, because a stacked label per row turns twelve cows into a very
   long scroll. */
.record-rows { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 8px; }
.record-row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 28%, 130px); align-items: center; gap: 10px; background: #fff; border: 1px solid #d9e2cc; border-radius: 8px; padding: 7px 10px; }
.record-row label { margin: 0; font-size: 12px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.record-row input { width: 100%; min-width: 0; min-height: 42px; background: #fff; border: 1px solid #bdcbb0; border-radius: 6px; padding: 8px; text-align: right; font-variant-numeric: tabular-nums; }
.record-row.has-error { border-color: #ae4435; background: #fff7f4; }
.record-row .field-errors { grid-column: 1 / -1; }
.record-rows .empty-list { padding: 10px; color: var(--muted); font-size: 12px; }
.day-records { display: grid; gap: 23px; }
.field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.field { min-width: 0; }
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 45px; background: white; border: 1px solid #bdcbb0; border-radius: 6px; padding: 10px; }
.field-help { font-size: 11px; color: var(--muted); margin-top: 7px; }
.required-mark { color: #697f51; }
.field.has-error input, .field.has-error select { border-color: #ae4435; }
.field-errors, .form-errors { font-size: 12px; color: #8f342b; }
.field-errors ul, .form-errors ul { margin: 6px 0 0; padding-left: 18px; }
.form-errors { background: #fff1ec; border: 1px solid #ebc6b9; padding: 12px 16px; border-radius: 7px; margin-bottom: 18px; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 20px; }
.form-footer p { font-size: 11px; color: var(--muted); max-width: 480px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(295px, 1fr); gap: 23px; align-items: start; }
.main-column, .support-column { display: grid; gap: 23px; min-width: 0; }
.panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; scroll-margin-top: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 21px 23px 16px; }
.panel-head p:not(.eyebrow) { color: var(--muted); margin-top: 4px; font-size: 11px; }
.panel-head .eyebrow { margin-bottom: 6px; font-size: 9px; }
.panel-icon { color: #82926f; }
.badge { display: inline-flex; align-items: center; background: #edf3e5; color: #496537; border-radius: 5px; padding: 4px 8px; font-size: 10px; line-height: 1.5; font-weight: 500; white-space: nowrap; }
.badge.neutral { background: #f0f2eb; color: #636f5a; }
.badge.amber { background: #fbefd7; color: var(--amber); }
.chart-total { display: flex; align-items: baseline; gap: 13px; padding: 0 23px; }
.chart-total strong { font-size: 29px; line-height: 1.2; font-weight: 500; letter-spacing: -.6px; }
.chart-total strong span { font-size: 16px; color: #75836a; font-weight: 400; }
.chart-total > span { color: var(--muted); font-size: 11px; }
.milk-chart { padding: 23px 23px 2px; }
.chart-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 15px; position: relative; }
.chart-bars:before { content: ""; position: absolute; z-index: 0; inset: 23px 0 29px; background: repeating-linear-gradient(to top, transparent 0, transparent 40px, #eef1e6 40px, #eef1e6 41px); pointer-events: none; }
.chart-day { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.chart-amount { font-size: 11px; color: #677956; height: 17px; }
.bar-track { display: flex; align-items: flex-end; height: 130px; width: min(100%, 34px); border-bottom: 1px solid #dce3d0; }
.bar { width: 100%; min-height: 2px; background: #a9bd83; border-radius: 5px 5px 0 0; }
.bar.no-record { min-height: 0; }
.is-today .bar { background: var(--primary); }
.chart-date { font-size: 10px; color: var(--muted); }
.is-today .chart-date { font-weight: 600; color: #46612f; }
.chart-data { margin: 12px 23px 13px; }
.chart-data > summary { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; font-size: 11px; color: #4d6e38; list-style: none; min-height: 35px; }
.chart-data > summary::-webkit-details-marker { display: none; }
.chart-data .icon { width: 14px; height: 14px; transition: transform .15s; }
.chart-data[open] .icon { transform: rotate(90deg); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; margin: 8px 0 14px; }
th, td { border-bottom: 1px solid var(--line); padding: 9px; font-weight: 400; }
thead th { background: #f6f8f0; font-weight: 600; }
td:last-child { text-align: right; }
.panel-footer { background: #fafbf6; border-top: 1px solid #e9eede; padding: 12px 23px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.task-list { padding: 0 23px 5px; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid #e9eede; }
.task-row:last-child { border-bottom: 0; }
.task-action { flex: none; margin: -5px 0 -5px -10px; }
.task-check { display: grid; place-items: center; position: relative; background: transparent; border: 0; border-radius: 6px; padding: 12px; width: 44px; height: 44px; }
.task-check:before { content: ""; position: absolute; inset: 12px; border: 1.5px solid #91a27e; border-radius: 4px; }
.task-check .icon { width: 17px; height: 17px; opacity: 0; color: #35572c; }
.task-check:hover { background: #f1f5e9; }
.task-check:hover .icon, .task-check:focus-visible .icon { opacity: 1; }
.task-check.completed { flex: none; margin: -5px 0 -5px -10px; }
.task-check.completed:before { background: #e2edd0; border-color: #e2edd0; }
.task-check.completed .icon { opacity: 1; position: relative; }
.task-status-mark { width: 20px; height: 20px; margin: 0 2px; border: 1px solid #cad3bd; border-radius: 50%; flex: none; }
.task-detail { flex: 1; min-width: 0; }
.task-detail h3 { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.task-detail p { font-size: 10px; color: var(--muted); margin-top: 4px; }
.task-detail p > span[aria-hidden] { padding: 0 3px; }
.priority-label { display: inline-block; margin-left: 5px; color: var(--amber); }
.is-done .task-detail h3 { color: #717d66; text-decoration: line-through; }
.task-detail .completion-note { font-size: 10px; color: #53703e; }
.task-state { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.text-button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 7px 0; font-size: 11px; font-weight: 600; color: #496b35; min-height: 32px; }
.text-button:hover { text-decoration: underline; }
.text-button .icon { width: 14px; height: 14px; }
.task-state .text-button { min-height: 36px; }
.assistant-panel { background: #f0f4e7; border-color: #d9e2cc; }
.assistant-panel .panel-head { padding-bottom: 12px; }
.assistant-icon { display: grid; place-items: center; flex: none; height: 38px; width: 38px; border-radius: 10px; background: #e1eacb; color: #648546; }
.assistant-intro { color: #637451; font-size: 12px; line-height: 1.7; padding: 0 23px 18px; }
.insight-list { padding: 0 16px 5px; }
.insight { background: #fafcf6; border: 1px solid #dee7ce; border-radius: 8px; padding: 15px 16px 11px; margin-bottom: 12px; }
.insight.needs-attention { border-left: 3px solid #bd9652; }
.insight h3 { font-size: 13px; }
.insight p { color: #637451; font-size: 11px; line-height: 1.7; margin-top: 6px; }
.insight .text-button { margin-top: 4px; }
.assistant-panel .panel-footer { background: #eaf0df; border-color: #dce5cd; }
.record-list { list-style: none; margin: 0; padding: 0 23px 6px; }
.record-list li { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-bottom: 1px solid #e9eede; }
.record-list li:last-child { border-bottom: 0; }
.record-list li > div { min-width: 0; }
.record-list h3 { font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.record-list p { font-size: 10px; color: var(--muted); margin-top: 4px; line-height: 1.7; }
.stock-quantity { font-size: 17px; margin-left: auto; white-space: nowrap; color: var(--amber); }
.stock-quantity small { font-size: 11px; }
.record-list .empty-list { font-size: 12px; line-height: 1.7; color: var(--muted); padding: 5px 0 17px; }
.health-mark { display: grid; place-items: center; flex: none; width: 33px; height: 33px; border-radius: 8px; color: var(--amber); background: #fbefd7; }
.health-mark .icon { width: 16px; height: 16px; }
.vaccine-mark { background: #edf2e3; color: #638148; }
.empty-state { text-align: center; padding: 31px 20px 35px; color: var(--muted); }
.empty-state > .icon { width: 28px; height: 28px; color: #6f8d52; margin-bottom: 7px; }
.empty-state h3 { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.empty-state p { font-size: 12px; }
.empty-farm { padding: 40px; max-width: 680px; margin: 50px auto; }
.empty-farm > .icon { width: 40px; height: 40px; color: #739650; margin-bottom: 20px; }
.empty-farm p { margin-top: 16px; line-height: 1.8; color: var(--muted); }
.workspace-footer { display: flex; justify-content: space-between; gap: 16px; padding: 18px 38px 24px; color: var(--muted); font-size: 10px; }
.messages { display: grid; gap: 10px; margin-bottom: 24px; }
.message { border: 1px solid #ccdbb5; border-radius: 8px; background: #eaf2dd; padding: 14px 17px; font-size: 13px; }
.message.error { border-color: #e7bbaa; background: #fff0e9; color: #8b3626; }
.message.warning { background: #fff5df; border-color: #e8d4ab; color: #75521a; }
/* SIGN IN
   The old version was a 50/50 split with `min-height: 100vh`, a fixed
   `padding: 90px 0 200px` on the welcome copy and a 370px card centred in
   whatever was left. On a 1990px screen most of the page was empty, and on a
   short window the fixed 200px pushed the panel's own footer off the bottom:
   content stops, margin continues.

   Three changes fix it. Each column now CENTRES its own content between a
   pinned top and bottom, so the page reads as composed at any height instead
   of relying on a tall viewport. All fixed tall paddings are fluid. And past
   1360px the pair stops growing and becomes one centred card, because a
   hero split that keeps stretching is just two stretched panels. */
.login-page { min-height: 100svh; display: grid; }
.login-layout { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); width: 100%; }
.login-welcome { display: grid; grid-template-rows: auto 1fr auto; gap: clamp(28px, 5vh, 56px); overflow: hidden; padding: clamp(28px, 4vh, 48px) clamp(30px, 5vw, 80px); background: var(--forest); color: #edf3df; }
.login-welcome .brand { padding: 0; align-self: start; }
/* align-content, not padding: the copy sits in the middle of whatever space
   is left over, which is what makes a short window still look intentional. */
.welcome-copy { position: relative; align-content: center; display: grid; }
.welcome-copy .eyebrow { color: #bccf94; font-size: 10px; }
.welcome-copy h1 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(32px, min(4vw, 8vh), 62px); letter-spacing: -1.8px; margin: 14px 0 0; }
.welcome-copy > p:last-of-type { max-width: 34ch; margin-top: 22px; color: #c8d8bb; line-height: 1.8; font-size: 14px; }
/* min(..., 22vh) rather than a width alone: on a short window the leaf
   shrinks and then stops being drawn, instead of forcing the panel taller
   than the viewport and bringing the page's own scrollbar with it. */
.welcome-leaf { width: min(clamp(140px, 16vw, 210px), 22vh); height: auto; margin: clamp(12px, 3vh, 44px) 0 0 auto; color: #8ca77a; opacity: .6; }
@media (max-height: 680px) { .welcome-leaf { display: none; } }
.welcome-footer { font-size: 11px; color: #c0d1b3; align-self: end; margin: 0; }
/* margin:0 matters: the base `main` rule carries `margin: auto`, which in a
   grid item centres the ELEMENT in its track. The card then sat in the middle
   of a box that was itself floating in the middle of the row, so neither
   `place-content` nor `align-content: start` could position it. Where the
   card sits is now decided here and in the mobile override, deliberately. */
.login-main { width: 100%; min-height: auto; max-width: none; margin: 0; display: grid; place-content: center; justify-items: stretch; padding: clamp(40px, 7vh, 80px) clamp(24px, 5vw, 72px); }
.login-card { width: min(100%, 400px); margin-inline: auto; }
.login-card h2 { font-size: 35px; line-height: 1.2; letter-spacing: -1px; font-weight: 600; }
.login-intro { color: var(--muted); font-size: 13px; margin: 13px 0 30px; }
.login-card .field { margin-bottom: 20px; }
.login-card .field input { min-height: 48px; background: #fff; font-size: 16px; }
.login-card .button { width: 100%; margin-top: 4px; min-height: 48px; }
.login-card .button span { margin-left: auto; font-size: 18px; }
.login-help { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 21px; }
.login-back { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: #476636; min-height: 44px; margin-top: 25px; }
.login-back:hover { text-decoration: underline; }
.login-page .skip-link { left: 20px; }
@media (min-width: 1360px) {
  /* One centred composition rather than two panels stretched to the monitor. */
  .login-page { place-items: center; padding: clamp(24px, 4vh, 56px); background: #eef0e7; }
  .login-layout { min-height: min(760px, calc(100svh - 112px)); max-width: 1180px; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px -36px rgba(24, 61, 51, .45); }
}
@media (min-width: 1600px) { main { padding-top: 43px; }.stat { padding: 24px; }.bar-track { height: 175px; }.task-row { padding-block: 19px; } }
@media (max-width: 1220px) { .sidebar { width: 218px; padding-inline: 12px; }.workspace { margin-left: 218px; }main { padding: 30px 26px; }.topbar { padding-inline: 26px; }.stats-grid { gap: 12px; }.stat { padding: 17px 15px; }.stat h2 { font-size: 11px; gap: 6px; }.stat-value { font-size: 30px; }.stat-note { font-size: 10px; }.dashboard-grid { grid-template-columns: minmax(0, 1.25fr) minmax(285px, 1fr); gap: 18px; }.main-column, .support-column { gap: 18px; }.panel-head { padding: 19px 18px 14px; }.panel-head h2 { font-size: 15px; }.panel-head > .badge.neutral { display: none; }.chart-total, .task-list, .record-list { padding-inline: 18px; }.panel-footer { padding-inline: 18px; }.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.workspace-footer { padding-inline: 26px; } }
@media (max-width: 980px) { .sidebar { width: 200px; }.workspace { margin-left: 200px; }.brand { font-size: 23px; gap: 9px; padding-inline: 6px; }.farm-card { padding: 12px 8px; gap: 8px; }.nav-link { padding-inline: 11px; }.season-note { display: none; }.dashboard-grid { grid-template-columns: 1fr; }.support-column { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }.assistant-panel { grid-column: 1 / -1; }.insight-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 16px; }.insight { margin: 0; }.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.stat h2 { font-size: 12px; }.stat-note { font-size: 11px; }.page-heading { align-items: flex-start; gap: 16px; }.page-heading .button { padding-inline: 12px; font-size: 12px; }.page-heading > div > p:last-child { max-width: 320px; font-size: 12px; }.chart-bars { gap: 22px; }.bar-track { width: min(100%, 42px); }.workspace-footer { flex-direction: column; gap: 4px; } }
@media (max-width: 700px) {
  html { scroll-padding-top: 16px; }
  .sidebar { display: none; }
  .workspace { margin-left: 0; }
  .skip-link { left: 16px; }
  .topbar { height: 65px; padding: 0 18px; position: relative; gap: 12px; }
  .breadcrumb { gap: 10px; }
  .topbar-farm { display: none; }
  .mobile-navigation { display: block; }
  .mobile-navigation summary { display: flex; align-items: center; gap: 8px; border: 1px solid #d6dfca; border-radius: 7px; padding: 9px 10px; min-height: 42px; font-size: 12px; list-style: none; }
  .mobile-navigation summary::-webkit-details-marker { display: none; }
  .mobile-navigation summary .icon { width: 16px; height: 16px; }
  .mobile-navigation nav { position: absolute; top: 58px; right: 18px; left: 18px; z-index: 30; padding: 10px; border: 1px solid #3a5b49; border-radius: 10px; background: var(--forest); color: #e6efdd; box-shadow: 0 10px 30px #15312125; }
  .mobile-navigation nav a { display: block; padding: 12px 14px; min-height: 44px; border-radius: 6px; font-size: 13px; }
  .mobile-navigation nav a[aria-current] { background: var(--moss); color: var(--forest); font-weight: 600; }
  .mobile-navigation nav a:hover { text-decoration: underline; }
  .mobile-navigation nav p { margin: 10px 14px 3px; padding-top: 13px; border-top: 1px solid #48634e; font-size: 12px; overflow-wrap: anywhere; }
  .mobile-navigation nav small { display: block; color: #c1d1b9; margin-top: 3px; }
  .mobile-navigation .logout-form { margin: 0 14px; }
  main { padding: 25px 18px; }
  .page-heading { flex-wrap: wrap; margin-bottom: 22px; gap: 16px; }
  .page-heading h1 { font-size: 29px; }
  .page-heading > div > p:last-child { max-width: none; }
  .page-heading .button { min-height: 42px; font-size: 12px; padding: 10px 13px; }
  .eyebrow { font-size: 9px; }
  .stats-grid { gap: 10px; margin-bottom: 18px; }
  .stat { padding: 16px 13px; border-radius: 9px; }
  .stat h2 { font-size: 11px; gap: 5px; }
  .stat h2 .icon { width: 14px; height: 14px; }
  .stat-value { font-size: 30px; margin-block: 12px 9px; }
  .stat-value span { font-size: 16px; }
  .stat-note { font-size: 10px; }
  .record-panel { margin-bottom: 18px; }
  .entry-actions { grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
  .entry-actions .record-panel { margin-bottom: 0; }
  .record-panel > summary { padding: 15px 13px; gap: 11px; }
  .record-panel summary strong { font-size: 12px; }
  .record-panel summary small { font-size: 11px; max-width: 195px; }
  .record-icon { width: 34px; height: 36px; }
  .expand-label { font-size: 0; gap: 0; }
  .expand-label .icon { width: 18px; height: 18px; }
  .milk-form { padding: 18px 14px; }
  .field-grid { gap: 17px 12px; }
  .entry-actions .field-grid { gap: 14px 12px; }
  .field input, .field select, .field textarea { font-size: 16px; padding-inline: 9px; }
  .form-footer { align-items: stretch; flex-direction: column; gap: 14px; }
  .form-footer .button { width: 100%; }
  .dashboard-grid, .main-column, .support-column { gap: 18px; }
  .support-column { grid-template-columns: 1fr; }
  .assistant-panel { grid-column: auto; }
  .insight-list { display: block; padding-bottom: 5px; }
  .insight { margin-bottom: 12px; }
  .panel-head { padding: 19px 16px 15px; gap: 10px; }
  .panel-head h2 { font-size: 15px; }
  .panel-head p:not(.eyebrow) { font-size: 10px; }
  .panel-head .badge { font-size: 9px; padding-inline: 6px; }
  .chart-total { padding-inline: 16px; gap: 12px; }
  .chart-total strong { font-size: 27px; }
  .chart-total > span { font-size: 10px; }
  .milk-chart { padding-inline: 16px; }
  .chart-bars { gap: 14px; }
  .chart-amount { font-size: 10px; }
  .bar-track { height: 120px; width: min(100%, 29px); }
  .chart-data { margin-inline: 16px; }
  .chart-data > summary { min-height: 40px; }
  .panel-footer { padding: 12px 16px; }
  .task-list { padding-inline: 16px; }
  .task-row { gap: 8px; padding-block: 15px; }
  .task-detail h3 { font-size: 12px; }
  .task-detail p { font-size: 10px; }
  .task-state .badge { font-size: 9px; padding-inline: 6px; }
  .task-state .text-button { min-height: 40px; }
  .assistant-intro { padding-inline: 16px; }
  .record-list { padding-inline: 16px; }
  .record-list p { font-size: 11px; }
  .record-list h3 { font-size: 13px; }
  .text-button { min-height: 40px; }
  .workspace-footer { padding: 0 18px 23px; font-size: 9px; }
  .empty-farm { padding: 25px; margin-block: 15px; }
  /* ONE COLUMN, FORM FIRST. The split used to collapse with the decorative
     panel on top, so a worker on a phone scrolled past a headline and a leaf
     illustration to reach the thing they opened the page for. The dark panel
     keeps only the brand, as a slim header, and the copy that was in it is
     already said by the card's own heading. */
  .login-layout { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100svh; gap: 0; }
  .login-welcome { padding: 14px 18px; gap: 0; grid-template-rows: auto; align-content: center; }
  .login-welcome .brand { font-size: 21px; }
  .welcome-copy, .welcome-footer { display: none; }
  .login-main { padding: clamp(24px, 5vh, 44px) 18px 36px; align-content: start; }
  .login-card h2 { font-size: 28px; }
  .login-intro { margin-bottom: 24px; }
}
@media (max-width: 380px) { .breadcrumb > span { display: none; }.field-grid, .entry-actions .field-grid { grid-template-columns: 1fr; }.page-heading h1 { font-size: 27px; }.chart-bars { gap: 10px; }.stat h2 { font-size: 10px; }.stat h2 .icon { display: none; }.record-panel summary small { max-width: 170px; }.record-row { grid-template-columns: minmax(0, 1fr) 92px; }.priority-label { margin-left: 0; display: block; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*, *:before, *:after { transition: none !important; animation: none !important; } }

/* --- the workspace inside the CMS -----------------------------------------
   Wagtail's content column is sized for forms, so the dashboard's own grids
   inherited a form's measure and sat in the left two-thirds with a band of
   empty chrome beside them. The workspace is a DASHBOARD: it should use the
   width it is given, the way the snippet listings beside it do. */
/* Wagtail caps its content column at 1530px, which is right for a form — a
   120-character input is unreadable — and wrong for a dashboard, where the
   whole point is to see the day at once. The cap is lifted only on the page
   that holds the workspace, selected by what is INSIDE it rather than by a
   body class the host would have to remember to set. */
main.content-wrapper:has(.workspace-in-cms) { max-width: none; }

.workspace-in-cms { width: 100%; max-width: none; }
.workspace-in-cms > * { max-width: none; }
.workspace-in-cms ul, .workspace-in-cms ol { max-width: none; }