/* ==========================================================================
   FarmoraX — theme tokens
   Mirrors the planner design at farming.muxworks.com: warm cream surfaces,
   farm-green primary, copper accent, system UI font, mono figures.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Chart series (validated for CVD separation against the surface in each theme). */
    --series-weight: #1d6b3f;
    --series-threshold: #3b62c4;

    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", monospace;

    --fs-body: 13px;
    --fs-small: 12px;
    --fs-micro: 11px;

    --text: #1f1b14;
    --muted: #5d5546;
    --muted-2: #6f6653;
    --bg: #f5f1e8;
    --surface: #fffdf8;
    --surface-2: rgba(255, 253, 248, 0.78);
    --surface-sunken: #efe9dc;
    --row-alt: rgba(61, 48, 28, 0.035);
    --border: rgba(61, 48, 28, 0.14);
    --border-strong: rgba(61, 48, 28, 0.26);
    --primary: #1d6b3f;
    --primary-2: #15532f;
    --primary-ink: #ffffff;
    --primary-soft: rgba(29, 107, 63, 0.10);
    --primary-line: rgba(29, 107, 63, 0.55);
    --accent: #b0713a;
    --accent-soft: rgba(176, 113, 58, 0.12);
    --positive: #1d6b3f;
    --danger: #a32f22;
    --danger-soft: rgba(163, 47, 34, 0.10);
    --danger-ink: #ffffff;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(48, 38, 22, 0.07);
    --shadow-md: 0 8px 20px rgba(48, 38, 22, 0.10);
    --shadow-lg: 0 16px 40px rgba(48, 38, 22, 0.14);
    --ring: 0 0 0 3px rgba(29, 107, 63, 0.32);
    --transition: 140ms ease;

    --cell-y: 6px;
    --cell-x: 10px;
    --control-y: 6px;
    --control-x: 9px;
    --gap: 10px;

    --page-max: 1320px;
    --nav-max: 1320px;

    font-family: var(--font-sans);
    line-height: 1.45;
    font-weight: 400;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --series-weight: #3f9c66;
    --series-threshold: #5f8fe8;
    --text: #f0ebe0;
    --muted: #b3aa98;
    --muted-2: #9a9080;
    --bg: #14130e;
    --surface: #1e1c16;
    --surface-2: rgba(30, 28, 22, 0.80);
    --surface-sunken: #191711;
    --row-alt: rgba(240, 235, 224, 0.035);
    --border: rgba(240, 235, 224, 0.13);
    --border-strong: rgba(240, 235, 224, 0.26);
    --primary: #3f9c66;
    --primary-2: #55b47c;
    --primary-ink: #08170f;
    --primary-soft: rgba(63, 156, 102, 0.16);
    --primary-line: rgba(63, 156, 102, 0.6);
    --accent: #d9954f;
    --accent-soft: rgba(217, 149, 79, 0.16);
    --positive: #4fb076;
    --danger: #e0705c;
    --danger-soft: rgba(224, 112, 92, 0.14);
    --danger-ink: #1c0a06;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --ring: 0 0 0 3px rgba(63, 156, 102, 0.38);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html, body {
    height: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(1100px 520px at 50% -140px, var(--primary-soft), transparent 70%),
        radial-gradient(760px 420px at 8% 0%, var(--accent-soft), transparent 62%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-size: var(--fs-body);
}

a {
    color: inherit;
}

h1:focus {
    outline: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

::selection {
    background: var(--primary-soft);
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

@media print {
    :root { color-scheme: light; }
    body { background: #fff; color: #111827; }
}

/* ==========================================================================
   Shared components — reuse these classes on every page
   ========================================================================== */

/* Page header */
.page-header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.page-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-title {
    margin: 0;
    font-size: 20px;
    letter-spacing: -0.02em;
}

.page-subtitle {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: var(--fs-small);
    max-width: 68ch;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--primary-line);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.status {
    margin: 10px 0 0;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--fs-small);
}

/* Warnings / callouts */
.warnings {
    margin-top: 12px;
    padding: 10px 12px;
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
}

.warnings-title {
    margin: 0 0 6px;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.warnings ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
    font-size: var(--fs-small);
}

/* Layout grid: fixed input column + fluid results column */
.layout-grid {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

@media (min-width: 1100px) {
    .layout-grid {
        grid-template-columns: 400px 1fr;
        align-items: start;
    }
}

.column {
    display: grid;
    gap: 12px;
    align-content: start;
}

/* Cards */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 14px;
    box-shadow: var(--shadow-sm);
}

.card-title {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.card-subtitle {
    margin: -4px 0 10px;
    font-size: var(--fs-micro);
    color: var(--muted-2);
    line-height: 1.45;
}

/* Metric tiles */
.metrics {
    display: grid;
    gap: 8px;
}

@media (min-width: 680px) {
    .metrics {
        grid-template-columns: 1fr 1fr;
    }
}

.metric {
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    background: var(--surface);
}

.metric-emphasis {
    border-left-color: var(--primary);
    background: var(--primary-soft);
}

.metric-label {
    margin: 0;
    font-size: var(--fs-micro);
    font-weight: 600;
    line-height: 1.35;
    color: var(--muted);
}

.metric-value {
    margin: 3px 0 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.negative-value {
    color: var(--danger);
}

.metric:has(.negative-value) {
    border-left-color: var(--danger);
}

/* Forms */
.form {
    display: grid;
    gap: var(--gap);
}

.field {
    display: grid;
    gap: 4px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

@media (max-width: 680px) {
    .field-row {
        grid-template-columns: 1fr;
    }
}

.label-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

.label {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text);
}

.hint {
    font-size: var(--fs-micro);
    color: var(--muted-2);
}

.input, .select {
    width: 100%;
    padding: var(--control-y) var(--control-x);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-body);
    box-shadow: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.input[type="number"] {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.input:focus, .select:focus {
    outline: none;
    border-color: var(--primary-line);
    box-shadow: var(--ring);
}

/* Buttons */
.button-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.button {
    appearance: none;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: var(--control-y) 11px;
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.button:hover {
    border-color: var(--primary-line);
    background: var(--primary-soft);
}

.button:active {
    background: var(--surface-sunken);
}

.button-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-ink);
}

.button-primary:hover {
    border-color: var(--primary-2);
    background: var(--primary-2);
    color: var(--primary-ink);
}

.button-danger {
    border-color: var(--border-strong);
    color: var(--danger);
    background: var(--surface);
}

.button-danger:hover {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.chip {
    appearance: none;
    min-width: 32px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font: inherit;
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.chip:hover {
    border-color: var(--primary-line);
    background: var(--primary-soft);
}

.chip-active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-ink);
    font-weight: 700;
}

/* Tables */
.table-wrap {
    overflow: auto;
    max-height: 58vh;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    padding: var(--cell-y) var(--cell-x);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: var(--fs-small);
    white-space: nowrap;
}

.table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-strong);
    color: var(--muted);
    font-weight: 700;
    font-size: var(--fs-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table tbody tr:nth-child(2n) td { background: var(--row-alt); }
.table tbody tr:hover td { background: var(--primary-soft); }

.num, .table .td-right {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.table .td-right { text-align: right; }

.text-muted { color: var(--muted); }
.text-danger { color: var(--danger); }

/* ==========================================================================
   Livestock pages
   ========================================================================== */

.section-gap { margin-top: 12px; }

.metrics-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

@media (min-width: 680px) {
    .metrics-4 { grid-template-columns: repeat(4, 1fr); }
}

.badge-sm { padding: 0 6px; font-size: 10px; margin-left: 6px; vertical-align: middle; }
.badge-muted { border-color: var(--border-strong); background: var(--surface-sunken); color: var(--muted); }
.badge-warn { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.warnings-danger { border-left-color: var(--danger); background: var(--danger-soft); }
.warnings-danger .warnings-title { color: var(--danger); }

.empty-state p { margin: 0 0 10px; color: var(--muted); }

.card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.card-title-row .button { text-transform: none; letter-spacing: 0; }

.is-inactive { opacity: 0.6; }

.subheading {
    margin: 14px 0 6px;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Forms */
.fieldset {
    margin: 0;
    padding: 10px 12px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--gap);
}

.legend {
    padding: 0 4px;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.field-row-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 680px) {
    .field-row-3 { grid-template-columns: 1fr; }
}

.check-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-small);
    cursor: pointer;
}

.inline-fields {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inline-fields .input { width: auto; flex: 1; }

.input:disabled, .select:disabled { background: var(--surface-sunken); color: var(--muted-2); }

.input-sm { padding: 4px 8px; font-size: var(--fs-small); width: auto; }
.input-code { text-transform: uppercase; font-family: var(--font-num); }

textarea.input { resize: vertical; }

.link-button {
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: var(--fs-micro);
    font-weight: 600;
    cursor: pointer;
    justify-self: start;
}

.link-button:hover { text-decoration: underline; }

.button-sm { padding: 3px 9px; font-size: var(--fs-micro); }

a.button { display: inline-flex; align-items: center; }

.file-button { position: relative; overflow: hidden; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.validation-message { font-size: var(--fs-micro); }

.validation-summary {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--danger);
    font-size: var(--fs-small);
}

.validation-summary:empty { display: none; }

.summary-card { position: sticky; top: 64px; }

.allocation {
    margin: 10px 0 0;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: var(--fs-small);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

.allocation strong { color: var(--text); }

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.tabs .chip { text-decoration: none; padding: 6px 12px; }

.filters {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 900px) {
    .filters { grid-template-columns: 1fr 1fr; }
    .filters .input { grid-column: 1 / -1; }
}

/* Tables */
.row-link { cursor: pointer; }
.table a { color: inherit; text-decoration: none; }
.table a:hover { text-decoration: underline; }

.cell-sub {
    color: var(--muted-2);
    font-size: var(--fs-micro);
    white-space: normal;
}

.td-actions { text-align: right; }
.td-actions .button + .button { margin-left: 4px; }

.td-thumb { width: 44px; padding-right: 0 !important; }

.thumb {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-sunken);
}

.thumb-empty { border: 1px dashed var(--border-strong); }

/* Detail lists */
.facts {
    display: grid;
    grid-template-columns: minmax(110px, 38%) 1fr;
    gap: 6px 12px;
    margin: 0;
    font-size: var(--fs-small);
}

.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.facts a { color: var(--primary); }

.inline-link { color: var(--primary); margin-right: 8px; }

.timeline {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
    font-size: var(--fs-small);
}

.animal-photo {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.code-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--surface-sunken);
    color: var(--text);
    font-family: var(--font-num);
    letter-spacing: 0;
}

/* Breeds */
.breed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.breed-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}

.breed-chip button {
    appearance: none;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-small);
    cursor: pointer;
}

.breed-name { padding: 3px 4px 3px 10px; }
.breed-toggle { padding: 3px 8px 3px 4px; color: var(--muted) !important; }
.breed-chip button:hover { background: var(--primary-soft); }
.breed-chip.is-inactive .breed-name { text-decoration: line-through; }

.breed-edit { display: inline-flex; gap: 4px; align-items: center; }

.add-breed {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.add-breed .input { flex: 1; }

/* ==========================================================================
   Blazor template defaults
   ========================================================================== */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--positive);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ==========================================================================
   Feeding & labels
   ========================================================================== */

.label-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--label-line);
    background: var(--label-bg);
    color: var(--label-ink);
    font-size: var(--fs-micro);
    font-weight: 600;
    white-space: nowrap;
}

.label-green  { --label-ink: #1d6b3f; --label-bg: rgba(29, 107, 63, 0.10); --label-line: rgba(29, 107, 63, 0.35); }
.label-amber  { --label-ink: #8a5a14; --label-bg: rgba(196, 138, 30, 0.14); --label-line: rgba(196, 138, 30, 0.40); }
.label-blue   { --label-ink: #1f5a8f; --label-bg: rgba(40, 110, 180, 0.10); --label-line: rgba(40, 110, 180, 0.35); }
.label-red    { --label-ink: #a32f22; --label-bg: rgba(163, 47, 34, 0.10); --label-line: rgba(163, 47, 34, 0.35); }
.label-purple { --label-ink: #6a3d8f; --label-bg: rgba(110, 60, 150, 0.10); --label-line: rgba(110, 60, 150, 0.35); }
.label-gray   { --label-ink: var(--muted); --label-bg: var(--surface-sunken); --label-line: var(--border-strong); }
.label-teal   { --label-ink: #0f6668; --label-bg: rgba(20, 128, 130, 0.10); --label-line: rgba(20, 128, 130, 0.35); }

:root[data-theme="dark"] .label-green  { --label-ink: #6cc493; }
:root[data-theme="dark"] .label-amber  { --label-ink: #e2ad55; }
:root[data-theme="dark"] .label-blue   { --label-ink: #7fb4e6; }
:root[data-theme="dark"] .label-red    { --label-ink: #ec8a7c; }
:root[data-theme="dark"] .label-purple { --label-ink: #c09be0; }
:root[data-theme="dark"] .label-teal   { --label-ink: #6fcfcf; }

.chip-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.chip-x {
    appearance: none;
    border: 0;
    background: none;
    padding: 0 0 0 2px;
    color: inherit;
    font-size: 10px;
    cursor: pointer;
}

.label-toggle {
    appearance: none;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px dashed var(--label-line);
    background: transparent;
    color: var(--label-ink);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
}

.label-toggle.is-on { border-style: solid; background: var(--label-bg); }

.swatch {
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--label-line);
    background: var(--label-bg);
    cursor: pointer;
}

.swatch-active { border-color: var(--label-ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--label-ink); }

.status-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: var(--fs-micro);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.status-active { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.status-upcoming { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.status-missing { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
a.status-pill:hover { text-decoration: underline; }

.metric-warn { border-left-color: var(--accent); background: var(--accent-soft); }

.filters-6 { grid-template-columns: 2fr repeat(5, 1fr); }

@media (max-width: 1000px) {
    .filters-6 { grid-template-columns: 1fr 1fr; }
}

.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border-color: var(--primary-line);
}

.bulk-bar .select { width: auto; min-width: 180px; }
.bulk-bar .warnings { flex-basis: 100%; margin-top: 0; }

.table tbody tr.is-selected td { background: var(--primary-soft); }
.table tbody tr.is-today td { background: var(--accent-soft); font-weight: 600; }

.cell-wrap { white-space: normal !important; min-width: 220px; }

.schedule-wrap { max-height: 70vh; }

.ration-table th, .ration-table td { padding: 4px 6px; }
.ration-table .select, .ration-table .input { padding: 4px 6px; font-size: var(--fs-small); }
.input-num { width: 90px; text-align: right; font-family: var(--font-num); }
.date-input { width: auto; }

.phase-block { padding: 2px 0 6px; }
.phase-block.is-current .subheading { color: var(--primary); }

.card.is-recorded { border-color: var(--primary-line); }

.animal-picker { display: grid; gap: 6px; }

.picker-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.picker-list {
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.picker-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: var(--fs-small);
}

.picker-row:last-child { border-bottom: 0; }
.picker-row:hover, .picker-row.is-selected { background: var(--primary-soft); }


/* ==========================================================================
   Weights & growth
   ========================================================================== */

.growth-layout {
    display: grid;
    gap: 16px;
}

@media (min-width: 900px) {
    .growth-layout { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); align-items: start; }
}

.weight-chart { position: relative; margin: 0; }
.weight-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.wc-grid { stroke: var(--border); stroke-width: 1; }
.wc-axis { fill: var(--muted-2); font-size: 11px; font-family: var(--font-num); }
.wc-label { fill: var(--muted); font-size: 11px; font-weight: 600; }
.wc-value { fill: var(--text); }
.wc-line { fill: none; stroke: var(--series-weight); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wc-area { fill: var(--series-weight); fill-opacity: 0.1; stroke: none; }
.wc-target { stroke: var(--muted-2); stroke-width: 1; }
.wc-threshold { fill: none; stroke: var(--series-threshold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wc-threshold-label { fill: var(--muted); }
.wc-projection { stroke: var(--primary-line); stroke-width: 1.5; stroke-dasharray: 4 4; }
.wc-crosshair { stroke: var(--border-strong); stroke-width: 1; pointer-events: none; }

.wc-point {
    fill: var(--primary);
    stroke: var(--surface);
    stroke-width: 2;
    cursor: pointer;
}

.wc-point.is-active, .wc-point:focus-visible { r: 6; outline: none; }

.wc-tooltip {
    position: absolute;
    display: grid;
    gap: 1px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-small);
    color: var(--muted);
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
}

.wc-tooltip[hidden] { display: none; }

.wc-tooltip strong { color: var(--text); font-size: var(--fs-body); }

.tape-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tape-fields .input-num { width: 78px; }
.tape-result { font-family: var(--font-num); font-weight: 600; color: var(--text); }

.select-sm { padding: 3px 6px; font-size: var(--fs-small); width: auto; }

.bulk-divider { width: 1px; align-self: stretch; background: var(--border); }

.wc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 4px;
    font-size: var(--fs-micro);
    color: var(--muted);
}

.wc-key { display: inline-flex; align-items: center; gap: 6px; }
.wc-swatch { display: inline-block; width: 16px; height: 0; border-top: 2px solid; }
.wc-swatch-weight { border-color: var(--series-weight); }
.wc-swatch-threshold { border-color: var(--series-threshold); }
.wc-swatch-target { border-top-width: 1px; border-color: var(--muted-2); }
.wc-swatch-projection { border-top-width: 1.5px; border-top-style: dashed; border-color: var(--primary-line); }

.record-all-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-lg);
    background: var(--primary-soft);
    font-size: var(--fs-small);
    font-weight: 600;
}

/* Select with an inline action button (e.g. "+ New") */
.input-with-button {
    display: flex;
    gap: 6px;
}

.input-with-button > .select,
.input-with-button > .input {
    flex: 1;
    min-width: 0;
}

/* Modal dialog */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(31, 27, 20, 0.45);
}

.modal {
    width: min(420px, 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 16px;
    box-shadow: var(--shadow-lg);
}

/* Health */
.treatment-photo { position: relative; margin: 0; }
.treatment-photo img { width: 140px; height: 105px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; }
.treatment-photo .button { position: absolute; top: 4px; right: 4px; }
.prior-dose-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
.due-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.due-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* ==========================================================================
   Data grid — toolbar, column filters, pager, bulk dock (Animals list)
   ========================================================================== */

.icon { flex-shrink: 0; display: inline-block; vertical-align: -0.15em; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.button:disabled { opacity: 0.55; cursor: not-allowed; }
.button-lg { padding: 8px 14px; font-size: var(--fs-body); border-radius: var(--radius-md); }
.button-ghost { box-shadow: none; background: transparent; }
.button-ghost.is-on { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.button-icon { padding: var(--control-y); width: 34px; flex: none; }
.button-solid-danger { border-color: var(--danger); background: var(--danger); color: var(--danger-ink); }
.button-solid-danger:hover { filter: brightness(0.93); border-color: var(--danger); background: var(--danger); }

.only-mobile { display: none !important; }

/* Page hero */
.page-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    justify-content: space-between;
}

.page-hero .page-title { font-size: 24px; letter-spacing: -0.025em; }

/* KPI tiles */
.kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.kpi {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--surface) 55%, var(--primary-soft));
    box-shadow: var(--shadow-sm);
}

.kpi-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid var(--primary-line);
}

.kpi-icon-accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.kpi-label {
    margin: 0;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.kpi-value {
    margin: 2px 0 0;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.kpi-sub { margin: 2px 0 0; font-size: var(--fs-micro); color: var(--muted-2); }

/* Grid card */
.grid-card { padding: 0; overflow: hidden; }

.grid-head {
    display: grid;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.seg {
    display: inline-flex;
    justify-self: start;
    max-width: 100%;
    overflow-x: auto;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
}

.seg-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 7px;
    padding: 5px 12px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.seg-btn:hover { color: var(--text); }
.seg-btn.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.seg-count, .count-dot {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-ink);
    font-family: var(--font-num);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.grid-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 280px;
    max-width: 420px;
    color: var(--muted-2);
}

.grid-search .icon { position: absolute; left: 10px; pointer-events: none; }

.grid-search input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-body);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.grid-search input:focus { outline: none; border-color: var(--primary-line); box-shadow: var(--ring); }

.select-toolbar { width: auto; min-width: 130px; padding-top: 6px; padding-bottom: 6px; }
.select-quick { min-width: 150px; font-weight: 600; }
.toolbar-spacer { flex: 1; }

.select-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
    padding: 7px 14px;
    background: var(--primary-soft);
    border-bottom: 1px solid var(--primary-line);
    font-size: var(--fs-small);
}

.select-banner .link-button { font-size: var(--fs-small); }

/* Table */
.grid-table-wrap { overflow-x: auto; }

.data-grid th, .data-grid td { padding: 9px 10px; vertical-align: middle; }
.data-grid th { position: static; }
.data-grid tbody tr:nth-child(2n) td { background: transparent; }
.data-grid tbody tr:hover td { background: var(--primary-soft); }
.data-grid tbody tr.is-selected td { background: var(--primary-soft); }
.data-grid tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.data-grid tbody tr.no-hover td { background: transparent; cursor: default; }

.th-sort {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.th-sort .icon { opacity: 0.35; transition: opacity var(--transition); }
.th-sort:hover { color: var(--text); }
.th-sort:hover .icon, .th-sort.is-sorted .icon { opacity: 1; }
.th-sort.is-sorted { color: var(--primary); }
.td-right .th-sort { flex-direction: row-reverse; }

.filter-row th {
    padding-top: 6px;
    padding-bottom: 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-strong);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.input-filter, .select-filter {
    width: 100%;
    min-width: 64px;
    padding: 4px 6px;
    border-radius: 7px;
    font-size: var(--fs-small);
}

.input-filter-num { min-width: 72px; font-family: var(--font-num); }
.input-filter.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft); }

.col-check { width: 36px; padding-right: 0 !important; }
.col-thumb { width: 50px; padding-right: 0 !important; }
.col-edit { width: 46px; padding-left: 0 !important; text-align: right; }
.col-edit .button-icon { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; }

/* Group fill (head against capacity) */
.fill-cell { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.fill-meter { display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.fill-meter > span { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
.fill-meter.fill-high > span { background: var(--accent); }
.fill-meter.fill-over > span { background: var(--danger); }
.animal-card-edit { margin-left: auto; width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; }

.check {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
    vertical-align: middle;
}

.data-grid .thumb { width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.thumb-empty { display: grid; place-items: center; color: var(--muted-2); background: var(--surface-sunken); }
.thumb-lg { width: 52px; height: 52px; flex: none; border-radius: var(--radius-md); border: 1px solid var(--border); }

.tag-link {
    font-family: var(--font-num);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.row-link:hover .tag-link { color: var(--primary); }

.group-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    font-size: var(--fs-micro);
    font-weight: 600;
}

.data-grid tfoot td {
    padding-top: 11px;
    padding-bottom: 11px;
    background: var(--surface-sunken);
    border-top: 1px solid var(--border-strong);
    border-bottom: 0;
    font-weight: 700;
}

.data-grid tfoot .text-muted { font-weight: 400; }

/* Loading + empty */
.skeleton-list { display: grid; padding: 6px 14px 14px; }
.skeleton-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }

.skeleton {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--primary-soft) 50%, var(--surface-sunken) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
}

.skeleton-thumb { width: 38px; height: 38px; border-radius: var(--radius-md); }
.skeleton-line { height: 12px; flex: 1; max-width: 340px; }
.skeleton-short { max-width: 120px; margin-left: auto; }

@keyframes shimmer { to { background-position: -200% 0; } }

.grid-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
}

.grid-empty h2 { margin: 4px 0 0; font-size: 16px; }
.grid-empty p { margin: 0; max-width: 46ch; color: var(--muted); font-size: var(--fs-small); }
.grid-empty-inline { padding: 28px 16px; }

.grid-empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid var(--primary-line);
}

/* Footer + pager */
.grid-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
}

.grid-count { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.grid-count strong { color: var(--text); font-family: var(--font-num); }

.grid-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.page-size { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted); }
.page-size .select-toolbar { min-width: 68px; }

.pager { display: inline-flex; align-items: center; gap: 3px; }

.pager-btn {
    appearance: none;
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-family: var(--font-num);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.pager-btn:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary-line); }
.pager-btn:disabled { color: var(--muted-2); opacity: 0.45; cursor: default; }
.pager-btn.is-on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 700; }
.pager-gap { min-width: 18px; text-align: center; color: var(--muted-2); }
.pager-compact { display: none; padding: 0 6px; font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }

/* Mobile filters + cards */
.mobile-filters {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.mobile-filters .field:first-child { grid-column: 1 / -1; }
.mobile-filters .input-filter, .mobile-filters .select-filter { width: 100%; font-size: 16px; padding: 7px 9px; }

.animal-cards { gap: 8px; padding: 10px; }

.animal-card {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 12px 12px 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.animal-card:active { background: var(--primary-soft); }
.animal-card.is-selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }

.animal-card-check {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 40px;
    display: grid;
    justify-items: center;
    align-content: start;
    padding-top: 16px;
}

.animal-card-check .check { width: 18px; height: 18px; }
.animal-card-plain { padding-left: 12px; }
.animal-card-main { flex: 1; min-width: 0; }
.animal-card-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.animal-card-top .tag-link { font-size: 15px; color: inherit; text-decoration: none; }
.animal-card-name { color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.animal-card-line { margin: 2px 0 0; font-size: var(--fs-small); }
.animal-card-muted { color: var(--muted-2); font-size: var(--fs-micro); }
.animal-card .chip-row { margin-top: 6px; }

.animal-card-figs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--border-strong);
}

.animal-card-figs dt { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.animal-card-figs dd { margin: 1px 0 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-small); font-weight: 700; }

/* Bulk dock */
.bulk-spacer { height: 88px; }

.bulk-dock {
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(980px, calc(100% - 24px));
    display: grid;
    gap: 8px;
    animation: dock-in 180ms ease-out;
}

@keyframes dock-in { from { opacity: 0; transform: translate(-50%, 12px); } }

.bulk-bar-dock {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 14px;
    border-radius: 14px;
    background: var(--primary-2);
    color: var(--primary-ink);
    box-shadow: var(--shadow-lg);
}

.bulk-count { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--fs-small); font-weight: 600; }

.bulk-count-num {
    min-width: 26px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--primary-ink);
    color: var(--primary-2);
    font-family: var(--font-num);
    font-weight: 800;
    text-align: center;
}

.bulk-clear {
    appearance: none;
    border: 0;
    background: none;
    color: inherit;
    opacity: 0.85;
    font: inherit;
    font-size: var(--fs-micro);
    text-decoration: underline;
    cursor: pointer;
}

.bulk-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.dock-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.dock-btn:hover, .dock-btn.is-on { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.22); }
:root[data-theme="dark"] .dock-btn:hover, :root[data-theme="dark"] .dock-btn.is-on { background: rgba(0, 0, 0, 0.14); border-color: rgba(0, 0, 0, 0.2); }
.dock-btn-danger, .dock-btn-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }
.dock-btn-danger:hover { filter: brightness(1.08); }
.dock-sep { width: 1px; height: 22px; margin: 0 4px; background: currentColor; opacity: 0.25; flex: none; }

.bulk-panel {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.bulk-panel-title { margin: 0; padding-right: 28px; font-weight: 700; }
.bulk-panel-title span { color: var(--muted); font-weight: 400; font-size: var(--fs-small); }
.bulk-panel-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bulk-panel-row .select { width: auto; min-width: 200px; flex: 1 1 200px; max-width: 320px; }
.bulk-panel-row .input-num { width: 140px; }
.bulk-panel-row .input-date { width: 160px; }
.bulk-panel-row .bulk-panel-notes { flex: 2 1 200px; min-width: 160px; }
.bulk-panel .hint { margin: 0; }
.bulk-panel .warnings { margin-top: 0; }

.bulk-panel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.bulk-panel-close:hover { background: var(--surface-sunken); color: var(--text); }

/* Confirm dialog + toast */
.modal-backdrop { backdrop-filter: blur(2px); animation: fade-in 140ms ease-out; }
.modal-confirm { display: grid; gap: 12px; width: min(460px, 100%); padding: 20px; animation: pop-in 160ms ease-out; }
.modal-title { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.modal-text { margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.55; }
.modal-tags { margin: 0; align-items: center; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.modal-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
}

.modal-icon-danger { background: var(--danger-soft); color: var(--danger); }

.code-chip {
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    font-family: var(--font-num);
    font-size: var(--fs-micro);
    font-weight: 600;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

.toast {
    position: fixed;
    z-index: 70;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 24px);
    padding: 9px 10px 9px 12px;
    border-radius: 12px;
    background: var(--text);
    color: var(--bg);
    font-size: var(--fs-small);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    animation: dock-in 180ms ease-out;
}

.toast-raised { bottom: 96px; }

.toast-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-ink);
}

.toast-action, .toast-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.toast-action { padding: 3px 8px; border-radius: 6px; font-weight: 800; text-decoration: underline; }
.toast-close { display: grid; place-items: center; padding: 3px; opacity: 0.7; }
.toast-action:hover, .toast-close:hover { opacity: 1; background: rgba(127, 127, 127, 0.2); }

/* Responsive */
@media (max-width: 1000px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .only-desktop { display: none !important; }
    .button.only-mobile { display: inline-flex !important; }
    .mobile-filters.only-mobile, .animal-cards.only-mobile { display: grid !important; }

    .page-hero .page-title { font-size: 21px; }
    .page-hero .button-lg { flex: 1 1 100%; }
    .page-hero-actions { width: 100%; }
    .page-hero-actions .button-lg { flex: 1 1 0; justify-content: center; }

    .kpis { gap: 8px; }
    .kpi { padding: 10px 11px; }
    .kpi-icon { display: none; }
    .kpi-label { font-size: 10px; letter-spacing: 0.04em; }
    .kpi-value { font-size: 15px; }

    .grid-head { padding: 10px; }
    .seg { justify-self: stretch; }
    .seg-btn { flex: 1; justify-content: center; padding: 6px 8px; }
    .grid-search { flex-basis: 100%; max-width: none; }
    .grid-search input { font-size: 16px; } /* Stops iOS zooming on focus. */
    .grid-toolbar .select-toolbar { flex: 1 1 auto; }
    .toolbar-spacer { display: none; }

    .grid-footer { justify-content: center; padding: 10px; }
    .grid-count { width: 100%; text-align: center; }
    .grid-pager { width: 100%; justify-content: space-between; }
    .pager-num, .pager-gap { display: none; }
    .pager-compact { display: inline; }

    .bulk-dock { bottom: 0; width: 100%; gap: 0; }
    .bulk-bar-dock {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
        border-radius: 16px 16px 0 0;
    }
    .bulk-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        margin-left: 0;
    }
    .dock-sep { display: none; }
    .dock-btn { flex-direction: column; justify-content: center; gap: 3px; padding: 7px 4px; font-size: var(--fs-micro); }
    .dock-btn:not(:hover):not(.is-on):not(.dock-btn-danger) { background: rgba(255, 255, 255, 0.08); }
    .bulk-panel { border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: var(--shadow-md); }
    .bulk-panel-row .select, .bulk-panel-row .input-num, .bulk-panel-row .input-date, .bulk-panel-row .bulk-panel-notes { flex: 1 1 100%; max-width: none; width: 100%; }
    .bulk-spacer { height: 120px; }
    .toast-raised { bottom: 132px; }

    .modal-backdrop { place-items: end center; padding: 0; }
    .modal-confirm { width: 100%; border-radius: 18px 18px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    .modal-actions .button { flex: 1; padding: 9px; }
}

@media (max-width: 340px) {
    .kpis { grid-template-columns: 1fr; }
    .mobile-filters { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Record page — profile header, tabs, panels, drawer (Animal detail)
   ========================================================================== */

.crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: var(--fs-small);
    color: var(--muted);
}

.crumbs a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--primary); }
.crumbs [aria-current] { color: var(--text); font-weight: 700; font-family: var(--font-num); }
.crumbs-spacer { flex: 1; }
.stepper { display: inline-flex; align-items: center; gap: 2px; }
.stepper .pager-btn { text-decoration: none; }
.stepper-text { padding: 0 6px; white-space: nowrap; font-size: var(--fs-micro); }
.pager-btn.is-disabled { opacity: 0.35; pointer-events: none; }

.status-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--surface-sunken);
    font-size: var(--fs-small);
}

.status-banner span { flex: 1 1 260px; }
.status-banner-sold { border-color: var(--accent); background: var(--accent-soft); }
.status-banner-dead { border-color: var(--danger); background: var(--danger-soft); }

/* Profile header */
.profile { padding: 0; }

.profile-main {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    background: linear-gradient(120deg, var(--primary-soft), transparent 55%), linear-gradient(300deg, var(--accent-soft), transparent 45%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.avatar {
    position: relative;
    flex: none;
    width: 88px;
    height: 88px;
    border-radius: 20px;
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-md);
    background: var(--surface-sunken);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 17px; display: block; }
.avatar-empty { display: grid; place-items: center; color: var(--primary); background: linear-gradient(140deg, var(--primary-soft), var(--accent-soft)); }
.avatar-initial { font-family: var(--font-num); font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }

.avatar-edit {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--primary);
    color: var(--primary-ink);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition);
}

.avatar-edit:hover { transform: scale(1.08); }
.avatar-edit:focus-within { box-shadow: var(--ring); }

.profile-id { flex: 1; min-width: 0; display: grid; gap: 8px; }
.profile-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

.profile-tag {
    margin: 0;
    font-family: var(--font-num);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.profile-name { font-size: 17px; font-weight: 600; color: var(--muted); }

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-small);
    color: var(--muted);
}

.profile-meta li { display: inline-flex; align-items: center; gap: 5px; }
.profile-meta .icon { color: var(--primary); }

.profile-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.chip-add {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px dashed var(--border-strong);
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-micro);
    font-weight: 600;
    cursor: pointer;
}

.chip-add:hover, .chip-add[aria-expanded="true"] { border-color: var(--primary-line); color: var(--primary); background: var(--primary-soft); }

.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }

/* Popovers + menu */
.popover-wrap { position: relative; display: inline-flex; }
.popover-scrim { position: fixed; inset: 0; z-index: 40; }

.popover {
    position: absolute;
    z-index: 41;
    top: calc(100% + 6px);
    display: grid;
    gap: 8px;
    min-width: 220px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: pop-in 120ms ease-out;
}

.popover-labels { left: 0; width: min(320px, 80vw); }
.popover-title { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.popover .hint { margin: 0; }

.menu { right: 0; gap: 1px; padding: 6px; min-width: 210px; }

.menu-item {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-item .icon { color: var(--muted); }
.menu-item:hover { background: var(--primary-soft); }
.menu-item-danger, .menu-item-danger .icon { color: var(--danger); }
.menu-item-danger:hover { background: var(--danger-soft); }
.menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }

/* Profile stats */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}

.pstat { padding: 12px 18px; min-width: 0; }
.pstat + .pstat { border-left: 1px solid var(--border); }
.pstat-label { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.pstat-value {
    margin: 3px 0 0;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.pstat-sub { margin: 2px 0 0; font-size: var(--fs-micro); color: var(--muted-2); }
.pstat-warn { box-shadow: inset 0 -3px 0 var(--danger); }

/* Tabs */
.page-tabs {
    position: sticky;
    top: 58px;
    z-index: 30;
    display: flex;
    gap: 2px;
    margin-top: 12px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.page-tabs::-webkit-scrollbar { display: none; }

.page-tab {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.page-tab:hover { color: var(--text); background: var(--surface-sunken); }
.page-tab.is-on { color: var(--primary); background: var(--primary-soft); }
.page-tab.is-on { box-shadow: inset 0 0 0 1px var(--primary-line); }
.page-tab:focus-visible { outline: none; box-shadow: var(--ring); }

.tab-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--surface-sunken);
    color: var(--muted);
    font-family: var(--font-num);
    font-size: 10px;
    line-height: 17px;
    text-align: center;
}

.page-tab.is-on .tab-count { background: var(--primary); color: var(--primary-ink); }
.tab-count-warn, .page-tab.is-on .tab-count-warn { background: var(--accent); color: #fff; }
.tab-count-danger, .page-tab.is-on .tab-count-danger { background: var(--danger); color: var(--danger-ink); }

.tab-panel { margin-top: 12px; animation: fade-in 160ms ease-out; }

.tab-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.tab-toolbar-text { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.kpis-compact { margin-bottom: 12px; }
.kpis-compact .kpi { padding: 11px 13px; background: var(--surface); }
.kpis-compact .kpi-value { font-size: 17px; }
.kpi-warn { border-color: var(--accent); background: var(--accent-soft) !important; }

/* Panels */
.panel { display: grid; gap: 12px; align-content: start; }

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.panel-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.panel-title .icon { color: var(--primary); }
.panel-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-tools .link-button, .panel-head > .link-button { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); text-decoration: none; }
.panel-total { font-family: var(--font-num); font-weight: 700; font-size: 14px; }
.panel-foot { margin: 0; font-size: var(--fs-micro); color: var(--muted-2); }
.panel > .facts, .panel > .fact-grid { margin: 0; }

.overview-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.details-grid { display: grid; gap: 12px; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; }

.mini-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--border);
}

.mini-stats > div { display: grid; gap: 2px; padding: 8px 10px; background: var(--surface); }
.mini-stats span { font-size: var(--fs-micro); color: var(--muted); }
.mini-stats strong { font-family: var(--font-num); font-size: var(--fs-small); }

/* Cost breakdown: one hue, value + share as text. */
.breakdown { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.breakdown li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    align-items: baseline;
    gap: 2px 10px;
    font-size: var(--fs-small);
}

.breakdown-value { font-family: var(--font-num); font-weight: 700; }
.breakdown-pct { font-family: var(--font-num); color: var(--muted); text-align: right; }
.breakdown-track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; }
.breakdown-bar { display: block; height: 100%; border-radius: 4px; background: var(--primary); transition: width 300ms ease; }

.health-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    font-weight: 600;
}

.health-line.is-ok { background: var(--primary-soft); color: var(--primary); }
.health-line.is-warn { background: var(--accent-soft); color: var(--accent); }

.due-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.due-rows li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.due-rows li:last-child { border-bottom: 0; }
.due-rows .status-pill { flex: none; margin-top: 1px; }
.due-what { display: grid; gap: 1px; min-width: 0; font-size: var(--fs-small); }

.facts-rows { align-content: start; }
.facts-rows dt, .facts-rows dd { padding: 6px 0; border-bottom: 1px dashed var(--border); }

.target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.target-box {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.target-box .hint { margin: 0; }
.target-box .input-num { max-width: 160px; }
.target-box .input-with-button > .input { flex: 0 1 160px; }

.table-soft { max-height: 480px; box-shadow: none; }

.icon-button {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.icon-button:hover { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.vtimeline { position: relative; display: grid; gap: 14px; margin: 0; padding: 2px 0 2px 22px; list-style: none; font-size: var(--fs-small); }
.vtimeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border); border-radius: 2px; }
.vtimeline li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.vtimeline li::before { content: ""; position: absolute; left: -21px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); }
.vtimeline li.is-current::before { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.vtimeline .cell-sub { flex-basis: 100%; }
.vtimeline a { color: var(--primary); }

.fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.fact-grid > div { display: grid; gap: 2px; align-content: start; padding: 9px 11px; min-width: 0; outline: 1px solid var(--border); }
.fact-grid dt { font-size: var(--fs-micro); color: var(--muted); font-weight: 600; }
.fact-grid dd { margin: 0; font-size: var(--fs-small); font-weight: 600; overflow-wrap: anywhere; }
.fact-grid a { color: var(--primary); }
.fact-grid .fact-wide { grid-column: span 2; }
.fact-grid .code-chip { text-decoration: none; color: var(--text); }

.photo-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 28px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--muted-2);
    text-align: center;
}

.photo-empty p { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.notes { margin: 0; white-space: pre-line; font-size: var(--fs-small); }

.profile-skeleton { display: flex; align-items: center; gap: 16px; padding: 18px; }
.profile-skeleton-avatar { width: 88px; height: 88px; border-radius: 20px; }
.profile-skeleton-lines { flex: 1; display: grid; gap: 10px; }

/* Edit drawer */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    background: rgba(31, 27, 20, 0.45);
    backdrop-filter: blur(2px);
    animation: fade-in 140ms ease-out;
}

.drawer {
    width: min(620px, 100%);
    height: 100%;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: slide-in 200ms ease-out;
}

@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }

.drawer-form { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.drawer-head .bulk-panel-close { position: static; }
.drawer-eyebrow { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.drawer-title { margin: 2px 0 0; font-size: 18px; font-family: var(--font-num); letter-spacing: -0.02em; }
.drawer-body { overflow-y: auto; padding: 16px 18px; display: grid; grid-auto-rows: max-content; gap: var(--gap); align-content: start; }

.drawer-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--surface-sunken);
}

/* Health side panels (dose, sickness) */
.drawer-narrow { width: min(480px, 100%); }
.drawer-sub { margin: 2px 0 0; font-size: var(--fs-micro); color: var(--muted-2); }
.drawer-body > .field, .drawer-body > .field-row { margin: 0; }
.drawer-body .warnings { margin-top: 0; }

.drawer-section { display: grid; gap: var(--gap); padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.drawer-section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.drawer-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.drawer-section-title {
    margin: 0;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.drawer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--muted);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.drawer-link:hover { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.drawer-link .icon:last-child { margin-left: auto; }
.drawer-foot-hint { margin-right: auto; align-self: center; font-size: var(--fs-micro); color: var(--muted-2); }

.dose-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-md);
    background: var(--primary-line);
}

.dose-summary > div { display: grid; gap: 1px; padding: 8px 10px; background: var(--surface); }
.dose-summary span { font-size: var(--fs-micro); color: var(--muted); }
.dose-summary strong { font-family: var(--font-num); font-size: var(--fs-small); }
.dose-summary-wide { grid-column: 1 / -1; }

.course-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.course-card-head { display: flex; align-items: center; justify-content: space-between; }
.course-card-num { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.course-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.course-grid .input, .course-grid .input-num { width: 100%; min-width: 0; }

/* Responsive */
@media (max-width: 1100px) {
    .overview-grid, .details-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .profile-main { flex-wrap: wrap; }
    .profile-actions { flex-basis: 100%; justify-content: flex-start; }
    .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pstat:nth-child(3) { border-left: 0; }
    .pstat:nth-child(n + 3) { border-top: 1px solid var(--border); }
    .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .crumbs .stepper-text { display: none; }
    .profile-main { padding: 14px; gap: 12px; }
    .avatar, .profile-skeleton-avatar { width: 64px; height: 64px; border-radius: 16px; }
    .avatar img { border-radius: 13px; }
    .avatar-edit { width: 26px; height: 26px; }
    .avatar-initial { font-size: 25px; }
    .profile-id { flex: 1 1 calc(100% - 80px); }
    .profile-tag { font-size: 21px; }
    .profile-name { font-size: 15px; }
    .profile-meta { gap: 3px 12px; }
    .profile-actions > .button:not(.button-icon) { flex: 1; white-space: nowrap; }
    .profile-actions > .button-primary { flex-basis: 100%; }
    .pstat { padding: 10px 12px; }
    .pstat-value { font-size: 16px; }

    .page-tabs { top: 56px; margin-left: -4px; margin-right: -4px; border-radius: var(--radius-md); }
    .page-tab { padding: 8px 11px; }
    .page-tab .icon { display: none; }

    .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .target-grid { grid-template-columns: minmax(0, 1fr); }
    .fact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tab-toolbar .button-row { width: 100%; }
    .tab-toolbar .button-row .button { flex: 1; }

    .popover-labels { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
    .menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; padding: 8px; border-radius: 16px; }
    .menu-item { padding: 12px; font-size: var(--fs-body); }

    .drawer { width: 100%; border-left: 0; }
    .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .drawer-foot { flex-wrap: wrap; }
    .drawer-foot-hint { flex-basis: 100%; }
    .drawer-foot .button { flex: 1; padding: 10px; }
}

/* ==========================================================================
   Lot detail (Pages/LotDetail.razor, Shared/Lot*.razor) — builds on the animal profile styles above
   ========================================================================== */
.avatar-lot { color: var(--primary); }

/* Both scopes in each profile stat: active (big) and all bought (below). */
.pstat-all {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0 0;
    padding-top: 7px;
    border-top: 1px dashed var(--border);
    font-size: var(--fs-micro);
    color: var(--muted);
}

.pstat-all strong { font-family: var(--font-num); font-size: var(--fs-small); color: var(--text); white-space: nowrap; }

.panel-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.seg-sm { padding: 2px; }
.seg-sm .seg-btn { padding: 4px 10px; font-size: var(--fs-micro); }

.lot-label { display: inline-flex; align-items: center; gap: 3px; }
.label-count { font-family: var(--font-num); font-size: 10px; font-weight: 700; color: var(--muted); }
.lot-inline-chips { margin-top: 0; }
.lot-grid-hint { margin: 0; padding: 8px 14px 12px; }

.fact-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Lot weight chart: each animal as a thin grey line; hover or focus picks one out. */
.lc-swatch-animal { border-color: var(--muted-2); }
.lc-animal { cursor: pointer; outline: none; }
.lc-animal-hit { fill: none; stroke: transparent; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.lc-animal-line { fill: none; stroke: var(--muted-2); stroke-opacity: 0.45; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; transition: stroke-opacity var(--transition); }
.lc-animal-end { fill: var(--muted-2); fill-opacity: 0.6; pointer-events: none; }
.lc-animal-tag { opacity: 0; pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.lc-animal:hover .lc-animal-line, .lc-animal:focus-visible .lc-animal-line { stroke: var(--text); stroke-opacity: 1; stroke-width: 2.5; }
.lc-animal:hover .lc-animal-end, .lc-animal:focus-visible .lc-animal-end { fill: var(--text); fill-opacity: 1; }
.lc-animal:hover .lc-animal-tag, .lc-animal:focus-visible .lc-animal-tag { opacity: 1; }
.lc-average { stroke-width: 2.5; pointer-events: none; }

/* Animal pick lists in the lot's dose / sickness panels. */
.lot-picklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
    max-height: 260px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.lot-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.lot-pick:hover { border-color: var(--primary-line); }
.lot-pick.is-on { border-color: var(--primary-line); background: var(--primary-soft); }
.lot-pick .cell-sub { flex-basis: 100%; margin: 0; padding-left: 24px; }
.lot-pick-amount { margin-left: auto; font-family: var(--font-num); font-size: var(--fs-micro); font-weight: 700; }

/* Lot weighing sheet in a wider drawer. */
.drawer-wide { width: min(820px, 100%); }
.lot-sheet td { vertical-align: middle; }
.lot-sheet .input-num { max-width: 120px; }

/* Lot photos & receipts (Purchase & costs tab). */
.file-button.is-busy { opacity: 0.6; pointer-events: none; }
.lot-files-group { display: grid; gap: 8px; }
.lot-files-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.lot-receipts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }

.file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.file-card-thumb {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    text-decoration: none;
}

.file-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-badge { font-family: var(--font-num); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--danger); }
.file-card-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.file-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-small); color: var(--text); text-decoration: none; }
.file-card-name:hover { color: var(--primary); text-decoration: underline; }

.lot-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.photo-tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); }
.photo-tile a { display: block; width: 100%; height: 100%; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms ease; }
.photo-tile a:hover img { transform: scale(1.03); }

.photo-tile-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    pointer-events: none;
}

.photo-tile-remove { position: absolute; top: 6px; right: 6px; background: var(--surface); box-shadow: var(--shadow-sm); }

@media (max-width: 900px) {
    .fact-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .panel-controls .seg { max-width: 100%; }
    .drawer-wide { width: 100%; }
}

/* ==========================================================================
   Labels list & label page (Pages/LabelList.razor, Pages/LabelDetail.razor, Shared/LabelFields.razor)
   ========================================================================== */
.swatch-row { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 2px; }
.label-preview { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

/* Row / card icon tinted with the label's colour. */
.thumb.label-thumb,
.data-grid .thumb.label-thumb {
    display: grid;
    place-items: center;
    border-color: var(--label-line);
    background: var(--label-bg);
    color: var(--label-ink);
}

.label-link { text-decoration: none !important; }
.data-grid .label-link .label-chip,
.animal-card-top .label-link .label-chip { font-size: var(--fs-small); padding: 2px 10px; }
.row-link:hover .label-link .label-chip { border-color: var(--label-ink); }

/* A label name in a KPI tile reads as text, not a figure. */
.kpi-value.kpi-value-text { font-family: inherit; letter-spacing: -0.01em; }

.avatar-empty.avatar-label { background: var(--label-bg); color: var(--label-ink); border-color: var(--label-line); }

/* Feeding priority (Settings › Feeding priority) */
.priority-list { display: grid; gap: 8px; margin: 12px 0 8px; padding: 0; list-style: none; }
.priority-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--transition), background var(--transition);
}
.priority-row.is-moved { border-color: var(--primary-line); background: var(--primary-soft); }
.priority-rank {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--text);
    font-family: var(--font-num);
    font-weight: 700;
}
.priority-row:first-child .priority-rank { background: var(--primary); color: var(--primary-ink); }
.priority-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.priority-moves { display: inline-flex; gap: 4px; flex: none; }

/* Feeding tab (animal / lot / group / label pages): sub-lines in table cells sit on their own line. */
.feeding-tab .table td > .cell-sub { display: block; }
.feeding-tab .table td > .cell-sub + .cell-sub { margin-top: 1px; }

/* New feed plan side panel (Feeding tab) */
.fp-phase { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.fp-phase .field-row { margin: 0; }
.fp-phase-head { display: flex; align-items: center; gap: 8px; }
.fp-phase-head .cell-sub { font-size: var(--fs-micro); }
.fp-phase-tools { display: inline-flex; gap: 4px; margin-left: auto; }
.fp-lines { display: grid; gap: 6px; }
.fp-line { display: grid; grid-template-columns: minmax(0, 1fr) 84px 112px 34px; gap: 6px; align-items: center; }
.fp-line .input-num { width: 100%; }

@media (max-width: 520px) {
    .fp-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; }
    .fp-line-feed { grid-column: 1 / -1; }
}

/* ==========================================================================
   Feed templates (Pages/FeedTemplates.razor, FeedTemplateEdit.razor; the template picker in the plan
   editor and the Feeding tab's new-plan panel; "Save as template")
   ========================================================================== */
.text-warn { color: var(--accent); }

/* A ration's phases as one bar, each segment as wide as its days. */
.phase-strip { display: flex; gap: 3px; min-width: 0; }
.phase-seg {
    display: grid;
    flex: 1 1 0;
    min-width: 44px;
    padding: 5px 8px;
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    line-height: 1.25;
    overflow: hidden;
}
.phase-seg-1, .phase-seg-3 { border-color: var(--border-strong); background: var(--surface-sunken); }
.phase-seg-name { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phase-seg-days { font-family: var(--font-num); font-size: var(--fs-micro); color: var(--muted); }

/* Picker */
.tpl-picker { display: grid; gap: 8px; }
.tpl-pick-card { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.tpl-pick-card .hint { margin: 0; }
.tpl-pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tpl-pick-head .badge-sm { margin-left: 0; }
.tpl-pick-head .cell-sub { margin-left: auto; }
.tpl-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    font-size: var(--fs-small);
}
.tpl-manage { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: var(--fs-small); }

/* "Started from template X · Change" above a ration being edited. */
.tpl-source { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--muted); }
.tpl-source > span { flex: 1; min-width: 0; }
.tpl-source .link-button { flex: none; }

/* List: start weight for the per-head estimates, in the toolbar */
.tpl-weight { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted); }

/* "Save as template" dialog: a small form, wider than a confirm. */
.modal-form { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal-form-body { display: grid; gap: 12px; }

/* Delete farm dialog (Farms page) */
.farm-delete-list { display: grid; gap: 4px; margin: 0; padding-left: 18px; font-size: var(--fs-small); }

/* ==========================================================================
   Add animals (Pages/AddAnimals.razor, Acquisition/*.razor)
   Scoped under .acq so the shared field components (AnimalDetailsFields, HealthFields)
   keep their look elsewhere, e.g. in the animal edit drawer.
   ========================================================================== */

.acq { --control-y: 8px; }

/* A field stretched by its row keeps label + control together (else the control drifts down). */
.acq .field { align-content: start; }

/* Mode picker */
.acq-modes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.acq-mode {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), transform var(--transition);
}

.acq-mode:hover { border-color: var(--primary-line); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.acq-mode.is-on {
    border-color: var(--primary);
    background: linear-gradient(150deg, var(--primary-soft), var(--surface) 80%);
    box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-md);
}

.acq-mode-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--muted);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.acq-mode:hover .acq-mode-icon { border-color: var(--primary-line); color: var(--primary); }
.acq-mode.is-on .acq-mode-icon { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }

.acq-mode-text { display: grid; gap: 1px; min-width: 0; }
.acq-mode-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.acq-mode.is-on .acq-mode-title { color: var(--primary); }
.acq-mode-desc { overflow: hidden; font-size: var(--fs-micro); color: var(--muted-2); white-space: nowrap; text-overflow: ellipsis; }

.acq-mode-check {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-ink);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--transition), transform var(--transition);
}

.acq-mode.is-on .acq-mode-check { opacity: 1; transform: none; }

/* Form + summary */
.acq-layout {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    align-items: start;
}

.acq-main, .acq-aside { display: grid; gap: 14px; min-width: 0; }

@media (min-width: 1100px) {
    .acq-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .acq-aside { position: sticky; top: 72px; }
}

/* Numbered section cards */
.acq-section { padding: 0; }

.acq-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border);
}

.acq-step {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border: 1px solid var(--primary-line);
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-family: var(--font-num);
    font-size: var(--fs-small);
    font-weight: 800;
}

.acq-section-heading { flex: 1; min-width: 0; padding-top: 3px; }
.acq-section-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.acq-section-sub { margin: 1px 0 0; font-size: var(--fs-small); color: var(--muted); }
.acq-section-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; padding-top: 3px; }
.acq-section-tools:empty { display: none; }

.acq-section-body {
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
    container-type: inline-size;
}

.acq-count {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border: 1px solid var(--primary-line);
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-family: var(--font-num);
    font-size: var(--fs-micro);
    font-weight: 700;
    white-space: nowrap;
}

/* Field grid, sized by the card's width (not the viewport): one field per row on phones
   (only short .half pairs share a row), 2 columns on mid widths, 4 on wide cards. */
.acq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: start;
}

/* Flatten AnimalDetailsFields so its fields flow into this grid. */
.acq-grid > .form, .acq-grid > .form > .field-row { display: contents; }

.acq-grid > *, .acq-grid > .form > .field-row > .field { grid-column: 1 / -1; }
.acq-grid > .half { grid-column: auto; }

@container (max-width: 280px) {
    .acq-grid > .half { grid-column: 1 / -1; }
}

@container (min-width: 520px) {
    .acq-grid > *, .acq-grid > .form > .field-row > .field { grid-column: auto; }
    .acq-grid > .span-2, .acq-grid > .span-all, .acq-grid > .form > .field { grid-column: 1 / -1; }
}

@container (min-width: 820px) {
    .acq-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .acq-grid > .span-2 { grid-column: span 2; }
}

.acq-grid > .form > .link-button {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px dashed var(--primary-line);
    border-radius: 999px;
    font-size: var(--fs-small);
}

.acq-grid > .form > .link-button:hover { background: var(--primary-soft); text-decoration: none; }

/* Toggle groups (price basis, weighed by, sex) as joined segmented buttons */
.acq [role="radiogroup"] { gap: 0; row-gap: 6px; align-items: center; }

.acq [role="radiogroup"] > .chip {
    min-height: 37px;
    margin-left: -1px;
    padding: 5px 13px;
    border-radius: 0;
    color: var(--muted);
    font-weight: 600;
}

.acq [role="radiogroup"] > .chip:first-child { margin-left: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.acq [role="radiogroup"] > .chip:last-of-type { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.acq [role="radiogroup"] > .chip:first-child:last-of-type { border-radius: var(--radius-sm); }
.acq [role="radiogroup"] > .chip:hover { position: relative; z-index: 1; color: var(--text); }

.acq [role="radiogroup"] > .chip-active,
.acq [role="radiogroup"] > .chip-active:hover {
    position: relative;
    z-index: 2;
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
}

.acq [role="radiogroup"] > .check-row { margin-left: 12px; }
.acq input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }

/* Inputs with a unit inside (Rs, kg) */
.affix { position: relative; }
.affix > .input { padding-left: 34px; }

.affix-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 11px;
    display: flex;
    align-items: center;
    color: var(--muted-2);
    font-size: var(--fs-small);
    font-weight: 600;
    pointer-events: none;
}

.affix-end > .input { padding-left: var(--control-x); padding-right: 34px; }
.affix-end > .affix-text { left: auto; right: 11px; }
.affix-wide > .input { padding-right: 54px; }

/* Money boxes: room for the currency symbol (Settings › Currency), set on <main> by MainLayout */
.affix:has(> .affix-cur) > .input { padding-left: var(--cur-pad, 34px); }
.affix-end:has(> .affix-cur-kg) > .input { padding-right: var(--cur-kg-pad, 54px); }
.affix > input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.affix > input[type="number"]::-webkit-inner-spin-button,
.affix > input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* Live figures next to the inputs */
.acq-readout {
    display: grid;
    align-content: center;
    align-self: stretch;
    gap: 1px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.acq-readout > span { font-size: var(--fs-micro); color: var(--muted); }
.acq-readout > strong { font-family: var(--font-num); font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Lot purchase: defaults, quick add and one compact row per animal (Acquisition/LotAnimalList.razor) */
.lot-defaults {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.lot-defaults-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.lot-defaults-title { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lot-defaults-head .link-button { font-size: var(--fs-small); }
.lot-defaults-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); gap: 10px 12px; align-items: start; }

.lot-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-strong);
}

.lot-add-count { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; }
.lot-add-count .input { width: 78px; text-align: center; }
.lot-add .acq-add { margin-left: auto; }

.acq-add {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px dashed var(--primary-line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.acq-add:hover { border-style: solid; background: var(--primary-soft); }
.acq-add:disabled { opacity: 0.55; cursor: not-allowed; }

.lot-rows { display: grid; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }

.lot-head, .lot-row {
    display: grid;
    grid-template-columns: 26px minmax(92px, 1fr) auto minmax(112px, 1.25fr) minmax(76px, 0.9fr) minmax(86px, 1fr) minmax(130px, 1.5fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.lot-head {
    padding-top: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-strong);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lot-row {
    --control-y: 6px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition), box-shadow var(--transition);
    animation: fade-in 160ms ease-out;
}

.lot-row:last-child { border-bottom: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.lot-row:hover, .lot-row:focus-within { background: var(--row-alt); }
.lot-row.is-incomplete { box-shadow: inset 3px 0 0 var(--accent); }

.lot-num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--primary-soft);
    color: var(--primary);
    font-family: var(--font-num);
    font-size: var(--fs-micro);
    font-weight: 800;
}

.lot-cap { display: none; }
.lot-row [role="radiogroup"] { flex-wrap: nowrap; }
.lot-row [role="radiogroup"] > .chip { min-height: 33px; padding: 4px 11px; }
.lot-animal { display: grid; gap: 1px; min-width: 0; }
.lot-breed { overflow: hidden; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.lot-extra { font-weight: 400; color: var(--muted); }
.lot-missing { color: var(--accent); font-weight: 600; }
.lot-share { overflow: hidden; color: var(--muted); font-family: var(--font-num); font-size: var(--fs-micro); white-space: nowrap; text-overflow: ellipsis; }
.lot-share strong { color: var(--primary); font-size: var(--fs-small); }
.lot-actions { display: inline-flex; gap: 2px; }
.icon-button-neutral:hover { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }

.lot-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: -4px 0 0; font-size: var(--fs-micro); color: var(--muted-2); }

/* Narrow cards: each row becomes a small card (number, animal and actions on top, fields below). */
@container (max-width: 759px) {
    .lot-head { display: none; }

    .lot-row {
        grid-template-columns: auto repeat(4, minmax(0, 1fr)) auto;
        grid-template-areas:
            "num    animal animal animal animal actions"
            "weight weight weight teeth  teeth  teeth"
            "sex    sex    ear    ear    colour colour";
        align-items: end;
        gap: 8px;
        padding: 10px 12px 12px;
    }

    .lot-num { grid-area: num; align-self: center; }
    .lot-animal { grid-area: animal; align-self: center; }
    .lot-actions { grid-area: actions; align-self: center; }
    .lot-weight { grid-area: weight; }
    .lot-teeth { grid-area: teeth; }
    .lot-sex { grid-area: sex; }
    .lot-ear { grid-area: ear; }
    .lot-colour { grid-area: colour; }
    .lot-weight, .lot-teeth, .lot-sex, .lot-ear, .lot-colour { min-width: 0; }
    .lot-cap { display: block; margin-bottom: 3px; font-size: var(--fs-micro); font-weight: 600; color: var(--muted); }
    .lot-add .acq-add { margin-left: 0; flex: 1 1 100%; }
}

/* Health at entry: the section card is the frame, so drop the fieldset's own. */
.acq-health > .fieldset { padding: 0; border: 0; }

.acq-health > .fieldset > .legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Birth: chosen mother */
.acq-parent {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    animation: fade-in 160ms ease-out;
}

.acq-parent-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid var(--primary-line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--primary);
    font-size: 18px;
    font-weight: 800;
}

.acq-parent-text { display: grid; min-width: 0; font-size: var(--fs-small); }
.acq-parent-text strong { font-family: var(--font-num); }
.acq-parent-text span { color: var(--muted); }

.acq-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 18px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: var(--fs-small);
}

.acq-placeholder .icon { color: var(--primary); }

/* Transfer: pick animals from the source farm (table on wide cards, cards on narrow ones) */
.acq-select-all { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }

.acq-pick {
    display: grid;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.acq-pick-head, .acq-pick-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.8fr) 132px;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
}

.acq-pick-head {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--border-strong);
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.acq-pick-head .hint { font-weight: 400; letter-spacing: 0; text-transform: none; }

.acq-pick-row {
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-small);
    transition: background var(--transition), box-shadow var(--transition);
}

.acq-pick-row:last-child { border-bottom: 0; }
.acq-pick-row:hover { background: var(--row-alt); }
.acq-pick-row.is-on { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.acq-pick-id, .acq-pick-type { display: grid; min-width: 0; cursor: pointer; }
.acq-pick-id strong { font-family: var(--font-num); }
.acq-pick-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; }
.acq-pick-arrival .input { width: 100%; }
.acq-pick-label { display: none; }
.acq-pick-skeleton { padding: 0; }

@container (max-width: 599px) {
    .acq-pick { max-height: none; }
    .acq-pick-head { display: none; }

    .acq-pick-row {
        grid-template-columns: 18px minmax(0, 1fr) auto;
        grid-template-areas:
            "check id last"
            "check type sex"
            "check arrival arrival";
        align-items: start;
        gap: 4px 10px;
        padding: 12px;
    }

    .acq-pick-check { grid-area: check; margin-top: 2px !important; }
    .acq-pick-id { grid-area: id; }
    .acq-pick-type { grid-area: type; }
    .acq-pick-last { grid-area: last; }
    .acq-pick-sex { grid-area: sex; color: var(--muted); font-size: var(--fs-micro); text-align: right; }
    .acq-pick-arrival { grid-area: arrival; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
    .acq-pick-label { display: inline; color: var(--muted); font-size: var(--fs-micro); white-space: nowrap; }
    .acq-pick-arrival .input { flex: 1; }
}

/* Summary (pinned beside the form on wide screens) */
.acq-summary { padding: 0; }

.acq-summary-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(135deg, var(--primary-soft), transparent 65%), linear-gradient(315deg, var(--accent-soft), transparent 55%);
}

.acq-eyebrow { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.acq-total-label { margin: 10px 0 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }

.acq-total-value {
    margin: 2px 0 0;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.acq-total-text { font-family: inherit; font-size: 24px; letter-spacing: -0.02em; }

.acq-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    border-bottom: 1px solid var(--border);
    background: var(--border);
}

.acq-stats > div { display: grid; gap: 2px; min-width: 0; padding: 10px 18px; background: var(--surface); }
.acq-stats dt { font-size: var(--fs-micro); font-weight: 600; color: var(--muted); }
.acq-stats dd { margin: 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }

.acq-receipt { display: grid; gap: 7px; margin: 0; padding: 14px 18px; list-style: none; font-size: var(--fs-small); }
.acq-receipt li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); }
.acq-receipt li > span:last-child { min-width: 0; color: var(--text); font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.acq-receipt .is-total { margin-top: 3px; padding-top: 9px; border-top: 1px dashed var(--border-strong); color: var(--text); font-weight: 700; }

.acq-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 12px; }
.acq-route-end { display: grid; gap: 1px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.acq-route-end span { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.acq-route-end strong { font-size: var(--fs-small); line-height: 1.3; overflow-wrap: anywhere; }
.acq-route-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); }

.acq-summary-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 0 18px 14px; font-size: var(--fs-micro); color: var(--muted-2); }

.acq-action {
    display: grid;
    gap: 10px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--surface-sunken);
}

.acq-action .warnings, .acq-action .validation-summary { margin: 0; }
.acq-submit { width: 100%; padding: 11px 16px; border-radius: var(--radius-md); font-size: 14px; box-shadow: var(--shadow-md); }
.acq-bar-total { display: none; }

/* Loading */
.acq-skeleton { display: grid; gap: 16px; padding: 18px; }
.acq-skeleton-title { width: 180px; max-width: 60%; height: 16px; }
.acq-skeleton-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.acq-skeleton-field { height: 38px; border-radius: var(--radius-sm); }
.acq-skeleton-aside { align-content: start; min-height: 220px; }

/* Empty states (no mothers / no other farm) */
.acq-empty { display: grid; justify-items: center; gap: 10px; margin-top: 14px; padding: 40px 20px; text-align: center; }

.acq-empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--primary-line);
    border-radius: 18px;
    background: linear-gradient(140deg, var(--primary-soft), var(--accent-soft));
    color: var(--primary);
}

.acq-empty-title { margin: 4px 0 0; font-size: 17px; letter-spacing: -0.01em; }
.acq-empty p { max-width: 48ch; margin: 0; color: var(--muted); }
.acq-empty .button-row { justify-content: center; margin-top: 4px; }

/* Below the two-column width the summary drops under the form and Save moves to a bar pinned to the bottom. */
@media (max-width: 1099.98px) {
    .acq { padding-bottom: 76px; }

    .acq-action {
        position: fixed;
        z-index: 45;
        right: 0;
        bottom: 0;
        left: 0;
        grid-template-columns: minmax(96px, 1fr) auto;
        align-items: center;
        gap: 8px 14px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border-strong);
        border-radius: 0;
        background: var(--surface);
        box-shadow: 0 -10px 30px rgba(48, 38, 22, 0.14);
    }

    .acq-action > .warnings, .acq-action > .validation-summary { grid-column: 1 / -1; max-height: 30vh; overflow-y: auto; }
    .acq-bar-total { display: grid; gap: 1px; min-width: 0; margin: 0; }
    .acq-bar-total span { overflow: hidden; font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
    .acq-bar-total strong { overflow: hidden; font-family: var(--font-num); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; }
    .acq-submit { width: auto; box-shadow: none; line-height: 1.25; text-align: center; }
}

@media (max-width: 1000px) {
    .acq-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .acq .input, .acq .select { font-size: 16px; } /* Stops iOS zooming on focus. */

    .acq-modes { gap: 8px; margin-top: 12px; }
    .acq-mode { gap: 9px; padding: 10px; }
    .acq-mode-icon { width: 32px; height: 32px; }
    .acq-mode-title { font-size: 13px; }
    .acq-mode-desc, .acq-mode-check { display: none; }

    .acq-section-head { gap: 10px; padding: 12px 14px 10px; }
    .acq-section-body { padding: 14px; }
    .acq-summary-head, .acq-receipt { padding-right: 14px; padding-left: 14px; }
    .acq-stats > div { padding: 10px 14px; }
    .acq-total-value { font-size: 24px; }
    .acq-skeleton-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Feed plans & templates (Pages/FeedPlans.razor, FeedTemplates.razor, FeedPlanEdit.razor,
   FeedTemplateEdit.razor; Shared/RationEditor.razor, GridFooter.razor, RowMenu.razor).
   The lists reuse the Data grid classes; the editors reuse the Add animals layout (.acq).
   ========================================================================== */

/* Plans | Templates */
.feed-tabs { margin-top: 16px; }
.feed-tabs .seg-btn { padding: 6px 16px; text-decoration: none; }

/* Counts on tabs that aren't selected; on phones the tab strip swipes sideways without a scrollbar. */
.seg-count-muted { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-strong); }
.seg-scroll { scrollbar-width: none; }
.seg-scroll::-webkit-scrollbar { display: none; }

/* Name + who it feeds */
.plan-name { color: var(--text); font-weight: 700; text-decoration: none; }
.row-link:hover .plan-name { color: var(--primary); }
.is-past .plan-name { color: var(--muted); }
.plan-name-cell, .tpl-name-cell { min-width: 180px; max-width: 300px; white-space: normal !important; }
.target-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.target-chip .icon { color: var(--muted-2); }

/* Status pill with a dot; active plans pulse gently. */
.status-dot { display: inline-flex; align-items: center; gap: 5px; }
.status-dot::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.status-dot.status-active::before { animation: status-pulse 2.4s ease-out infinite; }
.status-dot.status-stopped { border-style: dashed; }
@keyframes status-pulse { 0% { box-shadow: 0 0 0 0 var(--primary-line); } 70%, 100% { box-shadow: 0 0 0 5px transparent; } }

/* Progress: day X of N and a bar */
.plan-progress { display: grid; gap: 5px; min-width: 150px; }
.plan-progress-text { font-size: var(--fs-small); white-space: nowrap; }
.plan-progress-bar { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); }
.plan-progress-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary-line), var(--primary)); }
.plan-progress-upcoming .plan-progress-text { color: var(--accent); font-weight: 600; }
.plan-progress-finished .plan-progress-bar > span { background: var(--border-strong); }
.plan-progress-finished .plan-progress-text, .plan-progress-stopped .plan-progress-text { color: var(--muted); }

/* Phone cards */
.plan-card-icon { border-style: solid; }
.plan-card-icon-active { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.plan-card-icon-upcoming { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.plan-card-progress { margin-top: 8px; }
.plan-card .animal-card-top .status-pill { margin-left: auto; }

/* Row ⋯ menu: fixed beside its button (row-menu.js), a bottom sheet on phones. */
.row-menu-scrim { z-index: 55; }
.row-menu { position: fixed; top: 0; right: auto; left: 0; z-index: 56; min-width: 210px; visibility: hidden; }
.row-menu.is-placed { visibility: visible; }
.row-menu-title { display: none; }
.row-menu-btn.is-on { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.col-actions { width: 1%; padding-left: 0 !important; text-align: right; }
.row-actions { display: inline-flex; align-items: center; gap: 4px; }
.row-actions .button-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } }

/* Templates list */
.tpl-price-warning { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.tpl-price-warning .icon { color: var(--accent); }
.tpl-weight .affix { width: 96px; }
.tpl-weight .input { padding-top: 6px; padding-bottom: 6px; }
.tpl-weight > .icon { color: var(--muted-2); }
.tpl-table .col-ration { width: 210px; min-width: 210px; max-width: 230px; }
.tpl-table .tpl-name-cell { max-width: 250px; }
.tpl-table .phase-seg { min-width: 36px; padding: 3px 6px; }
.tpl-table .phase-seg-name { font-size: var(--fs-micro); }
.tpl-desc, .tpl-feeds { display: block; max-width: 240px; overflow: hidden; white-space: nowrap !important; text-overflow: ellipsis; }
.tpl-feeds { max-width: 210px; }
.tpl-feeds { margin-top: 4px; }

.used-pill {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--primary-line);
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-family: var(--font-sans);
    font-size: var(--fs-micro);
    font-weight: 700;
}

.tpl-mcard-strip { margin-top: 8px; }
.tpl-mcard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Editors: header */
.fpe .crumbs [aria-current] { font-family: inherit; }

.fpe-priority {
    display: grid;
    grid-template-columns: auto minmax(0, auto) auto;
    align-items: center;
    gap: 4px 8px;
    width: fit-content;
    max-width: 100%;
    margin: 10px 0 0;
    padding: 6px 12px;
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    font-size: var(--fs-small);
}

.fpe-priority .icon { color: var(--primary); }
.fpe-priority a { color: var(--primary); font-weight: 700; }
.fpe-locked { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--accent-soft); font-size: var(--fs-small); }
.fpe-locked .icon { color: var(--accent); }

@media (min-width: 1100px) {
    .fpe .acq-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* Template details: FeedTemplateFields laid out two by two on wide cards. */
.fpe-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 14px; align-items: start; }
.fpe-fields > .field-row { display: contents; }
.fpe-fields > .hint { margin: -4px 0 0; }
.fpe-fields .input-num { width: 100%; text-align: left; }

@container (min-width: 560px) {
    .fpe-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fpe-fields > .field:has(textarea), .fpe-fields > .hint { grid-column: 1 / -1; }
}

/* Who it feeds: target tiles */
.fpe-fieldset { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.acq .fpe-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; align-items: stretch; }

.fpe-target {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), transform var(--transition);
}

.fpe-target:hover { border-color: var(--primary-line); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fpe-target.is-on { border-color: var(--primary); background: linear-gradient(150deg, var(--primary-soft), var(--surface) 85%); box-shadow: inset 0 0 0 1px var(--primary); }

.fpe-target-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--muted);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.fpe-target:hover .fpe-target-icon { border-color: var(--primary-line); color: var(--primary); }
.fpe-target.is-on .fpe-target-icon { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.fpe-target-text { display: grid; gap: 1px; min-width: 0; }
.fpe-target-title { font-size: 13px; font-weight: 700; }
.fpe-target.is-on .fpe-target-title { color: var(--primary); }
.fpe-target-desc { font-size: var(--fs-micro); line-height: 1.3; color: var(--muted-2); }
.fpe-fieldset:disabled .fpe-target { box-shadow: none; opacity: 0.6; transform: none; cursor: not-allowed; }
.fpe-target-pick { display: grid; gap: 10px; }
.fpe-target-pick > .field { max-width: 560px; }

/* Ration: start from a template */
.fpe-picker {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px dashed var(--primary-line);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--primary-soft), transparent 70%);
}

.fpe-picker-lead { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.fpe-picker-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fpe-or { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.fpe-source { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); }

/* Ration editor: one card per phase, one row per feed */
.ration { display: grid; gap: 12px; }
.ration-strip .phase-seg { padding: 6px 10px; }

.ration-phase {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    container-type: inline-size;
}

.ration-phase-1, .ration-phase-3 { border-left-color: var(--border-strong); }
.ration-phase-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 12px; }

.ration-phase-num {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-ink);
    font-family: var(--font-num);
    font-size: var(--fs-small);
    font-weight: 800;
}

.ration-phase-1 .ration-phase-num, .ration-phase-3 .ration-phase-num { background: var(--surface-sunken); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ration-phase-fields { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; }
.ration-phase-side { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }

.ration-phase-range {
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-sunken);
    color: var(--muted);
    font-family: var(--font-num);
    font-size: var(--fs-micro);
    font-weight: 700;
    white-space: nowrap;
}

.ration-phase-tools { display: inline-flex; gap: 2px; }
.ration-phase-tools .button-icon, .ration-line .button-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; }
.ration-remove:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.ration-phase-info { padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: var(--fs-small); color: var(--muted); }
.ration-phase-figs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ration-phase-figs strong { color: var(--text); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.ration-phase-figs .text-danger strong { color: var(--danger); }

.ration-lines { display: grid; gap: 6px; }
.ration-line { display: grid; grid-template-columns: minmax(0, 1fr) 168px 130px 32px; align-items: center; gap: 8px; }
.ration-line-head { padding: 0 2px; color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ration-line-amount .input { text-align: right; }
.ration-empty { margin: 0; font-size: var(--fs-small); color: var(--muted-2); }

.ration-basis { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunken); }

.ration-basis-btn {
    appearance: none;
    flex: 1;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.ration-basis-btn:hover { color: var(--text); }
.ration-basis-btn.is-on { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--primary); }
.ration-basis-short { display: none; }

.ration-add-line {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    margin-top: 2px;
    padding: 6px 12px;
    border: 1px dashed var(--primary-line);
    border-radius: 999px;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
}

.ration-add-line:hover { background: var(--primary-soft); }
.ration-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.ration-add-phase {
    appearance: none;
    display: inline-flex;
    flex: 1 1 220px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border: 1.5px dashed var(--primary-line);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.ration-add-phase:hover { border-color: var(--primary); background: var(--primary-soft); }

@container (max-width: 560px) {
    .ration-phase-head { grid-template-columns: auto minmax(0, 1fr); }
    .ration-phase-side { grid-column: 1 / -1; justify-content: space-between; margin: 0; }
    .ration-phase-fields { grid-template-columns: minmax(0, 1fr) 104px; }
    .ration-line-head { display: none; }
    .ration-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
    .ration-line-feed { grid-column: 1 / -1; }
    .ration-basis { width: 100%; }
    .ration-basis-btn { padding: 6px 4px; }
    .ration-basis-long { display: none; }
    .ration-basis-short { display: inline; }
}

/* Summary (pinned beside the form): start weight and the per-phase breakdown */
.fpe-weight { display: grid; gap: 4px; margin-top: 10px; }
.fpe-weight .affix { max-width: 160px; }
.fpe .acq-summary-note { padding-top: 12px; }
.fpe .acq-summary-note + .acq-summary-note { padding-top: 0; }
.fpe .acq-summary-note .icon { margin-top: 1px; }
.fpe .acq-summary-note a { color: var(--primary); font-weight: 600; }
.fpe-phases { display: grid; margin: 0; padding: 4px 18px; list-style: none; border-bottom: 1px solid var(--border); }
.fpe-phases li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.fpe-phases li:last-child { border-bottom: 0; }

.fpe-phase-num {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--primary-line);
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-family: var(--font-num);
    font-size: var(--fs-micro);
    font-weight: 800;
}

.fpe-phase-num.phase-seg-1, .fpe-phase-num.phase-seg-3 { color: var(--text); }
.fpe-phase-text { display: grid; gap: 1px; min-width: 0; font-size: var(--fs-micro); color: var(--muted); }
.fpe-phase-text strong { overflow: hidden; color: var(--text); font-size: var(--fs-small); white-space: nowrap; text-overflow: ellipsis; }
.fpe-phase-cost { font-family: var(--font-num); font-size: var(--fs-small); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

@media (max-width: 760px) {
    .row-menu-scrim { z-index: 62; background: rgba(20, 16, 10, 0.38); animation: fade-in 140ms ease-out; }

    .row-menu {
        top: auto !important;
        right: 0;
        bottom: 0;
        left: 0 !important;
        z-index: 63;
        width: 100%;
        min-width: 0;
        padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        animation: sheet-in 180ms ease-out;
    }

    .row-menu-title { display: block; margin: 4px 10px 6px; overflow: hidden; font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
    .row-menu .menu-item { padding: 12px 10px; font-size: 14px; }

    .feed-tabs { display: flex; margin-top: 12px; }
    .tpl-weight { flex: 1 1 auto; }
    .tpl-weight .affix { flex: 1; width: auto; }

    .fpe .page-hero-actions { width: auto; }
    .fpe .page-hero .button-lg { flex: 0 0 auto; }
    .fpe-priority { grid-template-columns: auto minmax(0, 1fr); align-items: start; width: auto; }
    .fpe-priority .icon { margin-top: 2px; }
    .fpe-priority > a { grid-column: 2; }
    .acq .fpe-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fpe-target { gap: 8px; padding: 9px 10px; }
    .fpe-target-icon { width: 30px; height: 30px; }
    .fpe-phases { padding: 4px 14px; }
}

/* ==========================================================================
   Settings & Stocks (Pages/AnimalTypes, FeedSettings, Labels, FeedItems, Medicines, MedicineDetail, Vets;
   Shared/SettingsTabs, StocksTabs, GridToolbar, GridHead, GridFilterInput). The lists reuse the Data grid
   classes, add / edit open in the Edit drawer, the medicine page reuses the Record page profile.
   ========================================================================== */

/* Section tabs under the page header */
.hub-tabs { margin-top: 16px; }
.hub-tabs .seg-btn { padding: 6px 14px; text-decoration: none; }

.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Callout with an icon and an action link ("Show them") */
.st-callout { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); }
.st-callout > .icon { margin-top: 2px; color: var(--accent); }
.st-callout > span, .st-callout > div { flex: 1; min-width: 0; }
.st-callout .link-button { align-self: center; font-size: var(--fs-small); white-space: nowrap; }
.st-callout-list .warnings-title { margin-bottom: 4px; }

/* Name cell: tinted icon tile + name (+ a sub-line) */
.st-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.st-name .cell-sub { display: block; margin-top: 1px; }
.st-name-cell { min-width: 200px; white-space: normal !important; }

.st-thumb { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-md); }
.data-grid .st-thumb { width: 34px; height: 34px; }
.st-thumb.thumb-empty { border: 1px solid var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.st-initial { font-family: var(--font-num); font-size: 14px; font-weight: 800; }

/* Status pill with a still dot (Active / Inactive) */
.st-status { display: inline-flex; align-items: center; gap: 5px; }
.st-status::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }

/* Breed chips in the animal type list */
.st-breeds-cell { min-width: 220px; white-space: normal !important; }
.st-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 380px; }
.st-chip {
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-sunken);
    font-size: var(--fs-micro);
    font-weight: 600;
    white-space: nowrap;
}
.st-chip-more { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.st-chips .cell-sub { margin-left: 2px; }

/* Stock cell (medicines): amount, a Low / Below zero pill, expiry below */
.st-stock { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 6px; max-width: 200px; }
.st-stock .cell-sub { flex-basis: 100%; text-align: right; }
.st-stock-low { font-weight: 700; }
.animal-card-figs .st-stock { justify-content: flex-start; }
.animal-card-figs .st-stock .cell-sub { text-align: left; }
.animal-card-figs .status-pill { font-family: var(--font-sans); font-size: 10px; }

.table a.st-phone { color: var(--primary); font-family: var(--font-num); }
.st-arrow { color: var(--muted-2); }
.st-cell-text { max-width: 240px; }
.st-grid-note { margin: 0; padding: 0 14px 12px; }
.st-grid-warning { margin: 0 14px 14px; }

/* Phone cards */
.st-card-status { margin-left: auto; }
.st-card-chips { margin-top: 6px; }
.animal-card-figs.st-figs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-call { margin-top: 8px; }

/* Drawers */
.st-foot-left { margin-right: auto; }
.st-breed-help { margin: 0; }
.drawer-body .breed-list { padding: 2px 0; }
.drawer-body .add-breed { margin-top: 0; }
.st-drawer-note { margin: 0; }
.st-drawer-note:hover { border-color: var(--border-strong); background: transparent; color: var(--muted); }

.st-dose-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--fs-small);
    font-weight: 600;
}

/* Feed categories drawer */
.st-cat-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-cat-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.st-cat-name { display: grid; flex: 1; gap: 1px; min-width: 0; }

/* Medicine page */
.crumbs .st-crumb-current { font-family: inherit; }
.st-profile-name { font-family: inherit; font-size: 24px; letter-spacing: -0.02em; }
.st-plain-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Feeding priority */
.prio-layout { display: grid; gap: 12px; }
.prio-lead { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.prio-card .priority-list { margin: 0; }

.prio-reads {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: var(--fs-small);
}

.prio-reads .icon { margin-top: 2px; color: var(--primary); }
.prio-reads strong { color: var(--text); }
.prio-actions { padding-top: 12px; border-top: 1px solid var(--border); }

.prio-saved {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--fs-small);
    font-weight: 600;
}

.prio-saved .icon { margin-top: 2px; }
.grid-head > .prio-preview-head { padding-bottom: 0; border-bottom: 0; }
.prio-to .plan-name { color: var(--primary); }
.prio-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-small); }
.prio-switch .icon { color: var(--muted-2); }

.prio-rules { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: rule; font-size: var(--fs-small); line-height: 1.5; }
.prio-rules li { position: relative; padding-left: 34px; counter-increment: rule; }

.prio-rules li::before {
    content: counter(rule);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--primary-line);
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-family: var(--font-num);
    font-size: var(--fs-micro);
    font-weight: 800;
}

@media (min-width: 1100px) {
    .prio-layout { grid-template-columns: 420px minmax(0, 1fr); align-items: start; }
}

/* Currency settings: preview of amounts */
.cur-preview { display: grid; margin: 0; }

.cur-preview > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-small);
}

.cur-preview > div:last-child { border-bottom: 0; }
.cur-preview dt { color: var(--muted); }
.cur-preview dd { margin: 0; font-family: var(--font-num); font-weight: 600; text-align: right; }
.cur-affix { display: block; width: 150px; }
.cur-affix .input { text-align: right; }

@media (max-width: 1000px) {
    .kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .hub-tabs { display: flex; margin-top: 12px; }
    .hub-tabs .seg-btn { flex: 1 0 auto; padding: 7px 12px; }

    .kpis.kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpis-3 > .kpi:last-child { grid-column: 1 / -1; }

    .st-callout { flex-wrap: wrap; }
    .st-callout .link-button { margin-left: 26px; }

    .st-cat-list li { flex-wrap: wrap; }
    .st-cat-name { flex-basis: 100%; }
    .st-cat-list .button { flex: 1; }

    .st-profile-name { font-size: 20px; }
    .st-grid-note { padding: 0 10px 10px; }
}

@media (max-width: 420px) {
    .hub-tabs .seg-btn { gap: 0; padding: 7px 8px; }
    .hub-tabs .seg-btn .icon { display: none; }
}

/* ==========================================================================
   Accounting (Pages/Accounting*.razor; Shared/AccountingTabs, ReportTabs, MoneyVoucherPanel,
   JournalPanel, EntryPanel, PaymentFields, PartySelect, PartyFields, FarmFilter, StatementSection,
   IncomeExpenseChart). Lists reuse the Data grid classes, forms the Edit drawer and Add animals (.acq).
   ========================================================================== */

/* Money in / out ink: green in, copper out (text tokens; red only for below zero). */
.acc-in { color: var(--primary); }
.acc-out { color: var(--accent); }
.acc-profit { color: var(--primary); }

.acc-report-tabs { margin-top: 12px; }
.acc-report-tabs .seg-btn { text-decoration: none; }
.acc-doc-no { font-family: var(--font-num); font-size: var(--fs-small); letter-spacing: -0.01em; }
.acc-code { display: inline-block; min-width: 40px; font-family: var(--font-num); font-size: var(--fs-micro); color: var(--muted-2); }
.acc-tags { display: block; max-width: 280px; overflow: hidden; white-space: nowrap !important; text-overflow: ellipsis; }
.acc-narration { min-width: 220px; max-width: 420px; white-space: normal !important; }
.acc-link { color: var(--primary); text-decoration: none; justify-self: start; }
.acc-link:hover { text-decoration: underline; }

/* Kind chip and icon tile, tinted by direction */
.acc-kind {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--tone-line, var(--border-strong));
    border-radius: 999px;
    background: var(--tone-bg, var(--surface-sunken));
    color: var(--tone-ink, var(--muted));
    font-size: var(--fs-micro);
    font-weight: 700;
    white-space: nowrap;
}

.acc-kind-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--tone-line, var(--border));
    border-radius: var(--radius-md);
    background: var(--tone-bg, var(--surface-sunken));
    color: var(--tone-ink, var(--muted));
}

.acc-tone-in { --tone-ink: var(--primary); --tone-bg: var(--primary-soft); --tone-line: var(--primary-line); }
.acc-tone-out { --tone-ink: var(--accent); --tone-bg: var(--accent-soft); --tone-line: color-mix(in srgb, var(--accent) 45%, transparent); }
.acc-tone-warn { --tone-ink: var(--danger); --tone-bg: var(--danger-soft); --tone-line: color-mix(in srgb, var(--danger) 40%, transparent); }
.acc-tone-neutral { --tone-ink: var(--muted); --tone-bg: var(--surface-sunken); --tone-line: var(--border-strong); }

.acc-bal { font-family: var(--font-num); font-weight: 700; }
.acc-bal.is-in { color: var(--primary); }
.acc-bal.is-out { color: var(--accent); }
.acc-shared { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-small); font-weight: 600; }
.acc-shared .icon { color: var(--primary); }
.acc-mix-text { font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
.acc-mix-mobile { margin-top: 8px; }

/* Toolbar bits */
.acc-farm-filter { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-2); }
.acc-date-filter { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted); }
.acc-date-filter .input { width: auto; padding-top: 5px; padding-bottom: 5px; }
.acc-grid-title { padding-bottom: 0; border-bottom: 0; }
.acc-grid-balance { font-size: var(--fs-small); color: var(--muted); }
.acc-grid-balance strong { margin-left: 4px; color: var(--text); font-family: var(--font-num); font-size: 15px; }
.data-grid tr.acc-bf td { background: var(--surface-sunken); color: var(--muted); font-size: var(--fs-small); font-style: italic; }

.acc-check { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-small); font-weight: 700; }
.acc-check.is-ok { background: var(--primary-soft); color: var(--primary); }
.acc-check.is-off { background: var(--danger-soft); color: var(--danger); }

/* Drawers */
.acc-drawer-title { font-family: var(--font-sans); }
.acc-drawer-wide { width: min(820px, 100%); }
.acc-kind-seg { display: flex; justify-self: stretch; }
.acc-kind-seg .seg-btn { flex: 1; justify-content: center; }
.acc-mini-seg { justify-self: start; }
.acc-mini-seg .seg-btn { padding: 5px 10px; }
.acc-pay-seg { display: flex; justify-self: stretch; }
.acc-pay-seg .seg-btn { flex: 1; justify-content: center; }
.acc-balance-hint { font-weight: 600; }
.acc-balance-hint.is-in { color: var(--primary); }
.acc-balance-hint.is-out { color: var(--accent); }

.acc-pay-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    font-size: var(--fs-small);
    color: var(--muted);
}

.acc-pay-summary span { display: inline-flex; align-items: center; gap: 6px; }
.acc-pay-summary strong { color: var(--text); font-family: var(--font-num); }
.acc-pay-summary strong.text-warn { color: var(--accent); }

.acc-target-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }

.acc-target {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.acc-target .icon { color: var(--muted-2); }
.acc-target:hover:not(:disabled) { border-color: var(--primary-line); }
.acc-target.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.acc-target.is-on .icon { color: var(--primary); }
.acc-target:disabled { opacity: 0.6; cursor: not-allowed; }

.acc-callout { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--text); font-size: var(--fs-small); }
.acc-callout .icon { margin-top: 2px; color: var(--primary); }
.acc-callout.is-warn { background: var(--accent-soft); }
.acc-callout.is-warn .icon { color: var(--accent); }

/* Journal lines */
.acc-jv-lines { display: grid; gap: 6px; }
.acc-jv-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr) 130px 130px 34px; gap: 6px; align-items: center; }
.acc-jv-head { color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.acc-jv-row .affix > .input { text-align: right; }
.acc-jv-row .ration-remove { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }

.acc-jv-totals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 10px 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    font-size: var(--fs-small);
}

.acc-jv-totals strong { font-family: var(--font-num); }
.acc-jv-totals.is-balanced { border-color: var(--primary-line); background: var(--primary-soft); }
.acc-jv-diff { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 700; color: var(--accent); }
.acc-jv-totals.is-balanced .acc-jv-diff { color: var(--primary); }

/* Entry panel */
.acc-entry-head { display: flex; align-items: center; gap: 12px; }
.acc-entry-head .acc-kind-icon { width: 42px; height: 42px; border-radius: 12px; }
.acc-entry-narration { margin: 0; font-weight: 600; }
.acc-entry-amount { margin: 2px 0 0; font-family: var(--font-num); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.acc-lines td:first-child { white-space: normal; }
.acc-lines tfoot td { font-weight: 700; background: var(--surface-sunken); }

/* Sale editor */
.acc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
.acc-span-2 { grid-column: 1 / -1; }
.acc-sale .acq-section-body > .acc-form-grid .field { margin: 0; }

.acc-pick { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--primary-line); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--primary-soft), transparent 70%); }
.acc-pick-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acc-pick-tools .grid-search { flex: 1 1 220px; max-width: none; }
.acc-pick-list { display: grid; max-height: 260px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.acc-pick-list li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.acc-pick-list li:last-child { border-bottom: 0; }
.acc-pick-list li:hover { background: var(--primary-soft); }
.acc-pick-main { display: grid; flex: 1; min-width: 0; }
.acc-pick-main .cell-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.acc-pick-empty { margin: 0; font-size: var(--fs-small); color: var(--muted); }

.acc-rate-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.acc-rate-bar .label { margin-right: 2px; }
.acc-rate-input { width: 130px; }

.acc-lines-list { display: grid; gap: 6px; }

.acc-line {
    display: grid;
    grid-template-columns: minmax(120px, 1.2fr) 118px 112px 124px minmax(100px, 0.8fr) 32px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.acc-line-who { display: grid; min-width: 0; }
.acc-line-field { display: grid; gap: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.acc-line-field .input { padding-top: 5px; padding-bottom: 5px; }
.acc-line-amount { display: grid; justify-items: end; font-family: var(--font-num); }
.acc-line .ration-remove { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; }

.acc-charges { display: grid; gap: 6px; }
.acc-charge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px 32px; gap: 6px; align-items: center; }
.acc-charge .ration-remove { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }
.acc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-quick { display: flex; gap: 12px; }

.acc-profit-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-lg);
    background: linear-gradient(140deg, var(--primary-soft), transparent 80%);
}

.acc-profit-box.is-loss { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); }
.acc-profit-label { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.acc-profit-value { margin: 2px 0 0; font-family: var(--font-num); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); }
.acc-profit-box.is-loss .acc-profit-value { color: var(--danger); }
.acc-profit-side { display: grid; justify-items: end; gap: 2px; font-size: var(--fs-micro); color: var(--muted); }
.acc-delete { width: 100%; margin-top: 6px; }
.acc-print { display: none; }

/* Cash & bank */
.acc-money-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

.acc-money-card {
    appearance: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon name" "balance balance" "sub sub";
    align-items: center;
    gap: 6px 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--surface) 55%, var(--primary-soft));
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.acc-money-card:hover { border-color: var(--primary-line); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.acc-money-card.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-md); }
.acc-money-icon { grid-area: icon; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--primary-line); border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary); }
.acc-money-bank { border-color: color-mix(in srgb, var(--series-threshold) 45%, transparent); background: color-mix(in srgb, var(--series-threshold) 12%, transparent); color: var(--series-threshold); }
.acc-money-wallet { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent); }
.acc-money-name { grid-area: name; overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.acc-money-balance { grid-area: balance; font-family: var(--font-num); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.acc-money-sub { grid-area: sub; overflow: hidden; font-size: var(--fs-micro); color: var(--muted-2); white-space: nowrap; text-overflow: ellipsis; }
.acc-money-total { background: linear-gradient(160deg, var(--primary-soft), var(--surface) 70%); }
.acc-money-add { border-style: dashed; background: transparent; box-shadow: none; color: var(--muted); }
.acc-money-add .acc-money-name { color: var(--primary); }
.acc-move-card { align-items: center; }
.acc-move-amount { flex: none; font-family: var(--font-num); font-weight: 800; }

/* Parties */
.acc-open-docs { display: grid; margin: 0; padding: 0; list-style: none; }
.acc-open-docs li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.acc-open-docs li:last-child { border-bottom: 0; }
.acc-open-doc-text { display: grid; flex: 1; min-width: 0; }
.acc-open-doc-text .cell-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.acc-open-doc-amount { font-family: var(--font-num); }

/* Reports */
.acc-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }

.acc-report-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.acc-report-card:hover { border-color: var(--primary-line); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.acc-report-card > .icon { color: var(--muted-2); }
.acc-report-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--primary-line); border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.acc-report-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.acc-report-text span { font-size: var(--fs-small); color: var(--muted); }

.acc-report-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 10px 12px; }
.acc-ledger-pick { flex: 1 1 280px; max-width: 460px; }
.acc-bs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }

.acc-statement { padding: 0; overflow: hidden; }
.acc-st-table th, .acc-st-table td { padding: 8px 14px; }
.acc-st-table thead th { position: static; }
.acc-st-table tbody tr:nth-child(2n) td { background: transparent; }
.acc-st-table tbody tr:hover td { background: var(--primary-soft); }
.acc-st-heading th { padding-top: 14px; background: transparent; border-bottom: 1px solid var(--border); color: var(--primary); font-size: var(--fs-micro); }
.acc-st-heading:hover th, .acc-st-heading th { background: transparent !important; }
.acc-st-empty td { color: var(--muted-2); font-style: italic; }
.acc-st-link { color: var(--text) !important; text-decoration: none; }
.acc-st-link:hover { color: var(--primary) !important; text-decoration: underline; }
.acc-st-total td { font-weight: 700; border-top: 1px solid var(--border-strong); }
.acc-st-grand td { background: var(--surface-sunken) !important; font-size: 14px; font-weight: 800; border-top: 1px solid var(--border-strong); }
.acc-st-net td { background: var(--primary-soft) !important; color: var(--primary); }
.acc-st-net.is-loss td { background: var(--danger-soft) !important; color: var(--danger); }
.acc-change { font-size: var(--fs-micro); font-weight: 700; color: var(--muted); }
.acc-change.is-up::first-letter, .acc-change.is-down::first-letter { font-size: 9px; }

/* Income & expenses chart */
.acc-chart { display: grid; gap: 10px; }
.acc-chart-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.acc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.acc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.acc-swatch { width: 12px; height: 12px; border-radius: 3px; }
.acc-swatch-income, .acc-bar-income { background: var(--series-weight); fill: var(--series-weight); }
.acc-swatch-expense, .acc-bar-expense { background: var(--series-threshold); fill: var(--series-threshold); }
.acc-chart-plot { position: relative; }
.acc-chart-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.acc-grid-line { stroke: var(--border); stroke-width: 1; }
.acc-grid-line.is-base { stroke: var(--border-strong); }
.acc-axis { fill: var(--muted-2); font-family: var(--font-num); font-size: 11px; }
.acc-month path { transition: opacity var(--transition); }
.acc-month.is-dim path { opacity: 0.35; }
.acc-hit { fill: transparent; cursor: pointer; }
.acc-hit:focus { outline: none; }
.acc-hit:focus-visible { stroke: var(--primary-line); stroke-width: 2; }

.acc-tip {
    position: absolute;
    top: 0;
    z-index: 5;
    display: grid;
    gap: 2px;
    min-width: 170px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-small);
    pointer-events: none;
    transform: translateX(-50%);
}

.acc-tip.is-left { transform: translateX(-100%); }
.acc-tip p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.acc-tip p span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.acc-tip strong { font-family: var(--font-num); }
.acc-tip-title { font-weight: 700; color: var(--text); }
.acc-tip-profit { padding-top: 4px; border-top: 1px solid var(--border); }
.acc-key { display: inline-block; width: 12px; height: 0; border-top: 2px solid; }
.acc-key-income { border-color: var(--series-weight); }
.acc-key-expense { border-color: var(--series-threshold); }

/* Dashboard */
.acc-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.acc-filter-label { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.acc-todo { display: grid; gap: 8px; }

.acc-todo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    color: var(--text);
    font-size: var(--fs-small);
    text-decoration: none;
}

.acc-todo-item > span:nth-child(2) { flex: 1; }
.acc-todo-item:hover { border-color: var(--accent); }
.acc-dash-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 12px; align-items: start; }
.acc-dash-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.acc-month-figs { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--border); }
.acc-month-figs > div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--surface); font-size: var(--fs-small); }
.acc-month-figs strong { font-family: var(--font-num); }
.acc-month-net { font-weight: 700; }
.acc-month-net > * { color: var(--primary); }
.acc-month-net.is-loss > * { color: var(--danger); }
.acc-mini-list { display: grid; margin: 0; padding: 0; list-style: none; }
.acc-mini-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-small); }
.acc-mini-list li:last-child { border-bottom: 0; }
.acc-mini-list strong { font-family: var(--font-num); white-space: nowrap; }
.acc-mini-name { flex: 1; min-width: 0; overflow: hidden; color: var(--text); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
a.acc-mini-name:hover { color: var(--primary); text-decoration: underline; }
.acc-mini-name .cell-sub { margin-left: 4px; }
.acc-mini-avatar { width: 28px !important; height: 28px !important; font-size: 12px; }
.acc-mini-list .acc-money-icon { width: 28px; height: 28px; }
.acc-recent { display: grid; margin: 0; padding: 0; list-style: none; }
.acc-recent li { border-bottom: 1px solid var(--border); }
.acc-recent li:last-child { border-bottom: 0; }

.acc-recent-row {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.acc-recent-row:hover { background: var(--primary-soft); }
.acc-recent-text { display: grid; flex: 1; min-width: 0; }
.acc-recent-text strong { overflow: hidden; font-size: var(--fs-small); white-space: nowrap; text-overflow: ellipsis; }
.acc-recent-amount { font-family: var(--font-num); font-weight: 700; white-space: nowrap; }

/* Opening balances */
.acc-opening { display: grid; gap: 12px; }
.acc-opening-intro { display: flex; gap: 10px; padding: 12px; border-radius: var(--radius-md); background: var(--primary-soft); font-size: var(--fs-small); }
.acc-opening-intro .icon { margin-top: 2px; color: var(--primary); }
.acc-opening-intro p { margin: 0; }
.acc-opening-date { max-width: 220px; }
.acc-opening-list { display: grid; gap: 6px; max-width: 640px; }
.acc-opening-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 180px 32px; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.acc-opening-row .affix > .input { text-align: right; }
.acc-opening-row .ration-remove { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; }
.acc-opening-name { min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.acc-opening-add { max-width: 420px; }
.acc-opening .drawer-section-title { margin-top: 6px; }

@media (max-width: 1100px) {
    .acc-dash-grid { grid-template-columns: minmax(0, 1fr); }
    .acc-dash-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acc-bs-grid { grid-template-columns: minmax(0, 1fr); }
    .acc-line { grid-template-columns: minmax(0, 1fr) 118px 112px 124px 32px; }
    .acc-line-amount { grid-column: 1 / -2; grid-row: 2; justify-items: start; grid-auto-flow: column; gap: 10px; }
}

@media (max-width: 760px) {
    .acc-dash-row { grid-template-columns: minmax(0, 1fr); }
    .acc-form-grid { grid-template-columns: minmax(0, 1fr); }
    .acc-report-grid { grid-template-columns: minmax(0, 1fr); }
    .acc-report-bar .seg { justify-self: stretch; width: 100%; }
    .acc-date-filter { flex: 1 1 140px; }
    .acc-date-filter .input { flex: 1; font-size: 16px; }
    .acc-farm-filter { flex: 1 1 160px; }
    .acc-farm-filter .select { flex: 1; }
    .acc-ledger-pick { flex-basis: 100%; max-width: none; }
    .acc-money-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acc-money-card { padding: 11px; }
    .acc-money-balance { font-size: 17px; }

    .acc-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; }
    .acc-line-who { grid-column: 1 / 3; }
    .acc-line .ration-remove { grid-column: 3; grid-row: 1; }
    .acc-line-amount { grid-column: 1 / -1; grid-row: auto; justify-items: start; }
    .acc-charge { grid-template-columns: minmax(0, 1fr) 30px; }
    .acc-charge > .select { grid-column: 1; }
    .acc-charge > .input { grid-column: 1; }
    .acc-charge > .affix { grid-column: 1; }
    .acc-charge .ration-remove { grid-column: 2; grid-row: 1; }
    .acc-jv-head { display: none; }
    .acc-jv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
    .acc-jv-row > .select:first-child { grid-column: 1 / -1; }
    .acc-jv-row > .ration-remove { grid-column: 3; grid-row: 3; }
    .acc-profit-box { margin: 0 14px; }
    .acc-opening-row { grid-template-columns: auto minmax(0, 1fr) 30px; }
    .acc-opening-row .affix { grid-column: 1 / -1; grid-row: 2; }
    .acc-tip { min-width: 150px; }
    /* The chart scales down to about half on a phone: bigger text, every other month labelled. */
    .acc-axis { font-size: 21px; }
    .acc-month:nth-of-type(even) .acc-axis-x { display: none; }
    .acc-narration { min-width: 0; }
}

@media print {
    .site-header, .hub-tabs, .acc-report-tabs, .page-hero-actions, .toast, .drawer-backdrop, .grid-toolbar, .grid-footer,
    .filter-row, .acc-report-bar .seg, .acc-filter-row, .crumbs, .mobile-filters { display: none !important; }
    .only-desktop { display: block !important; }
    .only-mobile { display: none !important; }
    .card { box-shadow: none; break-inside: avoid; }
    .acc-sale > *:not(.acc-print) { display: none !important; }
    .acc-print { display: block; color: #111; font-size: 12px; }
    .acc-print header { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
    .acc-print h2 { margin: 0 0 4px; font-size: 18px; }
    .acc-print p { margin: 0 0 2px; }
    .acc-print table { width: 100%; border-collapse: collapse; }
    .acc-print th, .acc-print td { padding: 5px 6px; border-bottom: 1px solid #ccc; text-align: left; }
    .acc-print td:last-child, .acc-print th:last-child { text-align: right; }
}

/* ==========================================================================
   Breeding (/breeding/*, animal page Breeding tab, breeding / birth panels)
   States use the existing tones: pregnant green, served amber, open blue (the
   validated --series-threshold), fresh / young neutral.
   ========================================================================== */

.state-pregnant { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.state-bred { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.state-open { border-color: var(--series-threshold); background: color-mix(in srgb, var(--series-threshold) 12%, transparent); color: var(--series-threshold); }
.state-fresh { border-color: var(--border-strong); background: var(--surface-sunken); color: var(--text); }
.state-young { border-style: dashed; }

.br-off { display: grid; justify-items: start; gap: 8px; }
.br-off p { max-width: 62ch; margin: 0; color: var(--muted); }
.br-pad { padding: 14px; }
.br-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; vertical-align: middle; }
.br-flags:empty { display: none; }
.br-kind { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.br-kind .icon { color: var(--primary); }
.is-gone { opacity: 0.6; }
.br-block { display: block; }

/* KPI tiles that filter the herd list */
.br-kpi { font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition); }
.br-kpi:hover { border-color: var(--primary-line); box-shadow: var(--shadow-md); }
.br-kpi:focus-visible { outline: none; box-shadow: var(--ring); }

/* To-do list */
.br-due { display: grid; margin: 0; padding: 0; list-style: none; }
.br-due li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.br-due li:last-child { border-bottom: 0; }
.br-due-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-sunken); color: var(--muted); }
.br-due-calving { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.br-due-pregnancycheck { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.br-due-returnheat, .br-due-heatexpected { border-color: var(--series-threshold); color: var(--series-threshold); }
.br-due-main { min-width: 0; }
.br-due-what { margin: 0; font-size: var(--fs-small); }
.br-due-main .cell-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-due-when { display: grid; justify-items: end; gap: 2px; }

/* Births coming: one bar per pregnancy, day N of gestation */
.br-preg { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.br-preg-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--fs-small); }
.br-preg-due { margin-left: auto; font-family: var(--font-num); font-size: var(--fs-micro); color: var(--muted); }
.br-bar { height: 6px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: var(--primary-soft); }
.br-bar span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.br-bar-lg { height: 8px; }

/* Births & young */
.br-young-head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.br-grid-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.br-young { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.br-young-tag { font-weight: 700; text-decoration: none; color: var(--text); }
.br-young-tag:hover { color: var(--primary); }

/* Sire page */
.br-sire-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.br-moves { display: grid; margin: 0; padding: 0; list-style: none; }
.br-moves li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-small); }
.br-moves li:last-child { border-bottom: 0; }
.br-moves li > div { display: grid; gap: 1px; min-width: 0; }
.br-move-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--muted); }

/* Report */
.br-period { display: grid; justify-items: end; gap: 6px; }
.br-period-dates { display: flex; align-items: center; gap: 6px; }
.br-period-dates .input { width: auto; }

.bchart { display: grid; gap: 8px; }
.bchart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.bchart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.bchart-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.bchart-key-born { background: var(--series-weight); }
.bchart-key-expected { background: repeating-linear-gradient(45deg, var(--series-threshold) 0 2px, color-mix(in srgb, var(--series-threshold) 45%, var(--surface)) 2px 4px); }
.bchart-svg { width: 100%; height: auto; overflow: visible; }
.bchart-grid { stroke: var(--border); stroke-width: 1; }
.bchart-axis { stroke: var(--border-strong); stroke-width: 1; }
.bchart-tick { fill: var(--muted-2); font-family: var(--font-num); font-size: 11px; }
.bchart-value { fill: var(--text); font-family: var(--font-num); font-size: 11px; font-weight: 700; }
.bchart-born { fill: var(--series-weight); }
.bchart-expected { fill: url(#bchart-hatch); }
.bchart-hatch-bg { fill: color-mix(in srgb, var(--series-threshold) 45%, var(--surface)); }
.bchart-hatch-line { stroke: var(--series-threshold); stroke-width: 3; }
.bchart-hit { fill: transparent; }
.bchart-col { outline: none; }
.bchart-col:hover .bchart-hit, .bchart-col:focus-visible .bchart-hit { fill: var(--primary-soft); }
.bchart-col.is-now .bchart-hit { fill: color-mix(in srgb, var(--border) 40%, transparent); }
.bchart-table summary { cursor: pointer; font-size: var(--fs-small); color: var(--muted); }
.bchart-table .table-wrap { margin-top: 8px; max-height: 260px; overflow-y: auto; }

/* Setup */
.br-setup-wrap { max-height: none; border: 0; border-radius: 0; }
.br-rules { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: var(--fs-small); color: var(--muted); }
.br-rules strong { color: var(--text); }

/* Animal page: profile pill, state card, history, family tree */
.br-profile-pill { font: inherit; font-size: var(--fs-micro); font-weight: 700; cursor: pointer; }
.br-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; border-left: 3px solid var(--border-strong); }
.br-status-pregnant { border-left-color: var(--primary); }
.br-status-bred { border-left-color: var(--accent); }
.br-status-open { border-left-color: var(--series-threshold); }
.br-status-main { display: grid; gap: 8px; min-width: 0; }
.br-status-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; }
.br-status-main .hint { margin: 0; }
.br-status-stats { margin: 0; }
.br-status-stats > div { display: grid; gap: 2px; padding: 8px 10px; background: var(--surface); }
.br-status-stats dt { font-size: var(--fs-micro); color: var(--muted); }
.br-status-stats dd { margin: 0; font-family: var(--font-num); font-size: var(--fs-small); font-weight: 700; overflow-wrap: anywhere; }
.br-status-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 170px; }
.br-wean-line { margin: 0; font-size: var(--fs-small); }
.br-tab-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.br-tab-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: 0; }
.br-history li { padding-right: 30px; }
.br-history-del { position: absolute; right: 0; top: -2px; opacity: 0.55; }
.br-history li:hover .br-history-del, .br-history-del:focus-visible { opacity: 1; }

.br-tree { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.br-tree-col { display: grid; gap: 8px; align-content: center; }
.br-tree-grand { gap: 6px; }
.br-node { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size: var(--fs-small); min-width: 0; }
.br-node a { color: var(--text); text-decoration: none; }
.br-node a:hover { color: var(--primary); }
.br-node.is-empty { border-style: dashed; background: transparent; }
.br-node-role { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.br-tree-grand .br-node { padding: 6px 9px; }

.br-offspring { display: grid; margin: 0; padding: 0; list-style: none; }
.br-offspring li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-small); }
.br-offspring li:last-child { border-bottom: 0; }
.br-offspring .cell-sub { flex-basis: 100%; }

/* Panels */
.br-kind-seg { display: grid; grid-template-columns: repeat(4, auto); }
.br-kind-seg .seg-btn { justify-content: center; padding-left: 8px; padding-right: 8px; }
.br-check-field { align-self: end; padding-bottom: 6px; }
.cv-calf { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius-md); background: var(--surface-sunken); }
.cv-calf-head { display: flex; align-items: center; gap: 10px; }
.cv-calf-head .icon-button { margin-left: auto; }
.cv-calf-num { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.cv-calf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cv-calf-grid .input, .cv-calf-grid .select { width: 100%; min-width: 0; }

@media (max-width: 1000px) {
    .br-sire-grid, .br-tab-grid { grid-template-columns: minmax(0, 1fr); }
    .br-tab-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .br-kind-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .br-due li { grid-template-columns: auto minmax(0, 1fr) auto; }
    .br-due li > .button { grid-column: 2 / -1; justify-self: start; }
    .br-status { grid-template-columns: minmax(0, 1fr); }
    .br-status-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .br-status-actions .button { flex: 1 1 auto; justify-content: center; }
    .br-status-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .br-tab-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .br-period { justify-items: start; width: 100%; }
    .br-young-head { grid-template-columns: minmax(0, 1fr); }
    .bchart-tick, .bchart-value { font-size: 20px; }
}

/* ==========================================================================
   Home dashboard (Pages/Home.razor; Shared/DashColumns, DashLine, Sparkline, MarketRatesPanel,
   CalendarWeekStrip). Charts use the validated series tokens only: series "a" = --series-weight,
   "b" = --series-threshold (the reference / marker line is also "b").
   ========================================================================== */

/* Hero */
.dash-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 20px;
    padding: 20px 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 100% 0%, var(--primary-soft) 0%, transparent 55%),
        radial-gradient(90% 120% at 0% 100%, var(--accent-soft) 0%, transparent 60%),
        var(--surface);
    box-shadow: var(--shadow-sm);
}

.dash-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 28px solid var(--primary-soft);
    pointer-events: none;
}

.dash-hero-text { position: relative; z-index: 1; min-width: 0; }
.dash-hero .page-title { font-size: 28px; letter-spacing: -0.03em; }
.dash-hello { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: var(--fs-small); font-weight: 600; color: var(--primary); }
.dash-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.dash-hero-actions .button:not(.button-primary) { background: var(--surface); }

/* Tabs + period bar: sticky, one row above everything it scopes */
.dash-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: 14px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
}

.dash-tabs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; }

.dash-tab {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-body);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.dash-tab:hover { color: var(--text); background: var(--surface-sunken); }
.dash-tab:focus-visible { outline: none; box-shadow: var(--ring); }
.dash-tab.is-on { background: var(--primary); color: var(--primary-ink); box-shadow: 0 4px 12px rgba(29, 107, 63, 0.25); }
.dash-tab-badge { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--surface-sunken); color: var(--text); font-family: var(--font-num); font-size: 11px; text-align: center; }
.dash-tab-badge.is-alert { background: var(--danger); color: var(--danger-ink); }
.dash-tab.is-on .dash-tab-badge:not(.is-alert) { background: rgba(255, 255, 255, 0.22); color: inherit; }
.dash-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.dash-view-text { margin-left: 5px; }
.dash-range-note { margin: 8px 4px 0; font-size: var(--fs-micro); color: var(--muted-2); }
.dash-body { margin-top: 12px; transition: opacity 160ms ease; }
.dash-body.is-busy { opacity: 0.55; pointer-events: none; }

/* Headline figures */
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }

.kpi2 {
    position: relative;
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 14px 16px 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.kpi2:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.kpi2::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--primary); opacity: 0.8; }
.kpi2-accent::before { background: var(--accent); }
.kpi2.is-loss::before { background: var(--danger); }
.kpi2 .skeleton-line { max-width: none; }
.kpi2-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kpi2-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
.kpi2-accent .kpi2-icon { background: var(--accent-soft); color: var(--accent); }
.kpi2-label { flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.kpi2-delta { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--surface-sunken); color: var(--muted); font-family: var(--font-num); font-size: 11px; font-weight: 700; }
.kpi2-delta.is-up { background: var(--primary-soft); color: var(--positive); }
.kpi2-delta.is-down { background: var(--danger-soft); color: var(--danger); }
.kpi2-value { margin: 6px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.kpi2-value small { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.kpi2-sub { margin: 0; font-size: var(--fs-micro); color: var(--muted-2); }
.kpi2-sub .link-button { font-size: inherit; }
.dash-up { color: var(--positive); font-weight: 600; }

/* Sparkline */
.spark { position: relative; display: block; height: 30px; margin-top: 6px; }
.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark-line { fill: none; stroke: var(--series-weight); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: var(--series-weight); fill-opacity: 0.1; stroke: none; }
.spark-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 2px solid var(--surface); border-radius: 50%; background: var(--series-weight); box-sizing: content-box; }

/* Card rows */
.dash-row { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 12px; align-items: start; }
.dash-row + .dash-row, .dash-row + .dash-row-single, .dash-row-single + .dash-row { margin-top: 12px; }
.dash-row-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-row-single { display: grid; }
.dash-body .card.panel { padding: 16px; border-radius: 16px; transition: box-shadow var(--transition); }
.dash-body .card.panel:hover { box-shadow: var(--shadow-md); }
.dash-body .panel-head { padding-bottom: 12px; }
.dash-body .panel-title { font-size: 14.5px; }
.dash-body .panel-title .icon { display: grid; place-items: center; box-sizing: content-box; padding: 6px; border-radius: 8px; background: var(--primary-soft); }
.dash-body td .cell-sub, .dash-body .dash-animal .cell-sub { display: block; }
.dash-sub-title { margin: 4px 0 -4px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.dash-table { max-height: 360px; }
.dash-moves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-mini-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-value-table tfoot td { font-weight: 700; border-top: 1px solid var(--border-strong); }

/* Today card */
.dash-tasks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dash-tasks li { display: flex; }

.dash-task {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.dash-task:hover { background: var(--surface-sunken); transform: translateX(2px); }
.dash-task:focus-visible { outline: none; box-shadow: var(--ring); }
.dash-task > .icon:last-child { color: var(--muted-2); }
.dash-task-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; }
.dash-task-text { display: grid; flex: 1; min-width: 0; gap: 1px; font-size: var(--fs-small); }
.dash-task-text > span { color: var(--muted); font-size: var(--fs-micro); }
.dash-task.is-danger { border-left-color: var(--danger); }
.dash-task.is-danger .dash-task-icon { background: var(--danger-soft); color: var(--danger); }
.dash-task.is-warn { border-left-color: var(--accent); }
.dash-task.is-warn .dash-task-icon { background: var(--accent-soft); color: var(--accent); }
.dash-task.is-good { border-left-color: var(--primary); }
.dash-task.is-good .dash-task-icon { background: var(--primary-soft); color: var(--primary); }
.dash-task.is-info { border-left-color: var(--border-strong); }
.dash-task.is-info .dash-task-icon { background: var(--surface-sunken); color: var(--muted); }
.dash-allclear { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--primary-soft); font-size: var(--fs-small); }
.dash-allclear p { margin: 0; }
.dash-allclear-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--primary); color: var(--primary-ink); }

/* Money at a glance: two bars on one scale, value as text */
.dash-bars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.dash-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; }
.dash-bars strong { font-family: var(--font-num); }
.dash-bars-key { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.dash-bars-track { grid-column: 1 / -1; height: 10px; overflow: hidden; border-radius: 5px; background: var(--surface-sunken); }
.dash-bars-track > span { display: block; height: 100%; border-radius: 5px; transition: width 300ms ease; }

/* Charts */
.dash-chart { display: grid; gap: 6px; }
.dash-plot { position: relative; min-width: 0; }
.dash-plot svg { display: block; overflow: visible; }
.dash-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.dash-legend li { display: inline-flex; align-items: center; gap: 6px; }
.dash-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.dash-grid { stroke: var(--border); stroke-width: 1; }
.dash-grid.is-base { stroke: var(--border-strong); }
.dash-axis { fill: var(--muted-2); font-family: var(--font-num); font-size: 11px; font-variant-numeric: tabular-nums; }
.dash-end-label { fill: var(--text); font-family: var(--font-num); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.dash-fill-a { fill: var(--series-weight); background: var(--series-weight); }
.dash-fill-b { fill: var(--series-threshold); background: var(--series-threshold); }
.dash-line-a { fill: none; stroke: var(--series-weight); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash-area-a { fill: var(--series-weight); fill-opacity: 0.1; stroke: none; }
.dash-dot { stroke: var(--surface); stroke-width: 2; }
.dash-dot-a { fill: var(--series-weight); }
.dash-crosshair { stroke: var(--border-strong); stroke-width: 1; }
.dash-marker { stroke: var(--series-threshold); stroke-width: 2; stroke-linecap: round; }
.dash-band path { transition: opacity var(--transition); }
.dash-band.is-dim path { opacity: 0.35; }
.dash-hit { fill: transparent; cursor: pointer; }
.dash-hit:focus { outline: none; }
.dash-hit:focus-visible { stroke: var(--primary-line); stroke-width: 2; }
.dash-key { display: inline-block; width: 12px; height: 0; border-top: 2px solid; }
.dash-key-a { border-color: var(--series-weight); }
.dash-key-b, .dash-key-marker { border-color: var(--series-threshold); }

.dash-tip {
    position: absolute;
    top: 0;
    z-index: 5;
    display: grid;
    gap: 2px;
    min-width: 170px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    font-size: var(--fs-small);
    pointer-events: none;
    transform: translateX(-50%);
}

.dash-tip.is-left { transform: translateX(calc(-100% - 10px)); }
.dash-tip.is-right { transform: translateX(10px); }
.dash-tip p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.dash-tip p span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.dash-tip strong { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.dash-tip-title { font-weight: 700; color: var(--text); }
.dash-tip-rule { margin-top: 2px !important; padding-top: 4px; border-top: 1px solid var(--border); }

/* Selling & watch list */
/* Headline figures that open their tab / sub-tab (the whole tile is the target) */
.kpi2.is-link { cursor: pointer; }
.kpi2-hit { appearance: none; position: absolute; inset: 0; z-index: 1; display: block; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.kpi2-hit:focus-visible { outline: none; box-shadow: var(--ring); }
.kpi2 .link-button { position: relative; z-index: 2; }
.kpi2-go { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; color: var(--muted-2); transition: transform var(--transition), color var(--transition), background var(--transition); }
.kpi2.is-link:hover .kpi2-go { color: var(--primary); background: var(--primary-soft); transform: translateX(2px); }
.kpi2.is-loss .kpi2-icon { background: var(--danger-soft); color: var(--danger); }

/* Sub-tabs of a dashboard tab (underline tabs; the Charts / Tables switch sits at the right end) */
.dash-subbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 2px 0 14px; border-bottom: 1px solid var(--border); }
.dash-subtabs { display: flex; flex: 1 1 auto; gap: 2px; min-width: 0; margin-bottom: -1px; overflow-x: auto; scrollbar-width: none; }
.dash-subtabs::-webkit-scrollbar { display: none; }

.dash-subtab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 8px 12px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.dash-subtab:hover { color: var(--text); border-bottom-color: var(--border-strong); }
.dash-subtab:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px 8px 0 0; }
.dash-subtab.is-on { color: var(--primary); border-bottom-color: var(--primary); }
.dash-subtab-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-sunken); color: var(--muted); transition: background var(--transition), color var(--transition); }
.dash-subtab.is-on .dash-subtab-icon { background: var(--primary); color: var(--primary-ink); box-shadow: 0 3px 8px rgba(29, 107, 63, 0.22); }
.dash-subtab-count { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--surface-sunken); color: var(--muted); font-family: var(--font-num); font-size: 11px; text-align: center; }
.dash-subtab-count.is-alert { background: var(--danger); color: var(--danger-ink); }
.dash-subtab-count.is-warn { background: var(--accent-soft); color: var(--accent); }
.dash-subtab-count.is-good { background: var(--primary-soft); color: var(--primary); }
.dash-view { flex: none; margin-bottom: 6px; }
.dash-subpanel { animation: dash-in 180ms ease; }

@keyframes dash-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Two parts side by side inside one card */
.dash-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-items: start; }
.dash-split-wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.dash-split-part { display: grid; gap: 10px; min-width: 0; }
.dash-split + .mini-stats, .dash-split + .panel-foot { margin-top: 14px; }
.dash-mini-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-mini-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-list-note { margin: 0; }

/* Movements: start → in / out → now */
.dash-flow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(90deg, var(--surface-sunken), var(--primary-soft)); }
.dash-flow-end { display: grid; gap: 2px; text-align: center; }
.dash-flow-end span { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dash-flow-end strong { font-family: var(--font-num); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.dash-flow-end.is-now strong { color: var(--primary); }
.dash-flow-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; font-family: var(--font-num); font-size: var(--fs-small); font-weight: 700; }
.dash-flow-in { color: var(--positive); }
.dash-flow-out { color: var(--danger); }
.dash-flow-arrow { display: grid; color: var(--muted-2); }

/* Data grids on the dashboard (Shared/DashGrid): search, column filters, pager, record count */
.dgrid { display: grid; gap: 10px; min-width: 0; }
.dgrid-wrap { border: 1px solid var(--border); border-radius: 12px; }
.dgrid-table th:first-child, .dgrid-table td:first-child { padding-left: 14px; }
.dgrid-table th:last-child, .dgrid-table td:last-child { padding-right: 14px; }
.dgrid-table td { white-space: nowrap; }
.dgrid-table tbody tr:last-child td { border-bottom: 0; }
.dgrid-empty-row td { padding: 0 !important; }
.dgrid .grid-footer { padding: 2px 2px 0; border-top: 0; }
.dash-body .dgrid .grid-toolbar { gap: 6px 8px; }
.dash-body .dgrid .grid-search { flex-basis: 220px; }

@media (max-width: 1100px) {
    .dash-split, .dash-split-wide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .dash-subbar { margin-bottom: 12px; }
    .dash-subtab { padding: 6px 9px 9px; gap: 6px; font-size: var(--fs-micro); }
    .dash-subtab-icon { width: 24px; height: 24px; }
    .dash-mini-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi2-go { display: none; }
    .dash-flow { padding: 12px; gap: 8px; }
    .dash-flow-end strong { font-size: 22px; }
    .dash-flow-mid { flex-direction: column; gap: 0; }
    .dash-flow-arrow { display: none; }

    /* Rows stack as cards: each cell shows its column name (data-label) above the value. */
    .dgrid-wrap { border: 0; border-radius: 0; overflow: visible; }
    .dgrid-table, .dgrid-table tbody, .dgrid-table tfoot, .dgrid-table tr, .dgrid-table td { display: block; width: 100%; }
    .dgrid-table thead { display: none; }
    .dgrid-table tbody { display: grid; gap: 8px; }
    .dgrid-table tbody tr, .dgrid-table tfoot tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
    .dgrid-table tbody tr.row-link:hover { border-color: var(--primary-line); background: var(--primary-soft); }
    .dgrid-table tfoot tr { margin-top: 8px; background: var(--surface-sunken); }
    .dgrid-table td, .dgrid-table tfoot td { min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; white-space: normal; }
    .dgrid-table td { font-size: var(--fs-micro); overflow-wrap: anywhere; }
    .dgrid-table td::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
    .dgrid-table td:first-child { grid-column: 1 / -1; font-size: var(--fs-body); }
    .dgrid-table td:first-child::before, .dgrid-table td[data-label=""]::before { display: none; }
    .dgrid-table tr.dgrid-empty-row { display: block; padding: 0; border: 0; background: none; }
    .dgrid-table tr.dgrid-empty-row td::before { display: none; }
    .dgrid .grid-footer { justify-content: center; }
}

.dash-growth-tabs { max-width: 100%; }
.dash-animals { display: grid; margin: 0; padding: 0; list-style: none; }
.dash-animals li { border-bottom: 1px dashed var(--border); }
.dash-animals li:last-child { border-bottom: 0; }
.dash-animal { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: var(--fs-small); }
.dash-animal:hover { background: var(--primary-soft); }
.dash-animal-name { flex: 1; min-width: 0; }
.dash-animal-fig { text-align: right; font-family: var(--font-num); white-space: nowrap; }

/* Today's feeding list */
.dash-feed { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.dash-feed li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.dash-feed .cell-sub { flex-basis: 100%; padding-left: 2px; }

/* Market rates panel */
.dash-rates { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dash-rate-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.dash-rate-name { display: grid; min-width: 0; }
.dash-rate-name .cell-sub { display: block; }
.dash-rate-input .input { width: 100%; text-align: right; font-family: var(--font-num); }
.dash-rate-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--fs-micro); color: var(--muted-2); }
.dash-rate-meta:empty { display: none; }
.dash-rate-meta strong { color: var(--text); font-family: var(--font-num); }
.dash-rate-meta .link-button { font-size: inherit; }

/* ==========================================================================
   Farm calendar (Shared/FarmCalendar, CalendarWeekStrip, CalendarEventPanel; Pages/Calendar)
   A category is an icon + a label tint (label-* sets --label-ink/bg/line); the state is a badge
   (text) plus a style: overdue red edge, due amber edge, done muted with a tick, planned dashed.
   ========================================================================== */

.cal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cal-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cal-title { margin: 0 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-filters { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.cal-chips-filter { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.cal-filter {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px dashed var(--border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.cal-filter.is-on { border-style: solid; border-color: var(--label-line); background: var(--label-bg); color: var(--label-ink); }
.cal-filter:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-filter-n { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface); color: var(--text); font-family: var(--font-num); font-size: 10px; text-align: center; }
.cal-todo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); cursor: pointer; }
.cal-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cal-sum { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--surface-sunken); color: var(--muted); font-size: var(--fs-micro); font-weight: 700; }
.cal-sum.is-overdue { background: var(--danger-soft); color: var(--danger); }
.cal-sum.is-due { background: var(--accent-soft); color: var(--accent); }
.cal-body { transition: opacity 160ms ease; }
.cal-body.is-busy { opacity: 0.55; }
.cal-skeleton { display: grid; gap: 10px; padding: 20px 0; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }

/* Month grid */
.cal-month { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--border); gap: 1px; }
.cal-weekdays, .cal-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.cal-weekdays span { padding: 6px 8px; background: var(--surface-sunken); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.cal-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    min-height: 112px;
    padding: 6px;
    background: var(--surface);
    cursor: pointer;
    transition: background var(--transition);
}

.cal-cell:hover { background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); }
.cal-cell.is-outside { background: var(--surface-sunken); }
.cal-cell.is-outside .cal-date { color: var(--muted-2); }
.cal-cell.is-selected { box-shadow: inset 0 0 0 2px var(--primary); }

.cal-date {
    appearance: none;
    align-self: flex-start;
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-family: var(--font-num);
    font-size: var(--fs-small);
    font-weight: 700;
    cursor: pointer;
}

.cal-date:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-cell.is-today .cal-date { background: var(--primary); color: var(--primary-ink); }
.cal-late { position: absolute; top: 8px; right: 8px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: var(--danger-ink); font-family: var(--font-num); font-size: 10px; font-weight: 700; text-align: center; }
.cal-cell-chips { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.cal-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 2px 6px;
    border-left: 3px solid var(--label-line);
    border-radius: 5px;
    background: var(--label-bg);
    color: var(--label-ink);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.cal-chip span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-chip.is-overdue { border-left-color: var(--danger); }
.cal-chip.is-due { border-left-color: var(--accent); }
.cal-chip.is-done { opacity: 0.72; }
.cal-chip.is-planned { background: transparent; box-shadow: inset 0 0 0 1px var(--label-line); border-left-style: dashed; }
.cal-more { font-size: 11px; font-weight: 700; color: var(--muted); padding-left: 4px; }
.cal-dots { display: none; gap: 3px; justify-content: center; }
.cal-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--label-ink); }

/* Day panel */
.cal-day { position: sticky; top: 76px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-sunken); }
.cal-day-inner { display: grid; gap: 10px; }
.cal-day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cal-day-name { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.cal-day-date { margin: 2px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.cal-empty { margin: 0; padding: 10px 0; font-size: var(--fs-small); color: var(--muted-2); }

/* Item rows (day panel, week, list, dashboard week strip) */
.cal-items { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cal-items li { display: flex; }

.cal-item {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--label-line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-small);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

a.cal-item:hover, button.cal-item:hover { background: color-mix(in srgb, var(--label-bg) 60%, var(--surface)); transform: translateX(2px); }
.cal-item:focus-visible { outline: none; box-shadow: var(--ring); }
div.cal-item { cursor: default; }
.cal-item-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--label-bg); color: var(--label-ink); }
.cal-item-text { display: grid; flex: 1; min-width: 0; gap: 1px; }
.cal-item-text strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-item-text span { overflow: hidden; color: var(--muted); font-size: var(--fs-micro); white-space: nowrap; text-overflow: ellipsis; }
.cal-item-meta { display: grid; flex: none; justify-items: end; gap: 2px; font-size: var(--fs-micro); }
.cal-item-meta strong { font-family: var(--font-num); font-size: var(--fs-small); }
.cal-item-time { font-family: var(--font-num); font-weight: 700; color: var(--text); }
.cal-state { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: var(--surface-sunken); color: var(--muted); font-weight: 700; white-space: nowrap; }
.cal-item.is-overdue { border-left-color: var(--danger); }
.cal-item.is-overdue .cal-state { background: var(--danger-soft); color: var(--danger); }
.cal-item.is-due { border-left-color: var(--accent); }
.cal-item.is-due .cal-state { background: var(--accent-soft); color: var(--accent); }
.cal-item.is-done .cal-state { background: var(--primary-soft); color: var(--primary); }
.cal-item.is-planned { border-left-style: dashed; }
.cal-item.is-planned .cal-state { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }

/* Week */
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-week-day { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-sunken); }
.cal-week-day.is-today { border-color: var(--primary-line); box-shadow: inset 0 3px 0 var(--primary); }
.cal-week-day header { display: flex; align-items: baseline; gap: 6px; }
.cal-week-name { font-size: var(--fs-small); font-weight: 800; }
.cal-week-date { flex: 1; font-size: var(--fs-micro); color: var(--muted); }
.cal-week-add { appearance: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); cursor: pointer; }
.cal-week-add:hover { color: var(--primary); border-color: var(--primary-line); }
.cal-week .cal-item { padding: 6px 8px; gap: 8px; }
.cal-week .cal-item-icon { width: 24px; height: 24px; }
.cal-week .cal-item-meta { display: none; }

/* List */
.cal-agenda { display: grid; gap: 14px; }
.cal-agenda-day { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
.cal-agenda-head { display: contents; }
.cal-agenda-num { grid-row: 1 / span 2; display: grid; place-items: center; align-self: start; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-sunken); font-family: var(--font-num); font-size: 18px; font-weight: 800; }
.cal-agenda-day.is-today .cal-agenda-num { background: var(--primary); color: var(--primary-ink); }
.cal-agenda-when { grid-column: 2; font-size: var(--fs-small); color: var(--muted); }
.cal-agenda-when strong { color: var(--text); margin-right: 6px; }
.cal-agenda .cal-items { grid-column: 2; grid-row: 2; }
.cal-agenda-day { row-gap: 6px; }
.cal-nothing { display: grid; justify-items: center; gap: 10px; padding: 40px 12px; color: var(--muted); text-align: center; }

/* Own-event panel */
.cal-colours { margin: 0; padding: 0; border: 0; }
.cal-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-swatch { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.cal-swatch > span[aria-hidden] { width: 22px; height: 22px; border-radius: 50%; background: var(--label-ink); }
.cal-swatch.is-on { border-color: var(--label-ink); }
.cal-swatch:focus-within { box-shadow: var(--ring); }

/* Dashboard week strip */
.wk { display: grid; gap: 10px; }
.wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }

.wk-day {
    appearance: none;
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 8px 2px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.wk-day:hover { transform: translateY(-1px); border-color: var(--primary-line); }
.wk-day:focus-visible { outline: none; box-shadow: var(--ring); }
.wk-day.is-on { border-color: var(--primary); background: var(--primary-soft); }
.wk-day.is-today .wk-num { background: var(--primary); color: var(--primary-ink); }
.wk-name { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.wk-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--font-num); font-size: 14px; font-weight: 800; }
.wk-dots { display: flex; gap: 3px; min-height: 6px; }
.wk-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--label-ink); }
.wk-count { position: absolute; top: -6px; right: -4px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--text); color: var(--surface); font-family: var(--font-num); font-size: 10px; font-weight: 700; }
.wk-count.is-late { background: var(--danger); color: var(--danger-ink); }
.wk-overdue { appearance: none; display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 10px; border: 0; border-radius: 999px; background: var(--danger-soft); color: var(--danger); font: inherit; font-size: var(--fs-micro); font-weight: 700; cursor: pointer; }
.wk-items .cal-item { padding: 7px 9px; }

/* Responsive */
@media (max-width: 1100px) {
    .dash-row, .dash-row-even { grid-template-columns: minmax(0, 1fr); }
    .cal-layout { grid-template-columns: minmax(0, 1fr); }
    .cal-day { position: static; }
    .cal-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .dash-hero { padding: 16px; border-radius: 16px; }
    .dash-hero .page-title { font-size: 22px; }
    .dash-hero::after { width: 140px; height: 140px; border-width: 20px; }
    .dash-hero-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-hero-actions .button { justify-content: center; padding-left: 8px; padding-right: 8px; }
    .dash-hero-actions .button-primary { grid-column: 1 / -1; }
    .dash-bar { padding: 5px; border-radius: 12px; }
    .dash-tabs { flex: 1 1 100%; gap: 2px; }
    .dash-tab { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 7px 2px; font-size: 11px; }
    .dash-tab > span:not(.dash-tab-badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .dash-tab-badge { position: absolute; top: 2px; right: 6px; min-width: 16px; padding: 0 4px; font-size: 9.5px; }
    .dash-tools { width: 100%; margin-left: 0; justify-content: space-between; }
    .dash-tools > .seg:first-child { flex: 1; }
    .dash-tools > .seg:first-child .seg-btn { flex: 1; justify-content: center; padding-left: 4px; padding-right: 4px; }
    .dash-view-text { display: none; }
    .dash-kpis { gap: 8px; }
    .kpi2 { padding: 12px 12px 10px; border-radius: 14px; }
    .kpi2-icon { width: 26px; height: 26px; }
    .kpi2-value { font-size: 19px; }
    .kpi2-delta { display: none; }
    .dash-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-rate-row { grid-template-columns: minmax(0, 1fr) 140px; }
    .cal { padding: 12px; }
    .cal-title { font-size: 17px; }
    .cal-toolbar { gap: 8px; }
    .cal-tools { width: 100%; justify-content: space-between; }
    .cal-add-text { display: none; }
    .cal-filters { align-items: flex-start; }
    .cal-chips-filter { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
    .cal-chips-filter::-webkit-scrollbar { display: none; }
    .cal-filter { flex: none; }
    .cal-cell { min-height: 56px; align-items: center; padding: 4px 2px; }
    .cal-date { align-self: center; }
    .cal-cell-chips, .cal-more { display: none; }
    .cal-dots { display: flex; }
    .cal-late { top: 2px; right: 2px; }
    .cal-weekdays span { padding: 6px 2px; text-align: center; letter-spacing: 0; }
    .cal-week { grid-template-columns: minmax(0, 1fr); }
    .cal-week .cal-item-meta { display: grid; }
    .cal-agenda-day { grid-template-columns: 40px minmax(0, 1fr); }
    .cal-agenda-num { width: 38px; height: 38px; font-size: 15px; }
    .wk-days { gap: 4px; }
    .wk-name { font-size: 9px; }
    .wk-num { width: 24px; height: 24px; font-size: 12px; }
}

@media (max-width: 520px) {
    .kpi2-sub { font-size: 10.5px; }
}

@media (max-width: 300px) {
    .dash-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Dashboard alerts (Pages/Home.razor: Alerts tab and the Overview "Needs attention" card;
   Pages/AlertSettings.razor). Section tints reuse the label colours (as on the calendar);
   severity uses --danger (urgent), --accent (soon) and neutral grey (FYI).
   ========================================================================== */

/* Overview: one row per section */
.alert-sum-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.alert-sum-list li { display: flex; }

.alert-sum-row {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.alert-sum-row:hover { background: var(--surface-sunken); transform: translateX(2px); }
.alert-sum-row:focus-visible { outline: none; box-shadow: var(--ring); }
.alert-sum-row > .icon:last-child { flex: none; color: var(--muted-2); }
.alert-sum-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--label-bg); color: var(--label-ink); }
.alert-sum-text { display: grid; flex: 1; min-width: 0; gap: 1px; font-size: var(--fs-small); }
.alert-sum-text > span { overflow: hidden; color: var(--muted); font-size: var(--fs-micro); white-space: nowrap; text-overflow: ellipsis; }
.alert-sum-count { display: grid; place-items: center; flex: none; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--surface-sunken); color: var(--muted); font-family: var(--font-num); font-size: 12px; font-weight: 800; }
.alert-sum-row.is-critical { border-left-color: var(--danger); }
.alert-sum-row.is-critical .alert-sum-count { background: var(--danger); color: var(--danger-ink); }
.alert-sum-row.is-warning { border-left-color: var(--accent); }
.alert-sum-row.is-warning .alert-sum-count { background: var(--accent-soft); color: var(--accent); }
.alert-sum-row.is-clear .alert-sum-count { background: var(--primary-soft); color: var(--primary); }
.alert-sum-row.is-clear .alert-sum-text > span { color: var(--muted-2); }

.alert-sum-next {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-small);
    text-align: left;
    cursor: pointer;
}

.alert-sum-next strong { color: var(--text); }
.alert-sum-next:hover { background: var(--surface-sunken); }
.alert-sum-next:focus-visible { outline: none; box-shadow: var(--ring); }
.dash-today-card .alert-sum-list ~ .dash-sub-title { margin: 14px 0 8px; }

/* Section tiles: count per section, click to narrow the tab to it */
.alert-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

.alert-tile {
    appearance: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon num" "name name" "sub sub";
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.alert-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.alert-tile:focus-visible { outline: none; box-shadow: var(--ring); }
.alert-tile.is-on { border-color: var(--label-line); background: color-mix(in srgb, var(--label-bg) 60%, var(--surface)); box-shadow: inset 0 0 0 1px var(--label-line); }
.alert-tile-icon { grid-area: icon; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--label-bg); color: var(--label-ink); }
.alert-tile-num { grid-area: num; justify-self: end; font-family: var(--font-num); font-size: 24px; line-height: 1; }
.alert-tile-name { grid-area: name; font-size: var(--fs-small); font-weight: 700; }
.alert-tile-sub { grid-area: sub; overflow: hidden; color: var(--muted); font-size: var(--fs-micro); white-space: nowrap; text-overflow: ellipsis; }
.alert-tile.has-critical .alert-tile-num { color: var(--danger); }

.alerts-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 12px 2px; }
.alerts-toolbar .hint { flex: 1 1 280px; margin: 0; }
.alerts-toolbar .button.is-on { border-color: var(--border-strong); background: var(--surface-sunken); }

.alerts-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 12px; align-items: start; }
.alerts-layout.is-single { grid-template-columns: minmax(0, 1fr); }
.alerts-main { display: grid; gap: 12px; min-width: 0; }
.alerts-aside { position: sticky; top: 76px; min-width: 0; max-height: calc(100vh - 88px); overflow-y: auto; border-radius: 16px; }

/* Sections */
.dash-body .alert-section .panel-title .icon,
.dash-body .alert-upcoming .panel-title .icon { background: var(--label-bg); color: var(--label-ink); }

.alert-clear { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-small); font-weight: 600; }
.alert-clear .icon { flex: none; }
.alert-list { display: grid; gap: 10px; }

/* One alert */
.alert-card { display: grid; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: 12px; background: var(--surface); }
.alert-card.is-critical { border-left-color: var(--danger); background: linear-gradient(90deg, var(--danger-soft), transparent 45%), var(--surface); }
.alert-card.is-warning { border-left-color: var(--accent); }
.alert-card.is-hidden { border-style: dashed; border-left-style: solid; background: var(--surface); opacity: 0.72; }
.alert-card-head { display: flex; align-items: flex-start; gap: 10px; }
.alert-sev { flex: none; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: var(--surface-sunken); color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.alert-card.is-critical .alert-sev { background: var(--danger); color: var(--danger-ink); }
.alert-card.is-warning .alert-sev { background: var(--accent-soft); color: var(--accent); }
.alert-card-text { flex: 1; min-width: 0; }
.alert-card-title { margin: 0; font-size: var(--fs-body); font-weight: 800; line-height: 1.3; }
.alert-card-desc { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
.alert-card-head .row-menu-btn { flex: none; margin: -4px -6px 0 0; }

.alert-items { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.alert-items li { display: flex; min-width: 0; }
.alert-item { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 6px 10px; border-radius: 8px; background: var(--surface-sunken); color: var(--text); font-size: var(--fs-small); text-decoration: none; transition: background var(--transition); }
a.alert-item:hover { background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-sunken)); }
a.alert-item:focus-visible { outline: none; box-shadow: var(--ring); }
.alert-item-text { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.alert-item-text strong { overflow-wrap: anywhere; }
.alert-item-text span { min-width: 0; color: var(--muted); font-size: var(--fs-micro); overflow-wrap: anywhere; }
.alert-item-date { flex: none; color: var(--muted); font-family: var(--font-num); font-size: var(--fs-micro); white-space: nowrap; }
.alert-more { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); }
.alert-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.alert-hidden-note { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: var(--muted); font-size: var(--fs-micro); font-weight: 600; }

/* Upcoming events (calendar item rows, a little tighter) */
.alert-upcoming .cal-agenda { gap: 10px; }
.alert-upcoming .cal-agenda-day { grid-template-columns: 40px minmax(0, 1fr); }
.alert-upcoming .cal-agenda-num { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
.alert-upcoming > .link-button { justify-self: start; }

/* Settings › Alerts */
.alset-layout { display: grid; gap: 12px; }
.alset-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.alset-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.alset-toggle:hover { background: var(--surface-sunken); }
.alset-toggle:has(input:checked) { border-color: var(--primary-line); }
.alset-toggle:focus-within { box-shadow: var(--ring); }
.alset-toggle input { flex: none; width: 16px; height: 16px; margin: 8px 0 0; accent-color: var(--primary); }
.alset-toggle-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--label-bg); color: var(--label-ink); transition: opacity var(--transition); }
.alset-toggle:not(:has(input:checked)) .alset-toggle-icon { opacity: 0.45; }
.alset-toggle > span:last-child { display: grid; gap: 2px; min-width: 0; }
.alset-toggle > span:last-child > span { color: var(--muted); font-size: var(--fs-micro); line-height: 1.4; }
.alset-links { align-content: start; }

@media (min-width: 1100px) {
    .alset-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
    .alset-aside { position: sticky; top: 12px; }
}

@media (max-width: 1100px) {
    .alerts-layout { grid-template-columns: minmax(0, 1fr); }
    .alerts-aside { position: static; max-height: none; overflow: visible; }
}

@media (max-width: 680px) {
    .alert-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .alert-tile { padding: 10px 12px; }
    .alert-tile-num { font-size: 20px; }
    .alert-card { padding: 10px 12px; }
    .alert-card-head { flex-wrap: wrap; }
    .alert-card-text { flex-basis: calc(100% - 44px); order: 2; }
    .alert-card-head .row-menu-btn { order: 1; margin-left: auto; }
    .alert-card-foot .button { flex: 1 1 auto; justify-content: center; }
    .alset-toggles { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Dairy (Pages/Dairy*.razor; Shared/DairyTabs, DairyRequired, DairyPeriod, DairyTab, TankGauge,
   MilkDispatchPanel, MilkUsePanel, MilkTestPanel, CmtPanel, LactationPanel, MilkRatePanel, MilkEntryPanel).
   Reuses the data grid, KPI, panel and drawer classes; only theme tokens, so light and dark both work.
   Milk / done = primary green, to do = amber (accent), problems = red (danger).
   ========================================================================== */

.dy-off { display: grid; justify-items: start; gap: 8px; }
.dy-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dy-pos { color: var(--positive); }
.dy-pad { padding: 14px; }
.dy-flag { display: inline-flex; align-items: center; gap: 3px; margin: 2px 0 0 4px; vertical-align: middle; }
.dy-flags-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dy-flags-row .status-pill { display: inline-flex; align-items: center; gap: 4px; white-space: normal; }
.dy-subtitle { margin: 0; font-size: var(--fs-small); font-weight: 700; }
.dy-scope, .dy-session-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dy-scope .icon, .dy-session-chip .icon { color: var(--primary); }
.dy-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: var(--fs-small); text-decoration: none; }
.dy-inline-check { margin: 0; font-size: var(--fs-small); white-space: nowrap; }
.dy-callout-warn { background: var(--danger-soft); }
.dy-callout-warn .icon { color: var(--danger); }
.print-only { display: none; }

/* Headline tiles (Overview): the Home dashboard's kpi2 tiles, four across */
.dy-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dy-kpis .kpi2-sub .link-button { font-size: inherit; }

/* Period picker */
.dy-period { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dy-period-dates { display: inline-flex; align-items: center; gap: 4px; }
.dy-period-dates .input { width: auto; min-width: 128px; padding-top: 5px; padding-bottom: 5px; font-size: var(--fs-small); }
.dy-grid-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dy-grid-heading { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.dy-grid-heading .icon { color: var(--primary); }

/* Today's milkings */
.dy-sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.dy-session {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.dy-session:hover { border-color: var(--primary-line); transform: translateY(-1px); }
.dy-session.is-done { border-style: solid; border-color: var(--primary-line); background: linear-gradient(160deg, var(--surface) 40%, var(--primary-soft)); }
.dy-session-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.dy-session.is-done .dy-session-icon { background: var(--primary-soft); color: var(--primary); }
.dy-session-main { display: grid; gap: 1px; flex: 1; min-width: 0; }
.dy-session-name { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dy-session-qty { font-family: var(--font-num); font-size: 17px; letter-spacing: -0.02em; }
.dy-session-qty.dy-session-none { font-family: var(--font-sans); font-size: 15px; color: var(--muted); }
.dy-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }

/* Top cows */
.dy-rank { display: grid; margin: 0; padding: 0; list-style: none; }
.dy-rank li { border-bottom: 1px dashed var(--border); }
.dy-rank li:last-child { border-bottom: 0; }
.dy-rank-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) auto; align-items: center; gap: 12px; padding: 8px 4px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: var(--fs-small); }
.dy-rank-row:hover { background: var(--primary-soft); }
.dy-rank-name { display: grid; min-width: 0; }
.dy-rank-bar { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--primary-soft); }
.dy-rank-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--series-weight); }
.dy-rank-fig { display: grid; justify-items: end; font-family: var(--font-num); font-weight: 700; white-space: nowrap; }

/* To-do */
.dy-tasks { display: grid; margin: 0; padding: 0; list-style: none; }
.dy-tasks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.dy-tasks li:last-child { border-bottom: 0; }
.dy-task-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-sunken); color: var(--muted); }
.dy-task-danger { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-soft); color: var(--danger); }
.dy-task-warn { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dy-task-info { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.dy-task-main { min-width: 0; }
.dy-task-main p { margin: 0; }
.dy-task-what { font-size: var(--fs-small); }
.dy-task-main .cell-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tanks */
.dy-tank-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.dy-gauge { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.dy-gauge-tank { position: relative; display: block; width: 30px; height: 44px; flex: none; overflow: hidden; border: 2px solid var(--primary-line); border-radius: 8px 8px 10px 10px; background: var(--surface-sunken); }
.dy-gauge-milk { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 30%, var(--surface)), color-mix(in srgb, var(--primary) 16%, var(--surface))); border-top: 2px solid var(--primary); transition: height 300ms ease; }
.dy-gauge-mid .dy-gauge-milk { border-top-color: var(--accent); }
.dy-gauge-high .dy-gauge-tank { border-color: var(--danger); }
.dy-gauge-high .dy-gauge-milk { border-top-color: var(--danger); }
.dy-gauge-main { min-width: 0; }
.dy-gauge-main p { margin: 0; }
.dy-gauge-name { font-size: var(--fs-small); font-weight: 700; }
.dy-gauge-qty { font-family: var(--font-num); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }

/* Recent dispatches */
.dy-sent { display: grid; margin: 0; padding: 0; list-style: none; }
.dy-sent li { border-bottom: 1px dashed var(--border); }
.dy-sent li:last-child { border-bottom: 0; }
.dy-sent-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 4px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: var(--fs-small); }
.dy-sent-row:hover { background: var(--primary-soft); }
.dy-sent-date { display: grid; font-family: var(--font-num); font-weight: 700; }
.dy-sent-main { display: grid; min-width: 0; }
.dy-sent-main .cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-sent-amt { display: grid; justify-items: end; font-family: var(--font-num); font-weight: 700; white-space: nowrap; }

/* Milking: date / milking / mode bar */
.dy-entry-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; }
.dy-day-picker { display: inline-flex; align-items: center; gap: 6px; }
.dy-day-picker .input { width: auto; min-width: 140px; font-family: var(--font-num); }
.dy-day-picker .button-icon { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; }
.dy-day-name { font-size: var(--fs-small); font-weight: 700; color: var(--primary); }
.dy-session-seg .seg-btn, .dy-mode-seg .seg-btn { padding: 6px 12px; }
.dy-mode-seg { margin-left: auto; }
.dy-session-strip { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 14px; border: 1px solid var(--primary-line); border-radius: var(--radius-md); background: var(--primary-soft); font-size: var(--fs-small); }
.dy-session-strip > span { display: inline-flex; align-items: center; gap: 5px; }
.dy-session-strip strong { font-family: var(--font-num); }
.dy-session-strip b { font-weight: 700; }

/* Milking sheet */
.dy-sheet-tools .grid-search { flex: 1 1 200px; }
.dy-sheet td { vertical-align: middle; }
.dy-col-qty { width: 150px; }
.dy-qty { width: 120px; font-family: var(--font-num); font-size: 15px; font-weight: 700; text-align: right; }
.dy-qty.is-unusual { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.dy-dest { display: flex; flex-wrap: wrap; gap: 4px; }
.dy-dest .select-filter { width: auto; min-width: 118px; }
.dy-sheet-card .animal-card-top { row-gap: 2px; }
.dy-card-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.dy-card-entry .affix { display: block; }
.dy-card-entry .dy-qty { width: 100%; font-size: 17px; }
.dy-card-reason { margin-top: 6px; }

/* Save bar pinned to the bottom while there are unsaved entries */
.dy-savebar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(760px, calc(100% - 24px));
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--text);
    color: var(--surface);
    box-shadow: var(--shadow-lg);
    transform: translateX(-50%);
    animation: dy-slide-up 180ms ease-out;
}
.dy-savebar-text { display: grid; flex: 1; min-width: 0; font-size: var(--fs-small); }
.dy-savebar-text span { opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-savebar .button:not(.button-primary) { border-color: transparent; background: rgba(255, 255, 255, 0.12); color: inherit; }
@keyframes dy-slide-up { from { transform: translate(-50%, 16px); opacity: 0; } }

/* Group total */
.dy-total-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dy-big-input .input { font-family: var(--font-num); font-size: 20px; font-weight: 800; padding-top: 8px; padding-bottom: 8px; }
.dy-saved-totals { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.dy-saved-totals ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dy-saved-totals li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.dy-saved-totals li > span { flex: 1; min-width: 0; }
.dy-saved-totals li .icon { color: var(--primary); }

/* Pick lists (lactation panel, group total) */
.dy-pick-search { max-width: none; }
.dy-pick { display: grid; gap: 4px; max-height: 320px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.dy-pick-tall { max-height: 460px; }
.dy-pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size: var(--fs-small); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.dy-pick-row:hover { border-color: var(--primary-line); }
.dy-pick-row.is-on { border-color: var(--primary); background: var(--primary-soft); }
.dy-pick-main { display: grid; flex: 1; min-width: 0; }

/* Drawer bits */
.dy-seg-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; }
.dy-seg-2 .seg-btn, .dy-seg-fill .seg-btn { justify-content: center; }
.dy-seg-fill { display: flex; justify-self: stretch; }
.dy-seg-fill .seg-btn { flex: 1; padding-left: 6px; padding-right: 6px; }
.dy-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dy-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.dy-grid-4 .field { margin: 0; }
.dy-price { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--primary-line); border-radius: var(--radius-md); background: var(--primary-line); }
.dy-price > div { display: grid; gap: 1px; padding: 9px 11px; background: var(--surface); }
.dy-price span { font-size: var(--fs-micro); color: var(--muted); }
.dy-price strong { font-family: var(--font-num); font-size: 15px; }
.dy-price em { font-style: normal; font-family: var(--font-num); font-size: var(--fs-micro); font-weight: 700; }
.dy-price .dy-price-total { background: var(--primary-soft); }
.dy-price .dy-price-total strong { color: var(--primary); font-size: 17px; }
.dy-up { color: var(--positive); }
.dy-down { color: var(--danger); }

.dy-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.dy-choice-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dy-choice-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dy-choice {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.dy-choice > .icon { color: var(--primary); }
.dy-choice-loss > .icon { color: var(--danger); }
.dy-choice strong { font-family: var(--font-num); font-size: 18px; }
.dy-choice span { color: var(--muted); font-weight: 500; }
.dy-choice > span:only-child, .dy-choice .icon + span { color: var(--text); font-weight: 600; }
.dy-choice:hover { border-color: var(--primary-line); }
.dy-choice.is-on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.dy-choice-loss.is-on { border-color: var(--danger); background: var(--danger-soft); box-shadow: 0 0 0 1px var(--danger); }
.chip.dy-chip-bad { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

/* Buyer prices */
.dy-rate-pill { display: inline-block; padding: 1px 8px; border: 1px solid var(--primary-line); border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-micro); font-weight: 700; }
.dy-rate-history, .dy-rate-examples { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); }
.dy-rate-history-title { margin: 0; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dy-rate-history ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.dy-rate-history li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); }
.dy-rate-from { flex: none; width: 96px; font-family: var(--font-num); font-weight: 700; }
.dy-rate-text { flex: 1; min-width: 0; }
.dy-mini-table th, .dy-mini-table td { padding: 4px 6px; font-size: var(--fs-small); background: transparent !important; }
.dy-mini-table td { font-family: var(--font-num); }

/* CMT: udder of four quarters, scores − T 1 2 3 */
.dy-udder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dy-quarter { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-sunken); transition: border-color var(--transition), background var(--transition); }
.dy-quarter-neg { border-color: var(--primary-line); background: var(--primary-soft); }
.dy-quarter-trace { border-color: var(--accent); background: var(--accent-soft); }
.dy-quarter-pos { border-color: var(--danger); background: var(--danger-soft); }
.dy-quarter-name { font-size: var(--fs-small); color: var(--muted); }
.dy-quarter-name strong { color: var(--text); font-family: var(--font-num); }
.dy-quarter-scores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.dy-score { appearance: none; height: 32px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-family: var(--font-num); font-weight: 800; cursor: pointer; }
.dy-score:hover { border-color: var(--primary-line); }
.dy-cmt { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-sunken); color: var(--muted); font-family: var(--font-num); font-size: var(--fs-small); font-weight: 800; }
.dy-cmt-neg { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.dy-cmt-trace { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dy-cmt-pos { border-color: var(--danger); background: var(--danger); color: var(--danger-ink); }
.dy-score.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px currentColor; }
.dy-cmt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-micro); color: var(--muted); }
.dy-cmt-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.dy-cmt-row { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-micro); color: var(--muted); }
.dy-cmt-row > span { display: inline-flex; align-items: center; gap: 3px; }
.dy-cmt-list { display: grid; margin: 0; padding: 0; list-style: none; }
.dy-cmt-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.dy-cmt-list li:last-child { border-bottom: 0; }
.dy-cmt-list .status-pill { margin-left: auto; }

/* Tank page */
.dy-tank-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; align-items: start; }
.dy-kpis-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dy-daybook .dy-in { color: var(--primary); }
.dy-card-right { margin-left: auto; font-size: var(--fs-small); color: var(--muted); }
.dy-tank-head { display: flex; align-items: center; justify-content: space-between; }

/* Losses: where the milk went (value as text beside each bar) */
.dy-bars { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dy-bar-row { appearance: none; display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-small); text-align: left; cursor: pointer; }
.dy-bar-row:hover { background: var(--surface-sunken); }
.dy-bar-row.is-on { border-color: var(--primary-line); background: var(--primary-soft); }
.dy-bar-track { display: block; height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); }
.dy-bar-track > span { display: block; height: 100%; border-radius: 999px; }
.dy-bar-loss { background: var(--danger); }
.dy-bar-use { background: var(--accent); }
.dy-bar-fig { font-family: var(--font-num); font-weight: 700; white-space: nowrap; }

/* Reports */
.dy-report-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dy-inline-bar { display: block; width: 120px; height: 5px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: var(--primary-soft); }
.dy-inline-bar > span { display: block; height: 100%; background: var(--series-weight); }

/* Buyer statement */
.dy-statement-sum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; border-bottom: 1px solid var(--border); background: var(--border); }
.dy-statement-sum > div { display: grid; gap: 2px; padding: 10px 14px; background: var(--surface); }
.dy-statement-sum span { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.dy-statement-sum strong { font-family: var(--font-num); font-size: 15px; }
.dy-statement-sum em { font-style: normal; font-size: var(--fs-micro); color: var(--danger); }
.dy-statement-sum .dy-statement-close { background: var(--primary-soft); }
.dy-statement-table .acc-kind { margin-left: 6px; }
.dy-statement-opening td { background: var(--surface-sunken) !important; font-weight: 600; }

/* Setup */
.dy-setup-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.dy-setup-form { display: grid; gap: 12px; }
.med-mwd-hint { margin: 22px 0 0; }

/* Animal page: Milk tab */
.dy-status-inmilk { border-left-color: var(--primary); }
.dy-status-dry { border-left-color: var(--accent); }
.dy-lacts { display: grid; margin: 0; padding: 0; list-style: none; }
.dy-lacts li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.dy-lacts li:last-child { border-bottom: 0; }
.dy-lacts li p { margin: 0; font-size: var(--fs-small); }
.dy-lact-no { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-sunken); font-family: var(--font-num); font-weight: 800; font-size: var(--fs-small); }
.dy-lacts li.is-current .dy-lact-no { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.dy-lact-main { min-width: 0; }

/* Home dashboard card */
.dy-home-sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.dy-home-session { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px dashed var(--accent); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--text); font-size: var(--fs-small); text-decoration: none; }
.dy-home-session .icon { color: var(--accent); }
.dy-home-session strong { margin-left: auto; font-family: var(--font-num); font-size: var(--fs-micro); color: var(--accent); }
.dy-home-session.is-done { border-style: solid; border-color: var(--primary-line); background: var(--primary-soft); }
.dy-home-session.is-done .icon, .dy-home-session.is-done strong { color: var(--primary); }

@media (max-width: 1100px) {
    .dy-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dy-tank-top, .dy-setup-grid, .dy-total-grid { grid-template-columns: minmax(0, 1fr); }
    .dy-statement-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dy-mode-seg { margin-left: 0; }
}

@media (max-width: 760px) {
    .dy-kpis { gap: 8px; }
    .dy-kpis .kpi2 { padding: 12px; }
    .dy-kpis .kpi2-value { font-size: 20px; }
    .dy-entry-bar { padding: 10px; }
    .dy-day-picker { width: 100%; }
    .dy-day-picker .input { flex: 1; min-width: 0; }
    .dy-session-seg, .dy-mode-seg { width: 100%; }
    .dy-session-strip { gap: 4px 12px; }
    .dy-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dy-choice-3 { grid-template-columns: minmax(0, 1fr); }
    .dy-tasks li { grid-template-columns: auto minmax(0, 1fr) auto; }
    .dy-tasks li > .button { grid-column: 2 / -1; justify-self: start; }
    .dy-rank-row { grid-template-columns: minmax(0, 1fr) auto; }
    .dy-rank-bar { display: none; }
    .dy-period, .dy-period-preset { width: 100%; }
    .dy-period-dates { width: 100%; }
    .dy-period-dates .input { flex: 1; min-width: 0; font-size: 16px; }
    .dy-bar-row { grid-template-columns: minmax(0, 1fr) auto; }
    .dy-bar-track { grid-column: 1 / -1; grid-row: 2; }
    .dy-statement-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dy-savebar { bottom: 0; width: 100%; border-radius: 16px 16px 0 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    .dy-udder { gap: 6px; }
    .dy-score { height: 36px; }
}

@media print {
    .no-print, .dy-savebar { display: none !important; }
    .print-only { display: inline; }
    .dy-statement-sum { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ==========================================================================
   Sign-in & accounts — AuthLayout and /account pages, the header user menu,
   My account (/account) and Users (/settings/users).
   ========================================================================== */

:root {
    --auth-brand-1: #0f3d24;
    --auth-brand-2: #1d6b3f;
    --auth-brand-3: #2f8a57;
    --auth-brand-ink: #f6f2e8;
    --auth-google: #1a73e8;
}

:root[data-theme="dark"] {
    --auth-brand-1: #08170f;
    --auth-brand-2: #103a24;
    --auth-brand-3: #1b6239;
    --auth-google: #8ab4f8;
}

/* Layout: brand panel | form */
.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(380px, 46%) minmax(0, 1fr);
}

.auth-brand {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: var(--auth-brand-ink);
    background:
        radial-gradient(900px 520px at 0% -10%, rgba(255, 255, 255, 0.13), transparent 60%),
        radial-gradient(620px 420px at 110% 18%, rgba(217, 149, 79, 0.34), transparent 62%),
        linear-gradient(160deg, var(--auth-brand-1), var(--auth-brand-2) 58%, var(--auth-brand-3));
}

.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
    mask-image: linear-gradient(to bottom, #000, transparent 75%);
    pointer-events: none;
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 36px;
    height: 100%;
    max-width: 600px;
    padding: 36px 48px 120px;
}

/* Short screens: drop the decorations before the panel overflows. */
@media (max-height: 820px) {
    .auth-brand-inner { gap: 26px; }
    .auth-showcase { display: none; }
}

@media (max-height: 620px) {
    .auth-features { display: none; }
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.auth-logo .brand-mark {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(140deg, var(--primary), var(--accent));
    box-shadow: var(--shadow-sm);
}

.auth-logo-mark.brand-mark {
    background: linear-gradient(140deg, #7fdca5, #e3a15c);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}

.auth-pitch { margin-top: 4vh; }

.auth-eyebrow {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
}

.auth-headline {
    margin: 0;
    max-width: 20ch;
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.auth-lede {
    margin: 14px 0 0;
    max-width: 46ch;
    font-size: 14.5px;
    line-height: 1.6;
    opacity: 0.85;
}

.auth-features {
    display: grid;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.auth-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
}

.auth-features strong { margin-right: 4px; font-weight: 700; }

.auth-feature-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
}

.auth-showcase {
    display: grid;
    gap: 10px;
    max-width: 360px;
}

.auth-glass {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.auth-glass-main { padding: 14px 16px 8px; animation: auth-float 7s ease-in-out infinite; }

.auth-glass-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.auth-glass-label { font-weight: 600; opacity: 0.88; }

.auth-glass-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(127, 220, 165, 0.2);
    color: #c4f3d6;
    font-size: 11px;
    font-weight: 700;
}

.auth-spark { display: block; width: 100%; height: 56px; margin-top: 6px; color: #8fe3b2; }

.auth-glass-mini {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 10px;
    margin-left: 44px;
    padding: 10px 14px;
    font-size: 12.5px;
    animation: auth-float 7s ease-in-out -3.5s infinite;
}

.auth-glass-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(227, 161, 92, 0.32);
    color: #ffe0bd;
}

.auth-hills { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 110px; }
.auth-hill-back { fill: rgba(255, 255, 255, 0.07); }
.auth-hill-front { fill: rgba(0, 0, 0, 0.16); }

@keyframes auth-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Form side */
.auth-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px 28px;
}

.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.auth-logo-compact { visibility: hidden; color: var(--text); font-size: 16px; }

.auth-theme {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.auth-theme:hover { border-color: var(--border-strong); background: var(--primary-soft); color: var(--text); }

.auth-content {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 28px 0;
}

.auth-card {
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 420px;
    animation: auth-in 0.35s ease-out;
}

.auth-card-wide { max-width: 540px; }
.auth-card-center { justify-items: center; text-align: center; }
.auth-card-center .auth-submit { max-width: 320px; }
.auth-form-full { width: 100%; justify-items: center; }

@keyframes auth-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card, .auth-glass-main, .auth-glass-mini { animation: none; }
}

.auth-head { display: grid; gap: 8px; }

.auth-badge {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--primary-line);
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 700;
}

.auth-badge-accent { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.auth-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.auth-sub { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.auth-hint { margin: 0; color: var(--muted-2); font-size: 12px; }

.auth-form { display: grid; gap: 16px; }
.auth-field { display: grid; align-content: start; gap: 6px; }
.auth-field .label { font-size: 13px; }
.auth-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.auth-link-sm { color: var(--primary); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.auth-link-sm:hover { text-decoration: underline; }

.auth-input-wrap { position: relative; }

.auth-input-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    color: var(--muted-2);
    transform: translateY(-50%);
    pointer-events: none;
    transition: color var(--transition);
}

.auth-input-wrap:focus-within .auth-input-icon { color: var(--primary); }

.input.auth-input {
    height: 46px;
    padding: 0 14px 0 40px;
    border-radius: var(--radius-md);
    font-size: 15px;
}

.input.auth-input-pw { padding-right: 46px; }

/* Forgot password: the picture CAPTCHA (drawn on its own light background, so it reads in both themes). */
.auth-captcha { display: flex; align-items: center; gap: 10px; }
.auth-captcha-image {
    display: block;
    width: 220px;
    max-width: calc(100% - 56px);
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    user-select: none;
}
.button.auth-captcha-refresh { width: 46px; height: 46px; padding: 0; flex: none; justify-content: center; }
.input.auth-captcha-input { text-transform: uppercase; letter-spacing: 0.2em; }
.input.auth-captcha-input::placeholder { text-transform: none; letter-spacing: normal; }
.input.auth-input.is-mismatch { border-color: var(--danger); }
.input.auth-input::placeholder { color: var(--muted-2); opacity: 0.8; }

.auth-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.auth-eye:hover { background: var(--primary-soft); color: var(--text); }
.auth-eye .auth-eye-hide, .auth-eye.is-on .auth-eye-show { display: none; }
.auth-eye.is-on .auth-eye-hide { display: block; }

.auth-caps {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

.auth-caps[hidden] { display: none; }

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 13.5px;
    cursor: pointer;
}

.auth-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); }

.button.auth-submit {
    position: relative;
    width: 100%;
    height: 48px;
    gap: 8px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
}

.button-primary.auth-submit { box-shadow: 0 8px 20px rgba(29, 107, 63, 0.22); }
.auth-submit .auth-submit-icon { transition: transform var(--transition); }
.auth-submit:hover .auth-submit-icon { transform: translateX(3px); }
.auth-submit[disabled] { opacity: 0.6; cursor: not-allowed; }
.auth-submit.is-busy { opacity: 0.85; cursor: progress; }
.auth-submit.is-busy .auth-submit-icon { display: none; }

.auth-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: auth-spin 0.7s linear infinite;
}

.auth-submit.is-busy .auth-spinner { display: inline-block; }

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

.auth-switch { margin: 0; color: var(--muted); font-size: 13.5px; text-align: center; }

.auth-switch a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.auth-switch a:hover { text-decoration: underline; }
.auth-switch .link-button { font-weight: 700; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted-2);
    font-size: 12px;
}

.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.btn-google:hover { border-color: var(--primary-line); background: var(--surface-sunken); box-shadow: var(--shadow-md); }
.btn-google-logo { flex: none; }

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
}

.auth-alert > .icon { flex: none; margin-top: 2px; color: var(--muted); }
.auth-alert-title { display: block; margin-bottom: 2px; font-weight: 700; }
.auth-alert-error { border-color: var(--danger); background: var(--danger-soft); }
.auth-alert-error > .icon, .auth-alert-error .auth-alert-title { color: var(--danger); }
.auth-alert-success { border-color: var(--primary-line); background: var(--primary-soft); }
.auth-alert-success > .icon { color: var(--primary); }

.pw-meter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-top: 2px;
}

.pw-meter span { height: 4px; border-radius: 999px; background: var(--border); transition: background var(--transition); }
.pw-meter[data-score="0"] span:nth-child(1), .pw-meter[data-score="1"] span:nth-child(1) { background: var(--danger); }
.pw-meter[data-score="2"] span:nth-child(-n+2) { background: var(--accent); }
.pw-meter[data-score="3"] span:nth-child(-n+3), .pw-meter[data-score="4"] span { background: var(--primary); }
.pw-meter-label { margin: 0; color: var(--muted-2); font-size: 12px; }
.pw-meter-label[data-score="0"], .pw-meter-label[data-score="1"] { color: var(--danger); }
.pw-meter-label[data-score="3"], .pw-meter-label[data-score="4"] { color: var(--primary); font-weight: 600; }

.auth-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: 12.5px;
    list-style: none;
}

.auth-steps li { display: inline-flex; align-items: center; gap: 7px; }

.auth-steps li > span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    font-size: 11px;
    font-weight: 700;
}

.auth-steps li.is-done > span { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.auth-steps li.is-current { color: var(--text); font-weight: 600; }
.auth-steps li.is-current > span { border-color: var(--accent); color: var(--accent); }
.auth-steps-vertical { flex-direction: column; align-items: flex-start; width: 100%; gap: 10px; text-align: left; }

.auth-hero-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--primary-line);
    border-radius: 20px;
    background: var(--primary-soft);
    color: var(--primary);
    box-shadow: var(--shadow-md);
}

.auth-hero-icon-accent { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.auth-hero-icon-danger { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.auth-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    color: var(--muted-2);
    font-size: 12px;
}

@media (max-width: 960px) {
    .auth-shell { grid-template-columns: minmax(0, 1fr); }
    .auth-brand { display: none; }
    .auth-logo-compact { visibility: visible; }
    .auth-main { background: radial-gradient(700px 260px at 50% -60px, var(--primary-soft), transparent 70%); }
}

@media (max-width: 560px) {
    .auth-main { padding: 14px 16px; }
    .auth-content { place-items: start center; padding: 18px 0 24px; }
    .auth-title { font-size: 24px; }
    .auth-row { grid-template-columns: minmax(0, 1fr); }
    .auth-steps { flex-direction: column; }
    .input.auth-input { font-size: 16px; } /* No zoom-in on iPhone. */
}

/* Header user menu */
.user-menu { position: relative; }

.user-menu-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px 2px 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), background var(--transition);
}

.user-menu-btn:hover, .user-menu-btn.is-open { border-color: var(--border-strong); background: var(--primary-soft); }

.user-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary), var(--auth-brand-3) 60%, var(--accent));
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.user-avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.user-avatar-xl { width: 64px; height: 64px; font-size: 22px; box-shadow: var(--shadow-md); }
.user-avatar-pending { border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--accent); }

.user-dot {
    position: absolute;
    top: -5px;
    left: 20px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}

.user-pop { right: 0; width: 290px; max-width: calc(100vw - 24px); }

.user-pop-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 8px 8px 12px;
    border-bottom: 1px solid var(--border);
}

.user-pop-who { display: grid; gap: 2px; min-width: 0; }
.user-pop-who strong { font-size: 14px; }
.user-pop-who > span:not(.role-pill) { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-pop form { margin: 0; }

@media (max-width: 760px) {
    /* The header's backdrop blur makes it the containing block for fixed children, which pinned the bottom-sheet
       menus to the header's own bottom edge and pushed them off the top of the screen. Drop the blur while one is open. */
    header.site-header:has(.popover) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }

    .user-pop { right: 12px; width: auto; max-width: none; max-height: calc(100dvh - 24px); overflow-y: auto; }
}

.role-pill {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    padding: 1px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.role-admin { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }

.menu-count {
    margin-left: auto;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
}

/* My account */
.acct-id { display: flex; align-items: center; gap: 16px; min-width: 0; }

.acct-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}

.acct-form { display: grid; gap: 12px; }

.acct-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--primary-line);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    font-size: 13px;
    font-weight: 600;
}

.acct-notice .icon { flex: none; color: var(--primary); }
.acct-notice-error { border-color: var(--danger); background: var(--danger-soft); }
.acct-notice-error .icon { color: var(--danger); }

.acct-method {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.acct-method-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
}

.acct-method-google { border: 1px solid var(--border); background: var(--surface); }
.acct-method-text { display: grid; gap: 2px; min-width: 0; }
.acct-method-text strong { font-size: 13.5px; }
.acct-method-text span { color: var(--muted); font-size: 12px; }

.acct-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.acct-facts > div { display: grid; gap: 2px; min-width: 0; }
.acct-facts dt { color: var(--muted-2); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.acct-facts dd { margin: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }

.acct-danger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    background: var(--danger-soft);
}

.acct-danger > div { display: grid; flex: 1 1 220px; gap: 2px; }
.acct-danger strong { font-size: 13.5px; }
.acct-danger span { color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
    .acct-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .acct-method { grid-template-columns: auto minmax(0, 1fr); }
    .acct-method > .status-pill, .acct-method > .button { grid-column: 2; justify-self: start; }
    .acct-facts { grid-template-columns: minmax(0, 1fr); }
    .user-avatar-xl { width: 52px; height: 52px; font-size: 18px; }
}

/* Users */
.kpi.kpi-attn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.seg-count.seg-count-attn { background: var(--accent); color: #fff; }

.us-requests { overflow: hidden; padding: 0; border-color: var(--accent); }

.us-requests-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, var(--accent-soft), transparent 80%);
}

.us-requests-head h2 { margin: 0; font-size: 15px; }
.us-requests-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.us-requests-head .link-button { margin-left: auto; }

.us-requests-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
}

.us-request-list { margin: 0; padding: 0; list-style: none; }

.us-request {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.us-request:last-child { border-bottom: 0; }
.us-request-who { display: grid; flex: 1; gap: 1px; min-width: 0; }
.us-request-who strong { font-size: 13.5px; }
.us-request-who span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.us-request-actions { display: flex; flex: none; gap: 6px; }

.us-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.us-who-text { display: grid; gap: 1px; min-width: 0; }
.us-email { color: var(--muted); font-size: 12px; }
.us-username { color: var(--muted); font-family: var(--font-num); font-size: 12px; }
.us-methods { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.us-method {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-sunken);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.us-method-google { color: var(--auth-google); }
.us-card { align-items: flex-start; }
.us-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.us-card-actions { display: flex; gap: 6px; margin-top: 8px; }

.us-roles { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.us-roles legend { margin-bottom: 6px; padding: 0; }

.us-role {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.us-role input { margin: 0; accent-color: var(--primary); }
.us-role.is-on { border-color: var(--primary-line); background: var(--primary-soft); }
.us-role > span:last-child { display: grid; gap: 1px; }
.us-role strong { font-size: 13px; }
.us-role > span:last-child > span { color: var(--muted); font-size: 12px; }
.us-roles:disabled .us-role { cursor: not-allowed; opacity: 0.7; }

.us-role-icon, .us-option-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--surface-sunken);
    color: var(--primary);
}

.us-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; }

.us-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.us-option > div { display: grid; gap: 2px; }
.us-option strong { font-size: 13px; }
.us-option span { color: var(--muted); font-size: 12px; }
.us-option .us-option-icon { background: var(--surface); }
.us-divider { margin: 2px 0; }
.us-facts { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); }
.input.input-mono { font-family: var(--font-num); letter-spacing: 0.02em; }

@media (max-width: 560px) {
    .us-request { flex-wrap: wrap; }
    .us-request-actions { justify-content: flex-end; width: 100%; }
    .us-option { grid-template-columns: auto minmax(0, 1fr); }
    .us-option > .button { grid-column: 2; justify-self: start; }
}

/* Admin-only page opened by a user */
.denied-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 520px;
    margin: 40px auto;
    padding: 40px 20px;
    text-align: center;
}

.denied-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--danger-soft);
    color: var(--danger);
}

/* ==========================================================================
   Demo & data — Settings › Demo & data (/settings/data): load / remove the
   demo farms, empty one farm, reset all business data.
   ========================================================================== */

.dd-layout { align-items: start; }
.dd-farms { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.dd-farm {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.dd-farm > div { display: grid; gap: 2px; min-width: 0; }
.dd-farm strong { overflow-wrap: anywhere; }
.dd-farm-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface); font-size: 20px; }

.dd-covers { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); line-height: 1.45; }
.dd-covers li { display: flex; align-items: flex-start; gap: 8px; }
.dd-covers .icon { flex: none; margin-top: 2px; color: var(--primary); }
.dd-covers span { color: var(--muted); }
.dd-covers strong { color: var(--text); }

.dd-zone-title { display: flex; align-items: center; gap: 8px; margin-bottom: 0; font-size: 17px; color: var(--danger); }
.dd-zone-lead { margin: 2px 0 0; }
.dd-danger { border-top: 3px solid var(--danger); }
.dd-danger .panel-title .icon { color: var(--danger); }

.dd-counts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 4px 16px;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    list-style: none;
    font-size: var(--fs-small);
}

.dd-counts li { display: flex; justify-content: space-between; gap: 8px; }
.dd-counts span { color: var(--muted); }
.dd-counts strong { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.dd-counts-modal { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); max-height: 220px; overflow-y: auto; }

@media (max-width: 560px) {
    .dd-farm { grid-template-columns: auto minmax(0, 1fr); }
    .dd-farm > .button { grid-column: 2; justify-self: start; }
    .dd-counts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Onboarding (setup wizard after sign-up) — ob-*
   ========================================================================== */

.ob-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    backdrop-filter: blur(10px);
}

.ob-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 20px;
}

.ob-header-actions { display: flex; align-items: center; gap: 8px; }
.ob-header-actions form { margin: 0; }
.ob-signout { gap: 6px; }

.ob-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 64px;
}

.ob-page .muted { color: var(--muted); font-weight: 400; }

.ob-hero { margin-bottom: 18px; }
.ob-hero h1 { margin: 2px 0 6px; font-size: 26px; letter-spacing: -0.02em; }
.ob-eyebrow { margin: 0; color: var(--primary); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ob-lede { max-width: 680px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.ob-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--fs-small);
}

.ob-status.is-ready { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.ob-status.is-problem { border-color: var(--danger); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger); }
.ob-status.is-problem .button { margin-left: 4px; }

.ob-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.ob-steps {
    position: sticky;
    top: 70px;
    padding: 14px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.ob-progress {
    height: 6px;
    margin: 0 6px 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-sunken);
}

.ob-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width 300ms ease; }

.ob-steps ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.ob-steps li > button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ob-steps li > button:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text); }
.ob-steps li > button:disabled { cursor: default; opacity: 0.6; }
.ob-steps li.is-current > button { background: var(--primary-soft); color: var(--text); }

.ob-step-no {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    font-size: var(--fs-small);
    font-weight: 700;
}

.ob-steps li.is-done .ob-step-no { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); }
.ob-steps li.is-current .ob-step-no { border-color: var(--primary); color: var(--primary); box-shadow: var(--ring); }

.ob-step-text { display: grid; min-width: 0; line-height: 1.25; }
.ob-step-text strong { font-size: 13px; }
.ob-step-text small { font-size: var(--fs-micro); color: var(--muted-2); }

.ob-main { display: grid; gap: 14px; min-width: 0; }

.ob-sub-label { margin: 16px 0 8px; }

.ob-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob-types .acq-mode, .ob-demo .acq-mode { cursor: pointer; font: inherit; text-align: left; }
.ob-emoji { font-size: 20px; }
.ob-type-desc { font-size: var(--fs-small); color: var(--muted); line-height: 1.4; }
.ob-demo { display: grid; gap: 10px; }
.ob-demo .acq-mode { align-items: flex-start; padding: 14px 16px; }

.ob-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    font-size: var(--fs-small);
}

.ob-species { display: grid; gap: 10px; }

.ob-species-card {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    container-type: inline-size;
}

.ob-species-card.is-on { border-color: var(--primary-line); background: linear-gradient(150deg, var(--primary-soft), var(--surface) 70%); }
.ob-species-head { font-size: 14px; }
.ob-species-body { margin-top: 10px; }

.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.ob-chip { display: inline-flex; align-items: center; gap: 4px; }

.ob-chip-x {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.75;
}

.ob-chip-x:hover { opacity: 1; }
.ob-chiplist { display: grid; gap: 10px; }
.ob-chip-add { display: flex; gap: 8px; max-width: 460px; }
.ob-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.ob-toggles { display: grid; gap: 8px; }
.ob-toggles-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.ob-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
}

.ob-toggle:has(input:checked) { border-color: var(--primary-line); background: var(--primary-soft); }
.ob-toggle input { margin-top: 2px; }
.ob-toggle span { display: grid; gap: 1px; }
.ob-toggle small { color: var(--muted); font-size: var(--fs-small); }

.ob-dairy { margin-top: 12px; }
.ob-radios { display: flex; gap: 6px; }

.ob-order { display: grid; gap: 6px; max-width: 460px; margin: 0; padding: 0; list-style: none; }

.ob-order li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.ob-order-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-micro); font-weight: 700; }
.ob-order-name { flex: 1; }

.ob-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.ob-preview strong { font-family: var(--font-num); font-size: 16px; }

.ob-summary { display: grid; gap: 0; margin: 0; }

.ob-summary > div {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.ob-summary > div:last-child { border-bottom: 0; }
.ob-summary dt { color: var(--muted); font-size: var(--fs-small); }
.ob-summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.ob-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.ob-actions .button { gap: 6px; }
.ob-actions .button-primary { margin-left: auto; padding-inline: 18px; }
.ob-saved { color: var(--muted-2); font-size: var(--fs-micro); }

.ob-done {
    max-width: 620px;
    margin: 32px auto;
    padding: 32px;
    text-align: center;
}

.ob-done h1 { margin: 12px 0 6px; font-size: 24px; }
.ob-done .ob-lede { margin: 0 auto 18px; }
.ob-done .ob-summary { margin: 0 0 22px; text-align: left; }
.ob-done .ob-summary > div { grid-template-columns: 140px minmax(0, 1fr); }

.ob-done-icon {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-ink);
    box-shadow: 0 0 0 8px var(--primary-soft);
}

.ob-done-icon.ob-wait { background: var(--accent); }
.ob-go { gap: 8px; padding: 10px 22px; font-size: 14px; }

.ob-loading, .ob-wait-box { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--muted); }
.ob-wait-box { justify-content: flex-start; padding: 12px; border-radius: var(--radius-md); background: var(--surface-sunken); }

.ob-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--primary-soft);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: ob-spin 0.8s linear infinite;
}

.ob-spinner-sm { width: 13px; height: 13px; border-width: 2px; }

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

@media (prefers-reduced-motion: reduce) {
    .ob-spinner { animation-duration: 2.4s; }
}

@media (max-width: 900px) {
    .ob-layout { grid-template-columns: minmax(0, 1fr); }
    .ob-steps { position: static; padding: 10px; }
    .ob-steps ol { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
    .ob-steps li > button { width: auto; padding: 6px; }
    .ob-step-text { display: none; }
    .ob-steps li.is-current .ob-step-text { display: grid; }
}

@media (max-width: 600px) {
    .ob-page { padding: 16px 12px 48px; }
    .ob-hero h1 { font-size: 21px; }
    .ob-types { grid-template-columns: minmax(0, 1fr); }
    .ob-summary > div, .ob-done .ob-summary > div { grid-template-columns: minmax(0, 1fr) auto; }
    .ob-summary dt { grid-column: 1 / -1; }
    .ob-done { padding: 22px 16px; }
    .ob-header .theme-label { display: none; }
}

/* Platform › Organizations (platform admins) — pt-* */
.pt-status { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-micro); font-weight: 700; background: var(--surface-sunken); color: var(--muted); }
.pt-status.is-active { background: var(--primary-soft); color: var(--primary); }
.pt-status.is-busy { background: var(--accent-soft); color: var(--accent); }
.pt-status.is-bad { background: var(--danger-soft); color: var(--danger); }
.pt-error { max-width: 420px; margin: 2px 0 0; color: var(--danger); font-size: var(--fs-micro); overflow-wrap: anywhere; }
.pt-events { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pt-events li { display: grid; grid-template-columns: 140px 110px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-small); }
.pt-events li.is-bad { color: var(--danger); }
.pt-actions { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 700px) {
    .pt-events li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.user-org { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-micro); }
.org-fields { display: grid; gap: var(--gap); min-width: 0; margin: 0; padding: 0; border: 0; }

/* Password rules under a new-password box, ticked live by auth.js. */
.pw-rules { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; padding: 0; list-style: none; color: var(--muted-2); font-size: 12px; }
.pw-rules li { display: inline-flex; align-items: center; gap: 5px; transition: color var(--transition); }
.pw-rules .pw-rule-ok { display: none; }
.pw-rules .pw-rule-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.pw-rules li.is-met { color: var(--primary); }
.pw-rules li.is-met .pw-rule-ok { display: inline-block; }
.pw-rules li.is-met .pw-rule-dot { display: none; }
.pw-rules li.is-missing { color: var(--danger); }
.pw-meter-label:empty { display: none; }
.input.auth-input[aria-invalid] { border-color: var(--danger); }
.pw-match-note { margin: 0; color: var(--danger); font-size: 12px; }

/* ===== Language picker (header, sign-in pages, setup wizard) ===== */
.lang-picker { position: relative; }
.lang-picker > summary { list-style: none; }
.lang-picker > summary::-webkit-details-marker { display: none; }

.lang-picker-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    user-select: none;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.lang-picker-button:hover, .lang-picker[open] .lang-picker-button { border-color: var(--border-strong); background: var(--primary-soft); color: var(--text); }
.lang-picker-caret { opacity: .7; transition: transform var(--transition); }
.lang-picker[open] .lang-picker-caret { transform: rotate(180deg); }

.lang-picker-menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    z-index: 60;
    display: grid;
    min-width: 200px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    list-style: none;
}

.lang-picker-menu a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
}

.lang-picker-menu a:hover { background: var(--surface-sunken); }
.lang-picker-menu a.is-current { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.lang-picker-menu small { color: var(--muted-2); font-size: var(--fs-micro); font-weight: 400; }

@media (max-width: 1440px) {
    .lang-picker-header .lang-picker-current { display: none; }
}

/* ===== Map picker (setup wizard, Farms page) ===== */
.map-picker { display: grid; gap: 8px; }
.map-picker-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.map-picker-search { position: relative; display: flex; flex: 1 1 320px; gap: 8px; min-width: 0; }
.map-picker-search .input { flex: 1; min-width: 0; padding-inline-start: 32px; }
.map-picker-search-icon { position: absolute; inset-inline-start: 10px; top: 50%; color: var(--muted-2); transform: translateY(-50%); pointer-events: none; }

.map-picker-results {
    display: grid;
    max-height: 210px;
    margin: 0;
    padding: 4px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    list-style: none;
}

.map-picker-results button {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-small);
    text-align: start;
    cursor: pointer;
}

.map-picker-results button:hover { background: var(--primary-soft); }
.map-picker-results .icon { flex: none; margin-top: 2px; color: var(--primary); }

.map-picker-map {
    position: relative;
    height: 320px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    z-index: 0; /* Keeps the map panes under the header and menus. */
}

.map-picker-error { display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%; margin: 0; padding: 16px; color: var(--muted); text-align: center; }
.map-picker-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 24px; font-size: var(--fs-small); }
.map-picker-coords { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; direction: ltr; }
.map-picker-message { color: var(--danger); }

.map-pin { background: none; border: 0; }
.map-pin-dot {
    position: absolute;
    left: 4px;
    top: 0;
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: var(--primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transform: rotate(-45deg);
}

.leaflet-container { font: inherit; }
.farm-map-details { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; background: var(--surface); }
.farm-map-details > summary { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.farm-map-details[open] > summary { margin-bottom: 8px; }

/* ===== Setup wizard: farm size, species, demo, progress ===== */
.ob-farm-size { margin-top: 14px; }
.ob-area { display: flex; gap: 6px; }
.ob-area .input { flex: 1 1 auto; min-width: 0; }
.ob-area .select { flex: 0 0 auto; width: auto; }
.ob-spacer { flex: 1 1 auto; }
.ob-actions .button-primary { margin-inline-start: auto; }

.ob-species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; margin-bottom: 12px; }

.ob-species-tile {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 12px 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
}

.ob-species-tile:hover { border-color: var(--primary-line); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ob-species-tile.is-on { border-color: var(--primary); background: linear-gradient(160deg, var(--primary-soft), var(--surface) 75%); box-shadow: var(--ring); }
.ob-species-tile strong { font-size: 14px; }
.ob-species-tile small { color: var(--muted-2); font-size: var(--fs-micro); line-height: 1.3; }
.ob-species-emoji { font-size: 26px; line-height: 1.1; }
.ob-species-head .ob-species-emoji { font-size: 18px; }

.ob-species-check {
    position: absolute;
    top: 7px;
    inset-inline-end: 7px;
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface);
    color: var(--primary-ink);
}

.ob-species-tile.is-on .ob-species-check { border-color: var(--primary); background: var(--primary); }

.ob-species-badge {
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--text);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.ob-species-card + .ob-species-card { margin-top: 10px; }
.ob-species-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ob-species-card .chip { display: inline-flex; align-items: center; gap: 4px; }
.ob-breed-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ob-breed-add { display: flex; gap: 6px; max-width: 320px; }
.ob-breed-add .input { min-width: 0; }

.ob-demo-farms { display: grid; gap: 6px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); list-style: none; font-size: var(--fs-small); }
.ob-demo-farms li { display: flex; align-items: flex-start; gap: 8px; }
.ob-demo-farms .icon { flex: none; margin-top: 2px; color: var(--primary); }

.ob-progress-card { max-width: 640px; margin: 24px auto; padding: 28px 28px 22px; text-align: center; }
.ob-progress-card h1 { margin: 10px 0 6px; font-size: 22px; }
.ob-progress-card .ob-lede { margin: 0 auto 18px; }
.ob-progress-spinner { width: 34px; height: 34px; border-width: 3px; }

.ob-bar { height: 12px; overflow: hidden; border-radius: 999px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); }

.ob-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
    background-size: 200% 100%;
    animation: ob-bar-shine 2.2s linear infinite;
    transition: width 500ms ease;
}

@keyframes ob-bar-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.ob-bar-text { margin: 8px 0 16px; color: var(--muted); font-size: var(--fs-small); }
.ob-bar-text strong { color: var(--text); font-variant-numeric: tabular-nums; }

.ob-stage-list { display: grid; gap: 4px; margin: 0 0 6px; padding: 0; list-style: none; text-align: start; }
.ob-stage-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--muted-2); font-size: 14px; transition: background var(--transition), color var(--transition); }
.ob-stage-list li.is-done { color: var(--muted); }
.ob-stage-list li.is-running { background: var(--primary-soft); color: var(--text); font-weight: 600; }
.ob-stage-list li.is-stopped { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.ob-stage-icon { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.ob-stage-list li.is-done .ob-stage-icon { background: var(--primary); color: var(--primary-ink); }
.ob-stage-list li.is-stopped .ob-stage-icon { background: var(--danger); color: #fff; }
.ob-stage-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.ob-progress-card .ob-actions { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
    .ob-bar > span { animation: none; }
}

@media (max-width: 600px) {
    .ob-species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .map-picker-map { height: 260px; }
    .ob-progress-card { padding: 22px 16px 16px; }
}

/* ===== Right-to-left (Arabic) =====
   Layouts mostly use flex and grid, which follow the text direction by themselves; these rules fix what is placed
   with physical left/right, and arrows that should point the other way. */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .ob-dir-icon,
[dir="rtl"] .auth-submit-icon,
[dir="rtl"] .auth-switch .icon { transform: scaleX(-1); }
[dir="rtl"] .auth-input-icon { left: auto; right: 13px; }
[dir="rtl"] .input.auth-input { padding-left: 14px; padding-right: 40px; }
[dir="rtl"] .input.auth-input-pw { padding-left: 46px; }
[dir="rtl"] .acq-mode-check { right: auto; left: 8px; }
[dir="rtl"] .auth-eye { right: auto; left: 6px; }
[dir="rtl"] .auth-alert { text-align: right; }
[dir="rtl"] .ob-types .acq-mode, [dir="rtl"] .ob-demo .acq-mode { text-align: right; }
[dir="rtl"] .ob-done .ob-summary { text-align: right; }
[dir="rtl"] .ob-status.is-problem .button { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .ob-actions .button-primary { margin-left: 0; }
[dir="rtl"] .farm-menu, [dir="rtl"] .user-pop { text-align: right; }
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"] { direction: ltr; text-align: right; }
[dir="rtl"] .leaflet-container { direction: ltr; }