/* Agora Kitchen scanner. Sage, 2026-09-07.
   Phone-first: Jennifer is holding a tin in one hand. Big taps, no jargon.
   The scroll-margin-top on the app is the fix for the theme's STICKY HEADER, which
   in the 09-07 spike screenshots sat on top of the diagnostics and half the button. */

.ks-app { max-width: 620px; margin: 0 auto; padding: 8px 0 24px;
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; scroll-margin-top: 90px; }
.ks-app h2 { margin: 0 0 2px; font-size: 1.3rem; }
.ks-app .ks-sub { color: #667; font-size: .9rem; margin: 0 0 14px; }

/* Clear the sticky site header so the first control is never underneath it. */
.ks-top { padding-top: 12px; }

.ks-btn { display: inline-block; padding: 16px 24px; font-size: 1.1rem; font-weight: 600;
	border-radius: 12px; border: 1px solid #b9c6b0; background: #f3f7ef; color: #234;
	cursor: pointer; margin: 6px 8px 6px 0; min-width: 132px; }
.ks-btn:active { transform: translateY(1px); }
.ks-have { background: #e8f6ea; border-color: #2e7d32; }
.ks-need { background: #fff4e2; border-color: #e08a00; }
.ks-skip { display: block; margin: 10px auto 0; background: none; border: 0;
	color: #778; font-size: .9rem; text-decoration: underline; cursor: pointer; }

#ks-cam { width: 100%; max-width: 520px; margin: 12px auto; border-radius: 12px;
	overflow: hidden; background: #111; }
#ks-cam:empty { min-height: 0; margin: 0; }

.ks-status { margin: 10px 0; min-height: 1.4em; font-size: .98rem; }
.ks-status.ks-good { color: #2e7d32; font-weight: 600; }
.ks-status.ks-warn { color: #a06000; }
.ks-status.ks-bad  { color: #b00; font-weight: 600; }

.ks-card { border: 1px solid #dfe4da; background: #fbfcfa; border-radius: 12px;
	padding: 16px; margin: 12px 0; }
.ks-name { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.ks-brand { color: #667; font-size: .95rem; margin-top: 2px; }
.ks-size-ok { margin-top: 6px; color: #2e7d32; font-weight: 600; }
.ks-note { margin: 10px 0; padding: 10px 12px; background: #fff6e5;
	border-left: 4px solid #e08a00; border-radius: 8px; font-size: .92rem; line-height: 1.45; }
.ks-card input[type=text] { width: 100%; padding: 14px; font-size: 1.05rem;
	border: 1px solid #ccd; border-radius: 10px; margin-top: 8px; box-sizing: border-box; }
.ks-card select { padding: 12px; font-size: 1rem; border: 1px solid #ccd;
	border-radius: 10px; margin-top: 8px; }
.ks-acts { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.ks-acts .ks-btn { flex: 1 1 132px; margin: 0; }

.ks-lists { margin-top: 20px; }
.ks-lists h3 { font-size: 1.05rem; margin: 18px 0 6px; padding-bottom: 4px;
	border-bottom: 1px solid #e6e6e6; }
.ks-lists h3 span { color: #889; font-weight: 400; font-size: .9rem; }
.ks-empty { color: #889; font-style: italic; font-size: .92rem; margin: 6px 0; }

.ks-row { display: flex; align-items: center; gap: 10px; padding: 12px 0;
	border-bottom: 1px solid #f0f0f0; }
.ks-row-main { flex: 1 1 auto; min-width: 0; }
.ks-row-name { font-weight: 600; }
.ks-row-brand { color: #778; font-size: .88rem; }
/* A trailing "?" is a size a human never confirmed — the doubt stays visible in the list,
   not just at the moment of scanning. */
.ks-row-size { display: inline-block; margin-left: 8px; color: #556; font-size: .85rem;
	background: #f0f2ee; border-radius: 6px; padding: 1px 7px; }
.ks-row-acts { flex: 0 0 auto; display: flex; gap: 6px; }
.ks-mini { padding: 9px 12px; font-size: .85rem; border-radius: 8px;
	border: 1px solid #ccd4c8; background: #f6f8f4; color: #245; cursor: pointer; }
.ks-mini.ks-x { color: #a33; border-color: #e3c6c6; background: #fdf6f6;
	font-size: 1.1rem; line-height: 1; padding: 7px 12px; }

.ks-manual { margin-top: 22px; padding-top: 14px; border-top: 1px solid #e3e3e3; }
.ks-manual input { padding: 14px; font-size: 1.05rem; width: 58%; max-width: 240px;
	border: 1px solid #ccd; border-radius: 10px; }

.ks-gate { padding: 18px; text-align: center; }

/* Count controls. Big steppers because she is one-handed with a tin in the other,
   and a bare number field on a phone means summoning a keyboard for '12'. */
.ks-qty { display:flex; align-items:center; gap:8px; margin-top:12px; font-weight:600; }
.ks-qty input { width:72px; padding:14px 8px; font-size:1.15rem; text-align:center;
	border:1px solid #ccd; border-radius:10px; }
.ks-step { width:52px; height:52px; font-size:1.5rem; line-height:1; border-radius:12px;
	border:1px solid #ccd4c8; background:#f6f8f4; color:#245; cursor:pointer; }
.ks-step:active { transform:translateY(1px); }
/* The count leads the row: 'x12 Gatorade' reads the way she'd say it. */
.ks-count { display:inline-block; margin-right:8px; font-weight:700; color:#2e7d32;
	background:#e8f6ea; border-radius:6px; padding:1px 8px; font-size:.9rem; }