:root {
  color-scheme: light;
  --bg: #f3f5ef;
  --surface: #ffffff;
  --surface-2: #eef2e8;
  --text: #1c2419;
  --muted: #5b6757;
  --border: #dbe2d4;
  --accent: #2f6b3c;
  --accent-text: #ffffff;
  --focus: #2563eb;
  --level-normal: #2f7d4a;
  --level-watch: #b7791f;
  --level-danger: #c2410c;
  --level-critical: #b91c1c;
  --level-unknown: #7b8677;
  --house-1: #2563eb;
  --house-2: #d97706;
  --house-3: #0d9488;
  --online: #22a35a;
  --offline: #9aa494;
  --lamp: #f4b400;
  --error: #b42318;
  --error-bg: #fdecea;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(16 24 16 / 6%), 0 6px 20px rgb(16 24 16 / 6%);
  --font: 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #11160f; --surface: #1a2117; --surface-2: #222b1e; --text: #e6ece1; --muted: #a1ad9b; --border: #2f3a2a;
    --accent: #6fbf7f; --accent-text: #0e140c; --focus: #7aa7ff;
    --level-normal: #5cc27f; --level-watch: #e0a83a; --level-danger: #f07a3d; --level-critical: #f05a5a; --level-unknown: #8e9a88;
    --house-1: #6b9cff; --house-2: #f2a93b; --house-3: #3cc7b5;
    --online: #45c776; --offline: #66705f; --error: #ff8a80; --error-bg: #3a1d1a;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 20px rgb(0 0 0 / 30%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11160f; --surface: #1a2117; --surface-2: #222b1e; --text: #e6ece1; --muted: #a1ad9b; --border: #2f3a2a;
  --accent: #6fbf7f; --accent-text: #0e140c; --focus: #7aa7ff;
  --level-normal: #5cc27f; --level-watch: #e0a83a; --level-danger: #f07a3d; --level-critical: #f05a5a; --level-unknown: #8e9a88;
  --house-1: #6b9cff; --house-2: #f2a93b; --house-3: #3cc7b5;
  --online: #45c776; --offline: #66705f; --error: #ff8a80; --error-bg: #3a1d1a;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 20px rgb(0 0 0 / 30%);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.05rem; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }
.boot-msg { padding: 24px 16px; color: var(--muted); }

.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 10px 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; min-width: 0; }
.brand > .icon { width: 36px; height: 36px; color: var(--accent); }
.brand-text strong { display: block; font-size: 1.05rem; }
.brand-text small { display: block; font-size: .8rem; color: var(--muted); }
.nav { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { white-space: nowrap; }
.nav a { padding: 8px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 600; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a[aria-current="page"] { background: var(--accent); color: var(--accent-text); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.live-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--offline); }
.live-pill[data-state="open"]::before { background: var(--online); box-shadow: 0 0 0 3px color-mix(in srgb, var(--online) 25%, transparent); }
.live-pill[data-state="closed"] { color: var(--error); }
.live-pill[data-state="closed"]::before { background: var(--error); }
.user-chip { display: flex; flex-direction: column; align-items: flex-end; font-size: .85rem; line-height: 1.2; }
.user-chip .role { color: var(--muted); font-size: .75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:disabled { opacity: .6; cursor: progress; }
.btn-ghost { background: transparent; border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: transparent; cursor: pointer; }

.page { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-head p { margin: 4px 0 0; }
.summary { display: flex; flex-wrap: wrap; gap: 10px; }
.summary-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; min-width: 110px; }
.summary-item span { display: block; font-size: .75rem; color: var(--muted); }
.summary-item strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.house-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 840px) { .house-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.house-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.house-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--level-color, var(--level-unknown)); }
.level-normal { --level-color: var(--level-normal); }
.level-watch { --level-color: var(--level-watch); }
.level-danger { --level-color: var(--level-danger); }
.level-critical { --level-color: var(--level-critical); }
.level-unknown { --level-color: var(--level-unknown); }
.house-card.is-offline .metrics { opacity: .55; }
.house-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.status-dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--offline); }
.status-dot.on { color: var(--online); }
.status-dot.on::before { background: var(--online); }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.metric-label { display: block; font-size: .8rem; color: var(--muted); }
.metric-value { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.metric-value small { margin-left: 2px; font-size: .95rem; font-weight: 600; color: var(--muted); }
.thi-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--level-color); background: color-mix(in srgb, var(--level-color) 14%, transparent); }
.light-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.light-label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.light-row .small { display: block; }
.switch { position: relative; width: 56px; height: 32px; flex: none; border: none; border-radius: 999px; background: var(--border); cursor: pointer; transition: background .2s; }
.switch .knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transition: transform .2s; }
.switch.is-on { background: var(--lamp); }
.switch.is-on .knob { transform: translateX(24px); }
.switch:disabled { cursor: not-allowed; opacity: .55; }
.switch.is-pending { opacity: 1; cursor: progress; }
.switch.is-pending .knob { animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lamp) 35%, transparent); } }
.card-error { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--error-bg); color: var(--error); font-size: .875rem; }
.house-foot { margin-top: auto; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
.segmented { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.segmented button { padding: 6px 14px; border: none; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 600; cursor: pointer; }
.chip::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--chip-color); }
.chip[aria-pressed="false"] { opacity: .45; }
.house-1 { --chip-color: var(--house-1); }
.house-2 { --chip-color: var(--house-2); }
.house-3 { --chip-color: var(--house-3); }
.charts { display: grid; gap: 16px; }
.chart-card { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.chart { height: 260px; margin-top: 8px; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 50%), var(--bg); }
.login-card { width: 100%; max-width: 380px; display: grid; gap: 14px; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-brand .icon { width: 44px; height: 44px; color: var(--accent); }
.login-brand h1 { font-size: 1.3rem; }
.login-brand p { margin: 0; font-size: .875rem; }
.login-card label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.login-card input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.form-error { margin: 0; color: var(--error); font-size: .875rem; }

@media (max-width: 640px) {
  .user-chip { display: none; }
  .btn-ghost .label { display: none; }
  .nav { order: 3; width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
  .nav a { padding: 8px 2px; font-size: .8rem; text-align: center; }
  .summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .summary-item { min-width: 0; padding: 8px 10px; }
  .page { padding-top: 16px; }
  .metric-value { font-size: 1.7rem; }
  .chart { height: 220px; }
}
@media (max-width: 1023px) {
  .nav { order: 3; width: 100%; }
}
@media (max-width: 480px) {
  .brand-text { display: none; }
}
@media (max-width: 360px) {
  .topbar { padding-left: 10px; padding-right: 10px; }
  .nav { gap: 0; }
}
@media (max-height: 500px) {
  .topbar { position: static; }
}
@media (min-width: 1600px) {
  .page { max-width: 1440px; }
}
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; color: var(--level-watch); background: color-mix(in srgb, var(--level-watch) 16%, transparent); }
.btn-small { min-height: 32px; padding: 4px 10px; font-size: .85rem; }
.notice { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); }
.notice.is-error { background: var(--error-bg); color: var(--error); }
.notice.is-ok { background: color-mix(in srgb, var(--online) 14%, transparent); color: var(--text); }
.level-info { --level-color: var(--focus); }
.level-warning { --level-color: var(--level-watch); }
.level-chip { display: inline-flex; align-items: center; flex: none; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; color: var(--level-color); background: color-mix(in srgb, var(--level-color) 15%, transparent); }

.alert-banner { margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--level-danger) 35%, var(--border)); background: color-mix(in srgb, var(--level-danger) 7%, var(--surface)); }
.alert-banner-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--level-danger); }
.alert-banner-head strong { color: var(--text); }
.alert-banner-head a { margin-left: auto; font-weight: 600; color: var(--accent); }
.alert-banner ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.alert-item { display: flex; align-items: baseline; gap: 8px; font-size: .9rem; }

.farm-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.barn-tile { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 12px 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; text-align: center; }
.barn-tile:disabled { cursor: default; }
.barn-name { font-weight: 700; }
.barn-temp { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.barn-state { font-size: .8rem; color: var(--muted); }

.card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trend-line { margin: 0; }

@media (max-width: 640px) {
  .farm-map { gap: 8px; }
  .barn-tile { padding: 8px 4px; }
  .barn-name { font-size: .8rem; }
  .barn-temp { font-size: .95rem; }
}

.custom-range { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: -8px 0 16px; }
.custom-range label { display: grid; gap: 4px; font-size: .8rem; color: var(--muted); }
.custom-range input, .inline-select select, .settings-form input, .settings-form select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.stats-section { margin-top: 20px; }
.stats-section h2 { margin-bottom: 8px; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data thead th { font-size: .8rem; font-weight: 600; color: var(--muted); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:last-child > * { border-bottom: none; }

@media (max-width: 800px) {
  table.data:is([data-events], [data-stats]) thead { display: none; }
  table.data:is([data-events], [data-stats]) tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); }
  table.data:is([data-events], [data-stats]) tbody tr:last-child { border-bottom: none; }
  table.data:is([data-events], [data-stats]) :is(td, th) { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; border: none; white-space: normal; text-align: right; }
  table.data:is([data-events], [data-stats]) td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: .8rem; text-align: left; }
  table.data:is([data-events], [data-stats]) td[colspan] { justify-content: flex-start; text-align: left; }
}

.inline-select { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.inline-select[hidden] { display: none; }

.device-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.device-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 12px 0 0; }
.device-card dt { font-size: .85rem; color: var(--muted); }
.device-card dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.device-card dd.is-warn { color: var(--level-danger); }
.rssi { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.rssi i { width: 4px; border-radius: 1px; background: var(--border); }
.rssi i:nth-child(1) { height: 4px; }
.rssi i:nth-child(2) { height: 7px; }
.rssi i:nth-child(3) { height: 10px; }
.rssi i:nth-child(4) { height: 14px; }
.rssi i.on { background: var(--online); }
.settings-form { display: grid; gap: 16px; margin-top: 12px; }
.settings-form fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.settings-form legend { padding: 0 6px; font-weight: 700; }
.settings-form label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; min-width: 0; }
.settings-form input, .settings-form select { width: 100%; }
.settings-form fieldset > p { grid-column: 1 / -1; margin: 0; font-size: .85rem; }
.settings-form .locate-action { display: flex; align-items: end; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
[data-conflict] { margin-top: 12px; }

.live-pill time { font-variant-numeric: tabular-nums; }
.live-pill time:empty { display: none; }
.topbar-date { display: none; font-size: .85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.today-line { font-weight: 600; min-height: 1.5em; }
.today-sun { font-weight: 400; white-space: nowrap; }
@media (min-width: 1280px) {
  .topbar-date:not(:empty) { display: inline; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .btn-ghost[data-logout] .label { display: none; }
}
@media (max-width: 840px) {
  .live-pill[data-state="open"] .live-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .live-pill:not([data-state="open"]) time { display: none; }
}
/* Outdoor weather card on the overview and the outdoor line on the history temperature chart. */
:root { --outdoor: #7c3aed; --cooler: #0e7490; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --outdoor: #b69cff; --cooler: #4fc3d9; }
}
:root[data-theme="dark"] { --outdoor: #b69cff; --cooler: #4fc3d9; }
.weather-card { display: grid; gap: 10px; margin-bottom: 20px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.weather-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.weather-head h2 { display: flex; align-items: center; gap: 6px; }
.weather-head .icon { color: var(--outdoor); }
.weather-body { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px 24px; }
.weather-body.is-stale .weather-now, .weather-body.is-stale .weather-facts { opacity: .6; }
.weather-now { display: grid; gap: 2px; }
.weather-temp { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.weather-temp small { margin-left: 2px; font-size: .95rem; font-weight: 600; color: var(--muted); }
.weather-cond { font-weight: 600; }
.weather-facts { display: grid; grid-template-columns: auto auto; gap: 4px 12px; margin: 0; }
.weather-facts div { display: contents; }
.weather-facts dt { font-size: .85rem; color: var(--muted); }
.weather-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.weather-diff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.weather-diff-item { display: grid; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.weather-diff-item strong { font-variant-numeric: tabular-nums; }
.weather-diff-item.is-warmer strong { color: var(--level-danger); }
.weather-diff-item.is-cooler strong { color: var(--cooler); }
.weather-caption, .weather-credit { margin: 0; }
.weather-credit a { color: var(--accent); }
.chart-note { margin: 4px 0 0; }
@media (max-width: 840px) {
  .weather-body { grid-template-columns: auto minmax(0, 1fr); }
  .weather-diff { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .weather-diff-item { padding: 6px 8px; }
  .weather-diff-item .small { font-size: .75rem; }
}
/* Accounts on the settings page and the audit log on the events page (owners only) */
.accounts-section { display: grid; gap: 12px; margin-top: 28px; }
.accounts-section > p { margin: 0; }
.accounts-section .settings-form { margin-top: 0; }
.accounts-section .form-actions { align-self: end; }
table.data [data-role] { min-height: 32px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
table.data tr.is-disabled td:first-child { color: var(--muted); text-decoration: line-through; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
table.data td.audit-detail { white-space: normal; overflow-wrap: anywhere; min-width: 220px; }
@media (max-width: 800px) {
  table.data[data-users] thead { display: none; }
  table.data[data-users] tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); }
  table.data[data-users] tbody tr:last-child { border-bottom: none; }
  table.data[data-users] td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; border: none; white-space: normal; text-align: right; }
  table.data[data-users] td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: .8rem; text-align: left; }
  table.data td.audit-detail { min-width: 0; }
}
/* More than 3 houses: houses 4 to 12 carry both theme colours of the palette in js/houses.js, and the farm map, the
   weather list and the cards fit 1 to 12 houses (the count of tiles is read with :has, so the markup stays the same). */
.house-gen { --chip-color: var(--house-light); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .house-gen { --chip-color: var(--house-dark); }
}
:root[data-theme="dark"] .house-gen { --chip-color: var(--house-dark); }
.farm-map:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 220px); }
.farm-map:has(> :nth-child(2)):not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 220px)); }
.weather-diff:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 220px); }
.weather-diff:has(> :nth-child(4)) { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); }
@media (min-width: 840px) {
  .farm-map:has(> :nth-child(4)):not(:has(> :nth-child(7))) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .farm-map:has(> :nth-child(7)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .house-grid:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 420px); }
}
@media (min-width: 840px) and (max-width: 1100px) {
  .farm-map:has(> :nth-child(7)) .barn-name { font-size: .8rem; }
}
/* Isometric barn scene on the overview farm map (js/scene.js). The overview sets classes on .barn-tile from real data:
   is-online, is-on, is-pending with pending-on or pending-off, is-offline, hens-out, is-walking, is-hot, is-cold,
   is-humid, is-dry, is-stale and is-fault. The map carries data-phase (server time of day), data-weather (outdoor group),
   --sun-t and --moon-t; data-hidden on the map and data-offscreen on a tile pause the animations.
   Night, dawn and dusk darken the scene by mixing each colour with --tint, not with a filter, so nothing re-filters per frame. */
:root {
  --scene-day-top: #a9cde0; --scene-day-low: #e3eeea;
  --scene-dawn-top: #c3b2c8; --scene-dawn-low: #f1d3b6;
  --scene-dusk-top: #8a7ba3; --scene-dusk-low: #e8b48c;
  --scene-night-top: #111a2e; --scene-night-low: #263150;
  --scene-dim: 0; --scene-offline-filter: grayscale(1); --scene-offline-opacity: .55;
  --scene-rain: #4f6d86; --scene-rain-night: #b4cadb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --scene-day-top: #4d7088; --scene-day-low: #8ea8ac;
    --scene-dawn-top: #675a77; --scene-dawn-low: #a07f6c;
    --scene-dusk-top: #4b4268; --scene-dusk-low: #8f6750;
    --scene-night-top: #0a101e; --scene-night-low: #182038;
    --scene-dim: .16; --scene-offline-filter: grayscale(1) brightness(.5); --scene-offline-opacity: .8;
    --scene-rain: #c4d6e4;
  }
}
:root[data-theme="dark"] {
  --scene-day-top: #4d7088; --scene-day-low: #8ea8ac;
  --scene-dawn-top: #675a77; --scene-dawn-low: #a07f6c;
  --scene-dusk-top: #4b4268; --scene-dusk-low: #8f6750;
  --scene-night-top: #0a101e; --scene-night-low: #182038;
  --scene-dim: .16; --scene-offline-filter: grayscale(1) brightness(.5); --scene-offline-opacity: .8;
  --scene-rain: #c4d6e4;
}
.barn-tile { position: relative; --sky-top: var(--scene-day-top); --sky-low: var(--scene-day-low); --tint: #1b2440; --tint-amt: 0%; }
.farm-map[data-phase="dawn"] .barn-tile { --sky-top: var(--scene-dawn-top); --sky-low: var(--scene-dawn-low); --tint: #6b4a62; --tint-amt: 12%; }
.farm-map[data-phase="dusk"] .barn-tile { --sky-top: var(--scene-dusk-top); --sky-low: var(--scene-dusk-low); --tint: #4a2f55; --tint-amt: 20%; }
.farm-map[data-phase="night"] .barn-tile { --sky-top: var(--scene-night-top); --sky-low: var(--scene-night-low); --tint: #0a1124; --tint-amt: 58%; }
.barn-scene { display: block; width: 100%; max-width: 300px; height: auto; }
.barn-tile.is-offline .barn-scene { filter: var(--scene-offline-filter); opacity: var(--scene-offline-opacity); }
.barn-tile.is-stale { border-style: dashed; border-color: var(--level-watch); }
.barn-tile.is-stale .barn-scene { opacity: .8; }
.barn-dim { fill: #000; opacity: var(--scene-dim); pointer-events: none; }
.barn-badge { position: absolute; top: 6px; right: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 22px; text-align: center; color: #fff; background: var(--level-color); box-shadow: 0 0 0 2px var(--surface); }

/* Sky: phase colours, then the sun and the moon on one arc, then the outdoor weather on top.
   Below the horizon (--sun-t or --moon-t outside 0 to 1) a disc drops far below the sky clip instead of showing beside the island. */
.barn-sky-top { stop-color: var(--sky-top); transition: stop-color 1.2s; }
.barn-sky-low { stop-color: var(--sky-low); transition: stop-color 1.2s; }
.barn-stars circle { fill: #fff; opacity: 0; transition: opacity 1.2s; }
.farm-map[data-phase="night"] .barn-stars circle { opacity: .8; }
.barn-sun, .barn-moon { transition: opacity 1.2s; }
.barn-sun { transform: translate(calc(16px + 168px * var(--sun-t, .5)), calc(64px - 200px * var(--sun-t, .5) * (1 - var(--sun-t, .5)) + 1000px * clamp(0, var(--sun-t, .5) * -1000, 1) + 1000px * clamp(0, (var(--sun-t, .5) - 1) * 1000, 1))); }
.barn-moon { opacity: 0; transform: translate(calc(16px + 168px * var(--moon-t, .5)), calc(64px - 200px * var(--moon-t, .5) * (1 - var(--moon-t, .5)) + 1000px * clamp(0, var(--moon-t, .5) * -1000, 1) + 1000px * clamp(0, (var(--moon-t, .5) - 1) * 1000, 1))); }
.barn-sun-disc { fill: #ffd463; } .barn-sun-halo { fill: #fff1c4; opacity: .45; }
.farm-map[data-phase="dawn"] .barn-sun-disc { fill: #ffb779; } .farm-map[data-phase="dawn"] .barn-sun-halo { fill: #ffd9b8; }
.farm-map[data-phase="dusk"] .barn-sun-disc { fill: #ff9a5e; } .farm-map[data-phase="dusk"] .barn-sun-halo { fill: #ffc7a0; }
.farm-map[data-phase="night"] .barn-sun { opacity: 0; }
.farm-map[data-phase="night"] .barn-moon { opacity: 1; }
.barn-moon-disc { fill: #efe9d2; } .barn-moon-halo { fill: #efe9d2; opacity: .1; }
.barn-overcast { fill: color-mix(in srgb, #8e99a2, var(--tint) var(--tint-amt)); opacity: 0; transition: opacity 1.2s; }
.barn-clouds { opacity: 0; transition: opacity 1.2s; }
.barn-clouds path { fill: color-mix(in srgb, #ffffff, var(--tint) var(--tint-amt)); }
.barn-rain { fill: none; stroke: var(--scene-rain); stroke-width: 1; stroke-linecap: round; opacity: 0; transition: opacity .8s; }
.barn-fog rect { fill: color-mix(in srgb, #f2f4f2, var(--tint) var(--tint-amt)); opacity: 0; transition: opacity 1.2s; }
.farm-map[data-weather="cloudy"] .barn-clouds { opacity: .9; }
.farm-map[data-weather="cloudy"] .barn-overcast { opacity: .15; }
.farm-map[data-weather="fog"] .barn-overcast { fill: color-mix(in srgb, #dfe4e3, var(--tint) var(--tint-amt)); opacity: .5; }
.farm-map[data-weather="fog"] .barn-fog rect { opacity: .5; }
.farm-map:is([data-weather="drizzle"], [data-weather="rain"], [data-weather="storm"]) .barn-clouds { opacity: 1; }
.farm-map:is([data-weather="drizzle"], [data-weather="rain"], [data-weather="storm"]) .barn-clouds path { fill: color-mix(in srgb, #a3adb5, var(--tint) var(--tint-amt)); }
.farm-map[data-weather="storm"] .barn-clouds path { fill: color-mix(in srgb, #66707a, var(--tint) var(--tint-amt)); }
.farm-map[data-weather="drizzle"] .barn-overcast { opacity: .25; }
.farm-map[data-weather="rain"] .barn-overcast { opacity: .4; }
.farm-map[data-weather="storm"] .barn-overcast { fill: color-mix(in srgb, #5d6872, var(--tint) var(--tint-amt)); opacity: .6; }
.farm-map:is([data-weather="cloudy"], [data-weather="fog"], [data-weather="drizzle"], [data-weather="rain"], [data-weather="storm"]) .barn-stars circle { opacity: 0; }
/* Rain and fog dim only the disc of the current phase, so the moon never shows by day nor the sun at night. */
.farm-map:is([data-weather="rain"], [data-weather="fog"]):not([data-phase="night"]) .barn-sun,
.farm-map:is([data-weather="rain"], [data-weather="fog"])[data-phase="night"] .barn-moon { opacity: .45; }
.farm-map[data-weather="storm"] :is(.barn-sun, .barn-moon) { opacity: 0; }
.farm-map[data-weather="drizzle"] .barn-rain { opacity: .5; }
.farm-map[data-weather="drizzle"] .barn-rain path:nth-child(2n) { display: none; }
.farm-map[data-weather="rain"] .barn-rain { opacity: .75; }
.farm-map[data-weather="storm"] .barn-rain { opacity: .9; stroke-width: 1.2; }
.farm-map[data-phase="night"] .barn-rain { stroke: var(--scene-rain-night); }
.farm-map:is([data-weather="drizzle"], [data-weather="rain"], [data-weather="storm"]) .barn-puddle { opacity: .7; }

/* Ground, house, silo, yard furniture and trees. */
.barn-grass { fill: color-mix(in srgb, #a3c08b, var(--tint) var(--tint-amt)); }
.barn-slab-left { fill: color-mix(in srgb, #85694d, var(--tint) var(--tint-amt)); }
.barn-slab-right { fill: color-mix(in srgb, #6d543c, var(--tint) var(--tint-amt)); }
.barn-strata { fill: none; stroke: #000; stroke-opacity: .08; stroke-width: .6; }
.barn-path { fill: color-mix(in srgb, #d9caa5, var(--tint) var(--tint-amt)); }
.barn-path-stones { stroke: color-mix(in srgb, #c0af88, var(--tint) var(--tint-amt)); stroke-width: 1.4; stroke-linecap: round; }
.barn-pad { fill: color-mix(in srgb, #c2c8b9, var(--tint) var(--tint-amt)); }
.barn-tufts { fill: color-mix(in srgb, #83a76a, var(--tint) var(--tint-amt)); }
.barn-flower-a { fill: color-mix(in srgb, #e9a3b2, var(--tint) var(--tint-amt)); }
.barn-flower-b { fill: color-mix(in srgb, #f6efd6, var(--tint) var(--tint-amt)); }
.barn-grain { stroke: color-mix(in srgb, #d9b25c, var(--tint) var(--tint-amt)); stroke-width: 1.1; stroke-linecap: round; }
.barn-wall { fill: color-mix(in srgb, #eceee6, var(--tint) var(--tint-amt)); }
.barn-seams { stroke: #000; stroke-opacity: .07; stroke-width: .5; }
.barn-eave-shadow { fill: #000; opacity: .07; }
.barn-inlet { fill: color-mix(in srgb, #9aa595, var(--tint) var(--tint-amt)); }
.barn-gable { fill: color-mix(in srgb, #d4d9cd, var(--tint) var(--tint-amt)); }
.barn-plinth { fill: color-mix(in srgb, #929c8d, var(--tint) var(--tint-amt)); }
.barn-louvre { fill: color-mix(in srgb, #59625a, var(--tint) var(--tint-amt)); }
.barn-louvre-slats, .barn-gable-vent { fill: none; stroke: color-mix(in srgb, #8a9486, var(--tint) var(--tint-amt)); stroke-width: .8; }
.barn-roof { fill: color-mix(in srgb, #8d998f, var(--tint) var(--tint-amt)); }
.barn-roof-back { fill: color-mix(in srgb, #b2bbb0, var(--tint) var(--tint-amt)); }
.barn-roof-lines { stroke: #fff; stroke-opacity: .16; stroke-width: .5; }
.barn-ridge { fill: color-mix(in srgb, color-mix(in srgb, var(--level-color, var(--level-unknown)) 75%, #3e463f), var(--tint) var(--tint-amt)); }
.barn-fascia { fill: color-mix(in srgb, var(--level-color, var(--level-unknown)), var(--tint) calc(var(--tint-amt) * .6)); }
.barn-door-frame { fill: color-mix(in srgb, #7d8879, var(--tint) var(--tint-amt)); }
.barn-silo-body { fill: color-mix(in srgb, #dde1db, var(--tint) var(--tint-amt)); }
.barn-silo-shade { fill: color-mix(in srgb, #b7beb6, var(--tint) var(--tint-amt)); }
.barn-silo-cone { fill: color-mix(in srgb, #a2aba1, var(--tint) var(--tint-amt)); }
.barn-silo-rings { fill: none; stroke: color-mix(in srgb, #959d95, var(--tint) var(--tint-amt)); stroke-width: .4; }
.barn-silo-legs { stroke: color-mix(in srgb, #7a8279, var(--tint) var(--tint-amt)); stroke-width: .8; }
.barn-shadow { fill: #000; opacity: .1; }
.barn-rail { fill: none; stroke: color-mix(in srgb, #c4b08a, var(--tint) var(--tint-amt)); stroke-width: .8; }
.barn-post { stroke: color-mix(in srgb, #94805f, var(--tint) var(--tint-amt)); stroke-width: 1.1; stroke-linecap: round; }
.barn-feeder-side { fill: color-mix(in srgb, #877355, var(--tint) var(--tint-amt)); }
.barn-feeder-top { fill: color-mix(in srgb, #a48e6b, var(--tint) var(--tint-amt)); }
.barn-feeder-food { fill: color-mix(in srgb, #d9b25c, var(--tint) var(--tint-amt)); }
.barn-drinker-base { fill: color-mix(in srgb, #6c8ba3, var(--tint) var(--tint-amt)); }
.barn-drinker-bell { fill: color-mix(in srgb, #c5d2da, var(--tint) var(--tint-amt)); }
.barn-drinker-hang { stroke: #7a837a; stroke-width: .4; }
.barn-trunk { fill: color-mix(in srgb, #765a3d, var(--tint) var(--tint-amt)); }
.barn-leaf { fill: color-mix(in srgb, #6a9657, var(--tint) var(--tint-amt)); }
.barn-leaf-shade { fill: color-mix(in srgb, #57814a, var(--tint) var(--tint-amt)); }
.barn-puddle { fill: color-mix(in srgb, #9dbfd0, var(--tint) var(--tint-amt)); opacity: 0; transition: opacity 1s; }
.barn-ripples ellipse { fill: none; stroke: #e8f4fa; stroke-width: .5; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* Lamps, light in the yard, the window film for humidity or dust, and the ESP32 board on the gable. */
.barn-windows rect { fill: color-mix(in srgb, #2e3850, var(--tint) var(--tint-amt)); transition: fill .5s; }
.barn-windows rect:nth-child(2) { transition-delay: .12s; } .barn-windows rect:nth-child(3) { transition-delay: .24s; }
.barn-windows rect:nth-child(4) { transition-delay: .36s; } .barn-windows rect:nth-child(5) { transition-delay: .48s; }
.barn-frames { fill: none; stroke: color-mix(in srgb, #6f7a70, var(--tint) var(--tint-amt)); stroke-width: .5; }
.barn-skylight { fill: color-mix(in srgb, #3a4458, var(--tint) var(--tint-amt)); transition: fill .6s .5s; }
.barn-porch { fill: color-mix(in srgb, #59625a, var(--tint) var(--tint-amt)); transition: fill .4s; }
.barn-spill { opacity: 0; transition: opacity .7s .2s; }
.barn-spill-stop { stop-color: #ffd56b; }
.barn-roosting { fill: #6b4a1e; opacity: 0; transition: opacity .6s; }
.barn-tile.is-on .barn-windows rect { fill: #ffd56b; }
.barn-tile.is-on .barn-skylight { fill: #ffe39a; }
.barn-tile.is-on .barn-porch { fill: #fff0b0; }
.barn-tile.is-on .barn-spill { opacity: .12; }
.farm-map:is([data-phase="dawn"], [data-phase="dusk"]) .barn-tile.is-on .barn-spill { opacity: .28; }
.farm-map[data-phase="night"] .barn-tile.is-on .barn-spill { opacity: .42; }
.barn-tile.is-on:not(.hens-out) .barn-roosting { opacity: .55; }
.barn-tile.is-pending .barn-windows rect, .barn-tile.is-pending .barn-door { fill: #8a7a4c; }
.barn-tile.is-pending .barn-frames { stroke: var(--lamp); stroke-width: .7; stroke-dasharray: 1.2 .8; }
.barn-tile.is-pending .barn-spill { opacity: 0; }
.barn-film { fill: #eef4f5; opacity: 0; transition: opacity 1s; }
.barn-drops { fill: none; stroke: #fff; stroke-width: .45; stroke-linecap: round; opacity: 0; transition: opacity 1s; }
.barn-dust { fill: none; stroke: #c9a66b; stroke-width: 1; stroke-linecap: round; opacity: 0; transition: opacity 1s; }
.barn-tile.is-humid .barn-film { opacity: .55; }
.barn-tile.is-humid .barn-drops { opacity: .85; }
.barn-tile.is-dry .barn-film { fill: #d8c191; opacity: .3; }
.barn-tile.is-dry .barn-dust { opacity: .9; }
.barn-board-box { fill: #26313a; stroke: #4c5a66; stroke-width: .4; }
.barn-board-cable { fill: none; stroke: #4c5a66; stroke-width: .5; }
.barn-led { fill: #20262a; }
.barn-led-glow { fill: #7dffa8; opacity: 0; }
.barn-tile.is-online .barn-led { fill: #2f9c55; }
.barn-tile.is-stale .barn-led { fill: #f0a020; }
.barn-tile.is-stale .barn-led-glow { fill: #f0a020; opacity: .4; }
.barn-tile.is-fault .barn-led { fill: #e5484d; }
.barn-tile.is-fault .barn-led-glow { fill: #e5484d; opacity: .5; }
.barn-tile.is-fault .barn-board-box { stroke: #e5484d; }

/* Hens: out of the door to their yard spot while the light is on by day, back in when it goes off or night falls.
   Cold sends them to huddle by the wall, heat holds their wings out. */
.barn-hen { transform: translate(var(--hx), var(--hy)); transition: transform 3s ease-in-out; }
.barn-tile.is-cold .barn-hen { transform: translate(var(--kx), var(--ky)); }
.barn-hen-trip { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 0; transition: transform 2s ease-in-out, opacity .3s ease-in 1.7s; }
.barn-tile.is-cold .barn-hen-trip { transform: translate(var(--kdx), var(--kdy)) scale(.6); }
.barn-tile.hens-out .barn-hen-trip { transform: none; opacity: 1; transition: transform 2s ease-in-out .3s, opacity .2s .3s; }
.barn-hen-2 .barn-hen-trip { transition-delay: .25s, 1.95s; } .barn-tile.hens-out .barn-hen-2 .barn-hen-trip { transition-delay: .55s, .55s; }
.barn-hen-3 .barn-hen-trip { transition-delay: .5s, 2.2s; } .barn-tile.hens-out .barn-hen-3 .barn-hen-trip { transition-delay: .8s, .8s; }
.barn-hen-4 .barn-hen-trip { transition-delay: .75s, 2.45s; } .barn-tile.hens-out .barn-hen-4 .barn-hen-trip { transition-delay: 1.05s, 1.05s; }
.barn-hen-5 .barn-hen-trip { transition-delay: 1s, 2.7s; } .barn-tile.hens-out .barn-hen-5 .barn-hen-trip { transition-delay: 1.3s, 1.3s; }
.barn-hen-face { transform: scale(calc(-1 * var(--hen-s, .5) * var(--fo)), var(--hen-s, .5)); }
.barn-tile.hens-out .barn-hen-face { transform: scale(calc(var(--hen-s, .5) * var(--fo)), var(--hen-s, .5)); }
.barn-hen-shadow { fill: #000; opacity: .16; }
.barn-white-body { fill: color-mix(in srgb, #f8f5ec, var(--tint) var(--tint-amt)); }
.barn-white-wing { fill: color-mix(in srgb, #e9e1d1, var(--tint) var(--tint-amt)); }
.barn-white-tail { fill: color-mix(in srgb, #ddd3bf, var(--tint) var(--tint-amt)); }
.barn-brown-body { fill: color-mix(in srgb, #b97f4a, var(--tint) var(--tint-amt)); }
.barn-brown-wing { fill: color-mix(in srgb, #9c6534, var(--tint) var(--tint-amt)); }
.barn-brown-tail { fill: color-mix(in srgb, #774824, var(--tint) var(--tint-amt)); }
.barn-hen-comb { fill: #c9423a; }
.barn-hen-beak { fill: #dc9a3a; }
.barn-hen-leg { stroke: #cf8a30; stroke-width: .7; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 0; }
.barn-hen-head { transform-box: fill-box; transform-origin: 20% 90%; }
.barn-hen-wing { transform-box: fill-box; transform-origin: 20% 50%; transition: transform .6s; }
.barn-tile.is-hot .barn-hen-wing { transform: rotate(-28deg) translateY(-.4px); }
.barn-tile.is-cold .barn-hen-bodyset { transform: scale(1.08); transform-box: fill-box; transform-origin: 50% 100%; }
.barn-heat { fill: none; stroke: #e9a86a; stroke-width: 1; stroke-linecap: round; opacity: 0; transition: opacity .8s; }
.barn-tile.is-hot.is-online .barn-heat { opacity: .6; }
/* A warm haze over the yard in front of the house, big enough to read at 390 px where wings and panting are not. */
.barn-heat-haze { fill: color-mix(in srgb, #f2a35e, var(--tint) var(--tint-amt)); opacity: 0; transition: opacity .8s; }
.barn-tile.is-hot.is-online .barn-heat-haze { opacity: .24; }

/* Animation only for people who have not asked for less motion; paused off screen and in a hidden tab. */
@media (prefers-reduced-motion: no-preference) {
  .barn-tile:not(.is-offline) .barn-drift-1 { animation: barn-cloud 70s linear -20s infinite; }
  .barn-tile:not(.is-offline) .barn-drift-2 { animation: barn-cloud 90s linear -50s infinite; }
  .barn-tile:not(.is-offline) .barn-drift-3 { animation: barn-cloud 80s linear -5s infinite; }
  .farm-map:is([data-weather="drizzle"], [data-weather="rain"], [data-weather="storm"]) .barn-tile:not(.is-offline) .barn-rain path { animation: barn-fall .9s linear infinite; }
  .farm-map[data-weather="drizzle"] .barn-tile:not(.is-offline) .barn-rain path { animation-duration: 1.4s; }
  .farm-map:is([data-weather="drizzle"], [data-weather="rain"], [data-weather="storm"]) .barn-tile:not(.is-offline) .barn-rain path:nth-child(3n) { animation-delay: -.3s; }
  .farm-map:is([data-weather="drizzle"], [data-weather="rain"], [data-weather="storm"]) .barn-tile:not(.is-offline) .barn-rain path:nth-child(3n+1) { animation-delay: -.6s; }
  .farm-map:is([data-weather="rain"], [data-weather="storm"]) .barn-tile:not(.is-offline) .barn-ripples ellipse { animation: barn-ripple 1.8s ease-out infinite; }
  .farm-map:is([data-weather="rain"], [data-weather="storm"]) .barn-tile:not(.is-offline) .barn-ripples ellipse + ellipse { animation-delay: -.9s; }

  .barn-tile.is-pending .barn-windows { animation: barn-pending 1s ease-in-out infinite; }
  .barn-tile.is-fault .barn-led-glow { animation: barn-pulse 1.6s ease-in-out infinite; }
  .barn-tile.is-hot.is-online .barn-heat path { animation: barn-rise 3s ease-in-out infinite; }
  .barn-tile.is-hot.is-online .barn-heat path:nth-child(2) { animation-delay: -1s; }
  .barn-tile.is-hot.is-online .barn-heat path:nth-child(3) { animation-delay: -2s; }

  .barn-tile:is(.hens-out, .is-walking):not(.is-offline) .barn-hen-roam { animation: barn-roam 10s ease-in-out infinite; }
  .barn-tile:is(.hens-out, .is-walking):not(.is-offline) .barn-hen-2 .barn-hen-roam { animation-duration: 12s; animation-delay: -3s; }
  .barn-tile:is(.hens-out, .is-walking):not(.is-offline) .barn-hen-3 .barn-hen-roam { animation-duration: 11s; animation-delay: -5s; animation-direction: reverse; }
  .barn-tile:is(.hens-out, .is-walking):not(.is-offline) .barn-hen-4 .barn-hen-roam { animation-duration: 13s; animation-delay: -1s; }
  .barn-tile:is(.hens-out, .is-walking):not(.is-offline) .barn-hen-5 .barn-hen-roam { animation-duration: 9.5s; animation-delay: -4s; animation-direction: reverse; }
  .barn-tile.is-cold :is(.barn-hen-roam, .barn-hen-bodyset) { animation: none !important; }
  .barn-tile:is(.hens-out, .is-walking):not(.is-offline) .barn-hen-bodyset { animation: barn-bob .5s ease-in-out infinite; }
  .barn-tile:is(.hens-out, .is-walking):not(.is-offline) .barn-hen-leg-a { animation: barn-leg .5s ease-in-out infinite; }
  .barn-tile:is(.hens-out, .is-walking):not(.is-offline) .barn-hen-leg-b { animation: barn-leg .5s ease-in-out -.25s infinite; }
  .barn-tile.hens-out:not(.is-offline):not(.is-hot) .barn-hen-head { animation: barn-peck 3.2s ease-in-out infinite; }
  .barn-tile.hens-out:not(.is-offline):not(.is-hot) .barn-hen-2 .barn-hen-head { animation-delay: -1.2s; }
  .barn-tile.hens-out:not(.is-offline):not(.is-hot) .barn-hen-3 .barn-hen-head { animation-delay: -2.1s; animation-duration: 2.6s; }
  .barn-tile.hens-out:not(.is-offline):not(.is-hot) .barn-hen-4 .barn-hen-head { animation-delay: -.6s; }
  .barn-tile.hens-out.is-hot:not(.is-offline) .barn-hen-head { animation: barn-pant .4s ease-in-out infinite; }
}
.farm-map[data-hidden] .barn-tile *, .barn-tile[data-offscreen] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .barn-tile, .barn-tile * { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}
@keyframes barn-cloud { from { transform: translateX(-80px); } to { transform: translateX(220px); } }
@keyframes barn-fall { from { transform: translate(1px, -6px); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-3px, 10px); opacity: 0; } }
@keyframes barn-ripple { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
@keyframes barn-pending { 50% { opacity: .45; } }
@keyframes barn-pulse { 50% { opacity: .15; } }
@keyframes barn-rise { 0% { transform: translateY(4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-7px); opacity: 0; } }
@keyframes barn-roam {
  0%, 100% { transform: translate(0, 0); }
  20%, 35% { transform: translate(4px, 1.5px); }
  55% { transform: translate(.5px, 2.5px); }
  70%, 85% { transform: translate(-4px, 1px); }
}
@keyframes barn-bob { 50% { transform: translateY(-.5px); } }
@keyframes barn-leg { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }
@keyframes barn-peck { 0%, 55%, 100% { transform: rotate(0); } 62%, 76% { transform: rotate(42deg) translate(.6px, 1.4px); } 69% { transform: rotate(22deg); } }
@keyframes barn-pant { 50% { transform: translateY(.5px) rotate(4deg); } }

/* Below 600 px a tile is about 105 px wide: drop the small details, show the THI level as a bar on top, draw the hens
   larger and move the alert badge down beside the light state so it covers neither the sky nor the moon. */
@media (max-width: 600px) {
  .barn-tufts, .barn-flowers, .barn-grain { display: none; }
  .barn-tile { box-shadow: inset 0 4px 0 var(--level-color, var(--level-unknown)), var(--shadow); }
  .barn-tile { --hen-s: .8; }
  .barn-badge { top: auto; bottom: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; font-size: .7rem; line-height: 18px; }
}
/* With 3 or more houses a phone shows one scene at a time, swiped sideways with the next one peeking in, so each is about
   290 px wide: the details and the normal hen size come back. The page itself never scrolls sideways. */
@media (max-width: 600px) {
  .farm-map:has(> :nth-child(3)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 6px; }
  .farm-map:has(> :nth-child(3)) .barn-tile { scroll-snap-align: start; --hen-s: .5; }
  .farm-map:has(> :nth-child(3)) :is(.barn-tufts, .barn-flowers, .barn-grain) { display: revert; }
}

/* Installable app and Web Push: the offline banner (js/pwa.js) and "แจ้งเตือนบนเครื่องนี้" on the settings page (js/push.js) */
.offline-banner { padding: 8px 16px; background: var(--level-watch); color: #1c2419; font-size: .9rem; font-weight: 600; text-align: center; }
.push-section { display: grid; gap: 8px; margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.push-section > p { margin: 0; }
.push-row { display: flex; align-items: center; gap: 12px; }
.push-state { margin: 0; font-weight: 600; min-width: 0; }
.push-section .switch.is-on { background: var(--accent); }