/**
 * Living Earth Market app 0.16.0
 *
 * Built on the web app design standard (from field.app), in the colours of
 * the Living Earth marketplace: navy #203b5f, lime #cadb36, orange #d9622b,
 * cream ground #faf5ea (0.10.1, warmer). Roles stay the same as the standard; only colours change.
 * Dark mode only redefines the tokens.
 *
 * Contrast (checked): navy on lime 7.4:1, navy on white 11.3:1, lime on the
 * dark ground 11.4:1, orange text #b04a1c on white 5.6:1. White on lime is
 * never used. White on orange #d9622b only for icons and large bold text.
 */

/* ------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------- */
:root {
	--brand: #203b5f;          /* brand dark: header, headings, primary buttons */
	--head: #203b5f;           /* heading text */
	--accent: #cadb36;         /* accent: borders, highlights, progress */
	--accent-soft: #f1f6cf;    /* icon tiles, selection bar */
	--accent-ink: #203b5f;     /* text on the accent */
	--attention: #d9622b;      /* log out, badges (shapes and icons) */
	--attention-text: #b04a1c; /* attention as text */
	--ground: #faf5ea;
	--card: #ffffff;
	--strip: #eef1f5;          /* toolbar strip */
	--ink: #16243a;
	--muted: #3f4b5c;          /* darker than before: readable, not dull */
	--line: #d9dee6;
	--header: #203b5f;
	--header-ink: #ffffff;
	--header-muted: #c4cfdc;
	--primary-bg: #203b5f;
	--primary-ink: #ffffff;
	--hover: #f3f6fa;
	--ok: #1f6b35;      --ok-bg: #e3f2e7;
	--amber: #8a5200;   --amber-bg: #fdf0d9;
	--red: #b3261e;     --red-bg: #fbe5e3;
	--blue: #1d4f91;    --blue-bg: #e3edfa;
	--grey: #59646f;    --grey-bg: #eceff2;
	--focus: #1f6feb;
	--control: 44px;
	--radius: 10px;
	--radius-card: 14px;
	--radius-input: 8px;
	--radius-pill: 12px;
	--shadow: 0 1px 2px rgba(16, 36, 58, .06), 0 6px 18px rgba(16, 36, 58, .06);
	--menu-h: 52px;
	--title-h: 54px;
	--tool-h: 62px;
	--sel-h: 54px;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--brand: #cadb36;
		--head: #eef2f7;
		--accent: #cadb36;
		--accent-soft: #2a3420;
		--accent-ink: #121a26;
		--attention: #f08a55;
		--attention-text: #ffab80;
		--ground: #0e1724;
		--card: #152131;
		--strip: #1b2a3d;
		--ink: #e8edf3;
		--muted: #a7b2c0;
		--line: #2d3d52;
		--header: #0a111c;
		--header-ink: #eef2f7;
		--header-muted: #a7b2c0;
		--primary-bg: #cadb36;
		--primary-ink: #121a26;
		--hover: #1c2b3f;
		--ok: #7fd697;      --ok-bg: #173323;
		--amber: #f3bf66;   --amber-bg: #3a2c12;
		--red: #ff9b92;     --red-bg: #3d1c1a;
		--blue: #9cc1fb;    --blue-bg: #18294a;
		--grey: #b5bec6;    --grey-bg: #262f3a;
		--focus: #7ab0ff;
		--shadow: 0 1px 2px rgba(0, 0, 0, .3);
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--brand: #cadb36;
	--head: #eef2f7;
	--accent: #cadb36;
	--accent-soft: #2a3420;
	--accent-ink: #121a26;
	--attention: #f08a55;
	--attention-text: #ffab80;
	--ground: #0e1724;
	--card: #152131;
	--strip: #1b2a3d;
	--ink: #e8edf3;
	--muted: #a7b2c0;
	--line: #2d3d52;
	--header: #0a111c;
	--header-ink: #eef2f7;
	--header-muted: #a7b2c0;
	--primary-bg: #cadb36;
	--primary-ink: #121a26;
	--hover: #1c2b3f;
	--ok: #7fd697;      --ok-bg: #173323;
	--amber: #f3bf66;   --amber-bg: #3a2c12;
	--red: #ff9b92;     --red-bg: #3d1c1a;
	--blue: #9cc1fb;    --blue-bg: #18294a;
	--grey: #b5bec6;    --grey-bg: #262f3a;
	--focus: #7ab0ff;
	--shadow: 0 1px 2px rgba(0, 0, 0, .3);
	color-scheme: dark;
}

/* ------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--menu-h) + var(--title-h) + var(--tool-h) + 16px); }
body.lem-app {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font: 16px/1.45 var(--font);
	min-height: 100vh;
	padding-bottom: env(safe-area-inset-bottom);
}
.lem-app h1, .lem-app h2, .lem-app h3 { color: var(--head); font-weight: 800; line-height: 1.2; margin: 0 0 .5rem; }
.lem-app h1 { font-size: 1.45rem; }
.lem-app h2, .lem-h2 { font-size: 1.15rem; }
.lem-app h3, .lem-h3 { font-size: 1rem; }
.lem-app p { margin: 0 0 .75rem; }
:where(.lem-app) a { color: inherit; }
.lem-app img { max-width: 100%; height: auto; }
.lem-app :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.lem-app hr { border: 0; border-top: 1px solid var(--line); margin: .5rem 0; }
.lem-vh, .lem-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.lem-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--card); color: var(--ink); padding: .6rem 1rem; border-radius: var(--radius); }
.lem-skip:focus { left: 8px; }
.lem-muted { color: var(--muted); }
.lem-prewrap { white-space: pre-wrap; }
.lem-num { font-variant-numeric: tabular-nums; }
.lem-link { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.lem-loading { padding: 2rem 1rem; color: var(--muted); text-align: center; }
.lem-i { flex: none; display: block; }
.lem-hp { position: absolute; left: -9999px; }

/* ------------------------------------------------------------------
 * Practice site banner
 * ---------------------------------------------------------------- */
.lem-practice { /* A mode line: the soft accent, never amber or red (web-app-design-standard, 8 Nov 2026; 0.30.10). */
	background: var(--accent-soft);
	border-bottom: 3px solid var(--accent);
	color: var(--ink);
	padding: .45rem 1rem;
	font-size: .9rem;
	text-align: center;
}

/* ------------------------------------------------------------------
 * Header (dark band)
 * ---------------------------------------------------------------- */
.lem-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px max(16px, calc((100vw - 1360px) / 2));
	background: var(--header);
	color: var(--header-ink);
}
.lem-header__logo { display: block; width: 156px; height: 46px; color: var(--accent); flex: none; }
.lem-header__logo svg { display: block; height: 46px; width: auto; max-width: 100%; }
.lem-header__id { display: flex; flex-direction: column; min-width: 0; }
.lem-header__app { color: var(--accent); font-weight: 800; text-decoration: none; font-size: 1.05rem; line-height: 1.2; white-space: nowrap; }
.lem-person { position: relative; }
.lem-who {
	background: none; border: 0; padding: 2px 0; color: var(--header-muted); font: inherit; font-size: .85rem;
	cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
.lem-who__name { color: var(--header-ink); }
.lem-who:hover .lem-who__name { text-decoration: underline; }
.lem-header__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.lem-header .lem-ib { background: transparent; border-color: transparent; color: var(--header-ink); }
.lem-header .lem-ib:hover { background: rgba(255, 255, 255, .12); }
.lem-header .lem-ib--out { background: var(--attention); color: #fff; border-color: var(--attention); }
.lem-header .lem-ib--out:hover { filter: brightness(1.08); background: var(--attention); }
.lem-btn--onDark { background: transparent; color: var(--header-ink); border-color: rgba(255, 255, 255, .5); }

/* Search */
.lem-search { position: relative; flex: 1 1 260px; max-width: 420px; margin-left: 12px; }
.lem-search__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.lem-search__input {
	width: 100%; height: 40px; border-radius: var(--radius); border: 1px solid transparent; padding: 0 14px 0 36px;
	font: inherit; font-size: .95rem; background: var(--card); color: var(--ink);
}
.lem-search__results {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; list-style: none; margin: 0; padding: 6px;
	background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 70vh; overflow: auto;
}
.lem-search__hit { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 8px 10px; border-radius: 8px; text-decoration: none; }
.lem-search__hit:hover, .lem-search__hit:focus { background: var(--hover); }
.lem-search__kind { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); width: 100%; }
.lem-search__none { padding: 10px; color: var(--muted); }

/* Signal chip */
.lem-signal {
	display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px;
	font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; border: 0; white-space: nowrap;
}
.lem-signal--off { background: #ffd25e; color: #2b2200; }
.lem-signal--sending { background: var(--accent); color: var(--accent-ink); }

/* Bell badge */
.lem-bell { position: relative; }
.lem-bell__count {
	position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
	background: var(--attention); color: #fff; font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center;
}

/* ------------------------------------------------------------------
 * Menu bar (sticky, white, 3 px accent bottom border)
 * ---------------------------------------------------------------- */
.lem-menu {
	position: sticky; top: 0; z-index: 40;
	background: var(--card); border-bottom: 3px solid var(--accent);
	padding: 0 max(16px, calc((100vw - 1360px) / 2));
	min-height: var(--menu-h);
	display: flex; align-items: center;
}
.lem-menu__groups { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 4px; justify-content: center; } /* centred under the header */
.lem-menu__item { position: relative; }
.lem-menu__group {
	height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius); background: transparent;
	color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
	white-space: nowrap; /* Labels never wrap (issue #32). */
}
.lem-menu__group:hover { background: var(--hover); }
.lem-menu__group[aria-expanded="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); } /* Open: shown by style, never an arrow. */
.lem-menu__group[aria-current="true"] { background: var(--accent-soft); color: var(--head); box-shadow: inset 0 -3px 0 var(--accent); }
.lem-menu__phone { display: none; }
.lem-dropdown {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 240px; list-style: none; margin: 0; padding: 6px;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.lem-dropdown__item {
	display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 8px;
	text-decoration: none; color: var(--ink); background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.lem-dropdown__item:hover, .lem-dropdown__item:focus-visible { background: var(--hover); }
.lem-dropdown__item[aria-current="page"] { background: var(--accent-soft); font-weight: 700; }
.lem-dropdown__item[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: 800; }
.lem-dropdown__label { margin: 4px 12px 2px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lem-dropdown--person { left: 0; top: calc(100% + 8px); color: var(--ink); }
.lem-dropdown--cols { columns: 3 220px; column-gap: 12px; width: min(760px, calc(100vw - 32px)); } /* Headed columns (0.30.10). */
.lem-dropdown--cols > li { break-inside: avoid; }
.lem-dropdown--cols > .lem-dropdown__label { break-after: avoid; padding-top: 6px; }
.lem-menu__item--setup .lem-dropdown { left: auto; right: 0; } /* Near the right edge: opens to the left. */

/* ------------------------------------------------------------------
 * Main, cards, titles
 * ---------------------------------------------------------------- */
.lem-main { max-width: 1360px; margin: 0 auto; padding: 18px 16px 120px; }
.lem-main:focus { outline: none; }
.lem-main--narrow { max-width: 720px; }
.lem-card {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
	padding: 20px; margin: 0 0 16px;
}
.lem-card__title { display: flex; align-items: center; gap: 12px; margin-bottom: .75rem; }
.lem-card__title .lem-h2 { margin: 0; }
.lem-tile {
	width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--head);
	display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.lem-tile--s { width: 36px; height: 36px; }
.lem-titlebar {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	position: sticky; top: var(--menu-h); z-index: 30; background: var(--ground);
	min-height: var(--title-h); padding: 6px 0;
}
.lem-titlebar h1 { margin: 0; font-size: 1.35rem; }
.lem-intro { color: var(--muted); max-width: 72ch; }
.lem-meta { color: var(--muted); font-size: .9rem; margin: -2px 0 12px; }
.lem-meta__reason { color: var(--amber); }
.lem-head h1 { margin-top: .5rem; }
.lem-purpose { color: var(--muted); }

/* ------------------------------------------------------------------
 * Buttons and controls (44 px)
 * ---------------------------------------------------------------- */
.lem-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--control); padding: 0 16px; border-radius: var(--radius);
	border: 1px solid var(--line); background: var(--card); color: var(--ink);
	font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.lem-btn:hover { background: var(--hover); }
.lem-btn--primary { background: var(--primary-bg); color: var(--primary-ink); border-color: var(--primary-bg); }
.lem-btn--primary:hover { background: var(--primary-bg); filter: brightness(1.12); }
.lem-btn--danger { background: var(--red); color: #fff; border-color: var(--red); }
:root[data-theme="dark"] .lem-btn--danger { color: #1a0d0c; }
.lem-btn--link, .lem-btn--quiet { background: none; border-color: transparent; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; padding: 0 8px; font-weight: 600; }
.lem-btn--link:hover, .lem-btn--quiet:hover { background: var(--hover); }
.lem-btn--menu { font-weight: 600; white-space: nowrap; }
.lem-btn--menu[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.lem-btn--menu.is-changed { border-color: var(--amber); }
.lem-btn--tool span { font-weight: 700; }
.lem-btn[disabled], .lem-ib[disabled] { opacity: .4; cursor: not-allowed; }
.lem-ib {
	width: var(--control); height: var(--control); border-radius: var(--radius);
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; padding: 0; flex: none;
}
.lem-ib:hover { background: var(--hover); }
.lem-ib[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-ink); border-color: var(--primary-bg); }
.lem-ib--add { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.lem-ib--add:hover { background: var(--accent); filter: brightness(1.05); }
.lem-ib--s { width: 34px; height: 34px; }
.lem-disabled-wrap { display: inline-flex; }
.lem-disabled-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }

.lem-input, .lem-field input:not([type="checkbox"]):not([type="radio"]), .lem-field select, .lem-field textarea {
	width: 100%; min-height: var(--control); padding: 8px 12px; border: 1px solid var(--line);
	border-radius: var(--radius-input); background: var(--card); color: var(--ink); font: inherit;
}
textarea.lem-input, .lem-field textarea { min-height: 96px; resize: vertical; }
.lem-input:focus, .lem-field :is(input, select, textarea):focus { border-color: var(--focus); outline: 2px solid transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.lem-input[disabled] { background: var(--strip); color: var(--muted); }
select.lem-input { appearance: auto; }
.lem-label, .lem-field > label { display: block; font-weight: 700; margin: 0 0 4px; }
.lem-req { color: var(--red); }
.lem-help { color: var(--muted); font-size: .88rem; margin: 4px 0 0; }
.lem-field { margin: 0 0 14px; min-width: 0; }
.lem-field__error { color: var(--red); font-weight: 600; font-size: .9rem; margin: 4px 0 0; }
.lem-field.has-error :is(input, select, textarea) { border-color: var(--red); }
.lem-check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control); cursor: pointer; }
.lem-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); flex: none; }
.lem-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lem-inline .lem-input { flex: 1 1 200px; width: auto; }

/* Segmented toggles */
.lem-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.lem-seg__b { min-height: 42px; min-width: 42px; padding: 0 12px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lem-seg__b + .lem-seg__b { border-left: 1px solid var(--line); }
.lem-seg__b[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-ink); }

/* Pills, dots, banners */
.lem-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill); font-size: .8rem; font-weight: 700; white-space: nowrap; line-height: 1.5; }
.lem-pill--green { background: var(--ok-bg); color: var(--ok); }
.lem-pill--amber { background: var(--amber-bg); color: var(--amber); }
.lem-pill--red { background: var(--red-bg); color: var(--red); }
.lem-pill--blue { background: var(--blue-bg); color: var(--blue); }
.lem-pill--grey { background: var(--grey-bg); color: var(--grey); }
.lem-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; margin-top: 6px; }
.lem-dot--green { background: var(--ok); }
.lem-dot--amber { background: var(--amber); }
.lem-dot--red { background: var(--red); }
.lem-dot--grey { background: var(--grey); }
.lem-banner {
	display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius);
	border-left: 6px solid; margin: 0 0 12px; background: var(--card);
}
.lem-banner--amber { border-color: var(--amber); background: var(--amber-bg); color: var(--ink); }
.lem-banner--red { border-color: var(--red); background: var(--red-bg); color: var(--ink); }
.lem-banner--green { border-color: var(--ok); background: var(--ok-bg); color: var(--ink); }
.lem-banner--blue { border-color: var(--blue); background: var(--blue-bg); color: var(--ink); }
.lem-banner .lem-i { margin-top: 1px; }

/* ------------------------------------------------------------------
 * Toolbars (strip)
 * ---------------------------------------------------------------- */
.lem-toolbar {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
	background: var(--strip); border-radius: var(--radius); padding: 8px; margin: 0 0 12px;
	position: sticky; top: calc(var(--menu-h) + var(--title-h)); z-index: 25;
}
.lem-card--list .lem-toolbar { margin: -8px -8px 12px; }
.lem-toolbar__group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lem-toolbar__views:empty { display: none; }
.lem-toolbar__views .lem-pop { left: 0; right: auto; max-width: calc(100vw - 32px); }
@media (max-width: 859px) {
	/* On phones the two menus open across the toolbar, never off the screen. */
	.lem-toolbar__views .lem-popwrap { position: static; }
	.lem-toolbar__views .lem-pop { left: 8px; right: 8px; width: auto; max-width: none; }
}
.lem-namecell__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lem-counter { min-width: 7ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 6px; }
.lem-popwrap { position: relative; display: inline-flex; }
.lem-pop {
	position: absolute; top: calc(100% + 6px); right: 0; z-index: 45; width: min(340px, 90vw);
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px;
}
.lem-filters .lem-pop { left: 0; right: auto; }
.lem-pop__title { font-weight: 800; margin: 0 0 6px; color: var(--head); }
.lem-colist { list-style: none; margin: 8px 0; padding: 0; max-height: 50vh; overflow: auto; }
.lem-colist__item { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 8px; }
.lem-colist__item .lem-check { flex: 1; min-height: 38px; }
.lem-colist__item.is-dragging { opacity: .5; }
.lem-drag { color: var(--muted); cursor: grab; }
.lem-viewlist { list-style: none; margin: 6px 0 10px; padding: 0; }
.lem-viewitem { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.lem-viewitem.is-current { background: var(--accent-soft); }
.lem-viewitem__name { flex: 1; text-align: left; background: none; border: 0; font: inherit; color: var(--ink); min-height: 40px; cursor: pointer; padding: 0 6px; }
.lem-star { width: 34px; height: 34px; border: 0; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lem-star.is-on { color: var(--attention); }
.lem-star.is-on path { fill: currentColor; }

/* Filter row */
.lem-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.lem-filter__search { flex: 1 1 220px; width: auto; }
.lem-filters__fields { display: contents; }
.lem-filters__toggle { display: none !important; }
.lem-filter__wrap { display: inline-flex; }
.lem-filter { width: auto; max-width: 220px; }
.lem-filter.is-on { border-color: var(--brand); background: var(--accent-soft); font-weight: 700; }

/* Selection bar */
.lem-selbar {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius);
	padding: 6px 10px; margin: 0 0 12px; position: sticky; top: calc(var(--menu-h) + var(--title-h) + var(--tool-h)); z-index: 24;
	min-height: var(--sel-h);
}
.lem-selbar__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* ------------------------------------------------------------------
 * Tables
 * ---------------------------------------------------------------- */
.lem-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.lem-table th, .lem-table td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.lem-table thead th {
	position: sticky; top: calc(var(--menu-h) + var(--title-h) + var(--tool-h)); z-index: 20;
	background: var(--strip); font-size: .85rem; color: var(--ink); padding: 0; border-bottom: 2px solid var(--accent);
}
body.has-selection .lem-table thead th { top: calc(var(--menu-h) + var(--title-h) + var(--tool-h) + var(--sel-h) + 12px); }
.lem-sort { width: 100%; min-height: 42px; padding: 0 10px; background: none; border: 0; font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
.lem-th-num .lem-sort, .lem-td-num { text-align: right; }
.lem-sort:hover { color: var(--ink); }
.lem-table tbody tr:hover td, .lem-table tbody tr:hover th { background: var(--hover); }
.lem-table tr.is-selected td { background: var(--accent-soft); }
.lem-th-check, .lem-td-check { width: 44px; padding-left: 12px !important; }
.lem-th-check { padding-top: 10px !important; }
.lem-table input[type="checkbox"], .lem-gcard input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); margin: 2px 0 0; }
.lem-table tfoot th, .lem-table tfoot td { font-weight: 800; background: var(--strip); border-bottom: 0; }
.lem-namecell__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lem-rowlink { font-weight: 700; color: var(--head); text-decoration: none; }
.lem-rowlink:hover { text-decoration: underline; }
.lem-namecell__sub { color: var(--muted); font-size: .88rem; }
.lem-namecell__reason { color: var(--amber); font-size: .85rem; }
.lem-date__rel { font-size: .85rem; }
.is-overdue, .lem-overdue { color: var(--red); font-weight: 700; }
.lem-grouprow th, .lem-grouprow td { background: var(--strip); }
.lem-grouprow--1 th, .lem-grouprow--1 td { background: color-mix(in srgb, var(--strip) 50%, var(--card)); }
.lem-grouprow--1 .lem-fold { padding-left: 18px; }
.lem-fold { background: none; border: 0; font: inherit; font-weight: 800; color: var(--head); cursor: pointer; min-height: 32px; padding: 0; }
.lem-groupctl { margin: 10px 0 0; }
.lem-empty { text-align: center; padding: 28px 12px; color: var(--muted); }
.lem-empty p { font-size: 1.05rem; }

/* Cards view */
.lem-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lem-gcard { position: relative; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 12px; padding: 14px; }
.lem-gcard.is-selected { background: var(--accent-soft); }
.lem-gcard__check { position: absolute; top: 12px; right: 12px; }
.lem-gcard__dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 10px 0 0; font-size: .92rem; }
.lem-gcard__dl dt { color: var(--muted); }
.lem-gcard__dl dd { margin: 0; }

/* Small tables (options, lines) */
.lem-mini { border-collapse: collapse; width: 100%; font-size: .95rem; }
.lem-mini th, .lem-mini td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: middle; }
.lem-mini thead th { color: var(--muted); font-size: .85rem; }
.lem-mini--edit .lem-input { min-width: 90px; }
.lem-input--qty { margin-top: 6px; }
.lem-mini--lines td, .lem-mini--lines th { vertical-align: top; }
.lem-mini--lines tfoot th, .lem-mini--lines tfoot td { border-top: 2px solid var(--line); border-bottom: 0; }
.lem-mini .lem-td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lem-nowrap { white-space: nowrap; }
.lem-mini tr.is-adjust td { background: var(--amber-bg); }
.lem-neg { color: var(--red); }

/* ------------------------------------------------------------------
 * Record screen
 * ---------------------------------------------------------------- */
.lem-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lem-countbtn {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 20px;
	background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600;
}
.lem-countbtn strong { color: var(--head); }
.lem-countbtn:hover { border-color: var(--brand); }
.lem-countbtn.is-zero { opacity: .55; }
.lem-actionrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center; }
.lem-complete { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 16px; margin: 0 0 16px; }
.lem-complete__text { margin: 0 0 8px; }
.lem-meter { height: 10px; background: var(--grey-bg); border-radius: 5px; overflow: hidden; margin: 0 0 10px; }
.lem-meter__bar { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.lem-meter__bar--green { background: var(--ok); }
.lem-meter__bar--amber { background: #d99a1c; }
.lem-meter__bar--red { background: var(--red); }
.lem-meter__bar--grey { background: var(--accent); }
.lem-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lem-chip { display: inline-flex; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); }
.lem-chip button { border: 0; background: none; font: inherit; min-height: 36px; padding: 0 12px; cursor: pointer; color: var(--ink); }
.lem-chip__go:hover { background: var(--hover); }
.lem-chip__na { border-left: 1px solid var(--line) !important; color: var(--muted) !important; font-size: .85rem; }
.lem-chip__na:hover { background: var(--hover); }
.lem-section { padding-top: 16px; }
.lem-section__title { font-weight: 800; color: var(--head); font-size: 1.05rem; margin: 0 0 12px; } /* Inside the card, at its top (issue #41). */
.lem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 20px; }
.lem-grid--read { gap: 12px 20px; margin: 4px 0 0; }
.lem-field--wide, .lem-read--wide { grid-column: 1 / -1; }
.lem-read dt { color: var(--muted); font-size: .88rem; font-weight: 600; }
.lem-read dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.lem-taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lem-taglist li { background: var(--grey-bg); border-radius: 12px; padding: 2px 10px; font-size: .92rem; }
.lem-feelist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 16px; }
.lem-feelist li { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--line); padding: 2px 0; }
.lem-masked { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }
.lem-reveal { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; padding: 10px; background: var(--amber-bg); border-radius: var(--radius); }
.lem-reveal dd { margin: 0; font-family: ui-monospace, monospace; }
.lem-checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 12px; }
.lem-days { display: flex; flex-wrap: wrap; gap: 6px; }
.lem-day { position: relative; }
.lem-day input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.lem-day span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 21px; background: var(--card); font-weight: 700; }
.lem-day input:checked + span { background: var(--primary-bg); color: var(--primary-ink); border-color: var(--primary-bg); }
.lem-day input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.lem-fees { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.lem-fee { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lem-input--fee { width: 96px !important; min-height: 38px !important; text-align: right; }
.lem-location { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lem-location .lem-input { flex: 1 1 220px; width: auto; }
.lem-location .lem-help { width: 100%; }
.lem-suggest { border-top: 1px dashed var(--line); padding-top: 12px; }

/* Save-state pill */
.lem-save {
	position: fixed; right: 16px; bottom: 16px; z-index: 70; padding: 10px 16px; border-radius: 22px;
	background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 700; font-size: .92rem; max-width: min(520px, calc(100vw - 32px));
}
.lem-save[data-state="saved"] { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.lem-save[data-state="error"] { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.lem-save[data-state="info"] { background: var(--blue-bg); color: var(--blue); border-color: var(--blue); }
.lem-save[data-state="queued"] { background: #fff3c4; color: #4a3800; border-color: #d9a400; }
.lem-save[data-state="pending"], .lem-save[data-state="saving"] { color: var(--muted); }

/* Toasts */
.lem-toasts { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(560px, calc(100vw - 24px)); }
.lem-toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); font-weight: 600; width: 100%; border-left: 6px solid; background: var(--card); color: var(--ink); }
.lem-toast--green { border-color: var(--ok); }
.lem-toast--amber { border-color: var(--amber); }
.lem-toast--red { border-color: var(--red); }
.lem-toast .lem-btn--link { margin-left: auto; }

/* Dialogs */
.lem-dialog {
	width: min(560px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px;
	background: var(--card); color: var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.lem-dialog::backdrop { background: rgba(10, 18, 30, .55); }
.lem-dialog__title { margin: 0 0 10px; }
.lem-dialog__body { max-height: 60vh; overflow: auto; }
.lem-dialog__body h3 { margin-top: .75rem; }
.lem-dialog__body .lem-input { margin-bottom: 10px; }
.lem-dialog__error { color: var(--red); font-weight: 700; margin: 8px 0 0; }
.lem-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lem-radios { border: 0; padding: 0; margin: 8px 0 0; }
.lem-radios legend { font-weight: 700; margin-bottom: 4px; }
.lem-radios .lem-check { display: flex; }
.lem-clash { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; background: var(--strip); padding: 10px; border-radius: var(--radius); }
.lem-clash dd { margin: 0; }

/* Tooltip */
.lem-tip { position: fixed; z-index: 90; max-width: 300px; padding: 7px 10px; border-radius: 8px; background: #16243a; color: #fff; font-size: .85rem; pointer-events: none; box-shadow: var(--shadow); }
:root[data-theme="dark"] .lem-tip { background: #e8edf3; color: #121a26; }

/* Bell panel */
.lem-panel {
	position: fixed; top: 70px; right: max(12px, calc((100vw - 1360px) / 2)); z-index: 65; width: min(420px, calc(100vw - 24px)); max-height: calc(100vh - 90px); overflow: auto;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}
.lem-panel__head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); }
.lem-panel__head h2 { margin: 0 auto 0 0; }
.lem-panel__list { list-style: none; margin: 0; padding: 6px; }
.lem-panel__item { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.lem-panel__item:hover { background: var(--hover); }
.lem-panel__item.is-unread { background: var(--accent-soft); font-weight: 600; }
.lem-panel__when { grid-column: 2; color: var(--muted); font-size: .82rem; font-weight: 400; }
.lem-panel__note { padding: 10px; border: 1px solid var(--accent); border-radius: 10px; margin: 4px 0 8px; }
.lem-panel__empty { padding: 18px; color: var(--muted); text-align: center; }

/* Guide */
.lem-tour-ring { position: fixed; z-index: 95; border-radius: 12px; box-shadow: 0 0 0 4px var(--attention), 0 0 0 9999px rgba(10, 18, 30, .45); pointer-events: none; transition: all .2s ease; }
.lem-tour-box { position: fixed; z-index: 96; width: min(360px, calc(100vw - 24px)); background: var(--card); color: var(--ink); border-radius: var(--radius-card); padding: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.lem-tour-box__step { color: var(--muted); font-size: .85rem; margin-bottom: 4px; }
.lem-tour-box__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .lem-tour-ring { transition: none; } }

/* ------------------------------------------------------------------
 * Home
 * ---------------------------------------------------------------- */
.lem-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 16px; }
.lem-numtile {
	display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--card); border: 1px solid var(--line);
	border-top: 4px solid var(--accent); border-radius: 12px; text-decoration: none; color: var(--ink);
}
.lem-numtile:hover { box-shadow: var(--shadow); }
.lem-numtile__n { font-size: 2rem; font-weight: 800; color: var(--head); line-height: 1; font-variant-numeric: tabular-nums; }
.lem-numtile--amber { border-top-color: #d99a1c; }
.lem-numtile--red { border-top-color: var(--red); }
.lem-numtile--green { border-top-color: var(--ok); }
.lem-numtile--blue { border-top-color: var(--blue); }
.lem-numtile--grey { border-top-color: var(--grey); }

/* Orders, pick lists, photos */
.lem-part__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lem-items { list-style: none; margin: 0 0 10px; padding: 0; }
.lem-item { display: grid; grid-template-columns: 48px auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lem-item--pick { grid-template-columns: 64px 1fr; font-size: 1.05rem; }
.lem-item__img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--grey-bg); display: block; }
.lem-item__qty { font-weight: 800; font-variant-numeric: tabular-nums; }
.lem-item__price { font-variant-numeric: tabular-nums; }
.lem-part__total { font-weight: 700; }
.lem-travel { background: var(--strip); border-radius: var(--radius); padding: 10px 12px; }
.lem-pick + .lem-pick { border-top: 2px solid var(--line); padding-top: 12px; margin-top: 12px; }
.lem-photos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lem-photo { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.lem-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.lem-photo__main { font-size: .82rem; font-weight: 800; color: var(--ok); }
.lem-photo.is-waiting img { opacity: .6; }
.lem-photo.is-waiting .lem-photo__main { color: var(--amber); }

/* Conversation */
.lem-convo { margin-top: 24px; }
.lem-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 0 0 14px; overflow-x: auto; }
.lem-tab { min-height: 44px; padding: 0 14px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.lem-tab[aria-selected="true"] { color: var(--head); border-bottom-color: var(--accent); }
.lem-noteform { margin: 0 0 16px; }
.lem-noteform .lem-inline { justify-content: space-between; margin-top: 8px; }
.lem-notes, .lem-history, .lem-acts { list-style: none; margin: 0; padding: 0; }
.lem-note, .lem-history > li, .lem-act { border-top: 1px solid var(--line); padding: 10px 0; }
.lem-note__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.lem-history__head { margin-bottom: 2px; }
.lem-history ul { margin: 0; padding-left: 1.2rem; }
.lem-old { text-decoration: line-through; color: var(--muted); }
.lem-act.is-overdue { border-left: 4px solid var(--red); padding-left: 10px; }
.lem-act.is-done { color: var(--muted); }
.lem-actform { align-items: end; margin-bottom: 12px; }
.lem-done summary { cursor: pointer; font-weight: 700; padding: 8px 0; }

/* Help, outbox */
.lem-howto { border-top: 1px solid var(--line); padding: 8px 0; }
.lem-howto summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; }
.lem-release + .lem-release { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.lem-outbox { list-style: none; margin: 0 0 12px; padding: 0; }
.lem-outbox__item { border-top: 1px solid var(--line); padding: 10px 0; }
.lem-outbox__item.has-problem { border-left: 4px solid var(--red); padding-left: 10px; }
.lem-steps { padding-left: 1.2rem; }
.lem-failure h1 { margin-top: 0; }

/* Footer */
.lem-foot { display: flex; justify-content: space-between; gap: 12px; max-width: 1360px; margin: 0 auto; padding: 16px 16px 90px; color: var(--muted); font-size: .85rem; }

/* ------------------------------------------------------------------
 * Phone (below 860 px)
 * ---------------------------------------------------------------- */
@media (max-width: 859px) {
	:root { --title-h: 50px; --tool-h: 0px; --sel-h: 0px; }
	html { scroll-padding-top: 130px; }
	.lem-header { flex-wrap: wrap; gap: 8px 10px; padding: 8px 16px; }
	.lem-header__logo { width: 112px; height: 34px; }
	.lem-header__logo svg { height: 34px; }
	.lem-header__app { font-size: .95rem; }
	.lem-who { max-width: 46vw; }
	.lem-search { order: 10; flex: 1 0 100%; max-width: none; margin: 0; }
	.lem-signal span { max-width: 26vw; overflow: hidden; text-overflow: ellipsis; }
	.lem-menu { position: relative; padding: 0 16px; flex-wrap: wrap; }
	.lem-menu__phone {
		display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line);
		border-radius: var(--radius); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; margin: 4px 0;
	}
	.lem-menu__groups { display: none; width: 100%; flex-direction: column; padding: 4px 0 10px; }
	.lem-menu.is-open .lem-menu__groups { display: flex; }
	.lem-menu__group { width: 100%; justify-content: space-between; min-height: 44px; }
	.lem-menu .lem-dropdown { position: static; box-shadow: none; border: 0; padding: 0 0 6px 10px; min-width: 0; }
	.lem-menu .lem-dropdown--cols { columns: auto; width: auto; }
	.lem-main { padding: 12px 16px 120px; }
	.lem-card { border-radius: 12px; padding: 14px; }
	.lem-titlebar { top: 0; }
	.lem-titlebar h1 { font-size: 1.2rem; }
	.lem-toolbar { top: var(--title-h); }
	.lem-card--list .lem-toolbar { margin: -2px -2px 10px; }
	.lem-selbar { position: sticky; top: calc(var(--title-h) + 66px); }
	.lem-filter { max-width: none; }
	.lem-filters__toggle { display: inline-flex !important; }
	.lem-filters:not(.is-open) > :not(.lem-filters__toggle):not(.lem-filter__search) { display: none; }
	.lem-filter__wrap { flex: 1 1 45%; }
	.lem-filter__search { flex-basis: 100%; }

	/* Lists become cards: name across the top, checkbox top right, label above each value. */
	.lem-table, .lem-table tbody, .lem-table tr, .lem-table td, .lem-table th { display: block; }
	.lem-table thead { display: none; }
	.lem-table tbody tr {
		position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
		background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 0 10px;
	}
	.lem-table td, .lem-table th { border: 0; padding: 0; }
	.lem-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: .78rem; font-weight: 600; }
	.lem-table .lem-td-name { grid-column: 1 / -1; padding-right: 36px; }
	.lem-table .lem-td-name::before { display: none; }
	.lem-table .lem-td-check { position: absolute; top: 10px; right: 6px; width: auto; padding: 0 !important; }
	.lem-table .lem-td-check::before { display: none; }
	.lem-td-num { text-align: left; }
	.lem-table tr.lem-grouprow { display: flex; align-items: center; gap: 8px; background: var(--strip); }
	.lem-table tr.lem-grouprow td:not(.lem-td-check) { display: none; }
	.lem-table tr.lem-grouprow .lem-td-check { position: static; }
	.lem-table tfoot tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--strip); border-radius: 12px; padding: 12px; }
	.lem-table tfoot td:empty { display: none; }
	.lem-table tbody tr:hover td { background: none; }
	.lem-table tr.is-selected { background: var(--accent-soft); }
	.lem-table tr.is-selected td { background: none; }

	/* Save state: full-width bar at the bottom. */
	.lem-save { left: 0; right: 0; bottom: 0; border-radius: 0; max-width: none; text-align: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
	.lem-toasts { bottom: 64px; }
	.lem-panel { top: 8px; right: 8px; left: 8px; width: auto; }
	.lem-grid { grid-template-columns: 1fr; }
	.lem-item { grid-template-columns: 40px auto 1fr; }
	.lem-item__price { grid-column: 3; }
	.lem-item__img { width: 40px; height: 40px; }
	.lem-foot { flex-direction: column; }
}

/* Barcode labels (0.27.0): A4 sticker sheet, 3 across. */
.lem-stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.lem-sticker { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 6px; background: #fff; color: #000; break-inside: avoid; }
.lem-sticker__name { font-size: .95rem; line-height: 1.2; }
.lem-sticker__opt { font-size: .85rem; }
.lem-sticker__price { font-weight: 800; font-size: 1.05rem; }
.lem-sticker__bars svg { display: block; width: 100%; height: 56px; }
.lem-sticker__none { font-size: .8rem; color: #555; }
@media print {
	.lem-screen--labels .lem-intro, .lem-screen--labels .lem-banner, .lem-bottom { display: none !important; }
	.lem-stickers { grid-template-columns: repeat(3, 1fr); gap: 0; }
	.lem-sticker { border: 1px dotted #bbb; border-radius: 0; height: 38mm; overflow: hidden; }
}
@media print {
	.lem-header, .lem-menu, .lem-toolbar, .lem-save, .lem-toasts, .lem-practice, .lem-selbar, .lem-filters, .lem-convo { display: none !important; }
	.lem-titlebar { position: static; }
	body.lem-app { background: #fff; color: #000; }
}

/* ------------------------------------------------------------------
 * Couriers: My day (0.6)
 * ---------------------------------------------------------------- */
.lem-daylist { margin: 0 0 20px; }
.lem-daylist__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.lem-jobs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.lem-job { position: relative; border-top: 4px solid var(--line); margin: 0; }
.lem-job--ready, .lem-job--waiting { border-top-color: var(--blue); }
.lem-job--picked, .lem-job--onway { border-top-color: var(--attention); }
.lem-job--delivered { border-top-color: var(--ok); }
.lem-job--failed, .lem-job--cancelled { border-top-color: var(--red); }
.lem-job.is-focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.lem-job__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-right: 92px; }
.lem-job__title { margin: 0; font-size: 1.15rem; }
.lem-job__when { display: flex; align-items: center; gap: 6px; font-weight: 700; margin: 8px 0; }
.lem-job__stop { border-left: 3px solid var(--accent); padding: 2px 0 2px 10px; margin: 10px 0; }
.lem-job__stop p { margin: 2px 0; }
.lem-job__note { font-style: italic; }
.lem-job__door { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--attention-text); }
.lem-job__move { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.lem-codebox { background: var(--accent-soft); border: 2px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; margin: 10px 0; text-align: center; }
.lem-codebox__label { margin: 0; color: var(--ink); }
.lem-codebox__code { margin: 4px 0 0; font-size: 2.4rem; font-weight: 800; letter-spacing: .35em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.lem-input--code { font-size: 1.8rem; letter-spacing: .4em; text-align: center; max-width: 12ch; font-variant-numeric: tabular-nums; }
.lem-choices { border: 0; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lem-choices legend { margin-bottom: 6px; }
.lem-choice { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control); }
.lem-choice input { width: 22px; height: 22px; }
.lem-daydone summary { cursor: pointer; font-weight: 700; min-height: var(--control); display: flex; align-items: center; }
.lem-daycash .lem-meter { margin: 6px 0 10px; }
@media (max-width: 860px) {
	.lem-jobs { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * Going live (0.7)
 * ---------------------------------------------------------------- */
.lem-toast--blue { border-color: var(--blue); }
.lem-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lem-check { border-left: 6px solid var(--line); background: var(--card); border-radius: 8px; padding: 10px 12px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lem-check p { margin: 4px 0; }
.lem-check__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.lem-check--green { border-left-color: var(--ok); }
.lem-check--amber { border-left-color: var(--amber); }
.lem-check--red { border-left-color: var(--red); background: var(--red-bg); }
.lem-check--blue { border-left-color: var(--blue); }
.lem-dayplan h3 { margin: 14px 0 4px; font-size: 1rem; }
.lem-dayplan ol { margin: 0; padding-left: 1.4rem; }
.lem-dayplan li { margin: 4px 0; }

/* 0.11: tick boxes with their text (sign-up terms). */
.lem-field--check label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; line-height: 1.45; }
.lem-field--check input[type="checkbox"] { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--brand); }

/* 0.11: messages to sellers. */
.lem-news-preview { display: block; width: 100%; height: 680px; border: 1px solid var(--line); border-radius: 12px; background: #faf5ea; }
.lem-news-photo { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; margin: 0 0 .75rem; }
.lem-news-names summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.lem-news-report { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.lem-news-report li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.lem-actions-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (max-width: 599px) { .lem-news-preview { height: 560px; } }
/* Wide small tables scroll inside their card, never the page (payout lines with commission). */
.lem-tablewrap { max-width: 100%; }
.lem-tablewrap.is-wide { overflow: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - var(--menu-h) - var(--title-h) - var(--tool-h) - 40px); }
.lem-tablewrap.is-wide .lem-table thead th { top: 0; }
.lem-card { min-width: 0; }

/* 0.12 gift baskets */
.lem-bad { color: var(--red); font-weight: 700; }
.lem-mini tfoot th, .lem-mini tfoot td { border-top: 2px solid var(--brand); font-weight: 800; }

/* 0.13 stock book */
.lem-sources { margin: 12px 0 0; padding: 10px 12px; border-left: 4px solid var(--accent); background: var(--ground); border-radius: 8px; }
.lem-source p { margin: 4px 0; }
.lem-source .lem-inline { margin-top: 6px; }
.lem-input--num { flex: 0 0 90px !important; width: 90px; }

/* 0.14 till: touchscreen, big targets (at least 56 px), works one-handed on a phone. */
.lem-till { --tile: 150px; }
.lem-till__head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 12px; }
.lem-till__head .lem-titlebar { margin: 0; }
.lem-till__place { width: auto; min-width: 200px; flex: 0 1 auto; }
.lem-till__head > .lem-btn { margin-left: auto; }
.lem-till__main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.lem-till__products { min-width: 0; }
.lem-till__search { width: 100%; min-height: 56px; font-size: 1.15rem; margin-bottom: 10px; }
.lem-till__chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.lem-till__chip { flex: 0 0 auto; min-height: 48px; padding: 0 18px; border-radius: 24px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.lem-till__chip.is-on { background: var(--brand); border-color: var(--brand); color: var(--primary-ink); }
.lem-till__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: 10px; }
.lem-tile-btn { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 4px; min-height: 196px; padding: 8px 8px 10px; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.lem-tile-btn:active { transform: scale(.97); }
.lem-tile-btn.is-hit { animation: lem-hit .35s ease-out; }
@keyframes lem-hit { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .lem-tile-btn.is-hit { animation: none; } .lem-tile-btn:active { transform: none; } }
.lem-tile-btn__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; background: var(--accent-soft); }
.lem-tile-btn__img--none { display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; color: var(--brand); }
.lem-tile-btn__name { font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lem-tile-btn__price { font-weight: 800; font-size: 1.1rem; color: var(--head); margin-top: auto; }
.lem-tile-btn__here { font-size: .85rem; color: var(--muted); }
.lem-tile-btn.is-out { border-top-color: var(--line); }
.lem-tile-btn.is-out .lem-tile-btn__img { opacity: .45; }
.lem-tile-btn.is-out .lem-tile-btn__here { color: var(--red); font-weight: 700; }
.lem-tile-btn__count { position: absolute; top: 6px; right: 6px; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 16px; background: var(--brand); color: var(--primary-ink); font-weight: 800; display: grid; place-items: center; }
.lem-till__basket { position: sticky; top: calc(var(--stick, 0px) + 12px); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; max-height: calc(100vh - 140px); display: flex; flex-direction: column; }
.lem-till__basket:focus { outline: none; }
.lem-till__bkhead { display: flex; justify-content: space-between; align-items: center; }
.lem-till__lines { list-style: none; margin: 8px 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.lem-till__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name sum" "qty qty"; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lem-till__lname { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
.lem-till__lname .lem-btn--link { align-self: flex-start; min-height: 44px; padding: 0; }
.lem-till__lsum { grid-area: sum; font-weight: 800; white-space: nowrap; }
.lem-till__qty { grid-area: qty; display: flex; align-items: center; gap: 10px; }
.lem-qtybtn { width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--line); background: var(--strip); color: var(--ink); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.lem-qtybtn:active { background: var(--accent-soft); }
.lem-till__n { min-width: 40px; text-align: center; font-size: 1.3rem; font-weight: 800; }
.lem-till__total { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0; font-size: 1.1rem; }
.lem-till__total strong { font-size: 1.6rem; color: var(--head); }
.lem-till__pay, .lem-till__go { width: 100%; min-height: 64px; font-size: 1.25rem; }
.lem-till__bar { display: none; }
.lem-till__sheetclose { display: none; }
.lem-till__big { min-height: 56px; font-size: 1.4rem; max-width: 260px; }
.lem-till__openbox { max-width: 520px; }
.lem-till__methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.lem-till__method { min-height: 64px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.lem-till__method.is-on { border-color: var(--brand); background: var(--accent-soft); }
.lem-till__quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.lem-till__change { font-size: 1.4rem; font-weight: 800; color: var(--ok); min-height: 1.6em; margin: 6px 0; }
.lem-till__change.is-bad { color: var(--red); }
.lem-till__bigchange { font-size: 1.8rem; font-weight: 800; color: var(--ok); margin: 0 0 12px; }
.lem-till__more { margin-top: 10px; }
.lem-till__more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.lem-till__mailrow { margin-top: 12px; }
@media (max-width: 1023px) {
	.lem-till__main { grid-template-columns: minmax(0, 1fr); }
	.lem-till { --tile: 130px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
	.lem-till__basket { position: fixed; inset: auto 0 0 0; top: auto; z-index: 60; max-height: 88vh; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25); transform: translateY(105%); transition: transform .2s ease-out; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
	.lem-till__basket.is-open { transform: none; }
	.lem-till__sheetclose { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
	.lem-till__bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--brand); color: var(--primary-ink); font: inherit; font-size: 1.05rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; }
	.lem-till__bar[hidden] { display: none; }
	.lem-till__bar strong { font-size: 1.25rem; }
	.lem-till__barpay { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 8px 14px; font-weight: 800; }
	.lem-till__head > .lem-btn { margin-left: 0; }
}
@media (max-width: 420px) {
	.lem-till { --tile: 46%; }
	.lem-tile-btn { min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) { .lem-till__basket { transition: none; } }

/* 0.15 town fees: only the towns served */
.lem-fees--list { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.lem-fees__rows { display: flex; flex-direction: column; gap: 6px; }
.lem-fee--row { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px 44px; align-items: center; gap: 4px 8px; }
.lem-fee__note { grid-column: 1 / -1; color: var(--amber); }
.lem-fee--row label { font-weight: 600; }
.lem-fee__cur { color: var(--muted); }
.lem-fees__add { max-width: 260px; flex: 0 1 260px !important; }

/* 0.16 Count stock: one-handed on a phone, big text and strong contrast (Immo, 26 Oct). */
.lem-count__head { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-bottom: 14px; }
.lem-count__scope { width: auto; min-width: 220px; min-height: 52px; font-size: 1.05rem; font-weight: 700; flex: 1 1 220px; }
.lem-count__head .lem-pill { font-size: 1rem; padding: 6px 12px; }
.lem-count__check { min-height: 52px; font-size: 1.1rem; margin-left: auto; }
.lem-count__search { width: 100%; min-height: 56px; font-size: 1.2rem; margin-bottom: 10px; }
.lem-count__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.lem-count__tile { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 10px; min-height: 120px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation; }
.lem-count__tile.is-some { border-color: var(--amber); background: var(--amber-bg); }
.lem-count__tile.is-done { border-color: var(--ok); background: var(--ok-bg); }
.lem-count__img { width: 100%; aspect-ratio: 4 / 3; max-width: 100%; object-fit: cover; border-radius: 8px; background: var(--strip); }
.lem-count__img--none { display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; color: var(--muted); }
.lem-count__name { font-weight: 800; font-size: 1.1rem; line-height: 1.2; overflow-wrap: anywhere; }
.lem-count__shop { color: var(--muted); font-size: .95rem; }
.lem-count__state { display: flex; gap: 4px; align-items: center; font-weight: 700; font-size: 1rem; color: var(--ink); }
.lem-count__crumbs { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 1.1rem; margin-bottom: 12px; }
.lem-count__sep { color: var(--muted); }
.lem-count__crumb { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 2px solid var(--brand); background: var(--card); color: var(--brand); font: inherit; font-weight: 800; cursor: pointer; }
.lem-count__ask { font-size: 1.35rem; margin: 6px 0 12px; }
.lem-count__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.lem-count__choices.is-short { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.lem-count__choice { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 92px; padding: 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.lem-count__choices.is-short .lem-count__choice { text-align: center; align-items: center; }
.lem-count__choice b { font-size: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; }
.lem-count__choices.is-short .lem-count__choice b { font-size: 2rem; }
.lem-count__choice small { font-size: 1rem; }
.lem-count__choice.is-some { border-color: var(--amber); background: var(--amber-bg); }
.lem-count__choice.is-done { border-color: var(--ok); background: var(--ok-bg); }
.lem-count__counter { border: 3px solid var(--ink); border-radius: 18px; background: var(--card); padding: 16px 14px; text-align: center; }
.lem-count__what { font-size: 1.35rem; margin: 0; }
.lem-count__what span { font-weight: 700; }
.lem-count__bignum { display: block; width: 100%; margin: 8px 0 4px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: clamp(5.5rem, 30vw, 9rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; }
.lem-count__bignum.is-none { color: var(--muted); }
.lem-count__bignum.is-hit { animation: lem-hit .3s ease-out; }
.lem-count__bignum--input { max-width: 100%; text-align: center; border: 4px solid var(--accent); border-radius: 14px; background: var(--ground); }
.lem-count__note { font-size: 1rem; color: var(--muted); margin: 0 0 10px; }
.lem-count__pads { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.lem-count__pads2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.lem-count__pad { min-height: 64px; border: 3px solid var(--ink); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; font-size: 1.3rem; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.lem-count__pads .lem-count__pad { min-height: 88px; font-size: 2rem; }
.lem-count__pad--plus { background: var(--brand); border-color: var(--brand); color: var(--primary-ink); font-size: 2.6rem !important; }
.lem-count__forget { margin-top: 8px; }
.lem-count__next { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lem-count__next .lem-btn { min-height: 52px; font-size: 1.05rem; }
.lem-count__quick { margin-top: 10px; }
.lem-count__quick .lem-btn, .lem-count__next .lem-btn, .lem-count__forget { white-space: normal; height: auto; text-align: left; padding-top: 6px; padding-bottom: 6px; }
.lem-count__hint { margin-top: 14px; }
.lem-count__tablewrap { overflow-x: auto; margin: 10px 0; }
.lem-count__table { font-size: 1.05rem; }
.lem-count__table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lem-count__table th[scope="row"] { min-width: 160px; font-weight: 700; }
.lem-count__table tr.is-more .lem-count__diff { color: var(--ok); font-weight: 800; }
.lem-count__table tr.is-fewer .lem-count__diff { color: var(--red); font-weight: 800; }
.lem-count__small { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; }
.lem-count__cost { max-width: 160px; margin-top: 4px; }
@media (max-width: 600px) {
	.lem-count__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lem-count__check { flex: 1 1 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .lem-count__bignum.is-hit { animation: none; } }
@media (max-width: 600px) {
	.lem-count__table { font-size: .95rem; }
	.lem-count__table th, .lem-count__table td { padding-left: 6px; padding-right: 6px; }
	.lem-count__table th[scope="row"] { min-width: 0; white-space: normal; }
}

/* 0.19.0: follow the driver, farm pickups, what buyers say. */
.lem-follow__map { height: 260px; border-radius: 10px; border: 1px solid var(--line); margin: 8px 0; z-index: 0; }
.lem-follow__line { font-weight: 700; }
.lem-dot { background: none; border: 0; }
.lem-dot span { display: block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.lem-dot b { position: absolute; left: 22px; top: -1px; white-space: nowrap; font: 700 12px/1.4 system-ui, sans-serif; color: #14233a; background: rgba(255,255,255,.9); padding: 0 4px; border-radius: 4px; }
.lem-job--farm { border-top: 3px solid var(--ok, #1f6b35); }
.lem-said { list-style: none; margin: 8px 0 0; padding: 0; }
.lem-said li { padding: 6px 0; border-top: 1px solid var(--line); }
.lem-said__stars { color: #b4491b; letter-spacing: 1px; }

/* 0.21.0: welcome checklist. */
.lem-welcome { list-style: none; margin: 10px 0 0; padding: 0; }
.lem-welcome li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); min-height: 44px; }
.lem-welcome__tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.lem-welcome li.is-done .lem-welcome__tick { background: var(--accent, #cadb36); border-color: var(--accent, #cadb36); color: #203b5f; }
.lem-welcome li.is-done { color: var(--muted); }

/* 0.21.0: seller logo. */
.lem-logo-big { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: #fff; display: block; margin: 6px 0 10px; }
.lem-logo-home { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: #fff; }

/* 0.22 till: fills the screen, own keys, quick buttons, the customer's total, the signal dot. */
body.lem-tillmode .lem-header, body.lem-tillmode .lem-menu, body.lem-tillmode .lem-foot { display: none; }
body.lem-tillmode .lem-main { max-width: none; padding: 10px 14px 24px; }
body.lem-tillmode .lem-practice { padding: 2px 12px; font-size: .8rem; }
.lem-till__head > .lem-btn { margin-left: 0; }
.lem-till__tools { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; margin-left: auto; }
.lem-signaldot { display: inline-flex; flex: 0 0 auto; white-space: nowrap; align-items: center; gap: 8px; min-height: var(--control); padding: 0 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.lem-signaldot__light { width: 14px; height: 14px; border-radius: 50%; background: var(--grey); flex: 0 0 auto; }
.lem-signaldot.is-on .lem-signaldot__light { background: #22a447; box-shadow: 0 0 0 4px rgba(34, 164, 71, .18); }
.lem-signaldot.is-off { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.lem-signaldot.is-off .lem-signaldot__light { background: #d4281c; box-shadow: 0 0 0 4px rgba(212, 40, 28, .2); animation: lem-blink 1.6s ease-in-out infinite; }
@keyframes lem-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .lem-signaldot.is-off .lem-signaldot__light { animation: none; } }
.lem-till__searchrow { display: flex; gap: 8px; align-items: flex-start; }
.lem-till__searchrow .lem-till__search { flex: 1 1 auto; }
.lem-till__kbbtn { width: 56px; height: 56px; flex: 0 0 auto; }
.lem-till__quickrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.lem-till__quickrow[hidden] { display: none; }
.lem-quickbtn { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 72px; padding: 8px 12px; border: 0; border-radius: 14px; background: var(--brand); color: var(--primary-ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.lem-quickbtn:active { transform: scale(.97); }
.lem-quickbtn.is-hit { animation: lem-hit .35s ease-out; }
.lem-quickbtn__name { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.lem-quickbtn__price { font-size: .95rem; opacity: .9; }
.lem-quickbtn--edit { flex-direction: row; align-items: center; justify-content: center; gap: 8px; background: var(--card); color: var(--ink); border: 2px dashed var(--line); font-weight: 700; }
.lem-till__show { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 8px 0; padding: 14px 16px; border-radius: 14px; background: var(--brand); color: var(--primary-ink); }
.lem-till__showlabel { font-size: 1rem; opacity: .9; }
.lem-till__showsum { font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lem-till__paysum { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--brand); color: var(--primary-ink); }
.lem-till__paysum strong { font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.lem-till__big { max-width: none; width: 100%; font-variant-numeric: tabular-nums; }
.lem-till .lem-till__openbox .lem-till__big { max-width: 320px; }

/* The till's own keys: big, for fingers. */
.lem-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 340px; margin: 10px 0; }
.lem-key { min-height: 60px; min-width: 0; padding: 0 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 1.45rem; font-weight: 700; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 2px 0 var(--line); }
.lem-key:active { transform: translateY(2px); box-shadow: none; background: var(--accent-soft); }
.lem-key--soft { background: var(--strip); }
.lem-key--wide { grid-column: span 3; font-size: 1.1rem; }
.lem-pad .lem-key--wide:last-child:not(:only-of-type) { grid-column: span 3; }
.lem-key--go { background: var(--brand); border-color: var(--brand); color: var(--primary-ink); font-size: 1.1rem; }
.lem-key.is-on { background: var(--accent); color: var(--accent-ink); }
.lem-board { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; padding: 8px; border-radius: 14px; background: var(--strip); }
.lem-board[hidden] { display: none; }
.lem-board__row { display: flex; gap: 6px; }
.lem-board .lem-key { flex: 1 1 0; min-height: 54px; font-size: 1.2rem; }
.lem-board .lem-key--mid { flex: 1.5 1 0; font-size: 1rem; }
.lem-board .lem-key--space { flex: 4 1 0; font-size: 1rem; }
.lem-dialog .lem-board .lem-key { min-height: 48px; font-size: 1.05rem; }
.lem-quickedit { list-style: none; margin: 12px 0 0; padding: 0; }
.lem-quickedit__row { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lem-quickedit__name { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lem-quickedit__found { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }

/* The customer's screen (tillshow/). */
body.lem-tillshow .lem-practice { display: none; }
body.lem-tillshow .lem-main { padding: 0; }
.lem-show__page { min-height: 100vh; display: flex; flex-direction: column; background: var(--brand); color: var(--primary-ink); }
.lem-show { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 4vh 5vw; text-align: center; }
.lem-show__logo svg, .lem-show__logo img { max-width: 220px; max-height: 120px; height: auto; }
.lem-show__hello { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; margin: 0; }
.lem-show__place { font-size: 1.4rem; opacity: .85; margin: 0; }
.lem-show__lines { list-style: none; margin: 0; padding: 0; width: min(900px, 100%); font-size: clamp(1.2rem, 2.4vw, 1.8rem); }
.lem-show__lines li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); text-align: left; }
.lem-show__more { opacity: .8; }
.lem-show__total { display: flex; justify-content: space-between; align-items: baseline; width: min(900px, 100%); padding-top: 12px; font-size: clamp(1.4rem, 3vw, 2rem); }
.lem-show__sum { font-size: clamp(3.5rem, 11vw, 9rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); }
.lem-show__change { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 800; margin: 0; }
.lem-show__full { align-self: flex-end; margin: 0 12px 12px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 20px; background: transparent; color: inherit; font: inherit; opacity: .6; cursor: pointer; }
@media (max-width: 1023px) {
	.lem-till__tools .lem-signaldot span:last-child { display: none; }
	.lem-till__quickrow { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
.lem-dialog--till { width: min(900px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
.lem-dialog .lem-pad .lem-key { min-height: 54px; }
@media (min-width: 760px) {
	.lem-till__cash { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 24px; align-items: start; }
	.lem-till__cash > :not(.lem-pad) { grid-column: 1; }
	.lem-till__cash > .lem-pad { grid-column: 2; grid-row: 1 / span 6; margin: 0; }
}
.lem-dialog .lem-board { position: sticky; bottom: -20px; z-index: 2; box-shadow: 0 -6px 14px rgba(0, 0, 0, .08); }

/* Setup → Settings (0.23.1): the shared Topics card (shared/le-topics/) in the app's look. */
.lem-topics-card { scroll-margin-top: calc(var(--sticky-top, 0px) + 72px); }
.lem-topics-card h2 { font-size: 1.15rem; font-weight: 800; color: var(--head); }
.lem-topics-card form { margin: 0; }
.lem-topics-card form p { margin: 8px 0; }
.lem-topics-card .lem-banner { display: block; margin: 0 0 12px; }
.lem-topics-card .lem-banner p { margin: 0; }
.lem-topics-card .lem-topics-table th { width: 170px; color: var(--muted); font-weight: 600; }
.lem-topics-card details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.lem-topics-card summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.lem-topics-card .lem-input { width: 100%; max-width: 420px; }
.lem-topics-card label { margin-right: 14px; }
.lem-topics-card .description { color: var(--muted); font-size: .9rem; }
.lem-topics-card a.lem-btn { display: inline-flex; align-items: center; text-decoration: none; }
.lem-flash { animation: lem-flash 1.6s ease-out 1; }
@keyframes lem-flash { from { box-shadow: 0 0 0 4px var(--focus, #1f6feb); } to { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 600px) { .lem-topics-card .lem-topics-table th { width: auto; } .lem-topics-card .lem-topics-table th, .lem-topics-card .lem-topics-table td { display: block; border: 0; padding: 2px 0; } .lem-topics-card .lem-topics-table tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; } }
@media (prefers-reduced-motion: reduce) { .lem-flash { animation: none; } }
.lem-menu__item--setup { margin-left: auto; } /* Setup last, at the right end (0.23.1) */
.lem-menu__item--setup .lem-menu__group .lem-i { margin-right: 4px; vertical-align: -3px; }
@media (max-width: 859px) { .lem-menu__item--setup { margin-left: 0; } }

/* 0.24 Setup → Features: Off · Team only · On. */
.lem-notpublic { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: repeating-linear-gradient(135deg, #ffe08a 0 14px, #ffd25e 14px 28px); color: #2b2200; font-weight: 700; }
.lem-feat__top { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.lem-feat__filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lem-feat__search { flex: 1 1 240px; max-width: 420px; }
.lem-feat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lem-feat__chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.lem-feat__chip.is-on { background: var(--brand); border-color: var(--brand); color: var(--primary-ink); }
.lem-feat__rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.lem-feat.is-diff { border-color: var(--amber); box-shadow: inset 4px 0 0 var(--amber); }
.lem-feat__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.lem-feat__head .lem-h2 { margin: 0; }
.lem-feat__body { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 16px; margin-top: 8px; }
.lem-feat__body p { margin: 4px 0; }
.lem-feat__dev { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lem-feat__auto ul, .lem-feat__log { margin: 4px 0 0; padding-left: 20px; }
.lem-feat__log li { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line); }
.lem-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lem-seg__btn { min-height: 44px; padding: 0 14px; border: 0; border-left: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.lem-seg__btn:first-child { border-left: 0; }
.lem-seg__btn.is-on.lem-seg__btn--on { background: var(--ok, #1f6b35); color: #fff; }
.lem-seg__btn.is-on.lem-seg__btn--team { background: #ffd25e; color: #2b2200; }
.lem-seg__btn.is-on.lem-seg__btn--off { background: var(--grey, #5f6b66); color: #fff; }
.lem-feat__changes { margin: 0; padding-left: 20px; }
@media (max-width: 859px) { .lem-feat__body { grid-template-columns: 1fr; } }
.lem-gone { padding: 8px 0; border-top: 1px solid var(--line); }

/* 0.26 Phone bottom bar and sheets (web-app-design-standard section 2). */
.lem-bottom { display: none; }
@media (max-width: 859px) {
	.lem-bottom {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; min-height: 64px;
		padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line);
		box-shadow: 0 -4px 14px rgba(0, 0, 0, .08); justify-content: space-around; align-items: stretch;
	}
	.lem-bottom__btn {
		flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 58px; min-height: 58px;
		border: 0; background: none; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; border-radius: 14px;
	}
	.lem-bottom__btn > span:first-child { display: inline-flex; padding: 2px 14px; border-radius: 16px; }
	.lem-bottom__btn.is-here > span:first-child { background: var(--accent-soft); }
	.lem-bottom__label { font-size: 14px; font-weight: 700; line-height: 1.1; }
	.lem-bottom__main { position: relative; }
	.lem-bottom__main .lem-bottom__round { width: 56px; height: 56px; margin-top: -26px; padding: 0; border-radius: 50%; background: var(--action, #e8692d); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
	body.lem-app { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
	body.lem-typing .lem-bottom { display: none; }
	.lem-menu { display: none; }
	.lem-toasts, .lem-save { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
	body.lem-tillmode .lem-bottom, body.lem-tillshow .lem-bottom { display: none; }
	body.lem-tillmode.lem-app { padding-bottom: 0; }
}
.lem-sheet {
	margin: auto auto 0; width: 100%; max-width: 640px; max-height: 92vh; padding: 0 0 env(safe-area-inset-bottom); border: 0;
	border-radius: 18px 18px 0 0; background: var(--card); color: var(--ink); overflow: auto;
}
.lem-sheet::backdrop { background: rgba(0, 0, 0, .45); }
.lem-sheet__grab { width: 44px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--line); }
.lem-sheet__head { display: flex; justify-content: space-between; align-items: center; padding: 4px 16px; position: sticky; top: 0; background: var(--card); }
.lem-sheet__head .lem-h2 { margin: 0; }
.lem-sheet__body { padding: 4px 16px 18px; }
.lem-sheet__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.lem-sheet__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 700; text-align: center; }
.lem-sheet__group { margin: 12px 0 4px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lem-sheet__groups ul { list-style: none; margin: 0; padding: 0; }
.lem-sheet__row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }

/* Setup → Settings log and Setup → Imports (0.27.0). */
.lem-setlog { margin: 0; padding: 0 0 0 18px; color: var(--lem-muted, #55665f); font-size: .92em; }
.lem-setlog li { margin: 2px 0; }
.lem-import__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.lem-import__head .lem-h2 { margin: 0; }

/* 0.28.0 (issue #41): checkboxes and radios in the brand colour; LE UI in the market's colours. */
#lem-app input[type="checkbox"], #lem-app input[type="radio"], .lem-dialog input[type="checkbox"], .lem-dialog input[type="radio"] { accent-color: var(--brand); }
body.lem-app {
	--le-ui-accent: var(--brand); --le-ui-line: var(--line); --le-ui-muted: var(--muted); --le-ui-card: var(--card);
	--le-ui-soft: var(--accent-soft); --le-ui-focus: var(--focus); --le-ui-ok: var(--ok); --le-ui-ok-bg: var(--ok-bg);
	--le-ui-bad: var(--red); --le-ui-bad-bg: var(--red-bg); --le-ui-radius: var(--radius-card);
}
.lem-ib[data-lem-savebtn][data-state="saved"] { color: var(--ok); }
.lem-ib[data-lem-savebtn][data-state="error"] { color: var(--red); }
.lem-toolbar__end { margin-left: auto; }
.lem-toolbar__end:empty { display: none; }
.lem-filters > .lem-toolbar__views { display: flex; gap: 8px; }

/* Stage progress as fat arrow blocks (0.28.0, issue #41). */
.lem-stages { display: flex; align-items: stretch; gap: 0; margin: 0 0 14px; overflow-x: auto; padding: 2px 0; scrollbar-width: thin; }
.lem-stages[hidden] { display: none; }
.lem-stage { position: relative; flex: 0 0 auto; min-height: 44px; padding: 0 22px 0 28px; border: 0; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); margin-right: -10px; background: var(--grey-bg); color: var(--muted); }
.lem-stage:first-child { padding-left: 18px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); border-radius: var(--radius) 0 0 var(--radius); }
.lem-stage--done { background: var(--accent); color: var(--accent-ink); }
.lem-stage--now { background: var(--primary-bg); color: var(--primary-ink); cursor: default; }
.lem-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.lem-stages__side { display: inline-flex; align-items: center; margin-left: 22px; }

/* Setup → Settings folded (LE UI). */
.lem-setfold .le-ui-fold-body { padding: 0 18px 18px; }
.lem-setsearch { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 14px; }
.lem-setsearch .le-ui-searchrow { flex: 1 1 320px; }
.lem-import__pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------------
 * Share my shop (0.32.0)
 * ---------------------------------------------------------------- */
.lem-quote { margin: 0 0 12px; padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 8px; white-space: pre-wrap; }
.lem-qr { width: 220px; max-width: 100%; background: #fff; padding: 8px; border-radius: 8px; }
.lem-qr svg { width: 100%; height: auto; display: block; }
.lem-screen--share code { word-break: break-all; }
.lem-poster { max-width: 160mm; margin: 0 auto; text-align: center; padding: 12mm; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: #000; }
.lem-poster__logo { max-height: 30mm; width: auto; }
.lem-poster__name { font-size: 2.2rem; margin: 6mm 0 2mm; }
.lem-poster__line { font-size: 1.3rem; margin: 0 0 6mm; }
.lem-poster .lem-qr { width: 110mm; margin: 0 auto; padding: 0; }
.lem-poster__url { font-size: 1.1rem; font-weight: 700; margin: 4mm 0; }
.lem-poster__foot { color: #333; }
@media print {
	.lem-screen--poster .lem-toolbar { display: none !important; }
	.lem-poster { border: 0; }
}

/* Add a product by photo (0.33.0) */
.lem-quick__pick { cursor: pointer; }
.lem-quick__img { max-width: 100%; max-height: 320px; border-radius: 12px; display: block; margin: 8px 0; }

/* Long choice lists (0.33.0) */
.lem-ll { display: grid; gap: 6px; }

/* 0.39.2: a review's videos on its record */
.lem-rvvideos__list { display: flex; flex-wrap: wrap; gap: 12px; }
.lem-rvvideos__item { display: flex; flex-direction: column; gap: 4px; width: 240px; max-width: 100%; text-decoration: none; }
.lem-rvvideos__item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line, #d8e1d4); }