:root {
  --bg: #f4f5f7;
  --card: #fff;
  --text: #222;
  --muted: #6b7075;
  --navy: #1b4f72;
  --navy-dark: #0f3d5c;
  --border: #d6d9dc;
  --rule: #e6e8ea;
  --panel-head: #ececec;
  --error: #a42828;

  --tile-blue: #d9eef8;
  --tile-blue-hero: #b5e0f4;
  --tile-grey: #ebebeb;
  --tile-grey-hero: #d5d5d5;
  --tile-green: #e5ecd9;
  --tile-green-hero: #d3e2c0;
  --tile-alert: #f8d7dc;

  --green: #3d8b37;
  --green-dark: #2f6e2a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

main { max-width: 1200px; margin: 0 auto; padding: 1rem; }
main.full { max-width: none; padding: 1rem 1.5rem; }
main.board-page { max-width: none; padding: 1rem 30px; }

h1 { font-size: 1.3rem; font-weight: 600; color: var(--navy); margin: 0.5rem 0 1rem; }
h1.animal-title { text-align: center; white-space: nowrap; margin: 0; font-size: calc(1.3rem - 2px); }
h2 { font-size: 1rem; font-weight: 600; color: var(--navy); margin: 0 0 0.75rem; }
h3 { font-size: 0.85rem; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.03em; margin: 1rem 0 0.5rem; }
h2 + h3 { margin-top: 0; }

a { color: var(--navy); }

/* Top bar */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--navy-dark);
}
.topbar a { color: #fff; text-decoration: none; }
.topbar .brand { display: flex; align-items: center; line-height: 0; }
.topbar .brand img { height: 4.5rem; width: auto; border-radius: 6px; background: #fff; }
.login-logo { display: block; width: min(100%, 16rem); height: auto; margin: 0 auto 1.25rem; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 0.25rem; flex: 1; }
.topbar nav a, .topbar nav summary, .topbar nav button.metrix-menu, .topbar > a:not(.brand) {
  padding: 0.35rem 0.7rem; border-radius: 3px;
  text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em;
}
.topbar nav button.metrix-menu {
  border: none; background: none; color: #fff; font: inherit; cursor: pointer;
}
@keyframes metrix-listen {
  0%, 100% { background: rgba(255, 255, 255, 0.08); color: #fff; }
  50% { background: #fff; color: var(--navy); }
}
.topbar nav button.metrix-menu.listening {
  animation: metrix-listen 1.1s ease-in-out infinite;
}
.topbar nav a:hover, .topbar nav summary:hover, .topbar nav button.metrix-menu:hover, .topbar > a:not(.brand):hover { background: rgba(255, 255, 255, 0.14); }
.topbar a.active, .topbar summary.active, .topbar button.metrix-menu.active,
.topbar a.active:hover, .topbar summary.active:hover, .topbar button.metrix-menu.active:hover { background: var(--tile-blue); color: var(--navy); }
.metrix-chat {
  position: fixed; z-index: 40; right: 0; left: auto; bottom: 0; width: 16.5rem; max-width: 16.5rem;
  display: flex; flex-direction: column;
  padding: 0.75rem; background: #fff; border-radius: 0;
  border-left: 1px solid var(--border); box-shadow: none;
}
.metrix-chat.wide { width: min(36rem, 42vw); max-width: min(36rem, 42vw); }
body.metrix-docked main { margin-left: 0; margin-right: 16.5rem; max-width: none; }
body.metrix-docked.metrix-wide main { margin-left: 0; margin-right: min(36rem, 42vw); }
.metrix-chat[hidden] { display: none; }
.metrix-chat header { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex-wrap: wrap; }
.metrix-chat h2 { margin: 0; }
.metrix-head { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; flex: 1 1 100%; }
.metrix-head button { padding: 0.25rem 0.45rem; font-size: 0.75rem; }
.metrix-log { overflow: auto; flex: 1; min-height: 0; margin: 0.65rem 0; display: flex; flex-direction: column; gap: 0.85rem; }
.metrix-log p { margin: 0.2rem 0; }
.metrix-ask { font-weight: 600; }
.metrix-say { margin: 0.35rem 0; }
.metrix-command { white-space: normal; overflow-wrap: anywhere; font-size: 0.85rem; }
.metrix-when { color: var(--muted, #667085); font-size: 0.8rem; }
.metrix-chat form { display: flex; flex-direction: column; gap: 0.45rem; }
.metrix-actions { display: flex; gap: 0.45rem; }
.metrix-actions button { flex: 1; }
.metrix-chat.listening #metrix-talk { background: var(--navy); color: #fff; }
.metrix-chat input { width: 100%; min-width: 0; box-sizing: border-box; }
.nav-reports { position: relative; }
.nav-reports > summary { list-style: none; cursor: pointer; color: #fff; user-select: none; }
.nav-reports > summary::-webkit-details-marker { display: none; }
.nav-reports[open] > summary { background: rgba(255, 255, 255, 0.14); }
.nav-dropdown {
  position: absolute; top: calc(100% + 0.35rem); left: 0; z-index: 30;
  min-width: 12rem; padding: 0 0.35rem 0.35rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}
.topbar .nav-dropdown .nav-command {
  display: block; width: calc(100% + 0.7rem); margin: 0 -0.35rem 0.35rem;
  padding: 0.5rem 1.05rem; border: none; border-bottom: 1px solid var(--rule);
  border-radius: 4px 4px 0 0; background: #fff; color: var(--navy);
  font: inherit; font-size: 0.9rem; text-transform: none; letter-spacing: 0;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.topbar .nav-dropdown .nav-command:hover { background: var(--tile-blue); }
.topbar .nav-dropdown .nav-imported-open, .topbar .nav-flyout a, .topbar .nav-flyout .nav-branch {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--navy); padding: 0.4rem 0.7rem; border-radius: 3px;
  font-size: 0.9rem; text-transform: none; letter-spacing: 0; text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.topbar .nav-dropdown .nav-imported-open:hover, .topbar .nav-flyout a:hover, .topbar .nav-flyout .nav-branch:hover,
.topbar .nav-imported.open > .nav-imported-open, .topbar .nav-flyout li.has-children:hover > .nav-branch {
  background: var(--tile-blue); color: var(--navy);
}
.nav-reports:not([open]) .nav-flyout { display: none !important; }
.nav-dropdown .nav-imported:not(:first-child) { border-top: 1px solid var(--rule); margin-top: 0.15rem; padding-top: 0.15rem; }
.nav-flyout li.has-children > .nav-branch { padding-right: 1.4rem; }
.nav-flyout li.has-children > .nav-branch::after { content: "▸"; float: right; margin-right: -0.8rem; color: var(--muted); }
.nav-imported { position: relative; }
.nav-flyout {
  position: fixed; z-index: 40; display: none;
  min-width: 12rem; max-height: 70vh; overflow: auto;
  padding: 0.35rem; background: var(--card); border: 1px solid var(--border);
  border-radius: 4px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}
.nav-imported.open > .nav-flyout, .nav-flyout li.has-children:hover > .nav-flyout,
.nav-flyout li.has-children:focus-within > .nav-flyout { display: block; }
.nav-flyout ul { list-style: none; margin: 0; padding: 0; }
.nav-flyout p { margin: 0.2rem 0.5rem; }
.topbar .logout { display: flex; gap: 0.5rem; align-items: center; }
.topbar .logout .muted, .topbar .logout .link { color: #cfe3f0; }
.topbar button.batch-entry {
  display: flex; align-items: center; justify-content: center; flex: none;
  padding: 0.3rem; border: none; background: transparent; color: #fff;
  border-radius: 3px; line-height: 0;
}
.topbar button.batch-entry:hover,
.topbar button.batch-entry[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); }
dialog.batch-events {
  width: max-content;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
}
dialog.batch-sheet { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; }
dialog.batch-sheet .date-picker { display: none; }
dialog.batch-sheet #batch-date-input:focus + .date-picker,
dialog.batch-sheet .date-picker:focus-within { display: block; }
dialog.batch-sheet .stack { max-width: none; }
dialog.batch-events .event-menu {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  max-height: none;
  overflow: visible;
  align-content: start;
  justify-content: start;
}
dialog.batch-events .event-menu button { white-space: nowrap; width: auto; min-width: 7.25rem; }
dialog.batch-events .event-filter { width: auto; min-width: 12rem; }
.batch-animal-line { display: flex; align-items: flex-end; gap: 0.5rem; }
.batch-animal-line label { flex: 1; }
.batch-animal-line input { width: 100%; }
.batch-matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.batch-matches button { width: 100%; text-align: left; background: var(--tile-blue); color: var(--navy); border-color: var(--tile-blue); }
.batch-matches button:hover { background: var(--tile-blue-hero); }
.batch-animals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.batch-animals:empty { display: none; }
.batch-animals li { display: flex; align-items: center; gap: 0.5rem; }
.batch-animals .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.batch-animals .error { font-size: 0.8rem; }
#event-date-text, #batch-date-input { width: 8rem; }
.date-picker {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
  font-weight: 400;
}
.date-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; margin-bottom: 0.2rem; color: var(--navy); font-weight: 600; }
.date-picker-head button {
  width: 1.6rem; height: 1.6rem; padding: 0; line-height: 1;
  background: #fff; color: var(--navy); border: 1px solid var(--border);
}
.date-picker-head button:hover:not(:disabled) { background: var(--tile-blue); }
.date-picker-head button:disabled { opacity: 0.35; }
.date-picker-weekdays, .date-picker-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.1rem; text-align: center; }
.date-picker-weekdays span { color: var(--muted); font-size: 0.65rem; padding: 0.15rem 0; }
.date-picker-days button {
  background: #fff; color: var(--text); border: none; padding: 0.28rem 0; font-size: 0.8rem; border-radius: 3px;
}
.date-picker-days button:hover:not(:disabled) { background: var(--tile-blue); }
.date-picker-days button.is-today { box-shadow: inset 0 0 0 1px var(--navy); }
.date-picker-days button.is-selected, .date-picker-days button.is-selected:hover { background: var(--navy); color: #fff; }
.date-picker-days button:disabled { color: var(--muted); background: transparent; cursor: default; opacity: 0.4; }
.date-picker-days button.is-selected:disabled { background: var(--navy); color: #fff; opacity: 1; }

/* Settings */
.settings-switch { position: relative; }
.settings-switch > summary {
  list-style: none; cursor: pointer; display: flex; padding: 0.3rem; border-radius: 3px; color: #fff;
}
.settings-switch > summary::-webkit-details-marker { display: none; }
.settings-switch > summary:hover, .settings-switch[open] > summary { background: rgba(255, 255, 255, 0.14); }
.settings-switch > summary.active { background: var(--tile-blue); color: var(--navy); }
.topbar .settings-dropdown { left: auto; right: 0; min-width: 11rem; }
.topbar .settings-dropdown a { display: block; color: var(--navy); padding: 0.4rem 0.6rem; border-radius: 3px; font-size: 0.9rem; }
.topbar .settings-dropdown a:hover { background: var(--tile-blue); }
.topbar .settings-dropdown a.current { font-weight: 700; }
.settings-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.settings-nav {
  flex: 0 0 11rem; position: sticky; top: 1rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem;
}
.settings-nav.guide-nav {
  flex-basis: 15rem; max-height: calc(100vh - 2rem); overflow: auto;
}
.settings-nav.guide-nav a { white-space: normal; line-height: 1.25; }
.settings-nav h2 {
  margin: 0.2rem 0.5rem 0.4rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.settings-nav a { color: var(--navy); text-decoration: none; padding: 0.4rem 0.6rem; border-radius: 3px; font-size: 0.9rem; }
.settings-nav a:hover { background: var(--tile-blue); }
.settings-nav a.active { background: var(--navy); color: #fff; font-weight: 600; }
.settings-body { flex: 1; min-width: 0; }
.settings-body.library th,
.settings-body.library td { border-right: 1px solid var(--border); }
.settings-body.library th:last-child,
.settings-body.library td:last-child { border-right: none; }
.settings-body.library .table-wrap td:last-child:has(> .icon-button),
.settings-body.library .table-wrap thead th:last-child:empty { border-left: 1px solid var(--border); }
.item-form { display: grid; grid-template-columns: 8rem 12rem 20rem; gap: 0.75rem 1rem; align-items: start; }
.item-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); font-weight: 600; }
.item-form label .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.item-form .wide { grid-column: 1 / -1; }
.item-form .wide input { width: 100%; max-width: 42rem; }
.item-form input.code { font-family: Consolas, monospace; text-transform: uppercase; }
.item-form .actions { grid-column: 1 / -1; display: flex; gap: 1rem; align-items: center; }
.item-form .actions .button-link { margin-left: 0; }
.item-form [hidden] { display: none; }
.create-item-form { grid-template-columns: 10rem 20rem 18rem; }
.create-item-form select, .create-item-form label > input:not(.code) { width: 100%; box-sizing: border-box; }
.item-delete { margin-top: 0.75rem; }
table.items tr.missing td, table.items tr.missing a { color: #b42318; }
table.items td.wrap { white-space: normal; min-width: 18rem; }
table.vet-routines th { white-space: normal; }
table.items td:last-child form, table.vet-routines td:last-child form { display: inline; margin: 0; }
table.vet-routines td.wrap { white-space: normal; max-width: 18rem; }
table.treatment-list th { white-space: normal; }
table.treatment-list td.wrap { min-width: 7rem; max-width: 16rem; }
table.dictionary-lines { width: auto; }
table.dictionary-lines input { width: 7rem; }
table.dictionary-lines input.code { width: 10rem; font-family: Consolas, monospace; }
.list-tools { display: flex; gap: 1rem; align-items: center; justify-content: flex-start; margin-bottom: 0.75rem; }
.list-tools .button-link { margin-left: 0; }
.list-tools .items-filter { margin-bottom: 0; margin-left: 0; }
.add-row { margin-top: 0.5rem; }
dialog.popup { border: none; border-radius: 8px; padding: 1.25rem 1.5rem; max-width: min(56rem, 94vw); max-height: 90vh; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.3); }
table.calf-table th { white-space: normal; font-size: 0.75rem; line-height: 1.15; }
table.calf-table tfoot td { font-weight: 700; border-top: 2px solid var(--navy); }
table.event-counts th { white-space: normal; font-size: 0.75rem; line-height: 1.15; }
table.event-counts th.num, table.event-counts td.num { text-align: right; }
table.event-counts tfoot td { font-weight: 700; border-top: 2px solid var(--navy); }
table.conception th { white-space: normal; }
table.conception tr.early td { color: var(--muted); }
h2.repro-section { margin: 0.85rem 0 0.3rem; font-size: 1rem; }
.repro-pair { display: flex; gap: 1.25rem; align-items: flex-start; }
.repro-pair-preg { flex: 1 1 auto; min-width: 0; }
.repro-pair-preg table.conception { width: 100%; }
.repro-pair-speed { flex: 0 0 auto; }
.repro-pair .table-wrap { max-height: none; overflow: visible; }
.repro-pair table.conception th,
.repro-pair table.conception td {
  white-space: nowrap;
  height: 1.85rem;
  vertical-align: middle;
}
.repro-banner { margin: 0.15rem 0; font-weight: 700; white-space: pre-line; }
table.conception tfoot td { font-weight: 700; color: var(--navy); background: var(--tile-blue); border-top: 2px solid var(--navy); }
.repro-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.repro-views { display: flex; gap: 0.3rem; }
.repro-views .format-choice { padding: 0.28rem 0.7rem; }
.repro-chart { max-width: 960px; }
.repro-chart svg { display: block; width: 100%; height: auto; }
.repro-chart text { font-size: 13px; fill: var(--text, #1f2933); }
.repro-chart .repro-title { font-size: 15px; font-weight: 700; fill: var(--navy); }
.repro-chart .repro-tick { fill: var(--muted); }
.repro-chart .repro-axis-title { font-weight: 700; }
.repro-chart .repro-grid { stroke: #e3e6e9; }
.repro-chart .repro-axis { stroke: var(--muted); }
.repro-chart .repro-bar { fill: var(--green); }
.repro-chart g:hover .repro-bar { fill: var(--green-dark); }
.repro-chart .repro-bar.careful { fill: #f2c94c; }
.repro-chart g:hover .repro-bar.careful { fill: #d9ab22; }
.repro-chart .repro-value { fill: #fff; font-size: 12px; font-weight: 700; }
.repro-chart .repro-value.careful { fill: var(--text); }
.repro-chart .repro-value.outside { fill: var(--navy); stroke: #fff; stroke-width: 4px; paint-order: stroke fill; }
table.conception td.careful { font-weight: 700; cursor: help; }
table.conception td.sexed { background: #fde7ef; color: #a3185a; font-weight: 600; }
.repro-chart .repro-tick.sexed { fill: #c2185b; font-weight: 600; }
.repro-chart .repro-ci { stroke: #000; stroke-width: 2; }
.repro-chart .repro-line { fill: none; stroke: var(--navy); stroke-width: 2.25; }
.repro-chart .repro-line.first { stroke: var(--green); }
.repro-chart .repro-line.repeat { stroke: #c47b2b; }
.repro-chart .repro-ts-halo { fill: none; stroke: #fff; stroke-width: 5; }
.repro-chart .repro-dot { fill: var(--navy); }
.repro-chart .repro-dot.first { fill: var(--green); }
.repro-chart .repro-dot.repeat { fill: #c47b2b; }
.repro-chart .repro-dot.ts-open { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.repro-chart .repro-hit { fill: transparent; }
.repro-key { margin: 0.3rem 0 0; font-size: 0.85rem; }
dialog#event-select { width: fit-content; max-width: min(42rem, calc(100vw - 2rem)); max-height: calc(100vh - 1rem); overflow: auto; }
dialog#event-select form { width: max-content; max-width: 100%; }
dialog#event-select input[type="search"] { width: 100%; margin: 0.35rem 0 0.55rem; }
dialog#date-range { width: min(36rem, calc(100vw - 2rem)); }
.date-range-layout { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.date-range-fields { display: flex; flex-direction: column; gap: 0.55rem; }
.date-range-fields label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); font-weight: 600; }
.date-range-fields input { text-transform: none; letter-spacing: 0; font-weight: 400; width: 7rem; }
.date-quick { display: flex; flex-direction: column; gap: 0.4rem; }
.date-quick button {
  border-radius: 999px; padding: 0.38rem 0.95rem; background: #e8eef2; color: var(--navy);
  border: 1px solid #c5cdd4; font-weight: 600; text-align: left; white-space: nowrap;
}
.date-quick button:hover { background: #d5e3ee; }
dialog.popup::backdrop { background: rgba(15, 23, 42, 0.45); }
dialog.popup h2 { margin: 0 0 0.75rem; color: var(--navy); }
.item-form > h2, .item-form > .error { grid-column: 1 / -1; }
label.field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); font-weight: 600; }
label.field select { text-transform: none; letter-spacing: 0; font-weight: 400; max-width: 24rem; }
form > .actions { display: flex; gap: 1rem; align-items: center; margin-top: 0.75rem; }
form > .actions .button-link { margin-left: 0; }
form > .actions[hidden] { display: none; }
/* Editors stay out of the row. Edit opens them in dialog.row-editor. */
table.edit-rows .editor { display: none; }
button.icon-button:disabled { opacity: 0.35; cursor: not-allowed; }
table.medicine-table th { white-space: normal; }
table.medicine-table td.wrap { min-width: 11rem; max-width: 18rem; }
table.medicine-table input[name="name"] { width: 100%; box-sizing: border-box; }
table.medicine-table input, table.medicine-table select { padding: 0.25rem 0.35rem; }
table.pen-table td.wrap { max-width: 16rem; }
table.sires th { white-space: normal; }
table.sires .semen-choices label { display: block; margin: 0.2rem 0; font-weight: normal; text-transform: none; letter-spacing: 0; }
table.technician-list td.wrap { max-width: 9rem; }
table.breeding-code-list td.wrap { max-width: 14rem; }
.tech-sides {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}
.tech-sides > .card { width: max-content; max-width: 100%; margin-bottom: 0; }
.tech-sides > .card > .muted { max-width: 16rem; }
table.task-list td.wrap { min-width: 9rem; max-width: 15rem; }
table.task-list th { white-space: normal; }
table.task-list td.wrap.task-last { min-width: 6rem; max-width: 8rem; line-height: 1.3; }
.notice.paused { background: #fffaeb; border-color: #fedf89; color: #93370d; }
.task-status { font-weight: 600; }
.task-status.ran { color: #067647; }
.task-status.partial, .task-status.skipped { color: #93370d; }
.task-status.failed { color: var(--error); }
table.task-runs td.wrap { min-width: 14rem; max-width: 34rem; }
table.task-runs th { white-space: normal; }
ul.task-steps { margin: 0.35rem 0 0; padding-left: 1.1rem; }
ul.task-steps li.skipped { color: var(--muted, #667085); }
ul.task-steps li.failed { color: var(--error); }
.pen-types label { display: inline-block; white-space: nowrap; margin-right: 0.6rem; font-weight: normal; }
.settings-body > h1:first-child { margin-top: 0; }
.guide section { margin: 0 0 1.25rem; scroll-margin-top: 1rem; }
table.help-list td.wrap { white-space: normal; max-width: 22rem; overflow-wrap: anywhere; }
table.help-list th { white-space: normal; }
.guide h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.guide p { margin: 0.35rem 0; max-width: 46rem; }
.guide pre.code {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.5rem 0;
  padding: 0.55rem 0.75rem; background: var(--panel-head); border-radius: 4px;
  max-width: 46rem;
}
.items-filter { margin-bottom: 0.75rem; width: 20rem; max-width: 100%; }
table.items td.num, table.items th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.bulls td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cow-card .withheld { color: var(--error); font-weight: 600; }
.sire-world { border-bottom: 1px dotted currentColor; cursor: help; }
.notice { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; border-radius: 6px; padding: 0.5rem 0.75rem; }
table.items td.code { font-family: Consolas, monospace; }
.check-list { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin-bottom: 0.75rem; }
.check-list label { display: flex; gap: 0.35rem; align-items: center; }
table.routine-lines { width: auto; }
.event-picker { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.event-dropdown { position: relative; }
.event-dropdown > summary { list-style: none; cursor: pointer; min-width: 13rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: 3px; background: #fff; }
.event-dropdown > summary::-webkit-details-marker { display: none; }
.event-dropdown > summary::after { content: " ▾"; float: right; }
.event-options { position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; min-width: 13rem; max-height: 18rem; overflow: auto; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0.5rem; background: #fff; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15); }
.event-options input[type="search"] { margin-bottom: 0.25rem; }
.event-options label { display: flex; gap: 0.4rem; align-items: center; white-space: nowrap; }
.event-options label[hidden] { display: none; }
.event-number { display: inline-block; min-width: 1.6rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.chosen-events-box { min-width: 13rem; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; }
.chosen-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.chosen-events li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.chosen-events .icon-button { width: 1.15rem; height: 1.15rem; }
/* Treatment edit page: small enough to fit on one screen */
.treatment-form { font-size: 0.85rem; padding: 0.75rem 1rem; }
.treatment-form input, .treatment-form select { padding: 0.25rem 0.4rem; }
.treatment-form h2 { font-size: 0.95rem; margin: 0.75rem 0 0.35rem; }
.treatment-form p { margin: 0.3rem 0; }
.treatment-form select[name="medicine"] { max-width: 17rem; }
.treatment-form .check-list { margin: 0.25rem 0 0; }
.treatment-form form > .actions { margin-top: 0.6rem; }
.form-row { display: flex; flex-wrap: wrap; gap: 0 1.25rem; align-items: flex-start; }
.form-row > .field { margin-bottom: 0.4rem; }
.form-row > div.field { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); font-weight: 600; }
.form-row > div.field label { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); font-size: 0.85rem; }
td.dose-setting { white-space: nowrap; }
.growth-charts { display: flex; flex-wrap: wrap; gap: 1rem; }
.growth-charts > .card { flex: 1 1 26rem; }
.growth-chart { width: 100%; max-width: 34rem; display: block; margin-bottom: 0.75rem; }
.growth-chart text { font-size: 11px; fill: var(--muted); }
.growth-chart .grid { stroke: var(--rule); }
.growth-chart .axis { stroke: var(--muted); }
.growth-chart .curve { fill: none; stroke: var(--navy); stroke-width: 2.5; }
.growth-chart .dot { fill: var(--green); }
.model-section { margin-top: 1.75rem; }
.model-pair { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: flex-start; }
.model-pair > div { flex: 1 1 18rem; min-width: 0; }
.model-caption { color: var(--muted); font-size: 0.9rem; margin: 0.35rem 0 0.75rem; }
.model-formula { font-family: Consolas, ui-monospace, monospace; margin: 0.35rem 0; }
.model-chart { width: 100%; max-width: 40rem; height: auto; display: block; margin: 0.25rem 0 0.35rem; }
.model-chart text { font-size: 11px; fill: var(--muted); }
.model-chart .grid { stroke: var(--rule); }
.model-chart .axis { stroke: var(--muted); }
.model-chart .axis-title { fill: var(--text); font-weight: 600; }
.model-chart .legend { fill: var(--text); font-size: 12px; }
.model-chart .curve { fill: none; stroke-width: 2.25; }
.model-chart .curve.score { stroke: var(--navy); }
.model-chart .curve.window { stroke: #c47b2b; }
.model-chart .baseline { stroke: var(--muted); stroke-dasharray: 4 3; }
.model-chart .bar.raw { fill: #c47b2b; }
.model-chart .bar.adj { fill: var(--navy); }
.model-chart .bar-value { fill: var(--navy); font-weight: 700; font-size: 12px; }
/* Farm switcher */
.farm-switch { position: relative; }
.farm-switch > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  color: #fff;
  font-size: 0.9rem;
  user-select: none;
}
.farm-switch > summary::-webkit-details-marker { display: none; }
.farm-switch > summary::after { content: " ▾"; font-size: 0.75rem; }
.farm-switch > summary:hover, .farm-switch[open] > summary { background: rgba(255, 255, 255, 0.14); }
.farm-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 20;
  min-width: 14rem;
  padding: 0.35rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.farm-menu button, .farm-menu .new-farm {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--navy);
  padding: 0.4rem 0.6rem;
  border-radius: 3px;
  font-size: 0.9rem;
}
.farm-menu button:hover, .farm-menu .new-farm:hover { background: var(--tile-blue); }
.farm-menu button.current { font-weight: 700; }
.topbar .farm-menu .new-farm { display: flex; color: var(--green-dark); border-top: 1px solid var(--rule); border-radius: 0 0 3px 3px; margin-top: 0.15rem; }
.farm-menu .etag-format {
  border-top: 1px solid var(--rule);
  margin-top: 0.15rem;
  padding: 0.45rem 0.6rem 0.2rem;
  color: var(--navy);
  font-size: 0.8rem;
}
.farm-menu .etag-format select { width: 100%; margin-top: 0.2rem; }

/* Create-farm pop-up */
dialog.modal { border: none; border-radius: 6px; padding: 1.25rem 1.5rem; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.3); }
dialog.modal::backdrop { background: rgba(15, 23, 42, 0.45); }
dialog.command-bar {
  width: 70vw; max-width: 70vw; height: fit-content; margin: 0; padding: 0.85rem 1rem;
  border: none; border-radius: 8px; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.3);
  position: fixed; inset: auto; top: 3.25rem; left: 15vw;
}
dialog.command-bar::backdrop { background: rgba(15, 23, 42, 0.35); }
dialog.command-bar form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
dialog.command-bar input[name="q"] {
  flex: 1 1 12rem; min-width: 0; font-family: Consolas, monospace; text-transform: uppercase;
  font-size: 1.05rem; padding: 0.55rem 0.7rem;
}
dialog.command-bar .command-miss { margin: 0.65rem 0 0; }
dialog.command-bar .command-miss.command-note { color: #067647; }
dialog.command-bar .command-miss:focus { outline: 2px solid var(--navy); outline-offset: 3px; }
.farm-form { min-width: 22rem; }
.farm-form h2 { margin: 0; }
.farm-start { border: 1px solid var(--border); border-radius: 4px; padding: 0.6rem 0.75rem; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.stack .farm-start .choice { flex-direction: row; align-items: center; gap: 0.5rem; }
.farm-start .overwrite-note { margin: 0; }
.form-actions { display: flex; align-items: center; gap: 1rem; }

/* Panels: a card whose first h2 becomes a grey title bar */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.card > h2:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: -1rem -1.25rem 1rem;
  padding: 0.6rem 1.25rem;
  background: var(--panel-head);
  border-bottom: 1px solid var(--border);
  border-radius: 4px 4px 0 0;
  font-size: 0.95rem;
  font-weight: 500;
}
.card > h2:first-child::before {
  content: "";
  width: 0.95rem;
  height: 0.95rem;
  background: var(--navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='1.5' y='1.5' width='13' height='13' rx='1.5'/%3E%3Cpath d='M1.5 6h13M6 6v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='1.5' y='1.5' width='13' height='13' rx='1.5'/%3E%3Cpath d='M1.5 6h13M6 6v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.panel-foot {
  margin: 1rem -1.25rem -1rem;
  padding: 0.5rem 1.25rem;
  background: var(--panel-head);
  border-top: 1px solid var(--border);
  border-radius: 0 0 4px 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.card.narrow { max-width: 380px; margin: 3rem auto; }

/* Tiles: flat pale blocks, navy uppercase label left, figure right */
.tile-groups { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; }
.tile-group { flex: 1 1 22rem; display: flex; flex-direction: column; gap: 0.5rem; }
.tile-group.wide { flex: 2 1 34rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.5rem; }
.tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  border-radius: 3px;
  background: var(--tile-blue);
  color: var(--text);
  text-decoration: none;
}
a.tile:hover { filter: brightness(0.96); }
.tile-label {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.tile-label small { display: block; margin-top: 0.15rem; font-size: 0.68rem; color: var(--muted); letter-spacing: 0.03em; }
.tile-value { font-size: 1.3rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile.hero {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.15rem;
  min-height: 4.5rem;
  text-align: right;
  background: var(--tile-blue-hero);
}
.tile.hero .tile-value { font-size: 1.6rem; }
.tile.grey { background: var(--tile-grey); }
.tile.grey.hero { background: var(--tile-grey-hero); }
.tile.green { background: var(--tile-green); }
.tile.green.hero { background: var(--tile-green-hero); }
.tile.alert { background: var(--tile-alert); }

/* Customisable widget grid: 12 columns, widgets span w columns and h rows */
.dashboard-tools { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; }
.dashboard-tools .customise-actions:not([hidden]),
.dashboard-tools .shape-actions:not([hidden]) { display: inline-flex; gap: 0.75rem; align-items: center; }
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; position: relative; --board-gap: 1rem; --group-slot: 1rem; }
.board .widget-group { position: relative; min-width: 0; margin-bottom: 0; box-sizing: border-box; }
.widget-group[data-x] {
  position: absolute;
  margin: 0;
  left: calc((var(--x) - 1) * ((100% - 11 * var(--board-gap)) / 12 + var(--board-gap)));
  width: calc(var(--w) * (100% - 11 * var(--board-gap)) / 12 + (var(--w) - 1) * var(--board-gap));
  top: calc((var(--y) - 1) * var(--group-slot));
}
.group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin: -1rem -1.25rem 1rem; padding: 0.45rem 1.25rem; min-height: 1.5rem;
  background: var(--panel-head); border-bottom: 1px solid var(--border); border-radius: 4px 4px 0 0;
}
.group-title { margin: 0; font-size: 0.95rem; font-weight: 500; min-width: 4rem; }
.group-tools { display: none; gap: 0.35rem; align-items: center; }
.board-foot { margin: 1rem 0 0; border: 1px solid var(--border); border-radius: 4px; }
.dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 2.6rem; gap: 0.5rem; min-height: 2.6rem; }
.widget { position: relative; min-width: 0; container-type: size; }
.widget-figures { display: flex; gap: 0.35rem; height: 100%; overflow: hidden; }
.widget-figures > .tile { flex: 1 1 0; min-width: 0; min-height: 0; box-sizing: border-box; overflow: hidden; }
@container (orientation: portrait) {
  .widget-figures { flex-direction: column; }
}
@container (max-width: 13rem) {
  .widget-figures > .tile {
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 0.2rem; padding: 0.4rem 0.6rem; text-align: left;
  }
}
.widget-figures > .tile.grouped {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 0.35rem; padding: 0.5rem 0.75rem; text-align: left;
}
.widget-figures > .tile.charted {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 0.25rem; padding: 0.5rem 0.6rem; text-align: left;
  background: #fff; border: 1px solid #e2e8f0; cursor: zoom-in;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.widget-figures > .tile.charted:hover { border-color: #cbd5e1; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.widget-figures > .tile.charted .tile-label { color: #334155; }
.customising .tile.charted { cursor: inherit; }
.report-chart { height: min(70vh, 40rem); margin-top: 0.5rem; }
.chart-panel + .chart-panel { margin-top: 1.5rem; }
.chart-panel h2 { margin-bottom: 0.25rem; }

/* Charts drawn by static/charts.js */
.chart-box {
  display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-height: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; font-size: 0.75rem; color: #475569; }
.chart-legend:empty { display: none; }
.chart-legend-name { font-weight: 600; color: #334155; margin-right: 0.2rem; }
.chart-key {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.5rem;
  border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc;
  color: inherit; font: inherit; line-height: 1.4;
}
button.chart-key { cursor: pointer; }
button.chart-key:hover { background: #f1f5f9; border-color: #cbd5e1; }
.chart-key.off { opacity: 0.4; text-decoration: line-through; }
.chart-swatch { width: 0.5rem; height: 0.5rem; border-radius: 1px; flex: none; }
.chart-scale-bar { width: 7rem; height: 0.5rem; border-radius: 999px; }
.chart-scale-end { font-variant-numeric: tabular-nums; }
.chart-analysis { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.6rem; font-weight: 600; color: #334155; }
.chart-analysis select { padding: 0.15rem 0.4rem; font-size: 0.8rem; border-radius: 999px; border-color: #e2e8f0; background: #f8fafc; }
.chart-stats { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.75rem; color: #334155; font-variant-numeric: tabular-nums; }
.chart-stats:empty { display: none; }
.chart-stat { display: inline-flex; align-items: center; gap: 0.35rem; }
.chart-stat-line { width: 1rem; height: 3px; border-radius: 2px; }
.chart-trend { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.chart-trend-halo { fill: none; stroke: #fff; stroke-width: 5.5; stroke-opacity: 0.9; stroke-linejoin: round; pointer-events: none; }
.chart-box.analysing .chart-dots rect { fill-opacity: 0.35; }
.chart-guide { stroke: #64748b; stroke-dasharray: 3 3; pointer-events: none; }
.chart-marker { stroke: #fff; stroke-width: 2; pointer-events: none; }
.chart-tip-head { font-weight: 600; margin-bottom: 0.15rem; }
.chart-tip-row { display: flex; align-items: center; gap: 0.4rem; font-variant-numeric: tabular-nums; }
button.chart-filter-toggle, button.chart-view-toggle { padding: 0.2rem 0.7rem; font-size: 0.8rem; border-radius: 999px; margin-left: 0.4rem; }
button.chart-filter-toggle.active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.chart-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.chart-filter[hidden] { display: none; }
.chart-filter-for { font-weight: 600; color: #334155; font-family: ui-monospace, Consolas, monospace; }
.chart-filter input { flex: 1 1 16rem; max-width: 28rem; padding: 0.25rem 0.5rem; font-size: 0.85rem; text-transform: uppercase; }
.chart-filter button { padding: 0.25rem 0.7rem; font-size: 0.8rem; }
.chart-filter-error { font-size: 0.8rem; }
.chart-filter-error[hidden] { display: none; }
button.chart-reset { margin-left: auto; padding: 0.2rem 0.7rem; font-size: 0.8rem; border-radius: 999px; }
.chart-plot { position: relative; flex: 1; min-height: 0; }
.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; user-select: none; }
.chart-grid { stroke: #e2e8f0; }
.chart-grid-minor { stroke: #f1f5f9; }
.chart-axis { stroke: #cbd5e1; }
.chart-tick-mark { stroke: #cbd5e1; }
.chart-tick { fill: #64748b; font-variant-numeric: tabular-nums; }
.chart-title { fill: #334155; font-size: 12px; font-weight: 600; }
.chart-dots rect { fill-opacity: 1; }
.chart-bars rect { fill-opacity: 0.85; }
.chart-bars rect.chart-stack { stroke: #fff; stroke-width: 0.5; }
.chart-bars rect.chart-cohort-rest { fill: #16a34a; fill-opacity: 0.3; }
.chart-swatch.chart-cohort-rest { background: #16a34a; opacity: 0.3; }
.chart-incidence-name { margin-left: 0.6rem; }
.chart-incidence { font-variant-numeric: tabular-nums; }
.chart-table { flex: 1; min-height: 0; overflow: auto; }
.chart-table table { width: auto; font-size: 0.85rem; }
.chart-table thead { position: sticky; top: 0; z-index: 1; }
.chart-table-group { text-align: center; border-bottom: 1px solid var(--border); }
.chart-table th, .chart-table td { border-right: 1px solid var(--border); }
.chart-table tr > :first-child { border-left: 1px solid var(--border); }
.chart-ring { fill: none; stroke: #0f172a; stroke-width: 1.5; pointer-events: none; }
.chart-zoom { fill: rgba(59, 130, 246, 0.1); stroke: #3b82f6; stroke-dasharray: 4 3; pointer-events: none; }
.chart-box.interactive .chart-svg { cursor: crosshair; }
.chart-tip {
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
  background: #0f172a; color: #f8fafc; font-size: 0.75rem; padding: 0.35rem 0.6rem;
  border-radius: 6px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}
.chart-tip[hidden] { display: none; }
dialog.chart-modal.chart-popup {
  width: calc(100vw - 2rem); height: calc(100vh - 2rem); max-width: none; max-height: none; box-sizing: border-box;
}
.chart-modal-link {
  padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 3px;
  background: #fff; color: var(--navy); text-decoration: none;
}
.chart-modal-link:hover { background: #f3f4f6; }
.tile.grouped a.tile-label { text-decoration: none; }
.tile.grouped a.tile-label:hover { text-decoration: underline; }
.tile-table-wrap {
  flex: 1; min-height: 0; overflow: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.tile-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  color: #1e293b;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.tile-table th, .tile-table td,
.tile-table thead th, .tile-table thead th:first-child,
.tile-table td:first-child, .tile-table tfoot th {
  text-align: left;
  white-space: nowrap;
  padding: 0.42rem 0.7rem;
  line-height: 1.3;
  border: 0;
  border-bottom: 1px solid #eef2f6;
  box-shadow: none;
  background: #fff;
}
.tile-table .num { text-align: right; }
.tile-table caption {
  caption-side: top;
  text-align: left;
  padding: 0.5rem 0.7rem 0.15rem;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  background: #fff;
}
.tile-table thead { background: #f8fafc; }
.tile-table thead th, .tile-table thead th:first-child {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.045em;
  color: #64748b;
  text-transform: uppercase;
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
  cursor: pointer;
}
.tile-table thead th:hover { background: #f1f5f9; }
.tile-table tbody tr:nth-child(even) td { background: #fafbfc; }
.tile-table tbody tr:hover td { background: #f1f5f9; }
.tile-table tbody tr:last-child td { border-bottom: 0; }
.tile-table tfoot th, .tile-table tfoot th:first-child {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 0;
  color: #0f172a;
  font-weight: 650;
}
.widget-resize, .group-resize, .widget > .icon-button { display: none; }
.customising .group-tools { display: inline-flex; }
.group-save { padding: 0.15rem 0.7rem; font-size: 0.8rem; }
.customising .group-head { cursor: move; }
.customising .group-title { outline: 1px dashed var(--border); padding: 0 0.3rem; cursor: text; }
.customising .widget-group { outline: 2px dashed var(--border); }
.customising .widget { outline: 2px dashed var(--navy); outline-offset: 2px; cursor: grab; touch-action: none; user-select: none; }
.customising .widget.dragging { cursor: grabbing; z-index: 2; }
.customising .widget-figures { pointer-events: none; }
.customising .dashboard:empty { outline: 1px dashed var(--border); }
.customising .dragging { opacity: 0.4; }
.customising .widget > .icon-button { display: inline-flex; position: absolute; top: -0.6rem; z-index: 1; width: 1.35rem; height: 1.35rem; }
.customising .widget > .icon-button.delete { right: -0.6rem; }
.customising .widget > .icon-button.copy { right: 1rem; }
.customising .widget-resize, .customising .group-resize,
.widget.shaping .widget-resize, .widget-group.shaping > .group-resize {
  display: block; position: absolute; right: 0; bottom: 0; width: 1rem; height: 1rem;
  cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, var(--navy) 50%);
}
.widget.shaping {
  outline: 2px dashed var(--navy); outline-offset: 2px; cursor: grab;
  touch-action: none; user-select: none; z-index: 1;
}
.widget.shaping.dragging { cursor: grabbing; }
.widget.shaping .widget-figures { pointer-events: none; }
.widget-group.shaping { outline: 2px dashed var(--border); }
.widget-group.shaping .group-head { cursor: move; }
.group-edit input { width: 100%; box-sizing: border-box; }
#widget-editor.popup { width: min(90rem, 96vw); max-width: min(90rem, 96vw); }
.widget-form { grid-template-columns: 14rem minmax(0, 1fr); width: 100%; }
.widget-form input, .widget-form select { width: 100%; box-sizing: border-box; }
.widget-figure .command-field { grid-column: 1 / -1; flex-wrap: wrap; }
.widget-figure .command-field label { flex: 1 1 20rem; min-width: min(100%, 20rem); }
.widget-figure .command-field input {
  font-size: 1.35rem;
  line-height: 1.35;
  padding: 0.9rem 1rem;
  min-height: 4.25rem;
}
.widget-figure-list { display: flex; flex-direction: column; gap: 0.6rem; max-height: 60vh; overflow: auto; }
.widget-figure {
  display: grid; grid-template-columns: auto 1fr 1fr 8rem auto; gap: 0.5rem 0.75rem; align-items: end;
  margin: 0; padding: 0.6rem 0.75rem 0.6rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--card);
}
.widget-figure > .icon-button { margin-bottom: 0.3rem; }
.widget-figure > .figure-grip { grid-row: 1; align-self: center; margin: 0; cursor: grab; touch-action: none; }
.widget-figure.dragging { opacity: 0.6; outline: 2px dashed var(--navy); }
.widget-figure.dragging .figure-grip { cursor: grabbing; }
@media (max-width: 700px) {
  .board, .dashboard { grid-template-columns: 1fr; }
  .board { height: auto !important; }
  .widget, .board .widget-group { grid-column: 1 / -1 !important; }
  .widget-group[data-x] { position: static !important; left: auto !important; top: auto !important; width: auto !important; }
  .widget { grid-row: auto / span var(--h, 2) !important; }
  .widget-form { grid-template-columns: 1fr; }
  .widget-figure { grid-template-columns: auto 1fr; }
  .widget-figure > label { grid-column: 2; }
  .widget-figure > .command-field { grid-column: 1 / -1; }
  .widget-figure > .figure-grip { grid-row: 1 / span 4; }
}
.report-runs .code { word-break: break-word; }
.report-count { margin: 0.75rem 0 0.25rem; }
.report-pages { display: flex; gap: 1rem; margin: 0.35rem 0 0.6rem; }
.report-step { font-size: 1rem; font-family: Consolas, monospace; margin: 1.5rem 0 0.25rem; word-break: break-word; }
.report-grid-title { font-size: 1rem; margin: 1.25rem 0 0.35rem; }
table.report caption { caption-side: top; text-align: left; font-weight: 650; padding: 0 0 0.2rem; }
.tile-grid + .tile-grid { margin-top: 0.65rem; }
.tile-grid-title { margin: 0 0 0.15rem; font-size: 0.75rem; font-weight: 650; }
.change-animals summary { cursor: pointer; margin-bottom: 0.25rem; }
.change-confirm { margin-top: 1.25rem; padding: 0.75rem; border: 1px solid #fedf89; background: #fffaeb; border-radius: 6px; }
.change-confirm p { margin: 0 0 0.5rem; }
.animal-picker { width: min(28rem, 94vw); }
.animal-picker [hidden] { display: none !important; }
.animal-picker .actions { flex-wrap: wrap; }
.command-prompts { width: min(24rem, 94vw); }
.command-prompts label { display: block; margin-bottom: 0.6rem; }
.command-prompts .actions { flex-wrap: wrap; }
.picked-animals { list-style: none; margin: 0.5rem 0 0; padding: 0.4rem; min-height: 2.5rem; max-height: 14rem; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 0.35rem; align-content: flex-start; }
.picked-animals li { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.3rem 0.15rem 0.5rem;
  background: #f1f5f9; border-radius: 999px; }
.command-field { display: flex; gap: 0.75rem; align-items: end; }
.command-field label { flex: 1; }
.command-field button { white-space: nowrap; }

/* Command builder */
.builder-form { display: flex; flex-direction: column; gap: 0.75rem; width: min(40rem, 100%); max-width: 40rem; }
.builder-form.sheet-open { width: 100%; max-width: none; height: 100%; min-height: 0; }
.builder-form.chart-open { max-width: none; }
dialog#command-builder { width: fit-content; max-width: min(52rem, 94vw); }
dialog#command-builder:has(.sheet-open) {
  display: flex; flex-direction: column;
  width: min(52rem, 92vw); max-width: 92vw; height: min(36rem, 82vh); max-height: 82vh;
}
dialog#command-builder:has(.chart-open) {
  display: flex; flex-direction: column;
  inset: 0; height: fit-content; margin: auto;
  width: min(58rem, 94vw); max-width: 94vw; max-height: 90vh;
}
.builder-form.chart-open { width: 100%; height: auto; }
.builder-form.chart-open [data-builder-board] { flex: none; }
.builder-form.chart-open .item-rail { width: 16rem; height: 22rem; }
.builder-form.chart-open .plot {
  grid-template-columns: 2.6rem minmax(0, 1fr);
  grid-template-rows: auto 14rem auto;
  gap: 0.4rem;
  min-height: 0;
  padding: 0.55rem;
}
.builder-form.chart-open .plot-svg { height: 14rem; min-height: 0; }
.builder-form.chart-open .plot-drop { min-height: 2rem; padding: 0.2rem 0.4rem; }
.builder-form.chart-open .plot-y { min-height: 0; min-width: 0; padding: 0.25rem 0.08rem; }
.builder-form.chart-open .plot-stage { gap: 0.5rem; }
.builder-form.sheet-open [data-builder-work] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.builder-form fieldset { border: 1px solid var(--border); border-radius: 6px; margin: 0; padding: 0.5rem 0.75rem 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; min-width: 0; max-width: 100%; }
.builder-form fieldset.filter-board { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.builder-form fieldset[hidden] { display: none; }
.builder-form legend { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy); font-weight: 600; padding: 0 0.25rem; }
.builder-verbs, .builder-sort { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.group-sheet { flex: 1 0 100%; display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; max-width: 100%; }
.group-choices { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.group-each { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; font-size: 0.85rem; font-weight: 650; color: var(--navy); }
.group-each input { width: 100%; min-width: 0; box-sizing: border-box; font-family: Consolas, monospace; font-size: 1rem; padding: 0.4rem 0.55rem; text-transform: uppercase; }
.group-each input::placeholder { text-transform: none; }
.group-boards { display: flex; flex-direction: column; gap: 0.75rem; max-height: 18rem; max-width: 100%; overflow: auto; }
.group-caption { margin: 0; font-weight: 650; color: var(--navy); }
.group-caption:empty { display: none; }
table.group-template { width: 100%; border-collapse: collapse; background: #fff; }
table.group-template th, table.group-template td { border: 1px solid var(--border); padding: 0.4rem 0.5rem; font-weight: 400; text-align: left; vertical-align: bottom; white-space: normal; line-height: 1.3; }
table.group-template th { background: #f4f8fc; }
table.group-template .slot-label { display: block; margin-bottom: 0.25rem; font-size: 0.72rem; font-weight: 650; color: var(--navy); text-transform: none; letter-spacing: 0; }
table.group-template [data-by-slot] { display: block; }
table.group-template td { color: var(--muted); font-size: 0.85rem; vertical-align: middle; }
table.group-template td.group-figure { min-width: 3.2rem; }
.table-board-bar { display: flex; gap: 0.5rem; align-items: center; }
[data-builder-board] { display: flex; gap: 1rem; flex: 1; min-height: 0; align-items: stretch; }
.table-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.table-stage .builder-note { flex: 0 0 auto; }
.item-rail {
  width: min(22rem, 34%); flex: none; display: flex; flex-direction: column; gap: 0.4rem;
  min-height: 0; border-left: 1px solid var(--border); padding-left: 0.75rem;
}
.item-rail input { width: 100%; box-sizing: border-box; font-family: Consolas, monospace; text-transform: uppercase; padding: 0.4rem 0.55rem; }
.item-rail input::placeholder { text-transform: none; }
.item-rail-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; min-height: 0; }
.item-rail-list li { display: flex; gap: 0.55rem; align-items: baseline; padding: 0.28rem 0.2rem; cursor: grab; border-bottom: 1px solid var(--rule); }
.item-rail-list li.used { opacity: 0.4; }
.plot-stage { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.plot-stage[hidden] { display: none; }
.plot {
  display: grid;
  grid-template-columns: 6.5rem minmax(12rem, 1fr);
  grid-template-rows: auto minmax(8rem, 1fr) auto;
  gap: 0.45rem;
  min-height: 16rem;
  padding: 0.6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.plot-svg { grid-column: 2; grid-row: 2; width: 100%; height: 100%; min-height: 8rem; background: #f4f8fb; border-radius: 10px; }
.plot-drop {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 2.6rem; padding: 0.35rem 0.5rem;
  border: 1.5px dashed #c5d3de; border-radius: 10px;
  background: #f8fafc; color: var(--muted); text-align: center;
}
.plot-y { grid-row: 1 / span 3; writing-mode: vertical-rl; transform: rotate(180deg); }
.plot-x { grid-column: 2; grid-row: 3; }
.plot-legend { grid-column: 2; grid-row: 1; }
.plot-drop.filled { border-style: solid; border-color: #c5d7e4; background: #f3f8fb; color: var(--navy); }
.plot-drop.next {
  border-color: var(--navy); border-style: dashed;
  background: var(--tile-blue);
  box-shadow: 0 0 0 2px rgba(27, 79, 114, 0.28);
}
.plot-drop.next .plot-k { color: var(--navy); }
.plot-drop.plot-over { outline: 2px solid var(--navy); outline-offset: -2px; }
.plot-k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.plot-drop strong { font-family: Consolas, monospace; font-size: 0.95rem; }
.plot-drop .icon-button { flex: none; }
.plot-y .icon-button { transform: rotate(180deg); }
.plot-extras { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plot-extras:empty { display: none; }
.rail-code { flex: none; font-family: Consolas, monospace; font-weight: 650; color: var(--navy); }
.rail-about { min-width: 0; color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-builder-board] .group-boards { flex: 0 1 auto; max-height: none; align-items: flex-start; min-height: 0; overflow: auto; }
table.sheet-table { width: auto; max-width: none; height: auto; table-layout: fixed; }
table.sheet-table tfoot th { font-weight: 700; }
table.sheet-table th, table.sheet-table td {
  padding: 0; height: 46.8px; line-height: 46.8px; overflow: hidden; vertical-align: middle; border-bottom: 0;
}
table.sheet-table thead th { height: 54.6px; line-height: 1; }
table.sheet-table thead th.sheet-col,
table.sheet-table thead th.sheet-rows { text-align: center; text-transform: none; letter-spacing: 0; }
table.sheet-table thead th.sheet-col { cursor: pointer; }
table.sheet-table .builder-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: 100%; height: 100%; gap: 0.2rem; padding: 0 0.2rem 0.35rem; border: 0; border-radius: 0;
  background: transparent; font-family: inherit; cursor: grab;
}
table.sheet-table .builder-chip[data-pending] { justify-content: center; padding: 0; }
table.sheet-table .builder-fn {
  display: block; font-size: 0.68rem; font-weight: 650; line-height: 1; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
table.sheet-table .builder-chip[data-pending] .builder-fn,
table.sheet-table .builder-chip .icon-button,
table.sheet-table .builder-part { display: none; }
table.sheet-table .builder-grip, table.sheet-table .builder-desc { display: none; }
table.sheet-table .builder-code { color: inherit; font-size: 0.95rem; font-weight: 700; line-height: 1; }
table.sheet-table th.sheet-over { outline: 2px solid var(--navy); outline-offset: -2px; }
.sheet-modal {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.45);
}
.sheet-modal-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  min-width: 18rem; padding: 1.4rem 1.6rem 1.2rem; border-radius: 12px; background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
}
.sheet-modal-card p { margin: 0; font-weight: 650; color: var(--navy); text-align: center; }
.sheet-modal-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; }
.sheet-modal [data-part].chosen { background: var(--navy); color: #fff; border-color: var(--navy); }
table.sheet-table th.sheet-rows,
table.sheet-table td:first-child,
table.sheet-table tfoot th:first-child { background: var(--tile-blue); color: var(--navy); }
table.sheet-table thead th.sheet-rows,
table.sheet-table tfoot th:first-child { background: var(--tile-blue-hero); }
table.sheet-table tbody td:first-child,
table.sheet-table tfoot th:first-child { padding-left: 10px; text-align: left; }
table.sheet-table tbody tr:hover td:first-child { background: var(--tile-blue-hero); }
table.sheet-table col.sheet-summary { width: 273px; }
table.sheet-table col.sheet-measure { width: 140.4px; }
table.sheet-table th:first-child,
table.sheet-table td:first-child { width: 273px; max-width: 273px; }
table.sheet-table.list-sheet tfoot { display: none; }
table.sheet-table.measure-sheet th:first-child,
table.sheet-table.measure-sheet td:first-child,
table.sheet-table.measure-sheet tfoot th:first-child {
  width: 140.4px; max-width: 140.4px;
  background: #fff; color: inherit; padding-left: 0.35rem; text-align: center;
}
table.sheet-table.measure-sheet tbody tr:hover td:first-child { background: #f3f9fd; }
table.sheet-table.measure-sheet thead th { text-align: center; }
table.sheet-table th:not(:first-child),
table.sheet-table td:not(:first-child) { width: 140.4px; max-width: 140.4px; }
.builder-fn, .builder-chip .builder-part { display: none; }
.builder-verbs label { display: flex; gap: 0.35rem; align-items: center; font-family: Consolas, monospace; font-weight: 600; }
.builder-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; width: min(40rem, 86vw); }
.builder-reports {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem;
  width: min(40rem, 86vw); margin-top: 0.9rem; padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.builder-type { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0.9rem 0.35rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--navy); font-weight: 600; cursor: pointer; }
.builder-type:hover, .builder-type.active { border-color: var(--navy); background: #f4f8fc; }
.builder-type.active { box-shadow: inset 0 0 0 2px var(--navy); }
.count-layouts { flex: 1 0 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.count-layouts .builder-type span { text-align: center; }
.count-width { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.count-width button.active { outline: 2px solid var(--navy); font-weight: 700; }
@media (max-width: 700px) {
  .count-layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.builder-type .icon { width: 2.2rem; height: 2.2rem; }
.scope-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; width: min(24rem, 86vw); }
[data-builder-order] .builder-type .icon { width: 4.4rem; height: 2.6rem; }
.sort-line { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.sort-line .icon-button { flex: none; }
[data-add-by] { margin-top: 0.35rem; }
.builder-form.asking legend { display: none; }
.builder-chips { display: flex; flex-direction: column; gap: 0.35rem; align-items: stretch; width: 100%; flex: 1 0 100%; min-height: 12rem; max-height: 18rem; overflow-y: auto; box-sizing: border-box; padding: 0.45rem; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; }
.builder-chips:empty::before { content: "Nothing chosen yet"; color: var(--muted); font-weight: 400; padding: 0.35rem; }
.builder-chip { display: flex; gap: 0.5rem; align-items: center; width: 100%; box-sizing: border-box; padding: 0.3rem 0.35rem 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-family: Consolas, monospace; font-weight: 600; }
.builder-chip.dragging { opacity: 0.55; }
button.builder-grip { flex: none; width: 1rem; height: 1.35rem; padding: 0; border: none; background: none; cursor: grab; touch-action: none; }
.builder-chip.dragging .builder-grip { cursor: grabbing; }
.builder-code { flex: none; color: var(--navy); }
.builder-desc { flex: 1; min-width: 0; font-family: inherit; font-weight: 400; font-size: 0.85rem; color: var(--muted); }
[data-builder-add-item] { flex: 1 0 100%; width: 100%; box-sizing: border-box; }
.builder-chip .icon-button { width: 1.2rem; height: 1.2rem; flex: none; }
@media (max-width: 700px) {
  .builder-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder-reports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.builder-part { display: none; padding: 0 0.15rem; font-size: 0.8rem; }
.table-mode .builder-part { display: inline-block; }
.builder-conditions { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.builder-conditions:empty { display: none; }
.builder-story { flex-basis: 100%; margin: 0; padding: 0.6rem 0.75rem; background: #f4f8fc; border-radius: 8px; color: var(--navy); line-height: 1.45; }
.builder-condition { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.builder-condition input { flex: 1; min-width: 4.5rem; font-family: Consolas, monospace; text-transform: uppercase; }
.builder-condition select[name="c_join"] { flex: none; width: 4.2rem; font-weight: 700; }
.builder-condition.or-join { padding-top: 0.35rem; border-top: 1px dashed var(--border); }
.builder-condition.or-join select[name="c_join"] { background: #fff6e8; }
.builder-condition select[name="c_op"] { flex: none; }
.builder-and { flex: none; color: var(--muted); }
.builder-form select { font-family: Consolas, monospace; }
.builder-preview { display: block; padding: 0.5rem 0.75rem; background: var(--bg); border-radius: 6px; font-family: Consolas, monospace; min-height: 1.2em; }
.builder-form .actions { display: flex; gap: 1rem; }
.builder-form [hidden] { display: none !important; }
.builder-head { display: flex; align-items: center; justify-content: space-between; }
.builder-head h2 { margin: 0 !important; }
.builder-head .icon-button { opacity: 0.55; }
.builder-head .icon-button[aria-pressed="true"] { opacity: 1; }
.builder-note { flex-basis: 100%; margin: 0; font-size: 0.85rem; line-height: 1.35; color: var(--muted); }
.builder-hint { display: none; flex-basis: 100%; margin: 0; font-size: 0.8rem; line-height: 1.35; color: var(--muted); }
.show-help .builder-hint { display: block; }
.builder-pick { font-family: Consolas, monospace; text-transform: uppercase; }
.builder-sort input[type="number"] { width: 5rem; }
.builder-pick::placeholder { text-transform: none; }
.builder-condition .builder-pick { flex: 0 0 auto; }
.builder-list { position: fixed; z-index: 10; margin: 0; padding: 0.25rem 0; list-style: none; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); max-width: 30rem; }
.builder-list li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.3rem 0.75rem; cursor: pointer; }
.builder-list li.active, .builder-list li:hover { background: #e8f1fb; }
.builder-list .pick-code { font-family: Consolas, monospace; font-weight: 600; min-width: 4.5rem; color: var(--navy); }
.builder-list .pick-desc { color: var(--muted); font-size: 0.85rem; }
.builder-list .pick-tag { font-size: 0.68rem; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 0 0.3rem; }
table.report tfoot th { border-top: 2px solid var(--border); }

/* Label / value grid (cow card details) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 8.25rem);
  gap: 0.4rem;
  justify-content: start;
}
.cow-card .grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  justify-content: stretch;
}
.grid[hidden] { display: none !important; }
.label {
  display: block;
  font-size: 0.72rem;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.1rem;
}

/* Cow card: green plus opens the same event popup as batch entry. */
.cow-card { position: relative; padding-right: 3.75rem; }
/* The event button uses the extra right padding. Pull the heading back across
   that gap so the ID and ear tag sit in the middle of the card, level with the tabs. */
.cow-card > .panel-tabs { position: relative; margin-top: 0; align-items: center; }
.cow-card > .panel-tabs > .icon-button { margin: 0 0 0 0.15rem; }
dialog.category-name { width: 18rem; }
dialog.category-name input[name="label"] { width: 100%; margin-bottom: 0.8rem; }
.cow-card > .panel-tabs > h1.animal-title {
  position: absolute; inset: 0 -2.5rem 0 0; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  pointer-events: none;
}
.cow-fact {
  cursor: context-menu;
  min-width: 0;
  padding: 0.3rem 0.55rem 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.cow-fact:hover { background: var(--tile-blue); border-color: var(--tile-blue-hero); }
.cow-fact .label { margin-bottom: 0.05rem; color: var(--muted); min-height: 0.9rem; }
.cow-fact-empty { cursor: pointer; }
.fact-value {
  display: block;
  min-height: 1.15em;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.swap-list { position: static; max-height: 18rem; margin: 0.6rem 0; }
button.add-event {
  position: absolute; top: 1rem; right: 0.75rem;
  width: 2.1rem; height: 2.1rem; padding: 0; border: none; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 1.6rem; line-height: 2.1rem;
  cursor: pointer;
}
button.add-event:hover { background: var(--green-dark); }
.batch-sheet.single-animal #batch-animals-block { display: none; }
.event-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem; }
.event-filter { width: 100%; box-sizing: border-box; margin-bottom: 0.4rem; }
.event-menu li[hidden] { display: none; }
.event-menu button { width: 100%; text-align: left; background: var(--tile-blue); color: var(--navy); border-color: var(--tile-blue); }
.event-menu button:hover { background: var(--tile-blue-hero); }
.event-field-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.protocol-choices { max-height: 11rem; overflow: auto; display: flex; flex-direction: column; gap: 0.15rem; }
.stack .protocol-choices label { flex-direction: row; align-items: flex-start; gap: 0.4rem; text-transform: none; letter-spacing: normal; font-size: 0.85rem; }
.protocol-choices input { width: auto; margin-top: 0.15rem; padding: 0; }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 0.75rem; max-width: 420px; }
.stack label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; color: var(--navy); }
.stack label[hidden] { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.button-link { align-self: center; margin-left: auto; }

input, select, button {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  color: var(--text);
}
button { background: var(--navy); color: #fff; border-color: var(--navy); cursor: pointer; }
button:hover { background: var(--navy-dark); }
button.link { background: none; border: none; color: var(--navy); padding: 0; text-decoration: underline; }
button.secondary { background: #fff; color: var(--navy); border-color: var(--border); }
button.secondary:hover { background: #f3f4f6; }
/* Add, delete, copy and edit buttons are the icon alone (templates/_icons.html) */
button.icon-button, a.icon-button {
  display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle;
  width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; line-height: 0;
}
button.icon-button:hover { background: none; }
button.icon-button.copy { background: #fff; border-radius: 4px; }
.icon-button:hover .icon, .with-icon:hover > .icon { filter: brightness(0.9); }
button.icon-button[hidden] { display: none; }
.icon { display: block; width: 100%; height: 100%; }
.with-icon { display: inline-flex; align-items: center; gap: 0.4rem; }
.with-icon[hidden] { display: none; }
.with-icon > .icon { width: 1.1rem; height: 1.1rem; }

/* Tables */
/* A long table scrolls inside its wrap so the header row stays in view. */
.table-wrap { overflow: auto; max-height: calc(100vh - 7rem); }
table { width: 100%; border-collapse: collapse; background: var(--card); }
thead { position: sticky; top: 0; z-index: 1; }
/* With collapsed borders the header's own bottom border scrolls away, so draw it as a shadow.
   Vertical lines are on by default; a report turns them off with \GRID=FALSE. */
thead th { box-shadow: inset 0 -1px 0 var(--border), inset -1px 0 0 var(--border); }
th, td { text-align: left; padding: 0.34rem 0.6rem; line-height: 0.9; border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { box-shadow: inset -1px 0 0 var(--border); }
td:first-child { box-shadow: inset 1px 0 0 var(--border), inset -1px 0 0 var(--border); }
thead th:first-child { box-shadow: inset 0 -1px 0 var(--border), inset 1px 0 0 var(--border), inset -1px 0 0 var(--border); }
th {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f3f5f7;
  border-bottom-color: var(--border);
}
table:not([data-no-sort]) thead tr:last-child th:not(:empty):not([data-no-sort]) { cursor: pointer; user-select: none; }
table:not([data-no-sort]) thead tr:last-child th:not(:empty):not([data-no-sort]):hover { background: #e6edf3; }
th[aria-sort]::after { font-size: 0.65rem; margin-left: 0.3em; }
th[aria-sort="ascending"]::after { content: "▲"; }
th[aria-sort="descending"]::after { content: "▼"; }
tbody tr:hover td { background: #f3f9fd; }
/* A row's edit and delete buttons stay in view when a wide table scrolls sideways. */
.table-wrap td:last-child:has(> .icon-button), .table-wrap thead th:last-child:empty { position: sticky; right: 0; }
.table-wrap td:last-child:has(> .icon-button) { background: var(--card); }
.table-wrap tbody tr:hover td:last-child:has(> .icon-button) { background: #f3f9fd; }
tr.voided td { text-decoration: line-through; color: var(--muted); }
table.compact { width: auto; }
table.milkings td, table.milkings thead th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
table.milkings tbody th { border-right: 1px solid var(--border); }
table.milkings td.milk-average, table.milkings thead th:last-child { font-weight: 700; border-left: 1px solid var(--border); }
table.lact-summary th, table.lact-summary td { text-align: center; font-variant-numeric: tabular-nums; }
.milk-recent [data-tab-panel] + h3 { margin-top: 1.25rem; }
table.test-days th, table.test-days td { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap:has(> table.test-days) { max-height: 22rem; }

/* Tabs within a card: data-tabs / data-tab / data-tab-panel (static/forms.js) */
.panel-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.panel-tabs [data-tab] {
  background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -1px;
  padding: 0.4rem 0.8rem; color: var(--muted); font-size: 0.85rem; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.panel-tabs [data-tab]:hover { color: var(--navy); }
.panel-tabs [data-tab][aria-selected="true"] { color: var(--navy); border-bottom-color: var(--green); }
.history-cols { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 2.5rem; align-items: start; }
.history-cols:not(:has(> :nth-child(2))) { grid-template-columns: max-content; }
.history-cols.by-lactation {
  grid-template-columns: repeat(var(--lact-cols, 4), minmax(0, 1fr));
  gap: 0.85rem 1rem;
}
.history-cols.by-lactation h3 { margin: 0 0 0.35rem; }
.history-cols.by-lactation table.history { width: 100%; }
.history-cols.by-lactation td.wrap { white-space: normal; max-width: 11rem; }
@media (max-width: 1100px) {
  .history-cols.by-lactation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .history-cols, .history-cols:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .history-cols.by-lactation { grid-template-columns: minmax(0, 1fr); }
}
table.history { width: auto; }
table.history tbody tr[title] { cursor: help; }
table.history tbody tr:hover { background: #f3f4f6; }
.context-menu {
  position: fixed; z-index: 50; display: flex; flex-direction: column; min-width: 8rem; padding: 0.25rem;
  background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.context-menu[hidden] { display: none; }
.context-menu button {
  justify-content: flex-start; background: none; border: 0; color: inherit; padding: 0.35rem 0.6rem; text-align: left;
}
.context-menu button:hover, .context-menu button:focus-visible { background: #f3f4f6; }
.event-edit, .group-edit { width: min(24rem, 94vw); }
.event-edit label, .group-edit label { display: block; margin-bottom: 0.6rem; }
.board:not(.customising) .widget-group:not(.shaping) .group-head { cursor: context-menu; }

.muted { color: var(--muted); }
.error { color: var(--error); font-weight: 600; }
.find-miss { margin: 0.5rem 0 1rem; }
.find-miss:focus { outline: 2px solid var(--navy); outline-offset: 3px; }
.small { font-size: 0.8rem; }
.badge { font-size: 0.75rem; background: var(--tile-grey); border-radius: 3px; padding: 0.15rem 0.45rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; }

/* Lactation switcher on the cow card */
.lactation-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.lactation-tabs .tab {
  padding: 0.4rem 0.8rem;
  border-radius: 3px;
  background: var(--tile-blue);
  color: var(--navy);
  text-decoration: none;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.lactation-tabs .tab:hover { filter: brightness(0.96); }
.lactation-tabs .tab.current { background: var(--tile-green-hero); }
.lactation-tabs .tab.active { background: var(--navy); color: #fff; }
.lactation-tabs .tab.current.active { background: var(--green); }

/* Milk panel: recent milkings beside the lactation curves */
.milk-panels { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 3rem; }
.milk-recent { flex: 0 1 auto; min-width: 0; }
.milk-curves { flex: 1 1 520px; min-width: 0; }
.milk-panels h3 { margin-top: 0; }

/* Milk chart */
.milk-curves-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.milk-chart { position: relative; width: 100%; height: 340px; }
.chart-expand {
  border: 1px solid var(--border); background: #f3f4f6; color: var(--muted);
  border-radius: 6px; width: 1.9rem; height: 1.9rem; line-height: 1;
  font-size: 1rem; padding: 0; flex-shrink: 0;
}
.chart-expand:hover { background: #e5e7eb; color: var(--text); }
dialog.chart-modal {
  border: none; border-radius: 10px; padding: 1rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  width: 96vw; max-width: 1200px; height: 90vh;
}
dialog.chart-modal[open] { display: flex; flex-direction: column; }
dialog.chart-modal::backdrop { background: rgba(0, 0, 0, 0.5); }
.chart-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.chart-modal-head h3 { margin: 0; }
.chart-modal-actions { display: flex; gap: 0.5rem; }
.chart-modal-canvas { position: relative; flex: 1 1 auto; min-height: 0; }
.switch-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.switch-tabs a { color: var(--navy); text-decoration: none; padding: 0.35rem 0.7rem; border-radius: 3px; font-size: 0.9rem; }
.switch-tabs a:hover { background: var(--tile-blue); }
.switch-tabs a.active { background: var(--navy); color: #fff; font-weight: 600; }
table.report td.wrap { white-space: normal; max-width: 14rem; }
table.report:not(.gridlines) td { box-shadow: none; }
table.report:not(.gridlines) th,
table.report:not(.gridlines) thead th { box-shadow: inset 0 -1px 0 var(--border); }
table.report tr.blank-line td { height: 1.7rem; padding: 0; border-bottom: none; }
/* Lines are shadows, so they do not change the column widths under the sticky header. */
table.gridlines td { box-shadow: inset -1px 0 0 var(--border); }
table.gridlines th { box-shadow: inset 0 -1px 0 var(--border), inset -1px 0 0 var(--border); }
table.gridlines td:first-child { box-shadow: inset 1px 0 0 var(--border), inset -1px 0 0 var(--border); }
table.gridlines th:first-child { box-shadow: inset 0 -1px 0 var(--border), inset 1px 0 0 var(--border), inset -1px 0 0 var(--border); }
table.sheet-table.gridlines td { box-shadow: inset 0 -1px 0 var(--border), inset -1px 0 0 var(--border); }
table.sheet-table.gridlines td:first-child { box-shadow: inset 0 -1px 0 var(--border), inset 1px 0 0 var(--border), inset -1px 0 0 var(--border); }
table.report.wrap-lines th,
table.report.wrap-lines td { max-width: var(--line-wrap); white-space: normal; }
table.report tr.list-foot td { font-weight: 700; border-top: 2px solid var(--border); }
table.report tr.page-break td { height: 0; padding: 0; border: 0; line-height: 0; font-size: 0; box-shadow: none; }
@page { size: A4 portrait; margin: 10mm; }
.print-head { display: none; }
@media print {
  .topbar, .format-dock, .command-bar, .metrix-chat, h1, .report-runs, h2.report-title { display: none !important; }
  body.metrix-docked main, body.metrix-docked.metrix-wide main { margin-left: 0; margin-right: 0; }
  .print-head {
    display: block; position: relative; box-sizing: border-box;
    width: 190mm; max-width: 100%; margin: 0 0 2mm; color: #000;
    font-size: 9pt; line-height: 4.2mm;
  }
  .print-head > div { height: 4.2mm; overflow: hidden; white-space: nowrap; }
  .print-head-name { position: relative; text-align: center; font-weight: 700; }
  .print-head-command { position: relative; }
  .print-head-command > span:first-child { display: block; overflow: hidden; text-overflow: ellipsis; }
  .print-head-title { position: absolute; left: 0; right: 0; top: 0; text-align: center; }
  .print-head-when { position: absolute; right: 0; top: 0; font-weight: 400; }
  .table-wrap { max-height: none; overflow: visible; }
  table.report th, table.report td { padding: 0 1.5mm; line-height: 6.2mm; font-size: 8pt; }
  table.report tr.page-break { break-after: page; }
  table.report tr.page-break td { height: 0; padding: 0; border: 0; }
}
table.report .writing-space { width: var(--write); min-width: var(--write); max-width: var(--write); font-family: Consolas, monospace; border-bottom: 1px solid var(--border); }
table.report th.writing-space { white-space: normal; }
table.report tr.event-line td { color: var(--muted, #52606d); }
.report-columns { display: flex; gap: 1.25rem; align-items: flex-start; }
.report-columns > .table-wrap { min-width: 0; max-height: none; overflow: visible; }
.format-dock {
  position: fixed; z-index: 30; left: 0; top: 6rem;
  display: flex; align-items: flex-start; max-height: calc(100vh - 6.5rem);
}
.edge-tabs { display: flex; flex-direction: column; gap: 0.4rem; }
.edge-tabs .print-actions { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.edge-tabs .print-actions .icon-button {
  width: 2.35rem; height: 2.35rem; padding: 0.32rem; box-sizing: border-box;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
}
.edge-tabs .print-actions .icon-button:hover { background: #f3f4f6; }
.icon-button[aria-pressed="true"] { outline: 2px solid var(--navy); outline-offset: 1px; }
body:has(.print-stage) { overflow: hidden; }
.print-stage {
  position: fixed; z-index: 25; inset: 0; overflow: auto;
  background: #6b7280; padding: 1.25rem 1.25rem 2rem 4.5rem;
}
.print-sheet {
  width: 210mm; min-height: 297mm; box-sizing: border-box;
  margin: 0 auto; padding: 10mm; background: #fff; color: #000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.sheet-label { width: 210mm; margin: 2mm auto 8mm; text-align: center; color: #fff; font-size: 0.85rem; }
.print-summary {
  position: fixed; z-index: 26; top: 6rem; left: 4.75rem;
  width: max-content; max-width: 18rem; margin: 0; padding: 0.65rem 0.8rem;
  background: #fff; color: #111; border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.print-summary h2 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.print-summary p { margin: 0 0 0.55rem; }
.print-summary .print-printer { display: block; margin: 0 0 0.55rem; font-size: 0.85rem; }
.print-summary select { display: block; width: 16rem; max-width: 100%; margin-top: 0.2rem; font: inherit; }
.print-summary .print-colour { margin-top: -0.2rem; }
.print-summary-actions { display: flex; gap: 0.4rem; }
.print-summary button { margin: 0; }
.print-summary button.print-go { background: var(--green); border-color: var(--green); color: #fff; }
.print-summary button.print-go:hover { background: var(--green-dark); border-color: var(--green-dark); }
.print-sheet .print-head {
  display: block; position: relative; box-sizing: border-box;
  width: 100%; margin: 0 0 2mm; color: #000; font-size: 9pt; line-height: 4.2mm;
}
.print-sheet .print-head > div { height: 4.2mm; overflow: hidden; white-space: nowrap; }
.print-sheet .print-head-name { position: relative; text-align: center; font-weight: 700; }
.print-sheet .print-head-command { position: relative; }
.print-sheet .print-head-command > span:first-child { display: block; overflow: hidden; text-overflow: ellipsis; }
.print-sheet .print-head-title { position: absolute; left: 0; right: 0; top: 0; text-align: center; }
.print-sheet .print-head-when { position: absolute; right: 0; top: 0; font-weight: 400; }
.print-columns { display: flex; align-items: flex-start; gap: 4mm; }
.print-chart svg { width: 180mm; height: auto; display: block; margin: 8mm auto 0; }
.print-sheet table { width: auto; border-collapse: collapse; color: #000; background: #fff; }
.print-sheet thead { position: static; }
.print-sheet th, .print-sheet td {
  padding: 0 1.5mm; line-height: 6.2mm; height: 6.2mm; font-size: 8pt; font-weight: 400;
  text-align: left; color: #000; background: #fff; box-shadow: none;
}
.print-sheet a { color: inherit; text-decoration: none; }
.print-sheet .num { text-align: right; font-variant-numeric: tabular-nums; }
.print-sheet tr.blank-line td { border: 0; }
.print-sheet tr.list-foot td { font-weight: 700; border-top: 0.4mm solid #222; }
.print-sheet tr.event-line td { color: #333; }
.print-sheet.gridlines td { box-shadow: inset -1px 0 0 #bbb; }
.print-sheet.gridlines th { box-shadow: inset 0 -1px 0 #bbb, inset -1px 0 0 #bbb; }
button.format-open {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 0.9rem 0.45rem; border-radius: 0 6px 6px 0; letter-spacing: 0.04em;
}
button.format-open[aria-expanded="true"] { background: var(--navy-dark); }
.format-panel {
  position: relative;
  width: 23rem; max-height: calc(100vh - 6.5rem); overflow-x: hidden; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-left: none;
  border-radius: 0 8px 8px 0; box-shadow: 4px 10px 28px rgba(15, 23, 42, 0.16);
  padding: 0.35rem 0.7rem 0.75rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.format-panel[hidden] { display: none; }
.filter-board { width: 28rem; max-width: 100%; }
.filter-board .builder-note { margin: 0; }
.filter-board [data-add-choice] { align-self: flex-start; }
.filter-board .filter-bubble {
  position: relative;
  border-radius: 1.6rem;
  padding: 0.7rem 0.85rem 0.75rem;
}
.filter-board .filter-centre {
  background: var(--tile-blue);
  border: 2px solid var(--tile-blue-hero);
}
.filter-board .filter-bubble h3 {
  margin: 0 0 0.45rem;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.95rem;
}
.filter-board .filter-bubble [data-add-line] { margin-top: 0.45rem; }
.filter-board .filter-alts { display: flex; flex-direction: column; align-items: stretch; }
.filter-board .filter-alts[hidden] { display: none; }
.filter-board .filter-link {
  margin: 0.15rem 0 0.35rem;
  text-align: center;
  font-weight: 700;
  color: var(--navy);
}
.filter-board .filter-link::before,
.filter-board .filter-link::after {
  content: "";
  display: block;
  width: 2px;
  height: 0.7rem;
  margin: 0 auto;
  background: var(--navy);
}
.filter-board .filter-choice { margin-top: 0.35rem; background: #fff; border: 2px solid var(--navy); }
.filter-board .filter-or {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: #fff6e8;
  border: 1px solid #e2c48a;
  color: #8a5a12;
  font-weight: 700;
  font-size: 0.85rem;
}
.filter-board .filter-choice:first-child .filter-or { display: none; }
.filter-board .filter-choice:first-child { margin-top: 0; }
.filter-board .filter-choice-head { display: flex; justify-content: flex-end; min-height: 1.5rem; }
.filter-board .filter-line {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr) 1.5rem;
  column-gap: 0.35rem;
  align-items: center;
  margin-top: 0.35rem;
}
.filter-board .filter-line input,
.filter-board .filter-line select {
  height: 2.05rem;
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}
.filter-board .filter-line input { width: 100%; padding: 0.2rem 0.4rem; }
.filter-board select[data-op] {
  appearance: none;
  width: 2.85rem;
  padding: 0 0.7rem 0 0.05rem;
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-align-last: center;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.2 L6 6.2 L11 1.2' fill='none' stroke='%2352606d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.22rem center;
  background-size: 0.5rem;
}
.filter-board select[data-op].op-word {
  width: 5.5rem;
  font-size: 0.92rem;
  font-weight: 650;
  padding-right: 0.85rem;
}
.filter-board .filter-values { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.filter-board .filter-values input { flex: 1; width: auto; }
.filter-board .filter-line > .icon-button { justify-self: end; }
.filter-board .filter-centre .filter-line input,
.filter-board .filter-centre .filter-line select { background-color: #fff; }
.format-panel .format-close {
  position: sticky; top: 0; z-index: 1; align-self: flex-end;
  margin: 0; background: var(--card);
}
.format-panel .format-row {
  display: grid; grid-template-columns: 8.4rem minmax(0, 1fr);
  align-items: center; column-gap: 0.45rem; margin: 0;
}
.format-panel [title] { cursor: help; }
.format-panel .choices { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.format-panel .format-choice { padding: 0.28rem 0.45rem; }
.format-panel .format-row > input { justify-self: end; width: 4.5rem; margin: 0; }
.format-panel .format-row > select { justify-self: end; width: 100%; max-width: 9.5rem; margin: 0; font: inherit; }
.date-span { display: flex; flex-direction: column; gap: 0.35rem; }
.date-span-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.date-span-fields[hidden] { display: none; }
.format-panel .date-span input.date-count { width: 3.1rem; margin: 0; }
.format-panel .date-span input.date-when { width: 6.4rem; margin: 0; text-transform: none; }
.format-panel .date-span select { width: auto; max-width: none; margin: 0; font: inherit; }
.date-span .date-error { margin: 0; }
.format-panel input[data-switch="PROTOCOL"],
.format-panel input[data-switch="CODE"],
.format-panel input[data-switch="TECH"],
.format-panel input[data-switch="XBRED"] { width: 6.5rem; }
.format-panel .format-row > input[data-switch="ELIGIBLE"] { width: 100%; }
.format-panel input { width: 4.5rem; }
.format-panel input[list] { width: 6rem; text-transform: uppercase; }
.format-panel .format-toggle { text-align: left; }
button.format-choice[data-value="TRUE"]:not([data-switch="ARCHIVE"]) { background: #e5ecd9; border-color: #b7c99a; color: var(--green-dark); }
button.format-choice[data-value="FALSE"]:not([data-switch="ARCHIVE"]) { background: #f8d7dc; border-color: #e7b4bb; color: #8a2a32; }
button.format-choice.active { outline: 2px solid var(--navy); font-weight: 700; }
button.format-choice[data-value="TRUE"].active:not([data-switch="ARCHIVE"]),
button.format-choice[data-value="FALSE"].active:not([data-switch="ARCHIVE"]) { outline: 2px solid currentColor; }
dialog.format-ask { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); }
dialog.format-ask .pick-list,
dialog.format-ask .event-picks, dialog.popup .event-picks { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: 16rem; overflow: auto; margin: 0.6rem 0; }
dialog.format-ask .event-picks label, dialog.popup .event-picks label { display: inline-flex; gap: 0.3rem; align-items: center; min-width: 7rem; }
dialog#event-select .event-picks {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(26, auto);
  grid-auto-columns: 8.6rem;
  align-content: start;
  justify-content: start;
  gap: 0.22rem 0.45rem;
  max-height: none;
  overflow: visible;
  margin: 0 0 0.75rem;
}
dialog#event-select .event-slicer {
  width: 100%;
  margin: 0;
  padding: 0.1rem 0.45rem;
  border: 1px solid #c5cdd4;
  border-radius: 2px;
  background: #e8eef2;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
dialog#event-select .event-slicer:hover { background: #d5e3ee; }
dialog#event-select .event-slicer[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy-dark);
  color: #fff;
}
dialog.format-ask .pick-list button { padding: 0.25rem 0.55rem; }
dialog.format-ask .pick-list button.active { outline: 2px solid var(--navy); font-weight: 700; }
dialog.format-ask input[type="search"] { width: 100%; margin-top: 0.4rem; }
dialog.format-ask .write-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.35rem 0; }
dialog.format-ask .write-row select, dialog.format-ask .write-row input { width: 4.5rem; }
dialog.format-ask .write-row input[data-write-name] { width: 7rem; text-transform: uppercase; }
dialog.save-command {
  width: min(64rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
}
dialog.save-command .save-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.75rem 1.5rem; align-items: start;
}
dialog.save-command form.stack { display: contents; max-width: none; }
dialog.save-command form.stack > h2 { grid-column: 1; grid-row: 1; }
dialog.save-command form.stack > label:nth-of-type(1) { grid-column: 1; grid-row: 2; }
dialog.save-command form.stack > label:nth-of-type(n + 2),
dialog.save-command form.stack > p,
dialog.save-command form.stack > .form-actions { grid-column: 1 / -1; }
dialog.save-command .save-files {
  grid-column: 2; grid-row: 1 / span 2; margin: 0; display: flex; flex-direction: column; gap: 0.4rem;
  min-width: 7.5rem; padding-left: 1rem; border-left: 1px solid var(--border);
}
dialog.save-command .save-files h2,
dialog.save-command .save-widget h2 { margin: 0 0 0.2rem; font-size: 1rem; }
dialog.save-command .save-files button,
dialog.save-command .save-widget button { text-align: center; }
dialog.save-command .save-widget {
  grid-column: 3; grid-row: 1 / span 2; margin: 0; display: flex; flex-direction: column; gap: 0.4rem;
  min-width: 8.5rem; padding-left: 1rem; border-left: 1px solid var(--border);
}
@media (max-width: 700px) {
  dialog.save-command .save-layout { grid-template-columns: 1fr; }
  dialog.save-command .save-files,
  dialog.save-command .save-widget {
    grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--border); padding-top: 0.6rem;
  }
}
body.picking-cell main tbody td,
body.picking-cell main tfoot td,
body.picking-cell main tfoot th { cursor: crosshair; }
body.picking-cell main tbody td:hover,
body.picking-cell main tfoot td:hover,
body.picking-cell main tfoot th:hover { box-shadow: inset 0 0 0 2px #2f6fad; }
.pick-banner, .place-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.board.placing > .widget-group { cursor: copy; outline: 2px dashed #7aa2c8; outline-offset: 2px; }
.board.placing > .widget-group:hover { outline-color: #2f6fad; }
dialog.save-command h2 { margin: 0; }
dialog.save-command textarea { width: 100%; box-sizing: border-box; resize: none; overflow: hidden; }
dialog.save-command input.code { width: 8rem; box-sizing: border-box; }
dialog.save-command input.code,
dialog.save-command textarea.code { font-family: Consolas, monospace; text-transform: uppercase; }
dialog.save-command textarea[readonly] { background: #f4f6f8; field-sizing: content; min-height: 2.4rem; }
td.tech-active form { display: inline-flex; gap: 0.25rem; margin: 0; }
button.tech-state { padding: 0.2rem 0.55rem; }
button.tech-state.chosen { background: #e5ecd9; border-color: #b7c99a; color: var(--green-dark); outline: 2px solid currentColor; font-weight: 700; }
button.tech-state.off.chosen { background: #f8d7dc; border-color: #e7b4bb; color: #8a2a32; }
table.command-table td.about { white-space: normal; max-width: 14rem; }
table.command-table td.about textarea { width: 100%; }
h2.report-title { margin: 0 0 0.75rem; }
.report-runs .code { text-transform: uppercase; }
.report-runs .secondary { margin-left: 0.6rem; }
.item-notes { margin: 0.25rem 0 0; }
table.switch-table th { white-space: normal; }
table.switch-table td.wrap { white-space: normal; max-width: 22rem; }
table.command-table td.code { font-family: Consolas, monospace; }
table.command-table input.code { text-transform: uppercase; }
/* Library lists use the page width. Anything past that stays on one line until Edit. */
.settings-body.library .table-wrap > table:not(.switch-table) { width: 100%; table-layout: fixed; }
.settings-body.library .table-wrap > table:not(.switch-table) th,
.settings-body.library .table-wrap > table:not(.switch-table) td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: none;
}
.settings-body.library .table-wrap > table:not(.switch-table) td div { display: inline; white-space: nowrap; }
.settings-body.library .table-wrap > table:not(.switch-table) td div + div::before { content: " "; }
.settings-body.library .table-wrap > table:not(.switch-table) th.num,
.settings-body.library .table-wrap > table:not(.switch-table) td.num { width: 5rem; }
.settings-body.library .table-wrap > table.model-example { table-layout: auto; width: auto; max-width: 100%; }
.settings-body.library .table-wrap > table.model-example th,
.settings-body.library .table-wrap > table.model-example td {
  overflow: visible; text-overflow: clip; white-space: normal;
}
.settings-body.library .table-wrap > table.model-example th.num,
.settings-body.library .table-wrap > table.model-example td.num {
  width: auto; text-align: right; font-variant-numeric: tabular-nums;
}
.settings-body.library .table-wrap > table.technician-list { table-layout: auto; width: auto; max-width: 100%; }
.settings-body.library .table-wrap > table.technician-list th,
.settings-body.library .table-wrap > table.technician-list td {
  width: auto; max-width: none; overflow: visible; text-overflow: clip;
}
.settings-body.library .table-wrap > table.technician-list th.num,
.settings-body.library .table-wrap > table.technician-list td.num { width: 4.25rem; }
.settings-body.library .table-wrap > table.technician-list th.tech-active,
.settings-body.library .table-wrap > table.technician-list td.tech-active {
  width: 1%; overflow: visible; text-overflow: clip; white-space: nowrap;
}
.settings-body.library .table-wrap > table.technician-list td.wrap { max-width: 9rem; white-space: nowrap; }
.settings-body.library .table-wrap > table.technician-list th.tech-edit,
.settings-body.library .table-wrap > table.technician-list td.tech-edit {
  width: 2.5rem; overflow: visible; text-align: center;
}
.settings-body.library .table-wrap > table.breeding-code-list { table-layout: auto; width: auto; max-width: 100%; }
.settings-body.library .table-wrap > table.breeding-code-list th,
.settings-body.library .table-wrap > table.breeding-code-list td {
  width: auto; max-width: none; overflow: visible; text-overflow: clip;
}
.settings-body.library .table-wrap > table.breeding-code-list th.num,
.settings-body.library .table-wrap > table.breeding-code-list td.num { width: 4.25rem; }
.settings-body.library .table-wrap > table.breeding-code-list th.tech-active,
.settings-body.library .table-wrap > table.breeding-code-list td.tech-active {
  width: 1%; overflow: visible; text-overflow: clip; white-space: nowrap;
}
.settings-body.library .table-wrap > table.breeding-code-list td.wrap { max-width: 14rem; white-space: nowrap; }
.settings-body.library .table-wrap > table.breeding-code-list th.tech-edit,
.settings-body.library .table-wrap > table.breeding-code-list td.tech-edit {
  width: 2.5rem; overflow: visible; text-align: center;
}
/* Item names are at most 5 characters; event and command names at most 7. */
.settings-body.library .table-wrap > table:not(.switch-table) th.w5,
.settings-body.library .table-wrap > table:not(.switch-table) td.w5 { width: 4.75rem; }
.settings-body.library .table-wrap > table:not(.switch-table) th.w7,
.settings-body.library .table-wrap > table:not(.switch-table) td.w7 { width: 6.25rem; }
.settings-body.library .table-wrap > table:not(.switch-table) th:last-child:empty,
.settings-body.library .table-wrap > table:not(.switch-table) td:last-child:has(> .icon-button) { width: 2.5rem; overflow: visible; }
dialog.row-editor { width: min(64rem, 94vw); max-height: 90vh; line-height: 1.35; }
dialog.row-editor .row-editor-field {
  border: 1px solid var(--border); border-radius: 6px; padding: 0.55rem 0.75rem 0.7rem; margin-bottom: 0.75rem;
}
dialog.row-editor .row-editor-field .label {
  display: block; margin-bottom: 0.35rem; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy);
}
dialog.row-editor .editor { display: block; }
dialog.row-editor .row-editor-field input:not([type="checkbox"]),
dialog.row-editor .row-editor-field textarea,
dialog.row-editor .row-editor-field select { width: 100%; box-sizing: border-box; }
dialog.row-editor textarea { min-height: 8rem; max-height: 50vh; resize: vertical; font-family: Consolas, monospace; }
dialog.row-editor .read { white-space: pre-wrap; }
dialog.row-editor .read div { display: block; }
dialog.row-editor .read div + div::before { content: none; }
dialog.row-editor .row-editor-actions {
  display: flex; gap: 0.75rem; align-items: center; position: sticky; bottom: 0;
  background: var(--card); padding-top: 0.75rem;
}
dialog.row-editor .row-actions { display: flex; gap: 0.75rem; align-items: center; }
dialog.row-editor .pen-types label { white-space: normal; }
.event-does { margin: 0 0 0.5rem; font-size: 0.85rem; }
.event-does div { color: var(--navy); }