/* Wireframe screens (the white "paper" inside each device). All selectors live under .screen. */
.screen { --ink: #171a1f; --mid: #666e7a; --line: #ccd1d9; --fill: #f0f2f5; --white: #fff; --brand: #1a663d; --ok: #14803d; --err: #c72626; --warn: #b87305; --info: #215cd9;
  position: relative; display: flex; flex-direction: column; background: var(--white); color: var(--ink); font: 14px/1.4 Inter, "Segoe UI", Arial, sans-serif; overflow: hidden; text-align: left; }
.screen * { box-sizing: border-box; }
.screen.horiz { flex-direction: row; }
.screen .bold { font-weight: 600; }
.screen .grow { flex: 1 1 auto; min-width: 0; }
.screen .ic { display: inline-flex; flex: 0 0 auto; width: 1.25em; height: 1.25em; }
.screen .ic svg { width: 100%; height: 100%; }
.screen .body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.dev-web .body { padding: 48px 120px; gap: 24px; }
.dev-admin .body { padding: 28px 32px; gap: 20px; }
.narrow .body { padding: 18px 16px 28px; gap: 16px; }
.easy { font-size: 16px; }

/* chrome */
.screen .webhead { display: flex; align-items: center; gap: 20px; padding: 14px 32px; border-bottom: 1px solid var(--line); }
.screen .logo { background: var(--fill); border-radius: 8px; padding: 10px 16px; font-weight: 600; font-size: 14px; }
.screen .navitem.on { font-weight: 700; color: var(--brand); }
.screen .lang { display: inline-flex; border: 1px solid var(--mid); border-radius: 6px; overflow: hidden; font-size: 13px; font-weight: 600; }
.screen .lang span { padding: 6px 12px; color: var(--mid); }
.screen .lang span.on { background: var(--ink); color: var(--white); }
.screen .webfoot { background: var(--fill); padding: 24px 120px; display: flex; flex-direction: column; gap: 8px; color: var(--mid); font-size: 13px; }
.screen .mobhead { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.screen .mobhead .acct { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--mid); }
.screen .fab { position: absolute; right: 14px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.screen .fab span { width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); font-size: 18px; }
.screen .side { flex: 0 0 232px; background: var(--fill); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.screen .side-title { font-size: 15px; font-weight: 700; padding-bottom: 8px; }
.screen .side-item { font-size: 13px; padding: 7px 10px; border-radius: 6px; }
.screen .side-item.on { background: var(--white); font-weight: 700; color: var(--brand); }
.screen .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.screen .topbar { display: flex; align-items: center; gap: 16px; padding: 14px 32px; border-bottom: 1px solid var(--line); }
.screen .top-title { font-size: 18px; font-weight: 600; }
.screen .top-meta { font-size: 13px; font-weight: 500; color: var(--mid); }
.screen .statusbar { display: flex; justify-content: space-between; padding: 8px 20px 4px; font-size: 13px; }
.screen .statusbar .sm { font-size: 11px; }
.screen .appbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.screen .app-title { flex: 1 1 auto; font-size: 18px; font-weight: 600; }
.screen .back { font-size: 20px; display: inline-flex; }
.screen .tabbar { display: flex; padding: 8px 8px 12px; border-top: 1px solid var(--line); }
.screen .tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--mid); }
.screen .tab .ic { font-size: 19px; }
.screen .tab.on { color: var(--brand); font-weight: 700; }

/* elements */
.screen .h { font-size: 32px; font-weight: 700; line-height: 1.2; }
.dev-admin .h { font-size: 24px; }
.easy .h { font-size: 24px; }
.screen .h2 { font-size: 20px; font-weight: 600; line-height: 1.25; }
.dev-admin .h2 { font-size: 18px; }
.easy .h2 { font-size: 18px; }
.screen .sm { font-size: 12px; color: var(--mid); }
.easy .sm { font-size: 13px; }
.screen .link { font-weight: 500; color: var(--info); text-decoration: underline; align-self: flex-start; }
.screen .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; align-self: flex-start; border: 1px solid transparent; }
.screen .btn.primary { background: var(--brand); color: var(--white); }
.screen .btn.second { background: var(--white); color: var(--ink); border-color: var(--mid); }
.screen .btn.danger { background: var(--err); color: var(--white); }
.easy .btn { align-self: stretch; font-size: 17px; padding: 15px 16px; border-radius: 12px; }
.screen .badge { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 3px; border: 1px solid currentColor; color: var(--mid); }
.screen .badge.c-ok { color: var(--ok); }
.screen .badge.c-err { color: var(--err); }
.screen .badge.c-warn { color: var(--warn); }
.screen .badge.c-info { color: var(--info); }
.screen .field { display: flex; flex-direction: column; gap: 6px; }
.screen .field-label { font-size: 12px; font-weight: 500; color: var(--mid); }
.easy .field-label { font-size: 14px; }
.screen .field-box { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--mid); }
.easy .field-box { min-height: 52px; border-radius: 12px; font-size: 17px; color: var(--ink); }
.screen .field-box.area { min-height: 88px; align-items: flex-start; }
.screen .field-box.bad { border-color: var(--err); border-width: 2px; }
.screen .field-val { flex: 1 1 auto; min-width: 0; }
.screen .field-err { font-size: 13px; font-weight: 500; color: var(--err); }
.screen .caret { font-size: 12px; font-weight: 700; color: var(--mid); flex: 0 0 auto; display: inline-flex; }
.screen .tick { display: flex; gap: 10px; align-items: flex-start; }
.screen .tick-box { flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid var(--mid); background: var(--white); border-radius: 5px; margin-top: 1px; }
.screen .tick-box.rad { border-radius: 10px; }
.screen .tick-box.tog { flex-basis: 36px; width: 36px; border-radius: 10px; }
.screen .tick-box.on { background: var(--brand); border-color: var(--brand); }
.screen .img { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; background: var(--fill); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--mid); }
.screen .qr { display: flex; align-items: center; justify-content: center; border: 3px solid var(--ink); font-size: 13px; font-weight: 700; flex: 0 0 auto; align-self: center; background: repeating-conic-gradient(var(--ink) 0 25%, var(--white) 0 50%) 0 0 / 24px 24px; color: transparent; }
.dev-admin .qr, .dev-web .qr { align-self: flex-start; }
.screen .line { height: 1px; background: var(--line); flex: 0 0 1px; }
.screen .note { background: #fff2b3; border-radius: 6px; padding: 8px 10px; font-size: 12px; }
.screen .banner { display: flex; gap: 10px; align-items: flex-start; border: 1px solid currentColor; border-radius: 10px; padding: 12px; font-size: 13px; font-weight: 600; }
.easy .banner { font-size: 15px; padding: 14px; }
.screen .banner .ic { font-size: 18px; margin-top: 1px; }
.screen .banner.c-info { color: var(--info); background: #e9effb; }
.screen .banner.c-ok { color: var(--ok); background: #e7f2ea; }
.screen .banner.c-err { color: var(--err); background: #f9e9e9; }
.screen .banner.c-warn { color: var(--warn); background: #f8f1e5; }
.screen .row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.easy .row { gap: 10px; }
.screen .row.center { align-items: center; }
.screen .row > * { flex: 1 1 0; min-width: 0; }
.screen .row > .btn, .screen .row > .link, .screen .row > .badge, .screen .row > .qr { flex: 0 0 auto; align-self: auto; }
.easy .row > .btn { flex: 1 1 0; }
.screen .col { display: flex; flex-direction: column; gap: 12px; }
.screen .grid { gap: 16px; }
.easy .grid { gap: 10px; }
.screen .card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.easy .card { padding: 14px; gap: 10px; border-radius: 10px; }
.screen .stat { gap: 4px; }
.screen .stat-label { font-size: 12px; font-weight: 500; color: var(--mid); }
.screen .stat-val { font-size: 24px; font-weight: 700; }
.screen .kv { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.easy .kv { font-size: 15px; gap: 10px; }
.screen .kv-row { display: flex; gap: 12px; }
.screen .kv-k { flex: 1 1 0; color: var(--mid); }
.screen .kv-v { flex: 1.3 1 0; font-weight: 600; }
.screen .list { border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.screen .list-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.easy .list-row { padding: 15px 14px; }
.screen .list-row + .list-row { border-top: 1px solid var(--line); }
.screen .list-row > .ic { font-size: 20px; color: var(--brand); }
.screen .list-text { flex: 1 1 auto; min-width: 0; }
.screen .table { border: 1px solid var(--line); border-radius: 8px; background: var(--white); overflow: hidden; }
.screen .tr { display: flex; gap: 12px; padding: 10px 12px; font-size: 13px; }
.screen .tr + .tr { border-top: 1px solid var(--line); }
.screen .tr.th { background: var(--fill); font-size: 12px; font-weight: 600; color: var(--mid); }
.screen .td { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.screen .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.screen .chip { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--white); }
.easy .chip { font-size: 14px; padding: 8px 14px; }
.screen .chip.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.screen .steps { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--mid); }
.easy .steps { font-size: 14px; }
.screen .step.on { font-weight: 700; color: var(--brand); }
.screen .unknown { color: var(--err); font-weight: 700; font-size: 12px; }
.screen .filler { visibility: hidden; }
/* farmer-friendly blocks */
.screen .tiles { display: grid; gap: 10px; }
.screen .tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 14px; border: 1px solid var(--mid); border-radius: 10px; background: var(--white); min-height: 104px; }
.screen .tile .ic { font-size: 28px; color: var(--brand); }
.screen .tile-label { font-size: 17px; font-weight: 700; line-height: 1.2; }
.screen .tile-sub { font-size: 13px; color: var(--mid); }
.screen .opts { display: flex; flex-direction: column; gap: 10px; }
.screen .opt { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--mid); border-radius: 10px; }
.screen .opt.on { border: 2px solid var(--brand); padding: 13px; background: #f1f8f3; }
.screen .opt.off { opacity: .5; }
.screen .opt-dot { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mid); }
.screen .opt.on .opt-dot { border: 7px solid var(--brand); }
.screen .opt-main { flex: 1 1 auto; min-width: 0; }
.screen .opt-title { font-size: 17px; font-weight: 700; }
.screen .opt-sub { font-size: 13px; color: var(--mid); }
.screen .opt-right { font-size: 17px; font-weight: 700; flex: 0 0 auto; }
.screen .count { display: flex; align-items: center; gap: 12px; }
.screen .count-label { flex: 1 1 auto; font-size: 17px; font-weight: 600; }
.screen .count-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--mid); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.screen .count-val { min-width: 28px; text-align: center; font-size: 20px; font-weight: 700; }

/* overlays */
.screen .scrim { position: absolute; inset: 0; background: rgba(23, 26, 31, .45); }
.screen .ovwrap { position: absolute; left: 0; top: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.screen .ovwrap.sheet { align-items: flex-end; }
.screen .dlg { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--white); }
.easy .dlg { padding: 20px; gap: 14px; }
.screen .dlg.modal { border-radius: 12px; max-width: calc(100% - 32px); }
.screen .dlg.sheet { width: 100%; border-radius: 22px 22px 0 0; }
.screen .dlg.drawer { position: absolute; top: 0; bottom: 0; right: 0; width: 440px; }
.narrow .dlg.drawer { left: 0; right: auto; width: 300px; }
.screen .dlg-head { display: flex; align-items: flex-start; gap: 12px; }
.screen .dlg-kind { font-size: 11px; font-weight: 600; color: var(--info); }
.screen .dlg-title { font-size: 19px; font-weight: 700; }
.screen .close { font-weight: 700; color: var(--mid); display: inline-flex; font-size: 18px; }
.screen .toast { position: absolute; right: 24px; display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 500; }
.narrow .toast { left: 16px; right: 16px; max-width: none; }
.screen .toast-kind { font-size: 10px; font-weight: 600; opacity: .7; }
.screen .toast > .ic { font-size: 18px; }
/* numbered pins that tie a side note to a spot on the screen */
.screen .pin { position: absolute; z-index: 5; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #d1432f; color: #fff; font: 700 13px/26px Inter, Arial, sans-serif; text-align: center; box-shadow: 0 0 0 3px #fff; }
.screen .pin.hot { box-shadow: 0 0 0 3px #fff, 0 0 0 7px #d1432f; }
.screen .hot-target { outline: 3px solid #d1432f; outline-offset: 3px; border-radius: 6px; }

/* the website on a computer: a plain header, one centred column, a footer */
.dev-site .body { margin: 0 auto; padding: 34px 0 44px; gap: 18px; flex: 1 1 auto; }
.screen .sitehead { display: flex; align-items: center; gap: 14px; padding: 14px 40px; border-bottom: 1px solid var(--line); }
.screen .sitebtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 600; }
.screen .sitebtn .ic { color: var(--brand); }
.screen .sitefoot { padding: 16px 40px; background: var(--fill); color: var(--mid); font-size: 13px; white-space: pre-wrap; text-align: center; }
.dev-site .tiles { gap: 14px; }
.dev-site .tile { min-height: 120px; }