/* ══════════════════════════════════════════════════════════════
   AN CADASTRE — the field ledger.

   Designed for one thumb, in sunlight, standing up, possibly with
   the other hand full. Every target here is larger than the site's
   44px floor because the floor assumes somebody sitting down.

   The operation grid is the whole interface. It is two columns on
   a phone with 64px rows, which is big enough to hit without
   looking — and not looking is the actual requirement.
   ══════════════════════════════════════════════════════════════ */

.an-c {
	--c-ink:    #F2F4F1;
	--c-dim:    rgba(242, 244, 241, .64);
	--c-faint:  rgba(242, 244, 241, .40);
	--c-ground: #0A1110;
	--c-panel:  rgba(255, 255, 255, .055);
	--c-panel2: rgba(255, 255, 255, .09);
	--c-line:   rgba(255, 255, 255, .12);
	--c-hot:    #5FD8A0;
	--c-warn:   #E0A63C;

	color: var(--c-ink);
	background: var(--c-ground);
	font-family: var(--an-font-ui, system-ui, sans-serif);
	padding: clamp(16px, 4vw, 40px) clamp(14px, 4vw, 40px) clamp(48px, 8vw, 96px);
	max-width: 900px;
	margin: 0 auto;
	overflow-x: clip;
}

.an-c-eyebrow {
	display: block;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-faint);
	margin-bottom: 6px;
}

.an-c-head h1 {
	margin: 0;
	font-size: clamp(1.6rem, 1.3rem + 1.8vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	font-weight: 600;
}

.an-c-head-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.an-c-sub {
	margin: 12px 0 0;
	max-width: 60ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--c-dim);
}

/* The sync state is deliberately quiet. It is a fact about the
   network, not about whether the grower's work was recorded — and
   confusing those two is what makes people tap twice. */
.an-c-sync {
	flex: 0 0 auto;
	padding: 6px 11px;
	border-radius: 999px;
	border: 1px solid var(--c-line);
	font-size: 12px;
	color: var(--c-faint);
	white-space: nowrap;
}

.an-c-sync[data-state="queued"] { border-color: rgba(224, 166, 60, .4); color: var(--c-warn); }
.an-c-sync[data-state="synced"] { border-color: rgba(95, 216, 160, .35); color: var(--c-hot); }

.an-c-sec { margin: clamp(24px, 5vw, 40px) 0 0; }

.an-c-sec h2 {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-faint);
}

/* ── fields ─────────────────────────────────────────────────── */

.an-c-parcels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
	margin-bottom: 10px;
}

.an-c-parcel {
	display: grid;
	gap: 2px;
	min-height: 58px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--c-line);
	background: var(--c-panel);
	color: var(--c-dim);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.an-c-parcel b { font-size: 15px; font-weight: 500; color: var(--c-ink); }
.an-c-parcel span { font-size: 12px; color: var(--c-faint); }

.an-c-parcel.is-on {
	border-color: var(--c-hot);
	background: rgba(95, 216, 160, .14);
}

/* ── repeat: the loudest thing on the page ──────────────────── */

.an-c-repeat {
	display: grid;
	gap: 3px;
	width: 100%;
	min-height: 66px;
	padding: 12px 16px;
	margin: 0 0 12px;
	border-radius: 14px;
	border: 1px solid var(--c-hot);
	background: rgba(95, 216, 160, .16);
	color: var(--c-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.an-c-repeat:active { background: rgba(95, 216, 160, .26); }

.an-c-repeat-l {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-hot);
	font-weight: 600;
}

.an-c-repeat-b { font-size: 15.5px; color: var(--c-ink); }

/* ── the operation grid ─────────────────────────────────────── */

.an-c-kinds {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

@media (min-width: 560px) {
	.an-c-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.an-c-kind {
	display: flex;
	align-items: center;
	gap: 10px;
	/* 64px. Larger than the site's 44px floor, because the floor
	   assumes somebody sitting down and this is used standing up
	   with one hand. */
	min-height: 64px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--c-line);
	background: var(--c-panel);
	color: var(--c-ink);
	font: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}

.an-c-kind i { font-style: normal; font-size: 20px; line-height: 1; color: var(--c-faint); }
.an-c-kind:active { background: var(--c-panel2); }

.an-c-kind.is-armed {
	border-color: var(--c-warn);
	background: rgba(224, 166, 60, .16);
}

.an-c-kind.is-armed i { color: var(--c-warn); }

/* ── optional detail ────────────────────────────────────────── */

.an-c-more {
	margin: 12px 0 0;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, .025);
	overflow: hidden;
}

.an-c-more > summary {
	list-style: none;
	cursor: pointer;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	font-size: 14px;
	color: var(--c-dim);
}

.an-c-more > summary::-webkit-details-marker { display: none; }
.an-c-more > summary::after { content: "+"; font-size: 20px; color: var(--c-faint); }
.an-c-more[open] > summary::after { content: "−"; }

.an-c-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 0 15px 15px;
}

.an-c-wide { grid-column: 1 / -1; }

.an-c-spray {
	border-top: 1px solid var(--c-line);
	padding-top: 14px;
}

.an-c-field { display: grid; gap: 5px; min-width: 0; }
.an-c-field > span { font-size: 13px; color: var(--c-dim); }
.an-c-field small { font-size: 11.5px; line-height: 1.45; color: var(--c-faint); }

.an-c-field input {
	min-height: 46px;
	width: 100%;
	padding: 0 11px;
	border-radius: 9px;
	border: 1px solid var(--c-line);
	background: var(--c-panel);
	color: var(--c-ink);
	font: inherit;
	/* 16px, so iOS does not zoom the page on focus. */
	font-size: 16px;
}

.an-c-field input:focus-visible { outline: 2px solid var(--c-hot); outline-offset: 1px; }

/* ── the list ───────────────────────────────────────────────── */

.an-c-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px;
	background: var(--c-line); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }

.an-c-list li {
	background: var(--c-ground);
	padding: 11px 14px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 10px;
	align-items: baseline;
}

.an-c-list-k { font-size: 15px; font-weight: 500; }
.an-c-list-d { font-size: 12.5px; color: var(--c-faint); font-variant-numeric: tabular-nums; }
.an-c-list-m { grid-column: 1 / -1; font-size: 13px; color: var(--c-dim); overflow-wrap: anywhere; }

.an-c-empty {
	margin: 0;
	padding: 14px;
	border-radius: 12px;
	border: 1px dashed var(--c-line);
	font-size: 14px;
	line-height: 1.55;
	color: var(--c-faint);
}

.an-c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 18px;
	border-radius: 10px;
	border: 1px solid var(--c-line);
	background: var(--c-panel);
	color: var(--c-ink);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}

.an-c-btn:hover { background: var(--c-panel2); }
.an-c-btn:focus-visible { outline: 2px solid var(--c-hot); outline-offset: 2px; }