/* GENERATED FILE -- do not edit.
   tools/gen_screens.py writes this from tools/screens/lists.css.
   Edit that source and re-run the generator. */

/* --------------------------------------------------------------- home */
.a-hello {
  display: flex;
  gap: calc(10 * var(--u));
}

.a-hello-x { flex: 1; }

.a-greet {
  font-size: calc(11 * var(--u));
  line-height: 1.2;
  color: var(--appmut);
}

.a-hello-n {
  margin-top: calc(2 * var(--u));
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 600;
  line-height: 1.1;
  color: var(--appink);
}

.a-sync {
  margin-top: calc(7 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: 1.2;
  color: var(--appgrn);
}

.a-tick {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

.a-hello .a-mut {
  margin-top: calc(4 * var(--u));
  font-size: calc(10 * var(--u));
  line-height: 1.4;
}

.a-row {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(11 * var(--u)) calc(13 * var(--u));
}

.a-row-t {
  flex: 1;
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: var(--appink);
}

.a-chip {
  font-size: calc(10 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: var(--appacc);
  background: var(--appaccsoft);
  padding: calc(4 * var(--u)) calc(7 * var(--u));
}

.a-crow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(7 * var(--u)) 0;
  border-top: var(--u) solid var(--appline);
  font-size: calc(12 * var(--u));
  line-height: 1;
  color: var(--appink);
}

.a-counts .a-crow:first-of-type { margin-top: calc(6 * var(--u)); }

.a-crow b { font-weight: 600; }

/* --------------------------------------------------------------- search */
.a-search {
  margin: 0 calc(14 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  background: var(--appcard);
  border: var(--u) solid var(--appline);
}

.a-search .a-ico-lead {
  color: var(--appmut);
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
}

.a-search-q {
  font-size: calc(14 * var(--u));
  line-height: 1;
  color: var(--appink);
}

.a-caret {
  width: var(--u);
  height: calc(15 * var(--u));
  background: var(--appfill);
  animation: a-caret 1.1s step-end infinite;
}

@keyframes a-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.a-filters {
  display: flex;
  gap: calc(7 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
}

.a-filters.is-tight {
  padding: calc(2 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
}

.a-filter {
  font-size: calc(11 * var(--u));
  line-height: 1;
  padding: calc(7 * var(--u)) calc(11 * var(--u));
  border: var(--u) solid var(--appline);
  color: var(--appmut);
}

.a-filter.is-on {
  font-weight: 500;
  border-color: var(--appfill);
  background: var(--appfill);
  color: var(--onacc);
}

.a-shead {
  display: flex;
  justify-content: space-between;
  padding: calc(2 * var(--u)) 0;
  font-size: calc(10 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--appmut);
}

.a-shead.is-later { padding-top: calc(6 * var(--u)); }

.a-item {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(13 * var(--u));
  background: var(--appcard);
  border: var(--u) solid var(--appline);
}

.a-item-x {
  flex: 1;
  min-width: 0;
}

.a-item-n {
  display: block;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: var(--appink);
}

.a-item-s {
  display: block;
  margin-top: calc(3 * var(--u));
  font-size: calc(10 * var(--u));
  line-height: 1.2;
  color: var(--appmut);
}

.a-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 500;
  line-height: 1;
  padding: calc(5 * var(--u)) calc(7 * var(--u));
}

.a-badge .a-ico {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}

.a-badge.is-ok {
  color: var(--appgrn);
  background: color-mix(in srgb, var(--appgrn) 13%, transparent);
}

.a-badge.is-no {
  color: var(--warn);
  border: var(--u) solid var(--warn);
  padding: calc(4 * var(--u)) calc(7 * var(--u));
}

/* the standalone status badge at the top of a product sheet sits larger */
.a-scroll > .a-badge {
  font-size: calc(11 * var(--u));
  padding: calc(6 * var(--u)) calc(9 * var(--u));
}

.a-scroll > .a-badge .a-ico {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}