/* Krishi Sutra stylesheet. Mobile first. Keep font sizes in rem, the A-/A/A+
   buttons in a11y.js scale the root size. */

@font-face { font-family: "Mukta"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/mukta-regular-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20B9, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("../fonts/mukta-regular-deva.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/mukta-semibold-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20B9, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("../fonts/mukta-semibold-deva.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/mukta-bold-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20B9, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("../fonts/mukta-bold-deva.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

:root {
    --paper: #eef1e6; --paper-2: #dfe6d3; --card: #f8faf3; --white: #fff;
    --rule: #cdd6bf; --rule-2: #dfe5d4; --rule-dark: #b3bfa4;
    --ink: #183a2c; --ink-2: #36503f; --muted: #627262; --faint: #8f9c8e;
    --sepia: #4f7a3a;
    --green: #2f6b3a;
    --red: #c0582f;
    --red-dark: #a14521;
    --gold: #e2b04a;
    --mark: rgba(192, 88, 47, .22);
    --tint: #e3e9d8;
    --shadow: rgba(20, 40, 25, .45);

    --ok:   #2f6b3a;  --ok-bg:   #e2edd7;  --ok-line:   #b9d3a4;
    --warn: #875708;  --warn-bg: #f6ebcd;  --warn-line: #e3c98a;
    --bad:  #a3261d;  --bad-bg:  #f7e0db;  --bad-line:  #e6b3a8;
    --info: #2b5c86;  --info-bg: #deeaf3;  --info-line: #b3cbe0;
    --neutral: #56645a; --neutral-bg: #e6eadf; --neutral-line: #cdd5c3;

    --r-xs: 4px; --r-sm: 6px; --r: 10px; --r-lg: 14px;
    --sh-1: 0 1px 0 var(--rule), 0 14px 26px -24px var(--shadow);
    --sh-2: 0 1px 0 var(--rule), 0 24px 40px -30px var(--shadow);
    --ring: 0 0 0 3px rgba(192, 88, 47, .45);

    --wrap: 1280px;
    --serif: "Tiro Devanagari Hindi", "Tiro Bangla", "Noto Serif Devanagari", "Noto Serif Bengali", Georgia, serif;
    --hand: "Kalam", "Galada", "Segoe Print", "Comic Sans MS", cursive;
    --sans: "Mukta", "Hind Siliguri", "Nirmala UI", "Noto Sans Bengali", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4  0 0 0 0 .3  0 0 0 0 .15  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 26 3, 52 11, 78 6 S 110 4, 118 7' fill='none' stroke='%23c0582f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");

    /* notice icons, same drawings as the sprite */
    --m-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
    --m-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 10'/%3E%3C/svg%3E");
    --m-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.4 17.5A2 2 0 0 0 4.1 20.5h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E");
    --m-bad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
    --m-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183a2c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: var(--fs, 16px); background: var(--paper); scroll-behavior: smooth; }
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--ink);
    background: var(--paper) var(--grain);
    -webkit-font-smoothing: antialiased; overflow-x: clip;
}
a { color: var(--green); text-underline-offset: .2em; text-decoration-color: rgba(192, 88, 47, .55); }
a:hover { color: var(--ink); text-decoration-color: var(--red); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.25; color: var(--ink); letter-spacing: 0; }
img { max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
::selection { background: var(--mark); }

.ic {
    width: 1.2em; height: 1.2em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -.22em;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; width: 100%; padding-left: 16px; padding-right: 16px; }
@media (min-width: 760px) { .wrap { padding-left: 28px; padding-right: 28px; } }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--card); color: var(--ink); padding: 10px 14px; border: 2px solid var(--ink); }
.skip-link:focus { left: 8px; }

.hand, .note { font-family: var(--hand); line-height: 1.35; }
.note { color: var(--ink-2); }
.note.red, .hand.red { color: var(--red); }
.scribbled { position: relative; padding-bottom: 12px; }
.scribbled::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(150px, 60%); height: 10px; background: var(--scribble) center / 100% 100% no-repeat; }

/* ------------------------------------------------------ government strip */

.proto-banner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 16px;
    background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--warn-line);
    font-size: .85rem; font-weight: 700; line-height: 1.35; text-align: center; }
.proto-banner .ic { flex: none; width: 1.1em; height: 1.1em; }

.govstrip { background: #10291e; color: #b8ccbd; font-size: .8125rem; }
.govstrip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 34px; padding-top: 3px; padding-bottom: 3px; }
.gov-id { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.gov-id > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gov-id .ic { color: var(--gold); }
.gov-long { display: none; }
@media (min-width: 1000px) { .gov-long { display: inline; } }
.util { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.util-group { display: inline-flex; align-items: center; gap: 2px; }
.util-group > .ic { color: #86a594; margin-right: 2px; }
.a11y button { background: none; border: 0; color: inherit; font: inherit; font-size: .875rem; line-height: 1; padding: 5px 6px; cursor: pointer; border-radius: var(--r-xs); }
.a11y button sup { font-size: .55rem; }
.a11y button:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.a11y button[aria-pressed="true"] { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
@media (max-width: 480px) { .util-group > .ic { display: none; } .a11y button { padding: 4px; } }

.langmenu { position: relative; }
.langmenu summary {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; cursor: pointer; list-style: none;
    color: #fff; font-weight: 600; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
}
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary .ic { width: .95rem; height: .95rem; color: var(--gold); }
.langmenu summary:hover, .langmenu[open] summary { background: rgba(255, 255, 255, .1); }
.langmenu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 10rem; margin: 0; padding: 6px; list-style: none;
    background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r); box-shadow: 4px 4px 0 var(--red); }
.langmenu li a { display: block; padding: 9px 12px; color: var(--ink); font-size: 1rem; text-decoration: none; border-radius: var(--r-sm); }
.langmenu li a:hover { background: var(--paper-2); }
.langmenu li a.on { font-weight: 700; background: var(--paper-2); box-shadow: inset 3px 0 0 var(--red); }

/* ---------------------------------------------------------------- topbar */

.topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(238, 241, 230, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--rule);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; border-bottom: 1px solid var(--rule); pointer-events: none; }
.topbar-in { display: flex; align-items: center; gap: 10px 18px; min-height: 68px; padding-top: 6px; padding-bottom: 6px; }
.brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; flex: none; color: var(--ink); text-decoration: none; }
.brand img { width: 44px; height: 44px; display: block; border-radius: 50%; background: #fff; border: 1px solid var(--rule); flex: none; }
.brand-name { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; white-space: nowrap; }
.brand-sub { display: block; font-size: .78rem; color: var(--muted); line-height: 1.2; }
@media (max-width: 1180px) { .brand-sub { display: none; } }
@media (max-width: 420px) { .brand img { width: 36px; height: 36px; } .brand-name { font-size: 1.3rem; } }
@media (max-width: 759px) { .topbar-in { min-height: 56px; } .brand img { width: 38px; height: 38px; } }

.mainnav { display: none; }
@media (min-width: 1000px) {
    .mainnav { display: flex; align-items: center; gap: 2px; }
}
@media (min-width: 1000px) and (max-width: 1240px) { .mainnav a { padding: 8px 7px; font-size: .92rem; } .mainnav a .ic { display: none; } }
.mainnav a {
    position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; white-space: nowrap;
    color: var(--ink-2); font-weight: 600; font-size: .98rem; text-decoration: none; border-radius: var(--r-sm);
}
.mainnav a .ic { width: 1.3rem; height: 1.3rem; color: var(--sepia); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.mainnav a:hover { color: var(--ink); background: rgba(223, 230, 211, .7); }
.mainnav a:hover .ic { transform: translateY(-2px) rotate(-6deg); }
.mainnav a.active { color: var(--ink); }
.mainnav a.active .ic { color: var(--red); }
.mainnav a.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px; height: 7px; background: var(--scribble) center / 100% 100% no-repeat; }
.pill { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-family: var(--sans); font-size: .7rem; font-weight: 700; line-height: 1; }

.doors { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.door {
    position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; white-space: nowrap;
    border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none;
    transition: background .2s, color .2s, transform .15s;
}
.door .ic { width: 1.15rem; height: 1.15rem; }
.door:hover { background: var(--ink); color: var(--paper); }
.door.login { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 2px 2px 0 var(--ink); }
.door.login:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.door.login::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--red); opacity: 0; pointer-events: none; animation: ping 1.8s cubic-bezier(.2, .6, .3, 1) 1.5s 3; }
@keyframes ping { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3, 1.6); } }
@media (max-width: 760px) { .door .long { display: none; } .door { padding: 6px 11px; font-size: .9rem; } }
@media (max-width: 380px) { .door:not(.login) .ic { display: none; } }

.account { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.acc-name { display: none; line-height: 1.15; font-weight: 700; font-size: .95rem; text-align: right; }
.acc-name small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
@media (min-width: 1300px) { .acc-name { display: block; } }
.acc-id { font-family: var(--mono); font-size: .8rem; color: var(--ink); border: 1.5px dashed var(--rule-dark); border-radius: var(--r-xs); padding: 2px 8px; white-space: nowrap; }
@media (max-width: 480px) { .acc-id { display: none; } }
.iconbtn {
    display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    color: var(--ink); border: 1.5px solid var(--ink); background: var(--card); text-decoration: none;
}
.iconbtn .ic { width: 1.25rem; height: 1.25rem; }
.iconbtn:hover { background: var(--ink); color: var(--paper); }

.navtoggle { display: none; }
@media (max-width: 999px) {
    .js .navtoggle {
        display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; flex: none; cursor: pointer;
        background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 50%;
    }
    .js .navtoggle .ic { width: 1.4rem; height: 1.4rem; }
    .js .navtoggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
    .js .mainnav.open {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
        position: absolute; left: 0; right: 0; top: 100%; padding: 14px 16px 18px;
        background: var(--paper) var(--grain); border-bottom: 1.5px solid var(--ink); box-shadow: 0 20px 30px -24px var(--shadow);
    }
    .js .mainnav.open a { flex-direction: column; gap: 6px; padding: 14px 8px; font-size: 1rem; text-align: center; white-space: normal;
        background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); }
    .js .mainnav.open a .ic { width: 2rem; height: 2rem; }
    .js .mainnav.open a.active { border-color: var(--ink); box-shadow: 3px 3px 0 var(--red); }
    .js .mainnav.open a.active::after { display: none; }
    .js .mainnav.open .pill { position: absolute; top: 8px; right: 10px; }
    .js .console .sidenav:not(.open) { display: none; }
}

/* ------------------------------------------------ the farmer's tab bar (phones) */

.tabbar { display: none; }
@media (max-width: 759px) {
    .has-tabbar { --tabbar-h: 68px; padding-bottom: var(--tabbar-h); }
    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        height: var(--tabbar-h); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
        background: var(--card); border-top: 1.5px solid var(--ink); box-shadow: 0 -10px 24px -18px var(--shadow);
    }
    .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        color: var(--ink-2); text-decoration: none; font-size: .72rem; font-weight: 600; line-height: 1.1; text-align: center; border-radius: var(--r); }
    .tabbar a .ic { width: 1.75rem; height: 1.75rem; }
    .tabbar a.active { color: var(--ink); background: var(--paper-2); }
    .tabbar a.active .ic { color: var(--red); }
    .tabbar .pill { position: absolute; top: 2px; left: calc(50% + 6px); }
    .has-tabbar .mainnav, .has-tabbar .navtoggle { display: none !important; }
}

/* ------------------------------------------------- staff console layout */

.frame { flex: 1 0 auto; width: 100%; }
.console { max-width: 1600px; margin: 0 auto; width: 100%; }
@media (min-width: 1000px) {
    .console { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; padding: 0 28px; }
}
.sidenav { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 18px; background: var(--paper-2); border-bottom: 1.5px solid var(--ink); }
.sidenav a {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r);
    color: var(--ink-2); font-weight: 600; font-size: .98rem; text-decoration: none;
}
.sidenav a .ic { width: 1.5rem; height: 1.5rem; color: var(--sepia); }
.sidenav a:hover { background: rgba(248, 250, 243, .8); color: var(--ink); }
.sidenav a.active { background: var(--ink); color: var(--paper); }
.sidenav a.active .ic { color: var(--gold); }
.sidenav .pill { margin-left: auto; }
.side-label { display: block; margin: 12px 12px 2px; font-family: var(--hand); font-size: 1.05rem; color: var(--red); }
.side-label:first-child { margin-top: 0; }
.side-card { margin-top: 16px; padding: 12px 14px; border: 1.5px dashed var(--rule-dark); border-radius: var(--r); font-size: .85rem; color: var(--muted); }
.side-card strong { display: block; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.05rem; }
@media (min-width: 1000px) {
    .sidenav { position: sticky; top: 84px; align-self: start; margin: 26px 0; padding: 16px 12px; border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--sh-1); max-height: calc(100vh - 110px); overflow-y: auto; }
}

/* ---------------------------------------------------------------- page */

.page { padding-top: 20px; padding-bottom: 56px; }
@media (min-width: 760px) { .page { padding-top: 30px; } }
.console .page { padding-left: 16px; padding-right: 16px; }
@media (min-width: 1000px) { .console .page { padding-left: 0; padding-right: 0; } }

.pagehead {
    position: relative; display: flex; align-items: flex-end; gap: 14px 24px; flex-wrap: wrap;
    min-height: 150px; margin-bottom: 24px; padding: 4px calc(clamp(118px, 26vw, 250px) + 8px) 18px 0;
    border-bottom: 1.5px solid var(--ink);
}
.pagehead::before { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; border-bottom: 1px solid var(--rule); }
.pagehead::after {
    content: ""; position: absolute; right: 0; bottom: 2px; width: clamp(118px, 26vw, 250px); aspect-ratio: 4 / 3;
    background: var(--art, none) right bottom / contain no-repeat; pointer-events: none;
}
.ph-text { flex: 1 1 280px; min-width: 0; }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.eyebrow { display: block; margin: 0 0 2px; font-family: var(--hand); font-size: 1.15rem; color: var(--red); line-height: 1.3; }
.eyebrow .ic { width: 1.1rem; height: 1.1rem; margin-right: 4px; }
.page-title { position: relative; margin: 0; padding-bottom: 12px; font-size: clamp(1.9rem, 1.35rem + 1.8vw, 2.9rem); line-height: 1.18; }
.page-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(170px, 60%); height: 10px; background: var(--scribble) center / 100% 100% no-repeat; }
.page-sub { margin: 8px 0 0; color: var(--ink-2); font-size: 1.05rem; max-width: 62ch; }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--ink-2); font-size: .95rem; }
.meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.meta-row .ic { color: var(--sepia); }
@media (max-width: 600px) {
    .pagehead { min-height: 0; padding-right: 0; padding-top: 0; }
    .pagehead::after { position: relative; order: -1; width: 112px; margin: -4px 0 -6px auto; bottom: 0; }
}

.breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); margin-bottom: 10px; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .ic { width: 1.05em; height: 1.05em; color: var(--faint); }

.section { margin: 44px 0 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.section-title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.section-sub { margin: 4px 0 0; color: var(--muted); max-width: 64ch; }

/* ------------------------------------------------------------------ card */

.card { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sh-1); margin-bottom: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px dashed var(--rule-dark); }
.card-title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.25; color: var(--ink); }
.card-title > .ic:not(.crop-ic) { width: 2.3rem; height: 2.3rem; padding: .5rem; border-radius: 50%; background: var(--paper-2); color: var(--green); stroke-width: 1.8; }
.card-title .count { font-family: var(--sans); font-size: .85rem; font-weight: 700; color: var(--muted); background: var(--paper-2); border-radius: 999px; padding: 1px 9px; }
.card-body { padding: 16px 18px; }
.card-body > :first-child { margin-top: 0; }
.card-body > :last-child { margin-bottom: 0; }
.card > .table-scroll { border-radius: 0 0 var(--r) var(--r); }
.card.tint { background: var(--tint); }
.card.pad { padding: 18px; }
.card.taped::before, .taped::before {
    content: ""; position: absolute; z-index: 2; top: -11px; left: 50%; width: 78px; height: 22px; margin-left: -39px;
    background: rgba(230, 200, 120, .6); transform: rotate(-3deg);
    clip-path: polygon(0 10%, 5% 0, 12% 8%, 88% 4%, 95% 0, 100% 9%, 100% 90%, 94% 100%, 86% 93%, 10% 97%, 4% 90%, 0 100%);
}
.link-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--green); }
.link-more .ic { width: 1.05em; height: 1.05em; transition: transform .2s; }
.link-more:hover .ic { transform: translateX(3px); }

.grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.grid > .card { margin-bottom: 0; }
.stack > * + * { margin-top: 20px; }
.stack > .card { margin-bottom: 0; }
@media (min-width: 900px) {
    .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid.side { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 900px) and (max-width: 1499px) { .grid.side.wide-main { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- stats */

.stat-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }
@media (min-width: 900px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sh-1); }
.stat-ic { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--paper-2); color: var(--green); }
.stat-ic .ic { width: 1.6rem; height: 1.6rem; }
.stat > div:last-child { min-width: 0; }
.stat .n { font-family: var(--serif); font-size: clamp(1.45rem, 1.2rem + .8vw, 2rem); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .l { margin-top: 2px; font-size: .85rem; color: var(--muted); line-height: 1.3; }
.stat.bad { border-color: var(--bad-line); }
.stat.bad .n, .stat.bad .stat-ic { color: var(--bad); }
.stat.bad .stat-ic { background: var(--bad-bg); }
.stat.warn .stat-ic { background: var(--warn-bg); color: var(--warn); }
.stat.good .stat-ic { background: var(--ok-bg); color: var(--ok); }
.stat.info .stat-ic { background: var(--info-bg); color: var(--info); }
.stat.zero .n { color: var(--faint); font-size: 1.15rem; line-height: 1.7; font-family: var(--sans); font-weight: 600; }
.stat.zero .stat-ic { color: var(--faint); }
@media (max-width: 420px) { .stat { flex-direction: column; align-items: flex-start; gap: 6px; } .stat-ic { width: 2.5rem; height: 2.5rem; } }
@media (max-width: 759px) { .stat.dup { display: none; } }

/* -------------------------------------------------------------- buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 2.9rem; padding: 9px 20px;
    font: 600 1rem/1.2 var(--sans); letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer;
    color: #fff; background: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--r-sm);
    box-shadow: 3px 3px 0 var(--red); transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.btn:hover { color: #fff; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--red); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--red); }
.btn .ic { width: 1.25rem; height: 1.25rem; }
.btn:hover .ic { animation: nudge .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes nudge { 40% { transform: scale(1.18) rotate(-8deg); } }
.btn.secondary { color: var(--ink); background: var(--card); box-shadow: 3px 3px 0 var(--rule-dark); }
.btn.secondary:hover { color: var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--rule-dark); }
.btn.ghost { color: var(--ink); background: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.btn.ghost:hover { background: var(--paper-2); transform: none; }
.btn.wheat { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
.btn.wheat:hover { background: var(--red-dark); border-color: var(--red-dark); box-shadow: 4px 4px 0 var(--ink); }
.btn.go { background: var(--green); border-color: var(--green); box-shadow: 3px 3px 0 var(--ink); }
.btn.go:hover { background: #245a2f; border-color: #245a2f; box-shadow: 4px 4px 0 var(--ink); }
.btn.danger { background: var(--card); color: var(--bad); border-color: var(--bad); box-shadow: 3px 3px 0 var(--bad-line); }
.btn.danger:hover { background: var(--bad-bg); color: var(--bad); }
.btn.small { min-height: 2.3rem; padding: 5px 12px; font-size: .88rem; }
.btn.small .ic { width: 1.05rem; height: 1.05rem; }
.btn.large { min-height: 3.4rem; padding: 12px 26px; font-size: 1.12rem; }
.btn.block { display: flex; width: 100%; }
.btn[disabled], .btn.disabled { background: var(--neutral-bg); color: var(--faint); border-color: var(--rule); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn-row.center { justify-content: center; }
.btn-stack > * + * { margin-top: 12px; }

/* ---------------------------------------------------------------- forms */

form .field { margin-bottom: 16px; }
label, .label { display: block; font-size: .95rem; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; }
label .ic { color: var(--sepia); }
label .req { color: var(--red); }
.hint { display: block; font-size: .85rem; color: var(--muted); margin-top: 6px; line-height: 1.45; }
input[type=text], input[type=tel], input[type=number], input[type=password], input[type=date], input:not([type]), select, textarea {
    width: 100%; min-height: 3rem; padding: 10px 14px; font: inherit; font-size: 1.05rem; color: var(--ink);
    background: #fff; border: 1.5px solid var(--rule-dark); border-radius: var(--r-sm); box-shadow: inset 0 2px 0 rgba(24, 58, 44, .04);
    transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
input[readonly] { background: var(--paper-2); color: var(--muted); }
select { -webkit-appearance: none; appearance: none; padding-right: 42px; background: #fff var(--m-chevron) right 12px center / 20px no-repeat; }
input.mono { font-family: var(--mono); letter-spacing: .04em; }
input[type=checkbox], input[type=radio] { accent-color: var(--green); }
.field-row { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .field-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fieldset { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.fieldset + .fieldset { border-top: 1px dashed var(--rule-dark); padding-top: 20px; margin-top: 4px; }
.fs-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.fs-num { display: grid; place-items: center; flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--paper-2); color: var(--green); border: 1.5px solid var(--ink); }
.fs-num .ic { width: 1.7rem; height: 1.7rem; }
.fs-head h3 { margin: 0; font-size: 1.4rem; }
.fs-head p { margin: 0; font-family: var(--hand); color: var(--red); font-size: 1rem; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px; margin-bottom: 20px; box-shadow: var(--sh-1); }
.filter-bar .field { margin-bottom: 0; flex: 1 1 170px; min-width: 150px; }
.filter-bar .field.grow { flex: 3 1 260px; }
.filter-bar .actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 759px) {
    .filter-bar.tight { gap: 10px; padding: 12px; }
    .filter-bar.tight .field { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .filter-bar.tight .field label { font-size: .85rem; }
    .filter-bar.tight .actions { flex: 1 1 100%; }
    .filter-bar.tight .actions .btn { flex: 1; justify-content: center; }
}
.search-box { position: relative; }
.search-box > .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--sepia); pointer-events: none; }
.search-box input { padding-left: 42px; padding-right: 44px; }
.search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; color: var(--muted); border-radius: 50%; }
.search-clear:hover { background: var(--paper-2); color: var(--ink); }
.search-clear[hidden] { display: none; }
.phone-field { position: relative; }
.phone-field .cc { position: absolute; left: 2px; top: 2px; bottom: 2px; display: grid; place-items: center; padding: 0 12px; border-right: 1.5px dashed var(--rule-dark); color: var(--ink-2); font-weight: 700; }
.phone-field input { padding-left: 66px; font-size: 1.25rem; letter-spacing: .06em; }
.otp-input { font-family: var(--mono) !important; font-size: 2rem !important; text-align: center; letter-spacing: .5em; padding-left: .5em !important; min-height: 4rem !important; font-weight: 700; }
.type-row { display: flex; gap: 10px; }
.type-row input { flex: 1; min-width: 0; }
.check-row { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; cursor: pointer; margin: 4px 0 0; }
.check-row input { width: 1.2rem; height: 1.2rem; margin: 3px 0 0; }
.check-row .hint { margin-top: 2px; font-weight: 400; }
.check-row.inline { align-self: center; margin: 0 4px 10px; }
.checkline { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 4px; padding: 12px 14px; border: 1.5px dashed var(--rule-dark); border-radius: var(--r); background: var(--paper); cursor: pointer; }
.checkline input { margin-top: 4px; width: 1.2rem; height: 1.2rem; flex: none; }
.checkline small { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; margin-top: 2px; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }

/* --------------------------------------------------------------- badges */

.badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 3px 11px; border-radius: 999px; border: 1px solid; font-size: .92rem; font-weight: 700; line-height: 1.45; }
.badge .ic { width: 1.05em; height: 1.05em; flex: none; }
.is-staff .badge { padding: 1px 9px; font-size: .8rem; line-height: 1.5; }
.is-staff .badge .ic { width: .95em; height: .95em; }
.badge.grey  { background: var(--neutral-bg); border-color: var(--neutral-line); color: var(--neutral); }
.badge.blue  { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.badge.green { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.badge.amber, .badge.wheat { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.badge.red   { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.badge.mine  { background: var(--ink); border-color: var(--ink); color: #fff; }
.state { font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.state.off { color: var(--faint); }
.state.warn { color: var(--warn); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink-2); font-size: .95rem; }
.tag-list { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.crop-ic { width: 1.5em; height: 1.5em; margin: -3px 0; vertical-align: -.38em; }
.crop-name { display: inline-flex; align-items: center; gap: 6px; }
.token-txt { font-family: var(--mono); font-weight: 700; font-size: .88rem; color: var(--ink); background: var(--paper-2); padding: 2px 8px; border-radius: var(--r-xs); border: 1px dashed var(--rule-dark); white-space: nowrap; text-decoration: none; }
a.token-txt:hover { border-color: var(--red); color: var(--ink); }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: .01em; }
.sev { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem; }
.sev.blocking { color: var(--bad); }
.sev.warning { color: var(--warn); }

/* -------------------------------------------------------------- notices */

.notice { position: relative; display: block; padding: 14px 16px 14px 56px; margin-bottom: 18px; border: 1px solid; border-left-width: 5px; border-radius: var(--r); font-size: 1rem; line-height: 1.5; }
.notice::before { content: ""; position: absolute; left: 16px; top: 13px; width: 26px; height: 26px; background: currentColor;
    -webkit-mask: var(--m, var(--m-info)) center / contain no-repeat; mask: var(--m, var(--m-info)) center / contain no-repeat; }
.notice h3 { margin: 0 0 4px; font-size: 1.15rem; color: inherit; }
.notice p { margin: 0 0 8px; }
.notice p:last-child { margin-bottom: 0; }
.notice ul { margin: 8px 0; padding-left: 18px; }
.notice a:not(.btn) { color: inherit; font-weight: 700; }
.notice .btn { margin-top: 10px; }
.notice.info    { --m: var(--m-info); background: var(--info-bg); border-color: var(--info-line); border-left-color: var(--info); color: #1f4a6e; }
.notice.success { --m: var(--m-ok);   background: var(--ok-bg);   border-color: var(--ok-line);   border-left-color: var(--ok); color: #234f2b; }
.notice.warning { --m: var(--m-warn); background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--warn); color: #6b4506; }
.notice.error   { --m: var(--m-bad);  background: var(--bad-bg);  border-color: var(--bad-line);  border-left-color: var(--bad); color: #7f1f18; }
.notice.small { font-size: .92rem; padding-top: 10px; padding-bottom: 10px; padding-left: 48px; }
.notice.small::before { top: 10px; left: 15px; width: 21px; height: 21px; }
.grid > .notice { align-self: start; }

/* -------------------------------------------------------------- tables */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .98rem; }
table.data th { text-align: left; white-space: nowrap; padding: 11px 14px 9px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .95rem; color: var(--sepia); border-bottom: 1.5px solid var(--ink); background: var(--card); }
table.data th .ic { color: var(--sepia); }
table.data td { padding: 13px 14px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: #fbfcf7; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data.compact td, table.data.compact th { padding-top: 6px; padding-bottom: 6px; }
.is-staff table.data td { padding: 11px 13px; }
/* sticky action column */
table.data td:last-child:has(.btn, form), table.data th:last-child:empty { position: sticky; right: 0; z-index: 1; background: var(--card); box-shadow: inset 1px 0 0 var(--rule-2); }
@media (max-width: 759px) {
    table.data.stack, table.data.stack tbody, table.data.stack tr, table.data.stack td { display: block; }
    table.data.stack thead { display: none; }
    table.data.stack tr { padding: 12px 0 14px; border-bottom: 1px solid var(--rule-2); }
    table.data.stack tbody tr:last-child { border-bottom: 0; }
    table.data.stack td { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; justify-content: space-between;
        padding: 4px 0; border: 0; text-align: right; }
    table.data.stack td::before { content: attr(data-label); flex: none; font-family: var(--serif); font-style: italic;
        font-size: .95rem; color: var(--sepia); text-align: left; }
    table.data.stack td.lead { justify-content: flex-start; font-weight: 700; font-size: 1.05rem; padding-bottom: 8px; }
    table.data.stack td.lead::before { display: none; }
    table.data.stack td.go { padding-top: 10px; }
    table.data.stack td.go::before { display: none; }
    table.data.stack td.go .btn { width: 100%; justify-content: center; }
    table.data.stack td:last-child:has(.btn, form) { position: static; box-shadow: none; }
    table.data.stack tbody tr:hover td { background: none; }
    table.data.stack .sub-line { flex: 1 0 100%; text-align: right; }
    table.data.stack tr.row-high { border-left: 4px solid var(--bad); padding-left: 10px; }
    table.data.stack tr.row-high td:first-child { border-left: 0; padding-left: 0; }
}
.row-high td:first-child { border-left: 4px solid var(--bad); padding-left: 12px; }
.row-review td { background: var(--warn-bg); }
.row-review td:first-child { border-left: 4px solid var(--gold); padding-left: 12px; }
.row-off { opacity: .6; }
.who { display: flex; align-items: center; gap: 11px; min-width: 0; }
td .who { min-width: 13rem; }
.who-text { min-width: 0; line-height: 1.3; }
.who-text a, .who-text strong { font-weight: 700; color: var(--ink); text-decoration: none; }
.who-text a:hover { color: var(--green); text-decoration: underline; }
.sub-line { display: block; font-size: .85rem; color: var(--muted); }
td .who-text .sub-line { white-space: nowrap; }
.money, td.num, th.num, .stat .n { font-variant-numeric: tabular-nums; }
.money { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.15; color: var(--ink); }
.is-staff .money { font-size: 1.1rem; }
@media (max-width: 759px) { table.data.stack td.money { font-size: 1.5rem; } }

dl.kv { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { dl.kv { grid-template-columns: minmax(140px, 38%) minmax(0, 1fr); } }
dl.kv dt { display: flex; align-items: center; gap: 8px; padding: 12px 0 0; color: var(--muted); font-size: .92rem; }
dl.kv dt .ic { color: var(--sepia); width: 1.3rem; height: 1.3rem; }
dl.kv dd { margin: 0; padding: 2px 0 12px; font-weight: 600; border-bottom: 1px dashed var(--rule-2); overflow-wrap: anywhere; }
@media (min-width: 620px) { dl.kv dt { padding: 12px 12px 12px 0; border-bottom: 1px dashed var(--rule-2); } dl.kv dd { padding: 12px 0; } }
dl.kv dt:nth-last-of-type(1), dl.kv dd:last-of-type { border-bottom: 0; }

.facts { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .facts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { padding: 10px 12px; min-width: 0; background: var(--paper); border: 1px dashed var(--rule-dark); border-radius: var(--r-sm); }
.fact .k { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.fact .k .ic { width: 1.2rem; height: 1.2rem; color: var(--sepia); }
.fact .v { margin-top: 4px; font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.fact .v small { font-weight: 400; font-size: .82rem; color: var(--muted); }

/* ------------------------------------------------------------- toasts */

.toasts { position: fixed; z-index: 80; right: 20px; bottom: 20px; display: grid; gap: 10px; width: min(26rem, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 14px 16px; background: var(--card); color: var(--ink); font-size: 1rem; font-weight: 600;
    border: 1.5px solid var(--ink); border-left: 6px solid var(--ok); border-radius: var(--r); box-shadow: 4px 4px 0 var(--rule-dark); animation: toast-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) rotate(-1deg); } }
.toast[hidden] { display: none; }
.toast > .ic { flex: none; width: 1.5rem; height: 1.5rem; color: var(--ok); }
.toast.warning { border-left-color: var(--warn); }
.toast.warning > .ic { color: var(--warn); }
.toast-text { flex: 1; min-width: 0; }
.toast-close { flex: none; display: grid; place-items: center; padding: 2px; background: none; border: 0; color: var(--muted); cursor: pointer; }
.toast-close[hidden] { display: none; }
body.is-public .toasts { bottom: 90px; }
@media (max-width: 560px) { .toasts { left: 12px; right: 12px; width: auto; } }
@media (max-width: 759px) { .has-tabbar .toasts { bottom: calc(var(--tabbar-h) + 76px); } }

/* ------------------------------------------ slot booked: the big "done" */

dialog.celebrate { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0;
    background: rgba(16, 41, 30, .72); display: grid; place-items: center; animation: cel-fade .25s ease-out both; }
dialog.celebrate:not([open]) { display: none; }
dialog.celebrate::backdrop { background: transparent; }
dialog.celebrate.closing { animation: cel-out .22s ease-in forwards; }
.cel-card { position: relative; width: min(24rem, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--card) var(--grain); color: var(--ink);
    border: 1.5px solid var(--ink); border-radius: var(--r-lg); padding: 34px 24px 22px; text-align: center; box-shadow: 6px 6px 0 var(--red); animation: cel-rise .5s cubic-bezier(.2, .9, .3, 1.15) both; }
.cel-mark { position: relative; width: 118px; height: 118px; margin: 0 auto 14px; }
.cel-check { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.cel-disc { fill: var(--green); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: cel-pop .55s cubic-bezier(.3, 1.6, .5, 1) .15s forwards; }
.cel-tick { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: cel-draw .42s ease-out .6s forwards; }
.cel-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--green); opacity: 0; animation: cel-ripple 1.3s ease-out .45s 2; }
.cel-ring.r2 { animation-delay: .85s; }
.cel-spark { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--gold); opacity: 0; animation: cel-burst .9s ease-out .6s forwards; }
.cel-spark:nth-of-type(even) { background: var(--red); }
.cel-body > * { animation: cel-up .45s ease-out .8s both; }
.cel-body h2 { margin: 0; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.3rem); }
.cel-label { margin: 14px 0 0; font-family: var(--hand); font-size: 1.1rem; color: var(--red); }
.cel-token { margin: 0; font-family: var(--mono); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem); font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; }
.cel-when { margin: 10px 0 18px; color: var(--ink-2); line-height: 1.45; }
.cel-risk { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 10px 12px; text-align: left; background: var(--warn-bg); color: var(--warn); border-radius: var(--r); font-size: .95rem; }
@keyframes cel-fade { from { opacity: 0; } }
@keyframes cel-out { to { opacity: 0; } }
@keyframes cel-rise { from { opacity: 0; transform: translateY(28px) scale(.92) rotate(-2deg); } }
@keyframes cel-pop { to { transform: scale(1); } }
@keyframes cel-draw { to { stroke-dashoffset: 0; } }
@keyframes cel-ripple { 0% { opacity: .55; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes cel-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-92px) scale(.3); } }
@keyframes cel-up { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------------------ help chat */

.assistant[hidden] { display: none; }
body:has(#assistant:not([hidden])) .page { padding-bottom: 92px; }
.assistant-launch { position: fixed; z-index: 70; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px 11px 14px;
    background: var(--red); color: #fff; border: 1.5px solid var(--ink); border-radius: 999px; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.assistant-launch:hover { background: var(--red-dark); }
.assistant-launch .ic { width: 1.6rem; height: 1.6rem; }
.assistant-panel { position: fixed; z-index: 75; right: 18px; bottom: 82px; display: flex; flex-direction: column; width: min(390px, calc(100vw - 24px)); height: min(580px, calc(100vh - 120px));
    background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: 6px 6px 0 var(--rule-dark); overflow: hidden; }
.assistant-panel[hidden] { display: none; }
.ap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--ink); color: #fff; }
.ap-title strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: #fff; }
.ap-title small { display: block; font-size: .85rem; color: rgba(255, 255, 255, .75); }
.ap-close { display: grid; place-items: center; padding: 4px; background: none; border: 0; color: rgba(255, 255, 255, .8); cursor: pointer; }
.ap-close:hover { color: var(--gold); }
.ap-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--paper) var(--grain); }
.ap-msg { max-width: 88%; padding: 9px 12px; font-size: 1rem; line-height: 1.45; border: 1px solid var(--rule); border-radius: var(--r); }
.ap-msg p { margin: 0; white-space: pre-line; }
.ap-msg.bot { align-self: flex-start; background: #fff; border-bottom-left-radius: 2px; }
.ap-msg.me { align-self: flex-end; background: var(--paper-2); border-color: var(--rule-dark); border-bottom-right-radius: 2px; }
.ap-msg.waiting p { color: var(--muted); font-family: var(--hand); }
.ap-link { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--green); }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.ap-chips[hidden] { display: none; }
.ap-chips button { padding: 6px 12px; background: #fff; border: 1.5px solid var(--rule-dark); border-radius: 999px; font: inherit; font-size: .88rem; color: var(--ink-2); cursor: pointer; text-align: left; }
.ap-chips button:hover { border-color: var(--ink); color: var(--ink); }
.ap-form { display: flex; gap: 6px; padding: 10px 14px 6px; }
.ap-form input { flex: 1; min-width: 0; }
.ap-form button { flex: none; display: grid; place-items: center; width: 48px; background: var(--ink); color: #fff; border: 0; border-radius: 50%; cursor: pointer; }
.ap-form button:disabled { opacity: .5; cursor: default; }
.ap-form .ap-mic { background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); }
.ap-form .ap-mic.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.ap-form .ap-mic[hidden] { display: none; }
.ap-note { margin: 0; padding: 0 14px 10px; font-size: .78rem; color: var(--muted); }
body:has(.actionbar) .assistant-launch { bottom: 96px; }
body:has(.actionbar) .assistant-panel { bottom: 158px; height: min(520px, calc(100vh - 190px)); }
@media (max-width: 759px) {
    .has-tabbar .assistant-launch { bottom: calc(var(--tabbar-h) + 12px); padding: 10px; }
    .has-tabbar .assistant-launch span { display: none; }
    .has-tabbar .assistant-panel { bottom: calc(var(--tabbar-h) + 70px); height: calc(100vh - var(--tabbar-h) - 110px); }
}
@media (max-width: 560px) {
    .assistant-launch { right: 12px; bottom: 12px; }
    .assistant-panel, body:has(.actionbar) .assistant-panel { left: 8px; right: 8px; width: auto; }
}
@media print { .assistant { display: none !important; } }

/* ------------------------------------------------------ progress tracker */

.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.track li { position: relative; text-align: center; padding: 0 4px; }
.track li::before { content: ""; position: absolute; top: 21px; right: 50%; width: 100%; border-top: 2.5px dashed var(--rule-dark); }
.track li:first-child::before { display: none; }
.track .dot { position: relative; z-index: 1; margin: 0 auto 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 2px solid var(--rule-dark); color: var(--faint); }
.track .dot .ic { width: 1.3rem; height: 1.3rem; stroke-width: 2.2; }
.track .lbl { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); line-height: 1.25; }
.track li.done::before { border-top-style: solid; border-color: var(--green); }
.track li.now::before { border-color: var(--green); }
.track li.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.track li.done .lbl { color: var(--ink-2); }
.track li.now .dot { border-color: var(--red); color: var(--red); background: #fff; box-shadow: 0 0 0 5px var(--mark); animation: now-pulse 2s ease-in-out infinite; }
.track li.now .lbl { color: var(--ink); font-weight: 700; }
.track li.fail::before { border-color: var(--bad-line); }
.track li.fail .dot { background: var(--bad); border-color: var(--bad); color: #fff; }
.track li.fail .lbl { color: var(--bad); font-weight: 700; }
@keyframes now-pulse { 50% { box-shadow: 0 0 0 9px rgba(192, 88, 47, .08); } }
.track.compact .dot { width: 30px; height: 30px; margin-bottom: 5px; }
.track.compact .dot .ic { width: .95rem; height: .95rem; }
.track.compact li::before { top: 14px; border-top-width: 2px; }
.track.compact .lbl { font-size: .72rem; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; display: flex; gap: 14px; padding: 0 0 18px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 20px; top: 44px; bottom: 4px; border-left: 2px dashed var(--rule-dark); }
.timeline li:last-child::before { display: none; }
.tl-ic { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--paper-2); color: var(--green); border: 1.5px solid var(--rule-dark); }
.tl-ic .ic { width: 1.3rem; height: 1.3rem; }
.tl-ic.red { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.tl-ic.amber { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.tl-ic.blue { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.tl-ic.green { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.tl-ic.grey { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-line); }
.tl-body { flex: 1; min-width: 0; padding-top: 3px; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: .85rem; color: var(--muted); margin-bottom: 2px; }
.tl-meta strong { color: var(--ink); font-size: 1rem; }
.tl-msg { font-size: 1rem; color: var(--ink-2); overflow-wrap: anywhere; }
.timeline.roomy li { padding-bottom: 20px; }
.timeline.roomy .tl-body { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--sh-1); }
.compact-tl li { padding-bottom: 12px; }
.change { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 2px 10px 2px 0; font-size: .85rem; }
.change b { color: var(--ink-2); }
.change s { color: var(--muted); text-decoration-color: var(--bad); }
.change ins { text-decoration: none; font-weight: 700; background: var(--warn-bg); padding: 0 5px; border-radius: 4px; }
.change .ic { width: .9em; height: .9em; color: var(--faint); }
.act .ic { color: var(--green); }

.datetile { display: inline-block; flex: none; width: 4.4rem; vertical-align: top; overflow: hidden; text-align: center; background: #fff; border: 1.5px solid var(--ink); border-radius: var(--r-sm); box-shadow: 2px 2px 0 var(--rule-dark); }
.datetile > span { display: block; }
.datetile .m { background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; padding: 2px 0; }
.datetile .d { font-family: var(--serif); font-size: 1.8rem; line-height: 1; padding: 6px 0 0; }
.datetile .w { font-size: .72rem; color: var(--muted); padding: 0 3px 5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.datetile.today .m { background: var(--red); }

/* ----------------------------------------------------- farmer dashboard */

.welcome { position: relative; margin-bottom: 22px; padding: 6px 0 18px; border-bottom: 1.5px solid var(--ink); }
.welcome h1 { margin: 0; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.15; }
.welcome h1 .mark { background: linear-gradient(transparent 62%, var(--mark) 62%, var(--mark) 92%, transparent 92%); padding: 0 .08em; }
.welcome .meta-row { margin-top: 8px; }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 26px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.tile { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px 14px; text-align: center; text-decoration: none; color: var(--ink);
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s, border-color .2s; }
/* height:auto so the width/height attributes don't beat the aspect-ratio */
.tile img { width: 100%; height: auto; max-width: 170px; aspect-ratio: 4 / 3; object-fit: contain; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.tile strong { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.tile small { font-size: .82rem; color: var(--muted); line-height: 1.3; }
.tile:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-3px); box-shadow: 4px 4px 0 var(--red); }
.tile:hover img { transform: scale(1.05) rotate(-1.5deg); }
.tile.main { border-color: var(--ink); box-shadow: 3px 3px 0 var(--red); }
.tile .pill { position: absolute; top: 10px; right: 10px; }
.tile::before { content: ""; position: absolute; z-index: 1; top: -13px; left: 50%; width: 22px; height: 27px; margin-left: -11px;
    background: url("../img/art/pin.svg") center / contain no-repeat; pointer-events: none; }
.tile:nth-child(3n+1)::before { transform: rotate(-6deg) translateX(-3px); }
.tile:nth-child(3n+2)::before { transform: rotate(4deg) translateX(2px); }
.tile:nth-child(3n)::before { transform: rotate(-2deg); }
.tile::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--card); border: 1px solid var(--rule);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.tile:nth-child(4n+1)::after { transform: rotate(-3deg) translate(4px, 5px); }
.tile:nth-child(4n+2)::after { transform: rotate(2.5deg) translate(-4px, 4px); }
.tile:nth-child(4n+3)::after { transform: rotate(-2.5deg) translate(3px, 6px); }
.tile:nth-child(4n)::after { transform: rotate(3deg) translate(-3px, 5px); }
@media (max-width: 759px) {
    .tile.dup { display: none; }
    .tiles { grid-template-columns: minmax(0, 1fr); }
    .tile { flex-direction: row; text-align: left; }
    .tile img { width: 44%; }
}

.list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; }
.list-head h2 { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 1.6rem; }
.list-head h2 .ic { width: 2.3rem; height: 2.3rem; padding: .5rem; border-radius: 50%; background: var(--paper-2); color: var(--green); }

.bookcards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .bookcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bookcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sh-1); transition: box-shadow .2s, border-color .2s; }
.bookcard:hover { border-color: var(--ink); box-shadow: 4px 4px 0 var(--rule-dark); }
.bc-top { display: flex; gap: 14px; align-items: flex-start; }
.bc-main { flex: 1; min-width: 0; }
.bc-main h3 { margin: 0 0 4px; font-size: 1.35rem; }
.bc-main h3 a { color: inherit; text-decoration: none; }
.bc-main .meta-row { margin-top: 0; }
.bc-badges { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.bc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--rule-dark); }

.voice-banner { position: relative; display: flex; align-items: center; gap: 18px; margin: 0 0 22px; padding: 16px 20px; text-decoration: none; color: var(--ink);
    background: var(--card); border: 2px dashed var(--ink); border-radius: var(--r-lg); transition: background .2s, border-style .2s; }
.voice-banner:hover { background: #fff; color: var(--ink); border-style: solid; }
.vb-mic { position: relative; display: grid; place-items: center; flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
.vb-mic::before, .vb-mic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); opacity: 0; animation: mic-ring 2.4s ease-out infinite; }
.vb-mic::after { animation-delay: 1.2s; }
@keyframes mic-ring { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.vb-mic .ic { width: 2.4rem; height: 2.4rem; stroke-width: 2; }
.vb-text { flex: 1; min-width: 0; }
.vb-text strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.15; }
.vb-text span { display: block; margin-top: 3px; font-size: .98rem; color: var(--ink-2); }
.vb-go { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--ink); }
.vb-go .ic { width: 1.4rem; height: 1.4rem; }
@media (max-width: 560px) { .voice-banner { gap: 12px; padding: 14px; } .vb-mic { width: 3.6rem; height: 3.6rem; } .vb-mic .ic { width: 1.9rem; height: 1.9rem; } .vb-text strong { font-size: 1.35rem; } .vb-go { display: none; } }

.voice-form label { margin-bottom: 6px; }
.voice-form textarea { min-height: 5rem; resize: vertical; font-size: 1.15rem; }
.voice-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.voice-mic { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.voice-mic[hidden] { display: none; }
.voice-form .voice-lang { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; font-size: .9rem; color: var(--muted); }
.voice-lang select { width: auto; min-height: 2.6rem; }
.btn.mic { background: var(--red); border-color: var(--red); box-shadow: 3px 3px 0 var(--ink); }
.btn.mic .ic { width: 1.6rem; height: 1.6rem; }
.mic.on { background: var(--bad); border-color: var(--bad); animation: rec 1.2s ease-in-out infinite; }
@keyframes rec { 50% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 8px rgba(163, 38, 29, .18); } }
.mic-status { margin: 10px 0 0; min-height: 1.4em; font-family: var(--hand); font-size: 1.05rem; color: var(--red); }
.voice-eg { list-style: none; margin: 0 0 12px; padding: 0; }
.voice-eg li { padding: 9px 0 9px 30px; border-bottom: 1px dashed var(--rule-2); color: var(--ink-2); font-family: var(--hand); font-size: 1.1rem; position: relative; }
.voice-eg li::before { content: "\201C"; position: absolute; left: 2px; top: 2px; font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--red); }
table.understood th { width: 30%; text-align: left; vertical-align: top; }
table.understood .heard { display: block; margin-top: 2px; font-family: var(--hand); font-size: .92rem; color: var(--red); }
.voice-slot { margin: 0 0 16px; }
.voice-slot > div { display: grid; grid-template-columns: 38% 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--rule-2); }
.voice-slot dt { font-size: .9rem; color: var(--muted); }
.voice-slot dd { margin: 0; }
.voice-slot dd .muted { display: block; font-size: .85rem; }
[data-js][hidden] { display: none !important; }
.voice-say { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 14px; padding: 14px 18px; background: #fff; border: 1.5px solid var(--ink); border-radius: var(--r-lg); border-bottom-left-radius: 2px; box-shadow: 4px 4px 0 var(--rule-dark); }
.voice-said { flex: 1 1 20rem; margin: 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; color: var(--ink); }
.voice-heard { margin: -6px 0 14px; font-family: var(--hand); color: var(--red); font-size: 1.05rem; }
.voice-answer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }
.voice-answer .btn, .voice-choices.two .btn { min-height: 4.5rem; font-size: 1.35rem; border-radius: var(--r-lg); }
.voice-answer .btn .ic, .voice-choices .btn .ic { width: 1.9rem; height: 1.9rem; }
.btn.yes-btn { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
.btn.yes-btn:hover { background: #245a2f; color: #fff; }
.btn.no-btn { background: var(--card); border-color: var(--bad); color: var(--bad); box-shadow: 3px 3px 0 var(--bad-line); }
.btn.no-btn:hover { background: var(--bad-bg); color: var(--bad); }
.voice-crops { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.voice-crops .btn { min-height: 3.6rem; padding-inline: 18px; font-size: 1.15rem; }
.voice-crops .crop-ic { width: 2rem; height: 2rem; }
.voice-qty { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 16px; }
.voice-qty .field { margin: 0; }
.voice-qty input { font-size: 1.35rem; max-width: 10rem; }
.voice-choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin: 0 0 16px; }
.voice-choices .btn { justify-content: center; min-height: 3.5rem; }
.voice-choices[hidden], [data-voice-start][hidden], [data-manual][hidden] { display: none !important; }
.voice-reg-summary dd { overflow-wrap: anywhere; }
.cancel-list { list-style: decimal; margin: 0; padding-left: 22px; }
.cancel-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px dashed var(--rule-2); }
.cancel-list li > div { flex: 1; min-width: 190px; display: flex; flex-direction: column; line-height: 1.3; }
.cancel-list li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------- centres */

.centres { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 780px) { .centres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .centres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.centre { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sh-1); transition: border-color .2s, box-shadow .2s, transform .2s; }
.centre:hover { border-color: var(--ink); box-shadow: 4px 4px 0 var(--rule-dark); transform: translateY(-2px); }
.centre.mine { border-color: var(--ink); box-shadow: 3px 3px 0 var(--red); }
.centre-top { display: flex; gap: 14px; align-items: center; }
.ct-main { flex: 1; min-width: 0; }
.centre-ic { display: block; flex: none; width: 5.2rem; }
.centre-ic img { display: block; width: 100%; height: auto; }
.centre-ic .ic { width: 2.2rem; height: 2.2rem; color: var(--green); }
.centre h3 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.centre h3 a { color: inherit; text-decoration: none; }
.centre h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.centre .place { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--muted); font-size: .92rem; }
.centre .place .ic { color: var(--red); }
.centre-next { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--paper); border: 1px dashed var(--rule-dark); }
.centre-next > .ic { width: 2rem; height: 2rem; color: var(--green); }
.centre-next small { display: block; font-family: var(--hand); font-size: .95rem; color: var(--red); line-height: 1.1; }
.centre-next strong { display: block; font-size: 1.05rem; }
.centre-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.centre-cap { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); }
.centre .btn, .centre .badge { position: relative; z-index: 1; }
.hl-bad { color: var(--bad); }

/* ------------------------------------------------------------ slot picker */

.stepcard .card-head { background: var(--paper); border-radius: var(--r) var(--r) 0 0; }
.stepnum { display: inline-grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--serif); font-size: 1.25rem; box-shadow: 2px 2px 0 var(--ink); }
.day { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px dashed var(--rule-dark); }
.day:first-child { padding-top: 2px; }
.day:last-of-type { border-bottom: 0; }
.day-slots { flex: 1; min-width: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.slot { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 14px; min-height: 3.8rem; border-radius: var(--r-sm); background: #fff; border: 1.5px solid var(--rule-dark); transition: border-color .15s, box-shadow .15s, transform .15s; }
.slot:hover { border-color: var(--ink); transform: translateY(-1px); }
.slot input[type=radio] { -webkit-appearance: none; appearance: none; margin: 0; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--rule-dark); background: #fff; display: grid; place-items: center; cursor: pointer; }
.slot input[type=radio]::after { content: ""; width: .6rem; height: .35rem; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.slot input[type=radio]:checked { border-color: var(--green); background: var(--green); }
.slot input[type=radio]:checked::after { transform: rotate(-45deg) scale(1); }
.slot input[type=radio]:focus-visible { box-shadow: var(--ring); }
.slot:has(input:checked) { border-color: var(--ink); background: var(--ok-bg); box-shadow: 3px 3px 0 var(--red); }
.slot-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.slot .tw { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot .cap { font-size: .8rem; color: var(--muted); font-weight: 600; }
.slot .cap.tight { color: var(--warn); }
.slot.full { cursor: not-allowed; background: var(--paper); border-style: dashed; }
.slot.full:hover { transform: none; border-color: var(--rule-dark); }
.slot.full .tw { color: var(--faint); text-decoration: line-through; }
.slot.full input { opacity: .4; }
.capbar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; background: var(--rule-2); border-radius: 3px; overflow: hidden; }
.capbar span { display: block; height: 100%; background: var(--green); }
.capbar span.mid { background: var(--gold); }
.capbar span.hi { background: var(--bad); }
.capbar.inline { position: static; flex: 1; height: 7px; }
.util-cell { display: flex; align-items: center; gap: 10px; min-width: 140px; }
@media (max-width: 600px) {
    .day { flex-direction: column; gap: 10px; }
    .day-slots { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .slot { padding: 10px; gap: 8px; }
}
.actionbar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 20px; padding: 10px 10px 10px 16px; border-radius: var(--r-lg); background: var(--ink); color: #d9e6dc; border: 1.5px solid var(--ink); box-shadow: 0 18px 30px -18px var(--shadow); }
.actionbar .ab-text { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; }
.actionbar .ab-text .ic { color: var(--gold); }
.actionbar .btn.secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); box-shadow: none; }
.actionbar .btn.wheat { box-shadow: 3px 3px 0 #000; }
@media (max-width: 759px) { .has-tabbar .actionbar { bottom: calc(var(--tabbar-h) + 8px); } }
@media (max-width: 600px) { .actionbar .ab-text { display: none; } .actionbar .btn-row { width: 100%; } .actionbar .btn { flex: 1; } }

.forecast { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.wx { position: relative; display: block; min-width: 0; padding: 12px 10px; text-align: center; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); }
.wx .day { display: block; padding: 0; border: 0; font-weight: 700; font-size: .92rem; color: var(--ink); }
.wx .date { font-size: .78rem; color: var(--muted); }
.wx .glyph { margin: 6px 0 2px; display: grid; place-items: center; }
.wx .glyph svg { width: 3.4rem; height: 3.4rem; overflow: visible; }
.wx .rain { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wx .rain small { font-family: var(--sans); font-size: .75rem; color: var(--muted); }
.wx .desc { font-size: .8rem; color: var(--muted); text-transform: capitalize; min-height: 1.3em; }
.wx .hum { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); font-weight: 600; }
.wx .hum .ic { width: .95rem; height: .95rem; color: var(--info); }
.meter { flex: 1; height: 6px; background: var(--rule-2); border-radius: 6px; overflow: hidden; display: block; }
.meter span { display: block; height: 100%; border-radius: 6px; background: var(--info); }
.wx.wet { background: var(--info-bg); border-color: var(--info-line); }
.wx.wet .rain { color: var(--info); }
a.wx:hover, .wx[role="button"]:hover { border-color: var(--ink); cursor: pointer; }
a.wx.on, .wx[role="button"].on { border-color: var(--ink); box-shadow: 3px 3px 0 var(--red); }
.wx .more { margin-top: 8px; font-size: .78rem; font-weight: 700; color: var(--green); text-decoration: underline; text-decoration-color: var(--red); }
.cw-hint { margin: 12px 0 0; font-family: var(--hand); color: var(--red); font-size: 1rem; }
.cw-day { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--rule-dark); }
.cw-day-title { margin: 0 0 10px; font-size: 1.2rem; }
.day-detail { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--rule-dark); }
table.wx-hours td, table.wx-hours th { padding: 8px 10px; }
table.wx-hours tr.wet td { background: var(--info-bg); }
.wx-sky { display: inline-flex; align-items: center; gap: 8px; text-transform: capitalize; white-space: nowrap; }
.wx-sky svg { width: 1.9rem; height: 1.9rem; overflow: visible; }
.slot-weather { margin: 2px 0 14px; padding: 12px 14px; background: var(--info-bg); border: 1px solid var(--info-line); border-left: 5px solid var(--info); border-radius: var(--r); }
.slot-weather table.wx-hours tr.in-slot td { background: #fff; font-weight: 700; }
.slot-weather table.wx-hours tr.in-slot td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.sw-sum { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.sw-sum svg { flex: none; width: 2.4rem; height: 2.4rem; overflow: visible; }
.sw-far { margin: 0; color: var(--muted); }
.sw-slot { margin: 0 0 10px; }
.slot-weather .sw-wet { margin: 0 0 10px; }

/* --------------------------------------------------------- booking page */

.ticket { position: relative; margin-bottom: 22px; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: 5px 5px 0 var(--rule-dark); }
.ticket-head { position: relative; display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; padding: 18px calc(clamp(110px, 24vw, 220px) + 12px) 18px 20px; border-bottom: 2px dashed var(--ink); }
.ticket-head::after { content: ""; position: absolute; right: 10px; bottom: 6px; width: clamp(110px, 24vw, 220px); aspect-ratio: 4 / 3; background: var(--art) right bottom / contain no-repeat; pointer-events: none; }
.th-main { flex: 1 1 260px; min-width: 0; }
.ticket-head small { display: block; font-family: var(--hand); font-size: 1.1rem; color: var(--red); line-height: 1.2; }
.ticket-token { font-family: var(--mono); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); font-weight: 700; letter-spacing: .03em; line-height: 1.15; overflow-wrap: anywhere; }
.ticket-head .meta-row { color: var(--ink-2) !important; }
.ticket-body { position: relative; padding: 20px; }
.ticket-body::before, .ticket-body::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.ticket-body::before { left: -13px; clip-path: inset(0 0 0 50%); }
.ticket-body::after { right: -13px; clip-path: inset(0 50% 0 0); }
.ticket .track { margin: 4px 0 22px; }
@media (max-width: 600px) { .ticket-head { padding-right: 20px; } .ticket-head::after { position: relative; order: -1; width: 150px; margin-left: auto; right: 0; } }

.queue { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ring { --p: 0; flex: none; width: 8.6rem; height: 8.6rem; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--red) calc(var(--p) * 1%), var(--paper-2) 0); border: 1.5px solid var(--ink); }
.ring-in { width: 78%; height: 78%; border-radius: 50%; background: var(--card); display: grid; place-content: center; text-align: center; border: 1.5px solid var(--ink); }
.ring-in strong { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; line-height: 1; }
.ring-in span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.queue-text { flex: 1 1 240px; }
.queue-text h3 { margin: 0 0 6px; font-size: 1.3rem; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: #fff; border: 1px dashed var(--rule-dark); font-weight: 600; font-size: 1rem; }
.checklist li > .ic { width: 1.9rem; height: 1.9rem; padding: .35rem; border-radius: 50%; background: var(--paper-2); color: var(--green); }
.checklist .token-txt { margin-left: auto; }

.checks { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .checks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.check { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; text-align: center; background: var(--card); border: 1px solid var(--ok-line); border-top: 5px solid var(--ok); border-radius: var(--r); box-shadow: var(--sh-1); }
.check .c-ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.check .c-ic .ic { width: 1.7rem; height: 1.7rem; stroke-width: 2.4; }
.check strong { display: block; font-size: .98rem; line-height: 1.25; }
.check span { display: block; font-size: .85rem; color: var(--ok); font-weight: 700; }
.check.bad { border-color: var(--bad-line); border-top-color: var(--bad); }
.check.bad .c-ic { background: var(--bad-bg); color: var(--bad); }
.check.bad span { color: var(--bad); }
.check.warn { border-color: var(--warn-line); border-top-color: var(--gold); }
.check.warn .c-ic { background: var(--warn-bg); color: var(--warn); }
.check.warn span { color: var(--warn); }
.issues { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.issues li { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .7); border: 1px dashed rgba(0, 0, 0, .12); color: var(--ink-2); }
.issues .i-text { flex: 1 1 240px; min-width: 0; }
.issues form { margin-left: auto; }

/* ----------------------------------------------------------------- auth */

.auth { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1000px; margin: 0 auto; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: 6px 6px 0 var(--rule-dark); }
@media (min-width: 860px) { .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 520px; } }
.auth-art { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 24px; text-align: center;
    background: var(--paper-2) var(--grain); border-bottom: 1.5px dashed var(--ink); }
@media (min-width: 860px) { .auth-art { border-bottom: 0; border-right: 1.5px dashed var(--ink); padding: 36px; } }
.auth-art img { display: block; width: min(100%, 340px); height: auto; }
.auth-art h2 { margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.auth-art p { margin: 0; font-family: var(--hand); font-size: 1.15rem; color: var(--red); }
.auth-art ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.auth-art li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.auth-art li .ic { width: 1.6rem; height: 1.6rem; color: var(--green); }
@media (max-width: 859px) { .auth-art img { width: 200px; } .auth-art ul { display: none; } }
.auth-form { padding: 26px 22px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 860px) { .auth-form { padding: 44px 48px; } }
.auth-form h1 { position: relative; margin: 0 0 18px; padding-bottom: 12px; font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem); }
.auth-form h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 150px; height: 10px; background: var(--scribble) center / 100% 100% no-repeat; }
.auth-form .lede { margin: -8px 0 20px; color: var(--ink-2); font-size: 1.1rem; }
.auth-alt { margin: 22px 0 0; padding-top: 16px; border-top: 1px dashed var(--rule-dark); color: var(--muted); text-align: center; }
.auth-alt a { font-weight: 700; }
.auth-form .notice { margin: 22px 0 0; }

.roster { margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--rule-dark); }
.roster-h { font-size: 1.2rem; margin: 0 0 8px; }
.roster form { margin: 0; }
.roster-list { list-style: none; margin: 0; padding: 0; }
.roster-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--rule-2); }
.roster-code { min-width: 4.2em; }
.roster-who { flex: 1; min-width: 0; line-height: 1.25; }
.roster-who small { display: block; font-size: .82rem; }

.verify { position: relative; max-width: 540px; margin: 20px auto; text-align: center; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r-lg); padding: 26px 24px 28px; box-shadow: 6px 6px 0 var(--ok); }
.verify.bad { box-shadow: 6px 6px 0 var(--bad); }
.verify-art { display: block; width: 190px; margin: 0 auto 4px; }
.vf-mark { display: inline-grid; place-items: center; width: 84px; height: 84px; margin: -40px 0 10px; border-radius: 50%; background: var(--ok); color: #fff; border: 3px solid var(--card); position: relative; }
.verify.bad .vf-mark { background: var(--bad); }
.vf-mark .ic { width: 3rem; height: 3rem; stroke-width: 3; }
.verify h1 { margin: 0 0 8px; font-size: 2rem; }
.vf-note { color: var(--muted); font-size: .9rem; margin-top: 14px; }

.phone-pass { max-width: 440px; margin: 0 auto; text-align: center; }
.pp-say { margin: 0 0 12px; font-family: var(--serif); font-size: 1.8rem; line-height: 1.2; }
.pp-say .ic { width: 2rem; height: 2rem; color: var(--red); }
.pp-qr { background: #fff; padding: 16px; border: 1.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: 5px 5px 0 var(--red); }
.pp-qr svg.qr { width: 100%; height: auto; max-width: 340px; display: block; margin: 0 auto; }
.pp-qr svg.qr path { fill: #000; }
.pp-token { font-family: var(--mono); font-size: 2.1rem; font-weight: 700; letter-spacing: .04em; margin: 16px 0 4px; }
.pp-when { font-size: 1.1rem; color: var(--ink-2); }
.pp-hint { color: var(--muted); font-size: .95rem; margin: 14px 0 18px; }

/* ------------------------------------------------ gate pass and receipt */

.gatepass { max-width: 780px; margin: 0 auto; background: #fff; color: #111; border: 1.5px solid #333; padding: 18px 22px 16px; box-shadow: 6px 6px 0 var(--rule-dark); }
.gp-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid #111; }
.gp-crest { flex: none; width: 48px; height: 48px; }
.gp-title { flex: 1; min-width: 0; }
.gp-org { font-size: .85rem; color: #444; }
.gp-title h2 { margin: 2px 0 0; font-size: 1.7rem; color: #111; }
.gp-ref { text-align: right; font-size: .85rem; line-height: 1.5; color: #333; }
.gp-copy { display: inline-block; margin-top: 3px; padding: 1px 8px; border: 1.5px solid #111; font-weight: 700; color: #111; }
.gp-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 14px 0; }
.gp-token .k, .qr-box .k { font-size: .85rem; color: #444; }
.gp-token .t { font-family: var(--mono); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 700; letter-spacing: .04em; line-height: 1.15; color: #111; }
.receipt .gp-token .t { font-family: var(--serif); font-weight: 400; }
.gp-when { margin-top: 4px; font-size: 1.05rem; font-weight: 600; }
.qr-box { text-align: center; }
.qr-box svg.qr { width: 124px; height: 124px; display: block; margin: 0 auto 2px; }
.qr-box svg.qr path { fill: #111; }
table.gp-form { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: .95rem; table-layout: fixed; }
table.gp-form caption { text-align: left; font-size: .85rem; font-weight: 700; color: #111; padding: 0 0 4px; }
table.gp-form th, table.gp-form td { border: 1px solid #777; padding: 6px 8px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
table.gp-form th { width: 19%; background: #f3f3ee; font-weight: 400; font-size: .85rem; color: #333; }
table.gp-form td { width: 31%; color: #111; }
table.gp-fill td { height: 2.4rem; }
table.gp-form tr.gp-sign td { height: 3.6rem; }
.gp-note { margin: 4px 0 0; font-size: .85rem; color: #333; }
.gp-tear { position: relative; margin: 18px -22px 14px; border-top: 1.5px dashed #555; text-align: center; }
.gp-tear span { position: relative; top: -.75em; padding: 0 10px; background: #fff; font-size: .78rem; color: #444; }
.gp-stub-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: .9rem; }
@media (max-width: 600px) {
    .gatepass { padding: 14px; }
    .gp-tear { margin-left: -14px; margin-right: -14px; }
    table.gp-form, table.gp-form tbody { display: block; }
    table.gp-form caption { display: block; }
    table.gp-form tr { display: grid; grid-template-columns: 42% 58%; }
    table.gp-form th, table.gp-form td { display: block; width: auto; margin: 0 0 -1px -1px; }
    table.gp-form tr > :nth-child(3), table.gp-form tr > :nth-child(4) { grid-row: 2; }
}

/* ---------------------------------------------------------------- payments */

.pay-hero { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
    padding: 18px calc(clamp(110px, 24vw, 220px) + 12px) 18px 20px; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: 5px 5px 0 var(--rule-dark); }
.pay-hero::after { content: ""; position: absolute; right: 10px; bottom: 6px; width: clamp(110px, 24vw, 220px); aspect-ratio: 4 / 3; background: var(--art) right bottom / contain no-repeat; }
.pay-hero small { font-family: var(--hand); font-size: 1.1rem; color: var(--red); }
.ph-amount { font-family: var(--serif); font-size: clamp(2.3rem, 1.7rem + 2.2vw, 3.3rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ph-stage .badge, .ph-stage .state { font-size: 1rem; padding: 4px 12px; }
@media (max-width: 600px) { .pay-hero { padding-right: 20px; } .pay-hero::after { position: relative; order: -1; width: 150px; margin-left: auto; right: 0; } }
.batch-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.batch-row h2 { margin: 0 0 4px; font-size: 1.5rem; }
.stage-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.stage-chips a { display: inline-flex; gap: 6px; align-items: center; padding: 5px 14px; border: 1.5px solid var(--rule-dark); border-radius: 999px; background: var(--card); color: var(--ink-2); text-decoration: none; font-size: .92rem; font-weight: 600; }
.stage-chips a span { color: var(--muted); font-variant-numeric: tabular-nums; }
.stage-chips a:hover { border-color: var(--ink); }
.stage-chips a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.stage-chips a.on span { color: var(--gold); }
.bank-checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.bank-checks li { display: flex; align-items: center; gap: 8px; font-size: .98rem; }
.bank-checks li small { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: .82rem; }
.bank-checks li.ok .ic { color: var(--ok); }
.bank-checks li.bad { color: var(--bad); font-weight: 600; }
.sub-head { font-size: 1.1rem; margin: 16px 0 4px; }
details.override summary { cursor: pointer; color: var(--muted); font-size: .92rem; }
details.override form { margin-top: 10px; }
.weigh-preview { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 14px; margin: 4px 0 14px; background: var(--ok-bg); border: 1px dashed var(--ok-line); border-radius: var(--r-sm); font-size: 1rem; }
.weigh-preview b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
details.grade-rules > summary { cursor: pointer; list-style: none; }
details.grade-rules > summary::-webkit-details-marker { display: none; }
details.grade-rules > summary::after { content: "+"; margin-left: auto; font-family: var(--serif); font-size: 1.6rem; line-height: 1; color: var(--red); }
details.grade-rules[open] > summary::after { content: "\2212"; }
table.rules td, table.rules th { vertical-align: top; }
table.rules .num, .roster .num { text-align: right; white-space: nowrap; }
table.rules tr.is-this td { background: var(--ok-bg); font-weight: 700; }
.rules-row { display: grid; gap: 4px 24px; margin: 14px 0 10px; }
@media (min-width: 760px) { .rules-row { grid-template-columns: 1fr 1fr; } }
.rules-h { font-size: 1.1rem; margin: 10px 0 4px; }
@media (max-width: 759px) { table.rules .when { display: none; } }

/* ---------------------------------------------------- registration stepper */

.stepper-head { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.stepper-head li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.stepper-head { counter-reset: st; }
.stepper-head li { counter-increment: st; }
.stepper-head li::before { content: counter(st); position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--rule-dark);
    background: #fff; color: var(--muted); font-family: var(--serif); font-size: 1.35rem; }
.stepper-head li::after { content: ""; position: absolute; top: 1.45rem; left: calc(50% + 1.6rem); right: calc(-50% + 1.6rem); border-top: 2.5px dashed var(--rule-dark); }
.stepper-head li:last-child::after { display: none; }
.stepper-head li.done::before { content: "\2713"; background: var(--green); border-color: var(--green); color: #fff; }
.stepper-head li.done::after { border-top-style: solid; border-color: var(--green); }
.stepper-head li.current { color: var(--ink); }
.stepper-head li.current::before { border-color: var(--ink); color: var(--ink); box-shadow: 3px 3px 0 var(--red); }
@media (max-width: 560px) {
    .stepper-head { margin-bottom: 38px; }
    .stepper-head li span { display: none; }
    .stepper-head li.current span { display: block; position: absolute; top: 3.4rem; white-space: nowrap; font-family: var(--hand); color: var(--red); font-size: 1rem; }
    .stepper-head li::before { width: 2.5rem; height: 2.5rem; }
    .stepper-head li::after { top: 1.2rem; left: calc(50% + 1.35rem); right: calc(-50% + 1.35rem); }
}
.is-stepper .reg-step:not(.current) { display: none; }
.is-stepper .fieldset + .fieldset { border-top: 0; padding-top: 0; margin-top: 0; }
.is-stepper .step-submit:not(.show) { display: none; }
.step-lede { margin: -4px 0 16px; color: var(--ink-2); max-width: 62ch; font-size: 1.05rem; }
.step-nav { display: flex; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--rule-dark); }
.step-nav [data-next] { margin-left: auto; }
.step-nav .btn[hidden], .stepper-head[hidden], .step-nav[hidden], .registry-box[hidden], [data-manual-box][hidden],
.land-foot[hidden], [data-remove-land][hidden], .review[hidden] { display: none !important; }
.registry-box { display: grid; gap: 10px; justify-items: start; padding: 14px 16px; margin-bottom: 8px; background: var(--ok-bg); border: 1px dashed var(--ok-line); border-radius: var(--r); }
.registry-box .kv { width: 100%; }
.review-list dd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.review-edit { flex: none; padding: 0; background: none; border: 0; color: var(--green); font: inherit; font-size: .85rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; cursor: pointer; }
.lands { display: grid; }
.land-row { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .7fr) auto; align-items: end; padding: 10px 0 2px; border-bottom: 1px dashed var(--rule-dark); }
.land-row .field { margin-bottom: 10px; }
.land-side { display: flex; align-items: center; gap: 6px; min-height: 2.6rem; margin-bottom: 10px; }
.land-row.from-registry input[readonly] { background: var(--ok-bg); }
@media (max-width: 700px) {
    .land-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .land-row > .field:first-child { grid-column: 1 / -1; }
    .land-side { grid-column: 1 / -1; justify-content: flex-end; min-height: 0; margin-top: -6px; }
}
.land-foot { margin: 12px 0 4px; }

/* ------------------------------------------------------------ admin bits */

.delay-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-top: 1px dashed var(--rule-2); }
.delay-row:first-of-type { border-top: 0; padding-top: 2px; }
.delay-input { display: flex; gap: 6px; align-items: center; }
.delay-input input { width: 88px; min-height: 2.4rem; padding: 6px 10px; }
.days-away { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 6px; border-radius: 50%; background: var(--paper-2); border: 1.5px solid var(--rule-dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.days-away.far { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

.gc-error[hidden], .scan-view[hidden], #grade-note-field[hidden], #scan-start[hidden] { display: none !important; }
.scanner .scan-view { position: relative; margin-top: 12px; background: #000; border-radius: var(--r); overflow: hidden; }
.scanner video { display: block; width: 100%; max-height: 62vh; object-fit: cover; }
.scan-frame { position: absolute; left: 50%; top: 50%; width: min(62%, 280px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid rgba(255, 255, 255, .9); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
.scan-frame::after { content: ""; position: absolute; left: 8%; right: 8%; top: 10%; height: 3px; background: var(--red); box-shadow: 0 0 12px var(--red); animation: scanline 2s ease-in-out infinite alternate; }
@keyframes scanline { to { top: 88%; } }
.scan-stop { position: absolute; right: 10px; top: 10px; }
.scan-art { display: block; width: min(260px, 70%); margin: 0 auto 10px; }
.type-row input { text-transform: uppercase; }
.type-row input::placeholder { text-transform: none; }
.gate-card { position: relative; background: var(--card); border: 1.5px solid var(--ink); border-left: 10px solid var(--neutral); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: 5px 5px 0 var(--rule-dark); margin-bottom: 20px; animation: toast-in .4s cubic-bezier(.2, .9, .3, 1.2) both; }
.gate-card.ok { border-left-color: var(--ok); background: linear-gradient(90deg, var(--ok-bg), var(--card) 55%); }
.gate-card.warn { border-left-color: var(--gold); background: linear-gradient(90deg, var(--warn-bg), var(--card) 55%); }
.gate-card.bad { border-left-color: var(--bad); background: linear-gradient(90deg, var(--bad-bg), var(--card) 55%); }
.gate-card.info { border-left-color: var(--info); background: linear-gradient(90deg, var(--info-bg), var(--card) 55%); }
.gc-head { display: flex; align-items: center; gap: 12px; }
.gc-head h2 { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; }
.gc-mark .ic { width: 3rem; height: 3rem; }
.gate-card.ok .gc-mark { color: var(--ok); }
.gate-card.warn .gc-mark { color: var(--warn); }
.gate-card.bad .gc-mark { color: var(--bad); }
.gate-card.info .gc-mark { color: var(--info); }
.gate-card > p { margin: 8px 0 12px; font-size: 1.05rem; }
.gc-done { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ok); }
.gc-facts { margin: 6px 0 14px; }
.gc-actions { margin-top: 6px; }
.gc-note { flex: 1 1 100%; margin: 0; }
.gate-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: 6px; background: var(--ok); vertical-align: middle; }
.gate-dot.warn { background: var(--gold); }
.gate-dot.bad { background: var(--bad); }

/* ------------------------------------------------------------ supervisor */

:root { --chart-closed: #2f6b3a; --chart-weighed: #d99a1e; --chart-booked: #2b5c86; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; font-size: .88rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid-line { stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .tick, .chart .xl2 { fill: var(--muted); font-size: .75rem; }
.chart .xl { fill: var(--ink-2); font-size: .82rem; font-weight: 600; }
.chart .xl.today, .chart .xl2.today { fill: var(--red); font-weight: 700; }
.chart .val { fill: var(--ink); font-size: .88rem; font-weight: 700; }
.chart .hit { fill: transparent; }
.chart .bar { outline: none; }
.chart .bar:hover .hit, .chart .bar:focus-visible .hit { fill: var(--paper-2); }
.chart .bar.is-today .hit { fill: rgba(192, 88, 47, .07); }
.table-view { margin-top: 12px; }
.table-view summary { cursor: pointer; font-size: .92rem; font-weight: 700; color: var(--green); }
.table-view .table-scroll { margin-top: 10px; border: 1px solid var(--rule-2); border-radius: var(--r-sm); }
.split-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sl-top span { font-family: var(--serif); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.sl-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.sl-bar .meter { height: 9px; }
.sl-bar .meter span { background: var(--green); }
.cc-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .cc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cc { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sh-1); }
.cc-top { display: flex; align-items: center; gap: 12px; }
.cc-top img { width: 4.6rem; flex: none; }
.cc h3 { margin: 0; font-size: 1.3rem; }
.cc-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-nums div { padding: 8px; text-align: center; background: var(--paper); border: 1px dashed var(--rule-dark); border-radius: var(--r-sm); }
.cc-nums strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.cc-nums span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.cc-usage { display: flex; align-items: center; gap: 10px; }
.cc-usage .meter { height: 8px; }
.cc-usage .meter span { background: var(--green); }
.cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.attn-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .attn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.attn { background: var(--card); border: 1px solid var(--rule); border-top: 5px solid var(--neutral); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.attn.is-clear { border-top-color: var(--ok); }
.attn-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px dashed var(--rule-dark); }
.attn-ic { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--neutral-bg); color: var(--neutral); }
.attn-ic .ic { width: 1.6rem; height: 1.6rem; }
.attn-title { flex: 1; min-width: 0; }
.attn-title h2 { margin: 0; font-size: 1.25rem; }
.attn-count { font-family: var(--serif); font-size: 2rem; line-height: 1; }
.attn.is-clear .attn-count { color: var(--faint); }
.attn-list { list-style: none; margin: 0; padding: 4px 18px; }
.attn-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px dashed var(--rule-2); }
.attn-list li:last-child { border-bottom: 0; }
.attn-list .who { flex: 1 1 220px; }
.attn-fact { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; font-size: .9rem; }
.attn-fact span { font-size: .78rem; color: var(--muted); }
.attn-clear { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 18px; color: var(--muted); font-family: var(--hand); font-size: 1.05rem; }
.attn-clear .ic { color: var(--ok); width: 1.4rem; height: 1.4rem; }

/* -------------------------------------------------------------- footer */

footer.site { position: relative; flex-shrink: 0; margin-top: 60px; color: rgba(238, 241, 230, .72); font-size: .92rem; background: var(--ink); }
footer.site::before { content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px; background: url("../img/art/footer-field.svg") left bottom / 480px 60px repeat-x; pointer-events: none; }
footer.site a { color: #eef1e6; text-decoration: none; }
footer.site a:hover { color: var(--gold); text-decoration: underline; }
.foot-top { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); padding: 40px 0 26px; }
@media (min-width: 760px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .foot-top { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); } }
.foot-brand .fb-row { display: flex; align-items: center; gap: 10px; }
.foot-brand img { width: 46px; height: 46px; background: #fff; border-radius: 50%; padding: 3px; }
.foot-brand strong { font-family: var(--serif); font-weight: 400; color: #fff; font-size: 1.6rem; }
.foot-brand p { margin: 8px 0 0; font-family: var(--hand); color: var(--gold); font-size: 1.05rem; }
footer.site h4 { margin: 0 0 12px; color: var(--gold); font-family: var(--hand); font-size: 1.15rem; font-weight: 400; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-contact li { display: flex; gap: 10px; align-items: flex-start; }
.foot-contact .ic { color: var(--gold); width: 1.4rem; height: 1.4rem; margin-top: 1px; }
.foot-contact strong { color: #fff; font-size: 1.1rem; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 16px 0 20px; border-top: 1px dashed rgba(255, 255, 255, .2); font-size: .85rem; }
.foot-bottom .fb-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.counter { font-family: var(--mono); letter-spacing: .14em; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .15); padding: 2px 7px; border-radius: var(--r-xs); color: #fff; }
.photo-credit, .demo-note { font-size: .78rem; color: rgba(238, 241, 230, .5); }
.photo-credit a { color: rgba(238, 241, 230, .75) !important; }
.demo-note { padding: 0 0 22px; }
footer.site.lean { margin-top: 50px; }
footer.site.lean .foot-top, footer.site.lean .photo-credit { display: none; }
footer.site.lean .foot-bottom { border-top: 0; }
@media (max-width: 759px) { .has-tabbar footer.site .demo-note { padding-bottom: 12px; } }

/* --------------------------------------------------------------- empty */

.empty { padding: 26px 20px 30px; text-align: center; color: var(--muted); }
.empty::before { content: ""; display: block; width: 160px; height: 120px; margin: 0 auto 8px; background: url("../img/art/basket.svg") center / contain no-repeat; }
.empty strong { display: block; color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.35rem; margin-bottom: 2px; }
.empty .btn { margin-top: 14px; }

.prose { max-width: 70ch; font-size: 1.1rem; line-height: 1.8; color: var(--ink-2); }
.prose p { margin: 0 0 16px; }
.prose p:first-child::first-letter { float: left; font-family: var(--serif); font-size: 3.2rem; line-height: .9; margin: 6px 8px 0 0; color: var(--red); }
.prose p:last-child { margin-bottom: 0; }

.error-page { max-width: 600px; margin: 10px auto; text-align: center; }
.error-page img { display: block; width: min(320px, 80%); margin: 0 auto -10px; }
.error-code { font-family: var(--serif); font-size: clamp(4rem, 3rem + 5vw, 7rem); line-height: 1; color: var(--red); }
.error-page .page-title::after { left: 50%; transform: translateX(-50%); }

/* ---------------------------------------------------------------- misc */

.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.strong { font-weight: 600; }
.mt { margin-top: 16px; }
.mt-s { margin-top: 8px; }
.mb0 { margin-bottom: 0 !important; }
hr.rule { border: 0; border-top: 1px dashed var(--rule-dark); margin: 18px 0; }
.icon-text { display: inline-flex; align-items: center; gap: 7px; }
.icon-text .ic { color: var(--sepia); }
.hl { color: var(--green); }

/* ------------------------------------------------------------ motion */

.page > * { animation: settle .55s cubic-bezier(.2, .7, .2, 1) both; }
.page > :nth-child(2) { animation-delay: .06s; }
.page > :nth-child(3) { animation-delay: .12s; }
.page > :nth-child(4) { animation-delay: .18s; }
.page > :nth-child(5) { animation-delay: .24s; }
.page > :nth-child(n+6) { animation-delay: .3s; }
.page > .toasts { animation: none; }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
.pagehead::after, .ticket-head::after, .pay-hero::after { animation: art-in .9s cubic-bezier(.2, .8, .3, 1.1) .15s both; }
@keyframes art-in { from { opacity: 0; transform: translateY(12px) rotate(-3deg) scale(.94); } }
.page-title::after, .auth-form h1::after { animation: pencil .8s cubic-bezier(.5, .1, .3, 1) .3s both; }
@keyframes pencil { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tiles .tile { animation: settle .6s cubic-bezier(.2, .7, .2, 1) both; }
.tiles .tile:nth-child(2) { animation-delay: .07s; }
.tiles .tile:nth-child(3) { animation-delay: .14s; }
.tiles .tile:nth-child(4) { animation-delay: .21s; }
.tiles .tile:nth-child(5) { animation-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
    .cel-disc { transform: none; }
    .cel-tick { stroke-dashoffset: 0; }
    .cel-ring, .cel-spark { display: none; }
}

/* ------------------------------------------------------------- print */

@media print {
    .govstrip, .topbar, .sidenav, .tabbar, footer.site, .no-print, .actionbar, .toasts { display: none !important; }
    body, html { background: #fff !important; }
    .has-tabbar { padding-bottom: 0; }
    .page { padding: 0 !important; }
    .page > * { animation: none !important; }
    .console { display: block !important; padding: 0 !important; }
    * { box-shadow: none !important; }
    .gatepass { border: 1px solid #000; max-width: none; }
    .qr-box svg.qr path { fill: #000; }
    .pagehead::after { display: none; }
}

/* ============================================================== home */

.is-home .page { padding-top: 0; }
.is-home .page > * { animation: none; }
.home-sec { padding: clamp(52px, 7vw, 90px) 0 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 30px; }
.sec-head h2 { margin: 0; font-size: clamp(2rem, 1.35rem + 1.7vw, 2.8rem); line-height: 1.2; }
.sec-head .eyebrow { font-family: var(--serif); font-style: italic; color: var(--sepia); font-size: 1rem; }
.sec-head > .note { margin: 0; font-size: 1.25rem; text-align: right; transform: rotate(-2deg); }
.scribble { display: block; width: 150px; height: 12px; margin-top: 2px; fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; }
.h-ic { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: .35em; border-radius: 50%; background: var(--paper-2); color: var(--green); vertical-align: -.22em; font-size: .8em; }
.h-ic .ic { width: 58%; height: 58%; stroke-width: 1.8; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: clamp(24px, 4vw, 46px) 0 clamp(150px, 18vw, 250px); overflow-x: clip; }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: .92fr 1.2fr; gap: clamp(28px, 4vw, 60px); align-items: center; min-height: min(calc(100vh - 170px), 800px); }
.hero-text { position: relative; }
.hero-text > .note { margin: 0; font-size: 1.25rem; }
.hero h1 { margin: 10px 0 18px; font-size: clamp(2.4rem, 1.2rem + 3vw, 3.9rem); line-height: 1.2; }
.hero h1 .mark { background: linear-gradient(transparent 62%, var(--mark) 62%, var(--mark) 90%, transparent 90%) no-repeat; background-size: 100% 100%; padding: 0 .08em; }
.hero .lede { margin: 0; max-width: 34em; color: var(--ink); font-weight: 500; font-size: 1.1rem; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.hero .actions .btn { min-height: 3.5rem; font-size: 1.1rem; }
.btn.login { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 3px 3px 0 var(--ink); padding-top: 7px; padding-bottom: 7px; }
.btn.login:hover { background: var(--red-dark); border-color: var(--red-dark); box-shadow: 4px 4px 0 var(--ink); }
.btn.login .lbl { display: grid; line-height: 1.15; text-align: left; }
.btn.login .lbl small { font-weight: 500; font-size: .8rem; opacity: .92; }
.hero .aside { display: flex; align-items: center; gap: 10px; margin: 24px 0 0; color: var(--ink-2); font-size: 1rem; }
.hero .aside .ic { width: 1.5rem; height: 1.5rem; color: var(--ink-2); }
.hero-text h1, .hero-text .lede, .hero-text > .note, .hero-text .aside { text-shadow: 0 0 2px var(--paper), 0 0 6px var(--paper), 0 0 12px var(--paper), 0 0 22px var(--paper); }
@media (max-width: 520px) { .hero .actions .btn { width: 100%; justify-content: center; } .btn.login .lbl { text-align: center; } }

.plate-photo { position: relative; margin: 0; padding: 0 0 0 clamp(20px, 4vw, 70px); }
.print-frame { position: relative; padding: 12px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--rule), 0 24px 40px -30px var(--shadow); transform: rotate(.6deg); }
.print-in { overflow: hidden; }
.print-frame img { display: block; width: 100%; height: clamp(400px, 68vh, 720px); object-fit: cover; object-position: 60% 35%; filter: saturate(.92) contrast(1.02); }
.print-frame::before, .print-frame::after { content: ""; position: absolute; width: 34px; height: 34px; background: var(--paper-2); z-index: 3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.print-frame::before { top: 4px; left: 4px; }
.print-frame::after { bottom: 4px; right: 4px; transform: rotate(180deg); }
@media (max-width: 900px) {
    .hero-in { grid-template-columns: 1fr; gap: 0; min-height: 0; }
    .plate-photo { order: -1; padding-left: 0; margin: 0 0 64px; }
    .print-frame img { height: 34vw; }
}

.hero-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-deco img { display: block; width: 100%; height: auto; }
.sprig { position: absolute; width: clamp(80px, 10vw, 150px); pointer-events: none; }
.sprig img { transform-origin: 18% 97%; }
.sprig.tr { top: 0; right: -12px; transform: rotate(180deg) scaleX(-1); }
.fields { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; --hz: clamp(110px, 15vw, 220px); }
.fields::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--hz) - 2px); bottom: 0; background: linear-gradient(#cad9b6, #dbe5ca 70%, #e4ead6); }
.fields::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 14vw, 180px); background: linear-gradient(rgba(238, 241, 230, 0), var(--paper) 88%); }
.horizon { position: absolute; left: 0; right: 0; top: 0; height: var(--hz); }
.fields .land { height: 100%; object-fit: cover; object-position: 50% 100%; }
.tractor { position: absolute; right: 14%; bottom: 36%; width: clamp(44px, 5vw, 84px) !important; }
.stalks { position: absolute; inset: 0; }
.stalks i { position: absolute; left: calc((var(--x) + .5) / var(--n) * 100% + (var(--j) - 5) * .4%); width: calc(var(--w) * (.72 + var(--j) * .06)); margin-left: calc(var(--w) * -.5); }
.hero-deco .stalks img { transform-origin: 50% 99%; }
.stalks.r1 { --n: 44; --w: clamp(30px, 9vw, 56px); opacity: .5; }
.stalks.r2 { --n: 34; --w: clamp(46px, 14vw, 88px); opacity: .6; }
.stalks.r3 { --n: 24; --w: clamp(72px, 22vw, 136px); opacity: .72; }
.stalks.r4 { --n: 16; --w: clamp(110px, 34vw, 210px); opacity: .85; }
.stalks.r1 i { bottom: calc(100% - var(--hz) - 30px); }
.stalks.r2 i { bottom: 46%; }
.stalks.r3 i { bottom: 20%; }
.stalks.r4 i { bottom: -12%; }
@media (max-width: 900px) { .fields { height: 72%; } .tractor { right: auto; left: 8%; } }
@media (max-width: 620px) {
    .stalks.r1 { --n: 14; } .stalks.r2 { --n: 10; } .stalks.r3 { --n: 7; } .stalks.r4 { --n: 5; }
    .stalks.r1 i:nth-child(n+15), .stalks.r2 i:nth-child(n+11), .stalks.r3 i:nth-child(n+8), .stalks.r4 i:nth-child(n+6) { display: none; }
}

/* ------------------------------------------------ MSP: taped specimen plates */
.plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--ink); border-left: 1px solid var(--rule); }
.plate { position: relative; display: grid; grid-template-columns: 42% 1fr; align-items: end; gap: 8px; min-height: 290px; padding: 26px 22px 22px 12px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background .25s; }
.plate:hover { background: rgba(248, 250, 243, .8); }
.plate::before { content: ""; position: absolute; z-index: 1; top: -10px; left: 50%; width: 76px; height: 21px; margin-left: -38px; background: rgba(230, 200, 120, .55); transform: rotate(-4deg);
    clip-path: polygon(0 10%, 5% 0, 12% 8%, 88% 4%, 95% 0, 100% 9%, 100% 90%, 94% 100%, 86% 93%, 10% 97%, 4% 90%, 0 100%); }
.plate:nth-child(even)::before { background: rgba(150, 190, 130, .5); transform: rotate(3deg); }
.plate:nth-child(3n)::before { left: 30%; }
.plate-art { position: relative; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; }
.plate-art::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 12px; opacity: .7;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M1 9C18 6 32 10 50 8S84 6 99 9' fill='none' stroke='%237a6a48' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M18 8l-2-5M20 8l1-5M76 8l-1-5M78 8l2-4' fill='none' stroke='%236f8f4a' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.plate-art img { display: block; width: 100%; height: 240px; object-fit: contain; object-position: 50% 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); transform-origin: 50% 100%; }
.plate:hover .plate-art img { transform: rotate(-2.5deg); }
.plate h3 { margin: 0 0 20px; font-size: 1.95rem; line-height: 1.1; }
.rate { display: flex; align-items: baseline; gap: 8px; margin: 0; font-family: var(--serif); font-size: 2.1rem; line-height: 1; }
.leader { flex: 1; border-bottom: 2px dotted var(--rule-dark); transform: translateY(-4px); min-width: 12px; }
.rise { margin: 8px 0 0; text-align: right; font-size: 1.05rem; }
.rise .ic, .note .ic { width: 1em; height: 1em; }
.grow { width: 100%; }
.grow img { will-change: transform; }
.swipe-hint { display: none; }
@media (max-width: 1000px) { .plates { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
    .plates { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; border: 0; margin: 0 -16px; padding: 18px 16px 14px; scroll-padding: 0 16px; scrollbar-width: none; }
    .plates::-webkit-scrollbar { display: none; }
    .plate { flex: 0 0 84%; scroll-snap-align: start; min-height: 230px; background: var(--card); border: 1px solid var(--rule); border-top: 1.5px solid var(--ink); --i: 0 !important; }
    .plate-art img { height: 180px; }
    .plates .draw { overflow: clip; }
    .swipe-hint { display: block; margin: 6px 0 0; text-align: right; font-size: 1.05rem; }
}

/* --------------------------------------------------- weather diary and sky */
#weather { position: relative; overflow-x: clip; width: 100vw; margin-left: calc(50% - 50vw); }
#weather > .wrap { position: relative; z-index: 1; }
.sky { position: absolute; left: 0; right: 0; top: 0; height: clamp(230px, 26vw, 320px); overflow: hidden; pointer-events: none; }
.sky img { position: absolute; display: block; height: auto; }
.sky .sun { top: 64px; right: 6%; width: clamp(64px, 8vw, 112px); }
.sky .cloud { width: var(--cw); }
.sky .c1 { --cw: clamp(96px, 14vw, 190px); top: 84px; left: 38%; opacity: .95; }
.sky .c2 { --cw: clamp(70px, 9vw, 130px); top: 58px; left: 70%; opacity: .75; }
.sky .c3 { --cw: clamp(120px, 18vw, 240px); top: 170px; left: 12%; opacity: .6; }
.sky .birds { position: absolute; top: 110px; left: 0; width: clamp(46px, 5vw, 70px); display: none; }
.sky .birds img { position: static; width: 100%; transform-origin: 50% 60%; }

.pick { display: grid; gap: 6px; min-width: min(340px, 100%); }
.pick label { font-family: var(--hand); color: var(--red); font-size: 1.2rem; line-height: 1; font-weight: 400; margin: 0; }
.select { position: relative; display: block; }
.select select { width: 100%; font: 600 1.2rem/1.2 var(--sans); color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 15px 48px 15px 50px; cursor: pointer; box-shadow: 4px 4px 0 var(--green); background-image: none; min-height: 3.6rem; }
.select select:hover { box-shadow: 5px 5px 0 var(--green); }
.select .ic { position: absolute; top: 50%; pointer-events: none; color: var(--ink); }
.select .pin { left: 16px; width: 24px; height: 24px; margin-top: -12px; color: var(--red); animation: pin-bob 2.4s ease-in-out infinite; }
.select .chev { right: 16px; width: 22px; height: 22px; margin-top: -11px; }
@keyframes pin-bob { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-4px); } 90% { transform: translateY(1px); } }
@media (max-width: 760px) { .pick { width: 100%; } }

.log { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.log th { text-align: left; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--sepia); padding: 8px 12px; border-bottom: 1.5px solid var(--ink); }
.log th .ic { color: var(--sepia); }
.log td { padding: 12px; border-bottom: 1px solid var(--rule); }
.log .num { text-align: right; font-variant-numeric: tabular-nums; }
.log td.city a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); text-decoration-color: var(--red); }
.log td.city .ic { color: var(--red); }
.log .wx-cell { width: 56px; padding-right: 0; }
.log .wx-ic svg { width: 42px; height: 42px; overflow: visible; }
.log .note { font-size: 1.05rem; }
.log tbody tr:hover { background: rgba(248, 250, 243, .9); }
.log-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; color: var(--muted); }
.gauges { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1.5px solid var(--ink); }
.gauges li { display: grid; align-content: start; justify-items: center; gap: 2px; padding: 18px 10px 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; color: inherit; text-decoration: none; }
.gauges li:first-child { border-left: 1px solid var(--rule); }
.gauges li.wet { background: rgba(222, 234, 243, .6); }
.gauges a { display: contents; color: inherit; text-decoration: none; }
.gauges li.on { box-shadow: inset 0 -4px 0 var(--red); background: var(--card); }
.gauges b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.gauges small { color: var(--muted); }
.gauges strong { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.gauges strong .ic { width: .7em; height: .7em; margin-right: 4px; color: #3b78b8; }
.gauges .muted { font-size: .92rem; }
.gauges .more { margin-top: 6px; font-size: .85rem; font-weight: 700; color: var(--green); text-decoration: underline; text-decoration-color: var(--red); }
.gauges .wx-ic svg { width: 84px; height: 84px; margin: 12px 0 6px; overflow: visible; }
@media (max-width: 760px) {
    .gauges { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; border: 0; margin-left: -16px; margin-right: -16px; padding: 4px 16px 12px; scroll-padding: 0 16px; scrollbar-width: none; }
    .gauges::-webkit-scrollbar, .log tbody::-webkit-scrollbar { display: none; }
    .gauges li, .gauges li:first-child { flex: 0 0 44%; scroll-snap-align: start; background: var(--card); border: 1px solid var(--rule); border-top: 1.5px solid var(--ink); }
    .log thead { display: none; }
    .log, .log tbody, .log tr, .log td { display: block; }
    .log tbody { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 12px; scroll-padding: 0 16px; scrollbar-width: none; }
    .log tr { flex: 0 0 74%; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-content: start; padding: 16px; background: var(--card); border: 1px solid var(--rule); border-top: 1.5px solid var(--ink); }
    .log td { border: 0; padding: 2px 0; text-align: left !important; }
    .log td.wx-cell { grid-row: span 2; width: auto; }
    .log .wx-ic svg { width: 48px; height: 48px; }
    .log td.city a { font-size: 1.25rem; }
    .log td.num { grid-column: 1 / -1; display: flex; justify-content: space-between; border-top: 1px dashed var(--rule); padding: 6px 0; }
    .log td.num::before { content: attr(data-label); color: var(--muted); font-weight: 400; }
    .log td.warn { grid-column: 1 / -1; }
    .log td.warn:empty { display: none; }
    #weather .swipe-hint { display: block; margin: 6px 0 0; text-align: right; font-size: 1.05rem; }
}

.wx-ic { display: inline-grid; place-items: center; }
.wx-svg .rays { transform-box: fill-box; transform-origin: center; animation: wx-spin 26s linear infinite; }
.wx-svg .cloud-front { animation: wx-drift 5s ease-in-out infinite alternate; }
.wx-svg .cloud-back { animation: wx-drift 7s ease-in-out infinite alternate-reverse; }
.wx-svg .rain path { animation: wx-fall 1.3s linear infinite; }
.wx-svg .rain path:nth-child(2) { animation-delay: .45s; }
.wx-svg .rain path:nth-child(3) { animation-delay: .9s; }
.wx-svg .bolt { animation: wx-flash 3.4s ease-in-out infinite; }
@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-drift { from { transform: translateX(-1.5px); } to { transform: translateX(2.5px); } }
@keyframes wx-fall { 0% { transform: translateY(-5px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
@keyframes wx-flash { 0%, 86%, 100% { opacity: 1; } 90% { opacity: .2; } 94% { opacity: 1; } 97% { opacity: .4; } }

/* ------------------------------------------------------- the two ways in */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.entry figure { margin: 0 0 18px; padding: 10px; background: var(--card); border: 1px solid var(--rule); overflow: hidden; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.entry img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.entry:nth-child(1) figure { transform: rotate(-.6deg); }
.entry:nth-child(2) figure { transform: rotate(.5deg); }
.entry:hover figure { transform: rotate(0deg) translateY(-4px); box-shadow: 0 22px 34px -26px var(--shadow); }
.entry:hover img { transform: scale(1.04); }
.entry h2 { margin: 0 0 6px; font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); }
.entry ul { margin: 12px 0 22px; padding: 0; list-style: none; }
.entry li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--rule); font-size: 1.05rem; }
.entry li .ic { width: 1.6rem; height: 1.6rem; color: var(--green); }

/* ------------------------------------------------------- home motion */
.motion .fade { opacity: 0; transform: translateY(16px); }
.motion .fade.in, .motion .in .fade { opacity: 1; transform: none; transition: opacity .9s ease var(--d, 0s), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.motion .write { clip-path: inset(-20% 100% -20% -4%); }
.motion .write.in, .motion .in .write { clip-path: inset(-40% -90% -40% -4%); transition: clip-path 1.3s cubic-bezier(.45, .05, .35, 1) var(--d, .2s); }
.motion .plate .write { --d: calc(1.1s + var(--i, 0) * .12s); }
.motion .rise-words .w { display: inline-block; opacity: 0; transform: translateY(.45em); }
.motion .rise-words.in .w { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.1s + var(--n, 0) * .07s); }
.motion .hero h1 .mark { background-size: 0% 100%; }
.motion .rise-words.in .mark { background-size: 100% 100%; transition: background-size 1s cubic-bezier(.6, .1, .3, 1) 1s; }
.motion .plate-photo .print-frame { opacity: 0; transform: translateY(40px) rotate(3deg); }
.motion .plate-photo.in .print-frame { opacity: 1; transform: rotate(.6deg); transition: opacity 1s ease .15s, transform 1.4s cubic-bezier(.2, .7, .2, 1) .15s; }
.motion .plate-photo .print-frame img { transform: scale(1.14); }
.motion .plate-photo.in .print-frame img { transform: none; transition: transform 3.2s cubic-bezier(.2, .6, .2, 1) .15s; }
.motion .draw { clip-path: inset(-40% -40% 0 -40%); }
.motion .draw .grow { transform: translateY(101%); }
.motion .in .draw .grow, .motion .draw.in .grow { transform: none; transition: transform 1.9s cubic-bezier(.3, .1, .2, 1) calc(var(--i, 0) * .14s); }
.motion .scribble path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.motion .scribble.in path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.5, .1, .3, 1) .35s; }
.motion .plate { opacity: 0; transform: translateY(26px); }
.motion .plate.in { opacity: 1; transform: none; transition: opacity .8s ease calc(var(--i) * .1s), transform .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .1s), background .25s; }
.motion .plate::before { opacity: 0; transform: translateY(-8px) scale(1.3) rotate(-14deg); }
.motion .plate.in::before { opacity: 1; transform: rotate(-4deg); transition: opacity .3s ease calc(.45s + var(--i, 0) * .1s), transform .55s cubic-bezier(.3, 1.5, .5, 1) calc(.45s + var(--i, 0) * .1s); }
.motion .plate.in:nth-child(even)::before { transform: rotate(3deg); }
.motion .entry { opacity: 0; transform: translateY(34px); }
.motion .entry.in { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.motion .entry + .entry.in { transition-delay: .15s; }
.log tbody tr:nth-child(2) { --k: 1; } .log tbody tr:nth-child(3) { --k: 2; } .log tbody tr:nth-child(4) { --k: 3; } .log tbody tr:nth-child(5) { --k: 4; } .log tbody tr:nth-child(6) { --k: 5; }
.motion .log tbody tr { opacity: 0; transform: translateY(10px); }
.motion .log.in tbody tr { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--k, 0) * .12s), transform .6s ease calc(var(--k, 0) * .12s); }
.gauges li:nth-child(2) { --k: 1; } .gauges li:nth-child(3) { --k: 2; } .gauges li:nth-child(4) { --k: 3; } .gauges li:nth-child(5) { --k: 4; }
.motion .gauges li { opacity: 0; transform: translateY(18px); }
.motion .gauges.in li { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--k, 0) * .1s), transform .7s ease calc(var(--k, 0) * .1s); }
.motion .gauges .wx-ic { opacity: 0; transform: scale(.6); }
.motion .gauges.in .wx-ic { opacity: 1; transform: none; transition: opacity .5s ease calc(.3s + var(--k, 0) * .12s), transform .7s cubic-bezier(.3, 1.5, .5, 1) calc(.3s + var(--k, 0) * .12s); }
@media (max-width: 760px) { .motion .log tbody tr { --k: 0 !important; } }
.motion .h-ic { animation: badge-pop .7s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
@keyframes badge-pop { from { transform: scale(.3) rotate(-40deg); opacity: 0; } }

.motion .hero-deco .land, .motion .hero-deco .tractor, .motion .sprig img, .motion .stalks i { opacity: 0; }
.motion .hero-deco.in .land { animation: field-rise 1.6s cubic-bezier(.2, .7, .2, 1) .2s both; }
.motion .hero-deco.in .sprig img { animation: sprig-grow 1.5s cubic-bezier(.2, .8, .3, 1) .7s both, sprig-sway 5.5s ease-in-out 2.2s infinite alternate; }
.motion .hero-deco.in .tractor { animation: tractor-in 3.6s cubic-bezier(.15, .6, .25, 1) 1.1s both, tractor-idle .45s ease-in-out 4.7s infinite alternate; }
.motion .hero-deco.in .stalks i { animation: stalk-rise 1.3s cubic-bezier(.2, .8, .3, 1) calc(.2s + var(--x) * .03s) both; }
.motion .hero-deco.in .stalks.r2 i { animation-delay: calc(.35s + var(--x) * .03s); }
.motion .hero-deco.in .stalks.r3 i { animation-delay: calc(.5s + var(--x) * .04s); }
.motion .hero-deco.in .stalks.r4 i { animation-delay: calc(.65s + var(--x) * .05s); }
.motion .hero-deco .stalks img { animation: wind 5s ease-in-out infinite; animation-delay: calc(var(--x) * -.3s - var(--j) * .06s); will-change: transform; }
.motion .hero-deco .stalks.r1 img { animation-duration: 6s; animation-delay: calc(var(--x) * -.16s - var(--j) * .08s); }
.motion .hero-deco .stalks.r2 img { animation-duration: 5.6s; animation-delay: calc(var(--x) * -.21s - var(--j) * .07s); }
.motion .hero-deco .stalks.r4 img { animation-duration: 4.6s; animation-delay: calc(var(--x) * -.42s - var(--j) * .05s); }
@keyframes field-rise { from { opacity: 0; transform: translateY(35%); } to { opacity: 1; transform: none; } }
@keyframes sprig-grow { from { opacity: 0; transform: scale(.4) rotate(-18deg); } to { opacity: 1; transform: none; } }
@keyframes sprig-sway { from { opacity: 1; transform: rotate(0deg); } to { opacity: 1; transform: rotate(-3.5deg); } }
@keyframes tractor-in { from { opacity: 0; transform: translateX(60vw); } 15% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes tractor-idle { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(-1.5px); } }
@keyframes stalk-rise { from { opacity: 0; transform: translateY(45%); } to { opacity: 1; transform: none; } }
@keyframes wind { 0%, 100% { transform: rotate(-2deg); } 35% { transform: rotate(6deg); } 55% { transform: rotate(-3.5deg); } 75% { transform: rotate(1.5deg); } }

.motion .sky .cloud { left: 0; animation: cloud-drift 80s linear infinite; will-change: transform; }
.motion .sky .c1 { animation-delay: -30s; }
.motion .sky .c2 { animation-duration: 110s; animation-delay: -85s; }
.motion .sky .c3 { animation-duration: 140s; animation-delay: -20s; }
.motion .sky .sun { animation: sun-turn 50s linear infinite; }
.motion .sky .birds { display: block; animation: birds-fly 26s linear infinite -6s; will-change: transform; }
.motion .sky .birds img { animation: flap .32s ease-in-out infinite alternate; }
@keyframes cloud-drift { from { transform: translateX(-100%); } to { transform: translateX(100vw); } }
@keyframes sun-turn { to { transform: rotate(360deg); } }
@keyframes birds-fly { 0% { transform: translate(-90px, 24px); } 50% { transform: translate(50vw, -6px); } 100% { transform: translate(calc(100vw + 20px), 14px); } }
@keyframes flap { to { transform: scaleY(.55); } }

.gentle .rise-words .w, .gentle .fade, .gentle .plate, .gentle .entry, .gentle .log tbody tr { transform: translateY(8px); }
.gentle .rise-words.in .w, .gentle .fade.in, .gentle .in .fade, .gentle .plate.in, .gentle .entry.in, .gentle .log.in tbody tr { transform: none; }
.gentle .plate-photo .print-frame, .gentle .plate-photo.in .print-frame { transform: rotate(.6deg); }
.gentle .plate-photo .print-frame img { transform: none; }
.gentle .hero-deco.in .land, .gentle .hero-deco.in .sprig img, .gentle .hero-deco.in .tractor, .gentle .hero-deco.in .stalks i { animation: deco-fade 1s ease .2s both !important; }
.gentle .hero-deco .stalks img, .gentle .wx-svg *, .gentle .sky, .gentle .sky * { animation: none !important; }
.gentle .sky .cloud { left: auto; }
@keyframes deco-fade { from { opacity: 0; } to { opacity: 1; } }

.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--red)); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }